🌿 Added the false gate and a dummy sidebar ❗️

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 coverege
+.theia

package-lock.json

@@ -16,6 +16,121 @@
             "version": "git+https://github.com/eix-js/utils.git#a21d3b755e965e3c1b6022d0ccc8db457e5a706c",
             "from": "git+https://github.com/eix-js/utils.git"
         },
+        "@material/animation": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@material/animation/-/animation-1.0.0.tgz",
+            "integrity": "sha512-Ed5/vggn6ZhSJ87yn3ZS1d826VJNFz73jHF2bSsgRtHDoB8KCuOwQMfdgAgDa4lKDF6CDIPCKBZPKrs2ubehdw==",
+            "requires": {
+                "tslib": "^1.9.3"
+            }
+        },
+        "@material/base": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@material/base/-/base-1.0.0.tgz",
+            "integrity": "sha512-5dxFp46x5FA+Epg6YHLzN+5zRt9S2wR84UdvVAEJ1egea94m9UHUg7y9tAnNSN16aexRSywmzyLwPr+i8PGEYA==",
+            "requires": {
+                "tslib": "^1.9.3"
+            }
+        },
+        "@material/dom": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@material/dom/-/dom-1.1.0.tgz",
+            "integrity": "sha512-+HWW38ZaM2UBPu4+7QCusLDSf4tFT31rsEXHkTkxYSg/QpDivfPx6YDz4OmYtafmhPR1d1YjqB3MYysUHdodyw==",
+            "requires": {
+                "tslib": "^1.9.3"
+            }
+        },
+        "@material/drawer": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/drawer/-/drawer-2.3.0.tgz",
+            "integrity": "sha512-BIrRLkqUO2SLkSRPWtXNwF4ZFmP1NOYynNelPZOdHZOIa6HcgmXzCL5p7hInJ5MDar/xMTA84CSO6Vf1byQwHA==",
+            "requires": {
+                "@material/animation": "^1.0.0",
+                "@material/base": "^1.0.0",
+                "@material/elevation": "^1.1.0",
+                "@material/list": "^2.3.0",
+                "@material/ripple": "^2.3.0",
+                "@material/rtl": "^0.42.0",
+                "@material/shape": "^1.1.1",
+                "@material/theme": "^1.1.0",
+                "@material/typography": "^2.3.0",
+                "focus-trap": "^5.0.0",
+                "tslib": "^1.9.3"
+            }
+        },
+        "@material/elevation": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-1.1.0.tgz",
+            "integrity": "sha512-m4eATJvDhWK1BT+yA1iHz5mhAk8cV9olC4mjVzm4PTAqhDH2yya4WzjN1HPVHE/a65ObyZ7V4qopxu9MRocm3A==",
+            "requires": {
+                "@material/animation": "^1.0.0",
+                "@material/feature-targeting": "^0.44.1",
+                "@material/theme": "^1.1.0"
+            }
+        },
+        "@material/feature-targeting": {
+            "version": "0.44.1",
+            "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-0.44.1.tgz",
+            "integrity": "sha512-90cc7njn4aHbH9UxY8qgZth1W5JgOgcEdWdubH1t7sFkwqFxS5g3zgxSBt46TygFBVIXNZNq35Xmg80wgqO7Pg=="
+        },
+        "@material/list": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/list/-/list-2.3.0.tgz",
+            "integrity": "sha512-uuHWXpaXvPuOaQtQXwrgNc+WTTwBSwU/es65KJJcGrpc/o8Q3mYwMepotMN7E7/L75Wxz2w6uejnoM3zGZfvqg==",
+            "requires": {
+                "@material/base": "^1.0.0",
+                "@material/dom": "^1.1.0",
+                "@material/feature-targeting": "^0.44.1",
+                "@material/ripple": "^2.3.0",
+                "@material/rtl": "^0.42.0",
+                "@material/shape": "^1.1.1",
+                "@material/theme": "^1.1.0",
+                "@material/typography": "^2.3.0",
+                "tslib": "^1.9.3"
+            }
+        },
+        "@material/ripple": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-2.3.0.tgz",
+            "integrity": "sha512-ejXR0nstERofFhssRyFlwOLgebwm2uGbarHtWZ2/+7QY2Th/Z1wOqNb2h/WRoShsJXK11RUsochb6BJrg30u7w==",
+            "requires": {
+                "@material/animation": "^1.0.0",
+                "@material/base": "^1.0.0",
+                "@material/dom": "^1.1.0",
+                "@material/feature-targeting": "^0.44.1",
+                "@material/theme": "^1.1.0",
+                "tslib": "^1.9.3"
+            }
+        },
+        "@material/rtl": {
+            "version": "0.42.0",
+            "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-0.42.0.tgz",
+            "integrity": "sha512-VrnrKJzhmspsN8WXHuxxBZ69yM5IwhCUqWr1t1eNfw3ZEvEj7i1g3P31HGowKThIN1dc1Wh4LE14rCISWCtv5w=="
+        },
+        "@material/shape": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@material/shape/-/shape-1.1.1.tgz",
+            "integrity": "sha512-Jge/h1XBLjdLlam4QMSzVgM99e/N8+elQROPkltqVP7eyLc17BwM3aP5cLVfZDgrJgvsjUxbgAP1H1j8sqmUyg==",
+            "requires": {
+                "@material/feature-targeting": "^0.44.1"
+            }
+        },
+        "@material/theme": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@material/theme/-/theme-1.1.0.tgz",
+            "integrity": "sha512-YYUV9Rhbx4r/EMb/zoOYJUWjhXChNaLlH1rqt3vpNVyxRcxGqoVMGp5u1XALBCFiD9dACPKLIkKyRYa928nmPQ==",
+            "requires": {
+                "@material/feature-targeting": "^0.44.1"
+            }
+        },
+        "@material/typography": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/typography/-/typography-2.3.0.tgz",
+            "integrity": "sha512-NtWVVvwG9Te6/kuIl4fEwDcXGCS7mfPgo5CKPyxcK6y0hJHv6yRHpipJT9D4ZlXw0sQx9B33doOK7iYJtwBBZw==",
+            "requires": {
+                "@material/feature-targeting": "^0.44.1"
+            }
+        },
         "@types/events": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
