From 6204049a01b27b50b6cda71a8a0f0528fb907787 Mon Sep 17 00:00:00 2001
From: Matei Adriel <rafaeladriel11@gmail.com>
Date: Wed, 5 Jun 2019 01:26:04 +0000
Subject: [PATCH] =?UTF-8?q?=20=F0=9F=98=99=20=20uh,=20i=20only=20have=202.?=
 =?UTF-8?q?5h=20of=20sleep=20left=20=F0=9F=93=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../componentManager/componentManager.ts      | 107 +++++++++++++-----
 .../componentTemplateStore.ts                 |  28 +----
 src/ts/main.ts                                |  26 +++--
 3 files changed, 96 insertions(+), 65 deletions(-)

diff --git a/src/ts/common/componentManager/componentManager.ts b/src/ts/common/componentManager/componentManager.ts
index bbdd47d..81f1712 100644
--- a/src/ts/common/componentManager/componentManager.ts
+++ b/src/ts/common/componentManager/componentManager.ts
@@ -4,7 +4,7 @@ import { Subject, BehaviorSubject, fromEvent } from "rxjs";
 import { svg, SVGTemplateResult, html } from "lit-html";
 import { subscribe } from "lit-rx";
 import { Screen } from "../screen.ts";
-import { ManagerState } from "./interfaces";
+import { ManagerState, ComponentTemplate } from "./interfaces";
 import { Store } from "../store";
 import { KeyboardInput } from "@eix/input"
 import { success, error } from "toastr"
