diff --git a/config/bs-config.js b/config/bs-config.js index fcf3236..1a5398c 100644 --- a/config/bs-config.js +++ b/config/bs-config.js @@ -22,12 +22,12 @@ var env = Object.assign({}, process.env); env.PATH = path.resolve("./node_modules/.bin") + SEPARATOR + env.PATH; var myExecSync = function myExecSync(cmd) { - var output = execSync(cmd, { - cwd: process.cwd(), - env: env - }); + var output = execSync(cmd, { + cwd: process.cwd(), + env: env + }); - console.log(output.toString('utf-8')); + console.log(output.toString('utf-8')); } var copyHtml = function(action, fileName) { myExecSync("npm run build:html"); @@ -103,8 +103,8 @@ module.exports = { "scrollRestoreTechnique": "window.name", "scrollElements": [], "scrollElementMapping": [], - "reloadDelay": 0, - "reloadDebounce": 0, + "reloadDelay": 50, + "reloadDebounce": 100, "reloadThrottle": 0, "plugins": [], "injectChanges": true, diff --git a/package-lock.json b/package-lock.json index 47e7a5a..f0175b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,311 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@material/animation": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@material/animation/-/animation-0.4.1.tgz", + "integrity": "sha1-v4tQrtrUz/zopbQo/cqPGruvF24=" + }, + "@material/auto-init": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/auto-init/-/auto-init-0.24.0.tgz", + "integrity": "sha512-RPT9zZYUfxv/hnnZpSs4OSPVSLc8ZEN2wJfGe0ZMky8ZlOQeJCYzJMKt8l41YAQGeU1GIyEbN4jbgeZMNccnRA==" + }, + "@material/base": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "integrity": "sha512-RG1SbHl6M8a0fdrMAoMm7Fc8jkuj3HhZd0f8Dy5kfUtQk3I7PyzD+MLCrmCHgUAlKbcK2J9VxJWpd4isZr3x9w==" + }, + "@material/button": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/button/-/button-0.24.0.tgz", + "integrity": "sha512-j3NfMNlJQS5z2G15GRWqYZVT39Sp5YcKXWHxTdkcJZdP93renGfsheE/mhQDlqkc1tiLjqb0aees5M6VredhDQ==", + "requires": { + "@material/elevation": "0.1.13", + "@material/ripple": "0.24.0", + "@material/theme": "0.24.0", + "@material/typography": "0.3.0" + } + }, + "@material/card": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/card/-/card-0.24.0.tgz", + "integrity": "sha512-IPJhHrHoErst05GObIA4aEOQS4DequiVmOuIVj7/U75VZqmj0REDRSPJedeTW73/yX/tIgtULGnIbH1G99PDew==", + "requires": { + "@material/elevation": "0.1.13", + "@material/rtl": "0.1.8", + "@material/theme": "0.24.0", + "@material/typography": "0.3.0" + } + }, + "@material/checkbox": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/checkbox/-/checkbox-0.24.0.tgz", + "integrity": "sha512-tY/zBO9VGbwZ/qehOX2c+t20skw5zdhX6S1JtBeSl1hH7q/hWykm7hk9jRpySzc86smJh/5mi9URckdyY5Yj2A==", + "requires": { + "@material/animation": "0.4.1", + "@material/base": "0.24.0", + "@material/ripple": "0.24.0", + "@material/rtl": "0.1.8", + "@material/selection-control": "0.24.0", + "@material/theme": "0.24.0" + } + }, + "@material/dialog": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-0.24.0.tgz", + "integrity": "sha512-3km5cmF/b3HoxazUFfeqLMRqoDVX9gQ+l5cTzMD89XgEtzChxzPcbgBo8pgIVlysDNrp+mAGwSDvBP0BkNNqPg==", + "requires": { + "@material/animation": "0.4.1", + "@material/base": "0.24.0", + "@material/elevation": "0.1.13", + "@material/ripple": "0.24.0", + "@material/rtl": "0.1.8", + "@material/theme": "0.24.0", + "@material/typography": "0.1.1", + "focus-trap": "2.3.1" + }, + "dependencies": { + "@material/typography": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@material/typography/-/typography-0.1.1.tgz", + "integrity": "sha1-+y40N70yhNOen7kUhXZ63msr0ME=" + } + } + }, + "@material/drawer": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/drawer/-/drawer-0.24.0.tgz", + "integrity": "sha512-ZqLO7iO7DSVkfmmnoH25qRquUNzJT6tKxmlrWDuDRm43kIouuBg9JsQH9GhinG3yy+pPfeMGtNoj8+cJHiU0+w==", + "requires": { + "@material/animation": "0.4.1", + "@material/base": "0.24.0", + "@material/elevation": "0.1.13", + "@material/rtl": "0.1.8", + "@material/theme": "0.24.0", + "@material/typography": "0.3.0" + } + }, + "@material/elevation": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-0.1.13.tgz", + "integrity": "sha1-o4iF88r0OYymp0aMMIiH1wvUYFs=", + "requires": { + "@material/animation": "0.4.1" + } + }, + "@material/fab": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/fab/-/fab-0.24.0.tgz", + "integrity": "sha512-d/mEYyI0q9EVLG0v/jAB+Mj2qCQju0iNyA2Bw5XdcEbuEHZWPQUByd5+/L2Ofq8pPQ/xkdHqTNNL1AtpDikvNw==", + "requires": { + "@material/animation": "0.4.1", + "@material/elevation": "0.1.13", + "@material/ripple": "0.24.0", + "@material/theme": "0.24.0" + } + }, + "@material/form-field": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/form-field/-/form-field-0.24.0.tgz", + "integrity": "sha512-xEOCOXnQMV9xSL+Ho6Fk+gGbkONV6QfWN6btJytqS9S0Zm6YkNCcC4L7Tu8xzfTDxpSbQn6jaKshfZ0ojfzB5g==", + "requires": { + "@material/base": "0.24.0", + "@material/rtl": "0.1.8", + "@material/selection-control": "0.24.0", + "@material/theme": "0.24.0", + "@material/typography": "0.3.0" + } + }, + "@material/grid-list": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/grid-list/-/grid-list-0.24.0.tgz", + "integrity": "sha512-uaiVS7Z0pT0M/VzSUNi4kzTSsZu5ssbQX059G/feLdL8z1mL/c/Ph80fWTjyPV/1KUJFMQ7yAd5pMjR8aceIcg==", + "requires": { + "@material/base": "0.24.0", + "@material/rtl": "0.1.8", + "@material/theme": "0.24.0", + "@material/typography": "0.3.0" + } + }, + "@material/icon-toggle": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/icon-toggle/-/icon-toggle-0.24.0.tgz", + "integrity": "sha512-vf7aoRtP4lQLblk4Yc+cWRJ8Wie1QvnXdSRnP5Gos7hvcHbXyvhwlfe34MWUgsv0I1ofgx6hNWyMGIi7qxM3KQ==", + "requires": { + "@material/animation": "0.4.1", + "@material/base": "0.24.0", + "@material/ripple": "0.24.0", + "@material/theme": "0.24.0" + } + }, + "@material/layout-grid": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/layout-grid/-/layout-grid-0.24.0.tgz", + "integrity": "sha512-38Si5CQgRkQwTSVb+lfCZkH8QEe1/HWfj2yNmK5OIFRMBFbSjQRsvf3p+aU1R7fM4TDjNKcgUWqRtBnKuUjNCQ==" + }, + "@material/linear-progress": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/linear-progress/-/linear-progress-0.24.0.tgz", + "integrity": "sha512-O6/S17gNdE/p23IK3j/yp70BbPvdK2aphoMuo1fYSdweQk4mJ5sk6BSbG6/DKjR5nnu58IiD8Ehe/hCZih8jvg==", + "requires": { + "@material/animation": "0.4.1", + "@material/base": "0.24.0", + "@material/theme": "0.24.0" + } + }, + "@material/list": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/list/-/list-0.24.0.tgz", + "integrity": "sha512-VYV7FLPzhlNtTs1wMq8L2KywQT2ULHHKFyX4oku2IZ6PavpK0egXcJ5W1NQQ1WVQXi8RHCacdXi4KSPcPhY/UA==", + "requires": { + "@material/ripple": "0.24.0", + "@material/rtl": "0.1.8", + "@material/theme": "0.24.0", + "@material/typography": "0.3.0" + } + }, + "@material/menu": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/menu/-/menu-0.24.0.tgz", + "integrity": "sha512-PcYUqBcdvXWEfZtCTqTDHNdBiJO2ZwmSe158i7rV9HGK2D2fxHCm2ssrz7HBxsHFIzoPxYMWUyDG0fn+V5jW3A==", + "requires": { + "@material/animation": "0.4.1", + "@material/base": "0.24.0", + "@material/elevation": "0.1.13", + "@material/theme": "0.24.0", + "@material/typography": "0.3.0" + } + }, + "@material/radio": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/radio/-/radio-0.24.0.tgz", + "integrity": "sha512-ce7g1bIH61Q4q5APQc9rg8qynekEYWmkbenCgjo3IKwtTvIcNNIolkiMPP6uH7BfKjMHxa8BGg9U1ojH/48Ydg==", + "requires": { + "@material/animation": "0.4.1", + "@material/base": "0.24.0", + "@material/ripple": "0.24.0", + "@material/selection-control": "0.24.0", + "@material/theme": "0.24.0" + } + }, + "@material/ripple": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.24.0.tgz", + "integrity": "sha512-4oMpIj8o9F5trHs7KTfcl6gIJPYjTOe1Uo+382Jd6SXS/tZFQ77Ulvv90p5c3dPpsNQzxjAjEVEHIsWffhqPAA==", + "requires": { + "@material/base": "0.24.0", + "@material/theme": "0.24.0" + } + }, + "@material/rtl": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "integrity": "sha512-NzBobwxvhJg+dch99pVO+Z9HL1DM+esuIy5WYXgM7trfOVh8n9DkVo5vD/NKnDy6F5wCaRnJOI5T19Tev6c9Zw==" + }, + "@material/select": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/select/-/select-0.24.0.tgz", + "integrity": "sha512-s9VqcxFenBGHc6HsK5acPmj+E+QKjjWKpV4NDtACL22GPJrKc4M1X2URObf/LsKS/80QlM0exmnFbB+aq4XgeA==", + "requires": { + "@material/animation": "0.4.1", + "@material/base": "0.24.0", + "@material/list": "0.24.0", + "@material/menu": "0.24.0", + "@material/rtl": "0.1.8", + "@material/theme": "0.24.0", + "@material/typography": "0.3.0" + } + }, + "@material/selection-control": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/selection-control/-/selection-control-0.24.0.tgz", + "integrity": "sha512-u+o3i329IPuG3viRgWBUbc8IVOMseGYBAO1hniadCjpDq/PpM/ZDQeuLfuUPpaAffSuZ4EaHzbTQhEKQM90Cyw==", + "requires": { + "@material/ripple": "0.24.0" + } + }, + "@material/slider": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/slider/-/slider-0.24.0.tgz", + "integrity": "sha512-8j9Vmcq7NaBtSsRL7fPsDWWr1xJpWalLeaAyaSbIZqGUiIRddxGpEzHqVviOkZPQ/4SpsinJj8FfgXE7MkjpIA==", + "requires": { + "@material/animation": "0.4.1", + "@material/base": "0.24.0", + "@material/rtl": "0.1.8", + "@material/theme": "0.24.0" + } + }, + "@material/snackbar": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/snackbar/-/snackbar-0.24.0.tgz", + "integrity": "sha512-RIu0ZD+wc/qaTNmNoA96fik0ldeS0Z6kj9NahCWVKZAdndRvRx7occdKSTBjYlgg+abKPEhtpzhKytrHXAm76Q==", + "requires": { + "@material/animation": "0.4.1", + "@material/base": "0.24.0", + "@material/rtl": "0.1.8", + "@material/theme": "0.24.0", + "@material/typography": "0.3.0" + } + }, + "@material/switch": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/switch/-/switch-0.24.0.tgz", + "integrity": "sha512-8TFJylmfSVHiYfR4dKjqPU9o1TmORH69bQjt156kCyA17dPIUh3fibjFeFHcaVoVFk2hUyCISxsxAVtVhP5fmw==", + "requires": { + "@material/animation": "0.4.1", + "@material/elevation": "0.1.13", + "@material/theme": "0.24.0" + } + }, + "@material/tabs": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/tabs/-/tabs-0.24.0.tgz", + "integrity": "sha512-BHONDtIdPBNjlZZ6Xb3d+eB5+zsEiBueIu0kpACKBKmq3VdYXJdAKcSPBP5Igu+bG58KUUliJD5jXdLA2v3pAw==", + "requires": { + "@material/animation": "0.4.1", + "@material/base": "0.24.0", + "@material/ripple": "0.24.0", + "@material/rtl": "0.1.8", + "@material/theme": "0.24.0", + "@material/typography": "0.3.0" + } + }, + "@material/textfield": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/textfield/-/textfield-0.24.0.tgz", + "integrity": "sha512-DvSRPUG0Qz7GdtqzFpWAumVjyqAgojY1zw6rY1+L6c6liEzTqFR84MKIDbmMuVX+oWOSb3H8xMjrnXt54OXKuA==", + "requires": { + "@material/animation": "0.4.1", + "@material/base": "0.24.0", + "@material/ripple": "0.24.0", + "@material/rtl": "0.1.8", + "@material/theme": "0.24.0", + "@material/typography": "0.3.0" + } + }, + "@material/theme": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/theme/-/theme-0.24.0.tgz", + "integrity": "sha512-a5ZJrW1aQHMQeZVhO9KIyPkVOZe76khfsTcRwf5Aws8ZGAFdtQ2fZXdeREkWDti1ftFyVak1Da1Y3ka0HCwSFQ==" + }, + "@material/toolbar": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@material/toolbar/-/toolbar-0.24.0.tgz", + "integrity": "sha512-ctyWaBYByvy6rnzpDihlCzP0V3Agk5yeTGxZdGJwVHKd7BUpGEMvK50LxWLkXH4p8MOE3ICpRERSMQG1nOiidQ==", + "requires": { + "@material/base": "0.24.0", + "@material/elevation": "0.1.13", + "@material/rtl": "0.1.8", + "@material/theme": "0.24.0", + "@material/typography": "0.3.0" + } + }, + "@material/typography": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@material/typography/-/typography-0.3.0.tgz", + "integrity": "sha1-+CjC0yFb/WbFgHJwm0JgxkElOQo=" + }, "@types/node": { "version": "6.0.88", "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.88.tgz", @@ -1594,6 +1899,14 @@ "pinkie-promise": "2.0.1" } }, + "focus-trap": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-2.3.1.tgz", + "integrity": "sha512-DR30Bcd5NqNaP1Pb3OsIEe/C1FaWqjxrjDUP6CCglF2N5e+ySDzmFCNEqJAQaskQttlJ1DAgWbVMlOXh4Etb8A==", + "requires": { + "tabbable": "1.1.1" + } + }, "for-in": { "version": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=", @@ -2700,6 +3013,43 @@ "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=", "dev": true }, + "material-components-web": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/material-components-web/-/material-components-web-0.24.0.tgz", + "integrity": "sha512-/uMygXluJNADVQJFHYsRCw+AzjYZVsN1ShRufp2QHm64fR7uqVOSXppWATg7T2rqMpaNsX0kQDnnPQwwtV3WZw==", + "requires": { + "@material/animation": "0.4.1", + "@material/auto-init": "0.24.0", + "@material/base": "0.24.0", + "@material/button": "0.24.0", + "@material/card": "0.24.0", + "@material/checkbox": "0.24.0", + "@material/dialog": "0.24.0", + "@material/drawer": "0.24.0", + "@material/elevation": "0.1.13", + "@material/fab": "0.24.0", + "@material/form-field": "0.24.0", + "@material/grid-list": "0.24.0", + "@material/icon-toggle": "0.24.0", + "@material/layout-grid": "0.24.0", + "@material/linear-progress": "0.24.0", + "@material/list": "0.24.0", + "@material/menu": "0.24.0", + "@material/radio": "0.24.0", + "@material/ripple": "0.24.0", + "@material/rtl": "0.1.8", + "@material/select": "0.24.0", + "@material/selection-control": "0.24.0", + "@material/slider": "0.24.0", + "@material/snackbar": "0.24.0", + "@material/switch": "0.24.0", + "@material/tabs": "0.24.0", + "@material/textfield": "0.24.0", + "@material/theme": "0.24.0", + "@material/toolbar": "0.24.0", + "@material/typography": "0.3.0" + } + }, "md5.js": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz", @@ -4533,6 +4883,11 @@ "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=", "dev": true }, + "tabbable": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-1.1.1.tgz", + "integrity": "sha512-YnbzANAozgzJtFN9aSk4A1Ya3Z+yMh2GkrBa9AT3Bi4SF9z+iHmT8MoY/5bJL1h1aDYo+CPbAUR7qMx+LSxQgA==" + }, "tapable": { "version": "0.2.8", "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.8.tgz", diff --git a/package.json b/package.json index ee43c58..235786a 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,9 @@ "ajv": "^5.0.0" }, "dependencies": { + "@material/theme": "^0.24.0", "jquery": "^3.2.1", + "material-components-web": "^0.24.0", "rethinkdb-websocket-client": "^0.5.1" } } diff --git a/scripts/htmlCompile.js b/scripts/htmlCompile.js index baca9d8..57749f6 100644 --- a/scripts/htmlCompile.js +++ b/scripts/htmlCompile.js @@ -11,15 +11,14 @@ ncp("src/", "dist/", { if (name.indexOf('.') == -1) { return true; } - if (name.indexOf('js') != -1) { - return false; - } var ret = !! name.match(htmlRegExp); if (ret) { console.log("[htmlCompile] copying ", name); } return ret; - } + }, + // Follow symlink + dereference: true }, function (err) { if (err) { return console.error(err); diff --git a/scripts/jsCompile.js b/scripts/jsCompile.js index 65f1eff..3af4329 100644 --- a/scripts/jsCompile.js +++ b/scripts/jsCompile.js @@ -1,7 +1,6 @@ const ncp = require('ncp').ncp; -const jsRegExp = new RegExp(/^(?!.*\.(test||mocha)\.js$)^(?!webpack\.js$).*\.js$/g); +const jsRegExp = new RegExp(/^(?!.*\.(test||mocha)\.js$)^(?!.*webpack\.js$).*\.js$/g); -// TODO avoid webpack files // TODO js lint // TODO js minifier // TODO avoid re-compiling for nothing @@ -9,6 +8,7 @@ const jsRegExp = new RegExp(/^(?!.*\.(test||mocha)\.js$)^(?!webpack\.js$).*\.js$ console.log("[jsCompile] start "); ncp("src/", "dist/", { + // Filter only js files filter: function(name) { if (name.indexOf('.') == -1) { return true; @@ -18,7 +18,9 @@ ncp("src/", "dist/", { console.log("[jsCompile] copying ", name); } return ret; - } + }, + // Follow symlink + dereference: true }, function (err) { if (err) { return console.error(err); diff --git a/src/css/color.scss b/src/css/color.scss deleted file mode 100644 index abb5412..0000000 --- a/src/css/color.scss +++ /dev/null @@ -1,6 +0,0 @@ -.red-text { - color:#F00; -} -.green-text { - color:#0F0; -} diff --git a/src/css/core/_color.scss b/src/css/core/_color.scss new file mode 100644 index 0000000..8164b61 --- /dev/null +++ b/src/css/core/_color.scss @@ -0,0 +1,7 @@ +$mdc-theme-primary: #FFFFFF; // White +$mdc-theme-secondary: #117700; // Green +$mdc-theme-background: #000000; // Black + +:root { + --theme-fail: #CC2200; // Red +} diff --git a/src/css/normalize.scss b/src/css/core/_normalize.scss similarity index 100% rename from src/css/normalize.scss rename to src/css/core/_normalize.scss diff --git a/src/css/core/_typo.scss b/src/css/core/_typo.scss new file mode 100644 index 0000000..6c56065 --- /dev/null +++ b/src/css/core/_typo.scss @@ -0,0 +1,8 @@ + +.text-success { + color: var(--mdc-theme-secondary); +} + +.text-fail { + color: var(--theme-fail); +} diff --git a/src/css/index.scss b/src/css/index.scss index bf6c923..de6b76f 100644 --- a/src/css/index.scss +++ b/src/css/index.scss @@ -1,5 +1,9 @@ -@import "normalize"; -@import "color"; +@import "core/_normalize"; + +@import "core/_color"; +@import "../../node_modules/@material/theme/mdc-theme"; + +@import "core/_typo"; html, body, @@ -10,14 +14,16 @@ main { min-height: 100%; max-width: 100%; max-height: 100%; - color: #FFFFFF; + color: var(--mdc-theme-primary); font-family: monospace; } body { - background-color: #000000; + background-color: var(--mdc-theme-background); } pre { + color: var(--mdc-theme-primary); font-size: .8em; + line-height: 1em; margin:0 0 0 0; padding:0 0 0 0; display:inline-block; diff --git a/src/html/homepage.html b/src/html/homepage.html new file mode 100644 index 0000000..35bbd17 --- /dev/null +++ b/src/html/homepage.html @@ -0,0 +1 @@ +