@@ -590,6 +705,16 @@
             "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
             "dev": true
         },
+        "babel-runtime": {
+            "version": "6.26.0",
+            "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+            "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+            "dev": true,
+            "requires": {
+                "core-js": "^2.4.0",
+                "regenerator-runtime": "^0.11.0"
+            }
+        },
         "balanced-match": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -873,6 +998,12 @@
                 "pako": "~1.0.5"
             }
         },
+        "btoa": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+            "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+            "dev": true
+        },
         "buffer": {
             "version": "4.9.1",
             "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
@@ -1338,6 +1469,12 @@
             "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
             "dev": true
         },
+        "core-js": {
+            "version": "2.6.9",
+            "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
+            "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==",
+            "dev": true
+        },
         "core-util-is": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -2201,6 +2338,18 @@
                 }
             }
         },
+        "extract-loader": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/extract-loader/-/extract-loader-3.1.0.tgz",
+            "integrity": "sha512-baiz/xalbyQJOTHwcMJKXYsHbhEHGWQ2loK26vqZVoqO6eeinrnSrMx9681pNZgGRqz2L/PsyNxz+PVDiSmNPg==",
+            "dev": true,
+            "requires": {
+                "babel-runtime": "^6.26.0",
+                "btoa": "^1.2.1",
+                "loader-utils": "^1.1.0",
+                "resolve": "^1.8.1"
+            }
+        },
         "extract-text-webpack-plugin": {
             "version": "4.0.0-beta.0",
             "resolved": "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz",
@@ -2424,6 +2573,15 @@
                 }
             }
         },