@@ -116,14 +116,14 @@ export class ComponentManager {
         }
 
     public shortcuts: {
-        [key:string]: string
+        [key: string]: string
     } = {
-        clear: "ctrl delete",
-        clean: "delete",
-        save:"ctrl s",
-        undo: "ctrl z",
-        refresh: "ctrl r"
-    }
+            clear: "shift delete",
+            clean: "delete",
+            save: "ctrl s",
+            undo: "ctrl z",
+            refresh: "ctrl r"
+        }
 
     constructor() {
         runCounter.increase()
@@ -213,7 +213,26 @@ export class ComponentManager {
 
     }
 
-    public newGate(){
+    private initEmptyGate(name: string) {
+        const obj: ComponentTemplate = {
+            inputs: 1,
+            name,
+            version: "1.0.0",
+            outputs: 1,
+            activation: "",
+            editable: true,
+            material: {
+                mode: "color",
+                data: "blue"
+            }
+        }
+
+        this.templateStore.store.set(name, obj)
+
+        this.edit(name)
+    }
+
+    public newGate() {
         this.preInput()
         this.inputMode = "gate"
         this.placeholder.next("Gate name")
@@ -235,13 +254,16 @@ export class ComponentManager {
         const elem = <HTMLInputElement>document.getElementById("nameInput")
         this.barAlpha.next("0")
 
-        if (this.inputMode == "create") {
+        if (this.inputMode === "create") {
             await this.createEmptySimulation(elem.value)
             success(`Succesfully created simulation ${elem.value}`, "", this.alertOptions)
         }
 
-        else if (this.inputMode == "command")
+        else if (this.inputMode === "command")
             this.eval(elem.value)
+
+        else if (this.inputMode === "gate")
+            this.initEmptyGate(elem.value)
     }
 
     private async handleDuplicateModal(name: string) {
@@ -249,7 +271,7 @@ export class ComponentManager {
             title: "Warning",
             content: html`There was already a simulation called ${name},
             are you sure you want to override it?
-            All you work will be lost!`
+            All your work will be lost!`
         })
 
         return result
@@ -263,33 +285,62 @@ export class ComponentManager {
             no: "",
             yes: "save",
             title: `Edit ${name}`,
-            content: html`
+            content: html`${html`
                 <br>
                 <div class="mdc-text-field mdc-text-field--textarea">
-                <textarea id="codeArea" class="mdc-text-field__input js" rows="8" cols="40">${
-                    gate.activation
+                    <textarea id="codeArea" class="mdc-text-field__input js" rows="8" cols="40">${
+                gate.activation
                 }</textarea>
-                <div class="mdc-notched-outline">
-                    <div class="mdc-notched-outline__leading"></div>
-                    <div class="mdc-notched-outline__notch">
-                    <label for="textarea" class="mdc-floating-label">Activation function</label>
+                    <div class="mdc-notched-outline">
+                        <div class="mdc-notched-outline__leading"></div>
+                        <div class="mdc-notched-outline__notch">
+                        <label for="textarea" class="mdc-floating-label">Activation function</label>
+                        </div>
+                        <div class="mdc-notched-outline__trailing"></div>
                     </div>
-                    <div class="mdc-notched-outline__trailing"></div>
-                </div>
-                </div>
-            `
+                </div><br><br>
+                <div class="mdc-text-field" id="inputCount">
+                    <input type="number" id="my-text-field" class="mdc-text-field__input inputCount-i" value=${gate.inputs}>
+                    <label class="mdc-floating-label" for="my-text-field">Inputs</label>
+                    <div class="mdc-line-ripple"></div>
+                </div><br><br>
+                <div class="mdc-text-field" id="outputCount">
+                    <input type="number" id="my-text-field" class="mdc-text-field__input outputCount-i" value=${gate.outputs}>
+                    <label class="mdc-floating-label" for="my-text-field">Outputs</label>
+                    <div class="mdc-line-ripple"></div>
+                </div><br><br>
+                <div class="mdc-text-field" id="color">
+                    <input type="string" id="my-text-field" class="mdc-text-field__input color-i" value=${gate.material.data}>
+                    <label class="mdc-floating-label" for="my-text-field">Outputs</label>
+                    <div class="mdc-line-ripple"></div>
+                </div><br>
+            `}`
         }).then(val => {
             this.ignoreKeyDowns = false
-            const elem = <HTMLTextAreaElement> document.querySelector("#codeArea")
-            const data = elem.value
+            const elems: (HTMLInputElement | HTMLTextAreaElement)[] = [
+                document.querySelector("#codeArea"),
+                document.querySelector(".inputCount-i"),
+                document.querySelector(".outputCount-i"),
+                document.querySelector(".color-i")
+            ]
+            const data = elems.map(val => val.value)
 
-            this.templateStore.store.set(name,{
+            this.templateStore.store.set(name, {
                 ...gate,
-                activation: data
+                activation: data[0],
+                inputs: Number(data[1]),
+                outputs: Number(data[2]),
+                material:{
+                    mode: "color",
+                    data: data[3]
+                }
             })
         })
 
-        const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
+        new MDCTextField(document.querySelector('.mdc-text-field'));
+        new MDCTextField(document.querySelector('#outputCount'));
+        new MDCTextField(document.querySelector('#inputCount'));
+        new MDCTextField(document.querySelector('#color'));
     }
 
     public add(template: string, position?: [number, number]) {
diff --git a/src/ts/common/componentManager/componentTemplateStore.ts b/src/ts/common/componentManager/componentTemplateStore.ts
index a788608..4a51263 100644
--- a/src/ts/common/componentManager/componentTemplateStore.ts
+++ b/src/ts/common/componentManager/componentTemplateStore.ts
@@ -144,33 +144,7 @@ export class ComponentTemplateStore {
                 mode: "standard_image",
                 data: "xor"
             },
-            editable: true
-        })
-        this.store.set("true", {
-            inputs: 0,
-            outputs: 1,
-            name: "true",
-            version: "1.0.0",
-            activation: `
-                ctx.outputs[0].value = true
-            `.trim(),
-            material: {
-                mode: "color",
-                data: "green"
-            }
-        })
-        this.store.set("false", {
-            inputs: 0,
-            outputs: 1,
-            name: "false",
-            version: "1.0.0",
-            activation: `
-                ctx.outputs[0].value = false
-            `.trim(),
-            material: {
-                mode: "color",
-                data: "yellow"
-            }
+            editable: false
         })
         this.store.set("light", {
             inputs: 1,
diff --git a/src/ts/main.ts b/src/ts/main.ts
index 0db3772..8fdafa2 100644
--- a/src/ts/main.ts
+++ b/src/ts/main.ts
@@ -107,23 +107,23 @@ render(html`
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">folder_open</i>
             <span class="mdc-list-item__text">Open simulation</span>
         </a>
-        <a class="mdc-list-item" href="#" id="openGates" @click=${() => {
-        menus[1].open = true
-    }}>
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">add</i>
-            <span class="mdc-list-item__text">Add logic gate</span>
-        </a>
         <a class="mdc-list-item" href="#" id="openFile" @click=${() => {
         menus[2].open = true
     }}>
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">insert_drive_file</i>
-            <span class="mdc-list-item__text">File</span>
+            <span class="mdc-list-item__text">Simulation</span>
         </a>
         <a class="mdc-list-item" href="#" id="openCustomGates" @click=${() => {
         menus[3].open = true
     }}>
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">edit</i>
-            <span class="mdc-list-item__text">Edit gates</span>
+            <span class="mdc-list-item__text">Custom gates</span>
+        </a>
+        <a class="mdc-list-item" href="#" id="openGates" @click=${() => {
+        menus[1].open = true
+    }}>
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">add</i>
+            <span class="mdc-list-item__text">Add component</span>
         </a>
         </nav>
     </div>
@@ -142,9 +142,15 @@ render(html`
 
     <div class="mdc-menu mdc-menu-surface mdc-theme--primary-bg mdc-theme--on-primary" id="gateMenu">
         <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
-            ${subscribe(manager.gates.pipe(map(_ => _.map(val => html`
+            ${subscribe(manager.gates.pipe(map(_ => [..._].sort().map(val => html`
                 <li class= "mdc-list-item" role = "menuitem" @click=${() => manager.add(val)}>
                     <span class="mdc-list-item__text"> ${val} </span>
+                    ${(manager.templateStore.store.get(val).editable ?
+            html`&nbsp &nbsp &nbsp <span class="material-icons mdc-list-item__meta" @click=${
+                () => manager.templateStore.store.delete(val)
+                }> delete </span>` :
+            ""
+        )}
                 </li>`
     ))))}
         </ul>
@@ -175,7 +181,7 @@ render(html`
         ))))}
             <li class= "mdc-list-item" role = "menuitem" @click=${() => manager.newGate()}>
                 <i class="material-icons mdc-list-item__graphic" aria-hidden="true">add</i>
-                <span class="mdc-list-item__text"> New gate </span>
+                <span class="mdc-list-item__text"> New custom gate </span>
             </li>
         </ul>
     </div>