cmdWorld

diff --git a/src/index.html b/src/index.html index 5995422..a05f787 100644 --- a/src/index.html +++ b/src/index.html @@ -9,5 +9,7 @@
+ + diff --git a/src/js/core/HomePage.js b/src/js/core/HomePage.js index 0f65524..3178c46 100644 --- a/src/js/core/HomePage.js +++ b/src/js/core/HomePage.js @@ -2,25 +2,85 @@ class HomePage extends GameElement { onStart(){ + this.menuIsActive = false; + this.menuUuid = false; var _this = this; this.master.element('Lib::JQuery').then(function(dep){ _this.JQuery = dep.JQuery(); }); + this.master.element('Core::ScreenManager').then(function(_ScreenManager){ + _this.ScreenManager = _ScreenManager; + }); + } + onUpdate(){ + if (this.JQuery && this.ScreenManager) { + this.updateMenu(this.menuIsActive); + } } - onUpdate(){} onDestroy(){} sharedRessources(){ var _this = this; return { start:function(){return _this.activeMenu();}, stop:function(){return _this.destroyMenu();}, + isActive:function(){return _this.menuIsActive;}, }; } + /** + * Activate menu. + * + * @method activeMenu + * @return {Boolean} true + */ activeMenu(){ - return true; + this.menuIsActive = true; + return this.menuIsActive; } + + /** + * De-activate menu. + * + * @method destroyMenu + * @return {Boolean} false + */ destroyMenu(){ - return true; + this.menuIsActive = false; + return this.menuIsActive; + } + + /** + * Update menu on screen. + * + * @method updateMenu + * @param {Boolean} isMenuActive True if menu is active. + */ + updateMenu(isMenuActive){ + var $ = this.JQuery; + var sm = this.ScreenManager; + var page = 'homepage'; + + // Display menu + if (!this.isMenuLoaded() && isMenuActive) { + this.menuUuid = sm.display(page); + } + // Remove menu + else if (this.isMenuLoaded() && !isMenuActive) { + this.menuUuid = false; + this.sm.remove(page); + } + } + + /** + * Tell if menu is loaded based on saved uuid. + * + * @method isMenuLoaded + * @return {Boolean} + */ + isMenuLoaded(){ + if (this.menuUuid) { + return true; + } + return false; } } diff --git a/src/js/core/HomePage.test.js b/src/js/core/HomePage.test.js new file mode 100644 index 0000000..30a9931 --- /dev/null +++ b/src/js/core/HomePage.test.js @@ -0,0 +1,60 @@ +var jsdom = require("jsdom"); +var { JSDOM } = jsdom; +var fs = require('fs'); +var virtualConsole = new jsdom.VirtualConsole(); +var helper = require("../helper.mocha.js"); + +describe('HomePage & ScreenManager', function(){ + + it("should be able to load element & dependency without error", function(done){ + helper.testHtml("core/gameManager.test.html", function(dom){ + + var onEvent = function(){ + dom.window.gm.off('Core::loadGameElement[Core::ScreenManager]', onEvent); + done(); + }; + + dom.window.gm.on('Core::loadGameElement[Core::ScreenManager]', onEvent); + dom.window.gm.element('Core::HomePage'); + + }, done); + }); + + it("should be able to display HomePage", function(done){ + helper.testHtml("core/gameManager.test.html", function(dom){ + + var onEvent = function(){ + dom.window.gm.off('Core::loadGameElement[Core::ScreenManager]', onEvent); + if (!dom.window.gm.gameElements['Core::HomePage']) { + done(new Error('gameElement "Core::HomePage" doesn\'t exist ?')); + } + dom.window.gm.gameElements['Core::HomePage'].activeMenu(); + setTimeout(function(){ + var doc = dom.window.document; + + // The test work only with this console.log ?! + console.log(doc.querySelector('body').innerHTML); + + var main = doc.querySelector("main"); + if (main == null) { + return done(new Error('
is missing')); + } + var div = main.querySelector('div'); + if (div == null) { + return done(new Error('
is missing')); + } + if (div.querySelector('h1') == null) { + return done(new Error('

is missing')); + } + done(); + }, 100); + }; + + dom.window.gm.on('Core::loadGameElement[Core::ScreenManager]', onEvent); + dom.window.gm.element('Core::HomePage'); + + }, done); + }); + + +}); diff --git a/src/js/core/ScreenManager.js b/src/js/core/ScreenManager.js new file mode 100644 index 0000000..9322a9b --- /dev/null +++ b/src/js/core/ScreenManager.js @@ -0,0 +1,83 @@ +'use strict'; + +class ScreenManager extends GameElement { + onStart(){ + var _this = this; + this.master.element('Lib::JQuery').then(function(dep){ + _this.JQuery = dep.JQuery(); + _this.JQuery('main').empty(); + }); + } + onUpdate(){} + onDestroy(){} + sharedRessources(){ + var _this = this; + return { + display:function(url){return _this.display(url);}, + isExist:function(search){return _this.isExist(search);}, + remove:function(search){return _this.remove(search);}, + }; + } + + /** + * Append page to
+ * + * It will load /home/YOURPAGE.html, + * you can display the same file multiple time + * + * @method display + * @param {string} page dist/src/{page}.html + * @return {string} uuid v4 to identify your element in dom (#uuid) + */ + display(page){ + var _this = this; + var $ = this.JQuery; + var url = '/html/'+page+'.html'; + + if (this.testEnv) { + url = '../../'+url; + } + + var uuid = this.master.guid(); + $.get(url).done(function(data){ + var el = $('
'+data+'
'); + $('main').append(el); + }).fail(function(err){ + _this.master.fatalError("Bad page name provided"); + }); + return uuid; + } + + /** + * Check if your html is present. + * + * You can use the url used in display() + * or the id that you get with it. + * + * @method isExist + * @param {string} search url or uuid from display() + * @return {Boolean} + */ + isExist(search){ + var byUuid = !!this.JQuery('#'+search).length; + var byPageName = !!this.JQuery('[page="'+search+'"]').length; + return (byUuid || byPageName); + } + + /** + * Remove element from display. + * + * You can use the url used in display() + * or the id that you get with it. + * + * @method remove + * @param {string} search url or uuid from display() + * @return {Boolean} deletion success + */ + remove(search){ + var byUuid = !!this.JQuery('#'+search).remove(); + var byPageName = !!this.JQuery('[page="'+search+'"]').remove(); + return (byUuid || byPageName); + } + +} diff --git a/src/js/core/gameElement.js b/src/js/core/gameElement.js index 25f9f1b..f4e21d2 100644 --- a/src/js/core/gameElement.js +++ b/src/js/core/gameElement.js @@ -4,8 +4,9 @@ class GameElement { /** * Defining imutable method setGameManager() */ - constructor(verbose = false) { + constructor(verbose = false, testEnv = false) { this.log = !!verbose; + this.testEnv = !!testEnv; Object.defineProperty(this, 'setGameManager', { configurable:false, writable:false, diff --git a/src/js/core/gameManager.js b/src/js/core/gameManager.js index d439780..f9ce84f 100644 --- a/src/js/core/gameManager.js +++ b/src/js/core/gameManager.js @@ -7,7 +7,7 @@ class GameManager extends Emitter { constructor(verbose = false, _testEnv = false) { super(); - this.testEnv = _testEnv; + this.testEnv = !!_testEnv; this.gameElements = {}; // TODO list of gameElement currently loading {name:promise} this.loadingGameElement = {}; @@ -98,7 +98,7 @@ class GameManager extends Emitter { /** * Check if a GameElement has been 'ask' but is not loaded yet - * @method isGameElementExist + * @method isGameElementLoading * @param {string} gameElementName gameElement's name * @return {Boolean} true if exist */ @@ -142,7 +142,7 @@ class GameManager extends Emitter { loadGameElement(gameElementName) { var _this = this; - // prépare auto-deletion of promise + // prepare auto-deletion of promise function deletePromise(){ // waiting free time for deleting promise setTimeout(function(){ @@ -167,7 +167,7 @@ class GameManager extends Emitter { /** * Download a game element and initialize it - * TODO handle download error + * * @method downloadGameElement * @param {object} gameElementDef provided by GameManager.getGameElementDefinition * @param {function} resolve Promise's resolve function @@ -176,18 +176,30 @@ class GameManager extends Emitter { downloadGameElement(gameElementDef, resolve, reject) { var _this = this; function addScript(url, cb) { - var s = document.createElement('script'); - if (_this.testEnv) { - url = url.substr(1); - url = '../../'+url; - } - s.setAttribute('src', url); - s.onload = cb; - document.body.appendChild(s); + + // When using diff --git a/src/js/game.js b/src/js/game.js index 94b6475..f60433f 100644 --- a/src/js/game.js +++ b/src/js/game.js @@ -2,13 +2,18 @@ var main = document.querySelector('main'); main.innerHTML += 'Loading /js/game.js ...'; - + /** + * This simply add a