+        "focus-trap": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-5.0.1.tgz",
+            "integrity": "sha512-vU7zEdL3y+kfkuwBbT9456JH8QfyemdcdZ2gKMfmgLyAs9NQAkSVQBSZmb9nlb1cVMo+iCsddqeGJog00pd2EQ==",
+            "requires": {
+                "tabbable": "^4.0.0",
+                "xtend": "^4.0.1"
+            }
+        },
         "follow-redirects": {
             "version": "1.7.0",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz",
@@ -2614,8 +2772,7 @@
                 "ansi-regex": {
                     "version": "2.1.1",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "aproba": {
                     "version": "1.2.0",
@@ -2636,14 +2793,12 @@
                 "balanced-match": {
                     "version": "1.0.0",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "brace-expansion": {
                     "version": "1.1.11",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "balanced-match": "^1.0.0",
                         "concat-map": "0.0.1"
@@ -2658,20 +2813,17 @@
                 "code-point-at": {
                     "version": "1.1.0",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "concat-map": {
                     "version": "0.0.1",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "console-control-strings": {
                     "version": "1.1.0",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "core-util-is": {
                     "version": "1.0.2",
@@ -2788,8 +2940,7 @@
                 "inherits": {
                     "version": "2.0.3",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "ini": {
                     "version": "1.3.5",
@@ -2801,7 +2952,6 @@
                     "version": "1.0.0",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "number-is-nan": "^1.0.0"
                     }
@@ -2816,7 +2966,6 @@
                     "version": "3.0.4",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "brace-expansion": "^1.1.7"
                     }
@@ -2824,14 +2973,12 @@
                 "minimist": {
                     "version": "0.0.8",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "minipass": {
                     "version": "2.3.5",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "safe-buffer": "^5.1.2",
                         "yallist": "^3.0.0"
@@ -2850,7 +2997,6 @@
                     "version": "0.5.1",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "minimist": "0.0.8"
                     }
@@ -2931,8 +3077,7 @@
                 "number-is-nan": {
                     "version": "1.0.1",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "object-assign": {
                     "version": "4.1.1",
@@ -2944,7 +3089,6 @@
                     "version": "1.4.0",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "wrappy": "1"
                     }
@@ -3030,8 +3174,7 @@
                 "safe-buffer": {
                     "version": "5.1.2",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "safer-buffer": {
                     "version": "2.1.2",
@@ -3067,7 +3210,6 @@
                     "version": "1.0.2",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "code-point-at": "^1.0.0",
                         "is-fullwidth-code-point": "^1.0.0",
@@ -3087,7 +3229,6 @@
                     "version": "3.0.1",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "ansi-regex": "^2.0.0"
                     }
@@ -3131,14 +3272,12 @@
                 "wrappy": {
                     "version": "1.0.2",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "yallist": {
                     "version": "3.0.3",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 }
             }
         },
@@ -5778,6 +5917,12 @@
                 "strip-indent": "^1.0.1"
             }
         },
+        "regenerator-runtime": {
+            "version": "0.11.1",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+            "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+            "dev": true
+        },
         "regex-not": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@@ -6840,6 +6985,11 @@
                 "has-flag": "^3.0.0"
             }
         },
+        "tabbable": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz",
+            "integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ=="
+        },
         "tapable": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -7912,8 +8062,7 @@
         "xtend": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
-            "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
+            "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
-            "dev": true
         },
         "y18n": {
             "version": "3.2.1",

package.json

@@ -27,6 +27,7 @@
         "@types/micromodal": "^0.3.0",
         "@types/toastr": "^2.1.37",
         "css-loader": "^2.1.0",
+        "extract-loader": "^3.1.0",
         "extract-text-webpack-plugin": "^4.0.0-beta.0",
         "file-loader": "^3.0.1",
         "gh-pages": "^2.0.1",
@@ -47,6 +48,8 @@
     "dependencies": {
         "@eix/input": "git+https://github.com/eix-js/input.git",
         "@eix/utils": "git+https://github.com/eix-js/utils.git",
+        "@material/drawer": "^2.3.0",
+        "@material/list": "^2.3.0",
         "file-saver": "^2.0.2",
         "haunted": "^4.3.0",
         "lit-html": "^1.0.0",

src/index.html

@@ -4,6 +4,7 @@
 <head>
     <title>Game</title>
 
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel='stylesheet' href='style.css'>
 </head>
 

src/scss/base.scss

@@ -1,12 +1,14 @@
 @import "./toastr.scss";
 @import "./modal.scss";
+@import "@material/drawer/mdc-drawer.scss";
+@import "@material/list/mdc-list.scss";
 
 html, body {
     padding: 0;
     margin: 0;
     overflow: hidden;
     height:100%;
-    display: block;
+    display: flex;
 }
 
 svg {
@@ -16,6 +18,10 @@ svg {
     display: block;
 }
 
+.modal__btn-primary{
+    background: orange !important;
+}
+
 .createBar {
     z-index:10;
     position: absolute;
@@ -68,8 +74,28 @@ div.component-container{
     align-items: center;
     justify-content: center;
     img.component {
-        // border: 10px solid black; 
+        // border: 10px solid black;
         border-radius: 20px;
         user-select: none;
     }
+}
+
+.main-sidebar {
+    position: absolute;
+    display: flex;
+    background: #111111;
+    color: white;
+    right: 0;
+}
+
+.mdc-list-item {
+    color:white !important;
+}
+
+.material-icons {
+    color: white !important;
+}
+
+.mdc-list-item--activated {
+    background : orange;
 }

src/ts/common/componentManager/componentTemplateStore.ts

@@ -18,7 +18,7 @@ export class ComponentTemplateStore {
                             return success("1.0.1", "", ctx.alertOptions)
                     }
 
-                    error(`Welcome to the component template program! 
+                    error(`Welcome to the component template program!
                         To get started, try running this basic commands:
                             ${["--version", "ls"].map(val => `${val}`).join(" ")}
                     `, "", {
@@ -117,5 +117,18 @@ export class ComponentTemplateStore {
                 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"
+            }
+        })
     }
 }

src/ts/main.ts

@@ -12,6 +12,7 @@ const manager = new ComponentManager()
 manager.components.push(new Component("and",[200,100],[100,100]))
 manager.components.push(new Component("not",[200,500],[100,100]))
 manager.components.push(new Component("true",[200,500],[100,100]))
+manager.components.push(new Component("false",[200,500],[100,100]))
 manager.update()
 
 const handleEvent = <T>(e:T,func:(e:T) => any) => {
@@ -28,18 +29,18 @@ render(html`
             manager.handleMouseMove(e)
             screen.updateMouse(e)
         })}
-        @mousedown=${(e:MouseEvent) => handleEvent(e,(e:MouseEvent) => 
+        @mousedown=${(e:MouseEvent) => handleEvent(e,(e:MouseEvent) =>
             manager.handleMouseDown(e)
         )}
-        @mouseup=${(e:MouseEvent) => handleEvent(e,(e:MouseEvent) => 
+        @mouseup=${(e:MouseEvent) => handleEvent(e,(e:MouseEvent) =>
             manager.handleMouseUp(e)
         )}
-        @wheel=${(e:MouseEvent) => handleEvent(e,(e:WheelEvent) => 
+        @wheel=${(e:MouseEvent) => handleEvent(e,(e:WheelEvent) =>
             screen.handleScroll(e)
         )}>
 
-        <div id=${subscribe(manager.barAlpha.pipe(map(val => 
+        <div id=${subscribe(manager.barAlpha.pipe(map(val =>
-            (val == "1") ? "shown" : ""    
+            (val == "1") ? "shown" : ""
         )))}
         class=createBar>
             <div class="topContainer">
@@ -50,14 +51,31 @@ render(html`
                 </div>
             </div>
         </div>
-        <svg height=${ subscribe(screen.height) } 
+        <svg height=${ subscribe(screen.height) }
             width=${ subscribe(screen.width) }
             viewBox=${subscribe(screen.viewBox)}>
             ${ subscribe(manager.svgs) }
         </svg>
     </div>
-
     <div class="ModalContainer"></div>
+    <aside class="mdc-drawer main-sidebar">
+    <div class="mdc-drawer__content">
+        <nav class="mdc-list">
+        <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
+            <span class="mdc-list-item__text">Something</span>
+        </a>
+        <a class="mdc-list-item" href="#">
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
+            <span class="mdc-list-item__text">something else</span>
+        </a>
+        <a class="mdc-list-item" href="#">
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
+            <span class="mdc-list-item__text">another thing</span>
+        </a>
+        </nav>
+    </div>
+    </aside>
 `, document.body)
 
 manager.update()

webpack.config.js

@@ -28,11 +28,23 @@ module.exports = {
                 ]
             },
             {
-                test: /\.(scss|sass)$/,
+                test: /\.scss$/,
-                use: ExtractTextPlugin.extract({
+                use: [
-                    fallback: 'style-loader',
+                    {
-                    use: ['css-loader', 'sass-loader']
+                        loader: 'file-loader',
-                })
+                        options: {
+                            name: 'style.css',
+                        },
+                    },
+                    { loader: 'extract-loader' },
+                    { loader: 'css-loader' },
+                    {
+                        loader: 'sass-loader',
+                        options: {
+                            includePaths: ['./node_modules']
+                        }
+                    },
+                ]
             },
             {
                 test: /\.(eot|svg|ttf|woff|woff2)$/,