diff --git a/.gitignore b/.gitignore index d713b02..82c1a0b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules dist coverege +.theia \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 190cef1..70a24d2 100644 --- a/package-lock.json +++ b/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, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -2636,14 +2793,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": 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, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -2788,8 +2940,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": 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, - "optional": true + "dev": 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, - "optional": true + "dev": 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, - "optional": true + "dev": 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, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": 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=", - "dev": true + "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=" }, "y18n": { "version": "3.2.1", diff --git a/package.json b/package.json index 0d8b66a..f82981a 100644 --- a/package.json +++ b/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", diff --git a/src/index.html b/src/index.html index 3ca22f1..d91ad1f 100644 --- a/src/index.html +++ b/src/index.html @@ -4,6 +4,7 @@ Game + diff --git a/src/scss/base.scss b/src/scss/base.scss index eb61694..9acceac 100644 --- a/src/scss/base.scss +++ b/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; } \ No newline at end of file diff --git a/src/ts/common/componentManager/componentTemplateStore.ts b/src/ts/common/componentManager/componentTemplateStore.ts index f728839..1e2c118 100644 --- a/src/ts/common/componentManager/componentTemplateStore.ts +++ b/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" + } + }) } } \ No newline at end of file diff --git a/src/ts/main.ts b/src/ts/main.ts index f945e06..6c728d9 100644 --- a/src/ts/main.ts +++ b/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 = (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) )}> -
- (val == "1") ? "shown" : "" +
+ (val == "1") ? "shown" : "" )))} class=createBar>
@@ -50,14 +51,31 @@ render(html`
- ${ subscribe(manager.svgs) } -
+ `, document.body) manager.update() \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index c4ea556..1054ba5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -28,11 +28,23 @@ module.exports = { ] }, { - test: /\.(scss|sass)$/, - use: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: ['css-loader', 'sass-loader'] - }) + test: /\.scss$/, + use: [ + { + 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)$/,