🌛 fixed the breaking rgb svg color bug 🕠

src/ts/common/componentManager/componentManager.ts

@@ -23,6 +23,7 @@ export class ComponentManager {
     public components: Component[] = []
     public svgs = new Subject<SVGTemplateResult>()
     public placeholder = new BehaviorSubject("Create simulation")
+    public saves = new BehaviorSubject<string[]>(["hello world"])
 
     private temporaryCommnad = ""
     private onTop: Component
@@ -162,6 +163,9 @@ export class ComponentManager {
         })
 
         this.wireManager.update.subscribe(val => this.update())
+        this.saves.next(this.store.ls())
+        //if (this.saves.value.length === 0)
+        //    this.save()
     }
 
     preInput() {
@@ -218,7 +222,12 @@ All you work will be lost!`
     }
 
     public switchTo(name: string) {
-        //TODO: implement
+        const data = this.store.get(name)
+        if (!data)
+            error(`An error occured when trying to load ${name}`,"",this.alertOptions)
+
+        else
+            this.loadState(data)
     }
 
     eval(command: string) {
@@ -402,6 +411,7 @@ All you work will be lost!`
             this.commandHistoryStore.set(i.toString(), element)
         }
         this.store.set(name || this.name, this.state)
+        this.saves.next(this.store.ls())
         success("Saved the simulation succesfully!", "", this.alertOptions)
     }
 }

src/ts/common/pin/pin.ts

@@ -16,7 +16,7 @@ export class Pin {
     public valueChanges = new Subject<number>()
 
     public svgColor = this.color.pipe(map(val =>
-        `rgb(${val.join(",")})`
+        `rgba(${val.join(",")})`
     ))
 
     constructor(public allowWrite = true, public of: Component) {
@@ -38,10 +38,10 @@ export class Pin {
         this._value = clamp(value, 0, 1)
         this.valueChanges.next(this._value)
 
-        const color: [number, number, number, number] = (value > 0.5) ? 
-            [255, 216, 20, 1] : 
+        const color: [number, number, number, number] = (value > 0.5) ?
+            [255, 216, 20, 1] :
             [90, 90, 90, 1]
-        
+
             this.color.next((this.pair) ? color : [0,0,0,0])
     }
 

src/ts/main.ts

@@ -83,12 +83,11 @@ render(html`
 
     <div class="mdc-menu mdc-menu-surface mdc-theme--primary-bg mdc-theme--on-primary">
         <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
-            <li class="mdc-list-item" role="menuitem">
-            <span class="mdc-list-item__text">A Menu Item</span>
-            </li>
-            <li class="mdc-list-item" role="menuitem">
-            <span class="mdc-list-item__text">Another Menu Item</span>
-            </li>
+            ${subscribe(manager.saves.pipe(map(val => html`
+                <li class= "mdc-list-item" role = "menuitem" >
+                    <span class="mdc-list-item__text"> ${val} </span>
+                </li>`
+            )))}
         </ul>
     </div>
 `, document.body)