a14dc40 get home screen + rendering perf improvements

.eslintrc.json

@@ -8,10 +8,9 @@
         // infinite loop. :(
         "project": [
             // webpack:
-            "./scripts/webpack.tsconfig.json",
+            "./scripts/webpack/tsconfig.json",
             // basecode:
-            "./src/base/utils/tsconfig.json",
-            "./src/base/browser/tsconfig.json",
+            "./src/base/defs/tsconfig.json",
             "./src/base/lang/tsconfig.json",
             "./src/base/floor/tsconfig.json",
             "./src/base/game/tsconfig.json",

.gitignore

@@ -6,6 +6,7 @@
 /dist/
 /scripts/eslint-cache.json
 /scripts/webpack/webpack.config.js
+/scripts/webpack/*.tsbuildinfo
 
 # vim
 *.swp

.templates/tsconfig.json

@@ -11,12 +11,12 @@
 
         // Language Settings:
         "target": "es6",
-        "lib": [ "es6", "dom", "es2019.array" ],
+        "lib": [ "es6", "dom", "ES2019.Array" ],
         "module": "ES2020",
 
         // Emit Flags:
         "sourceMap":      true,
-        "removeComments": true,
+        //"removeComments": true,
         "alwaysStrict":   true,
 
         // Grammar Checking:
@@ -25,5 +25,6 @@
         "noImplicitReturns":    true,
         "strictBindCallApply":  true,
         "noImplicitThis":       true,
+        "noImplicitAny":        true,
     },
 }

.vscode/cSpell.json

@@ -17,6 +17,7 @@
         "typescriptreact"
     ],
     "words": [
+        // Project-specific Terms:
         "snakey",
         "fong",
         "artif",
@@ -29,12 +30,15 @@
         "typeable",
         "unts",
         "engl", "japn", "kore",
+        "smoothstone",
 
+        // Programming terminology:
+        // (Functions and Variables)
         "coord",
         "dict",
         "desc", "descs",
         "dests",
-        "elem",
+        "elem", "elems",
         "minmax",
         "nsps",
         "retval",
@@ -44,6 +48,7 @@
         "typeof",
         "unshift",
 
+        // Tooling and Programming Languages:
         "API's",
         "devtool",
         "entrypoint",
@@ -61,6 +66,7 @@
         "hiragana" , "katakana" ,
         "dubeolsik", "sebeolsik",
 
+        // English:
         "constraining",
         "gameplay",
         "hinderance",
@@ -72,6 +78,7 @@
         "ness",
         "pipelining",
         "placeholder",
+        "presets",
         "programmatically",
         "requester's",
         "screenshots",

.vscode/settings.json

@@ -5,6 +5,7 @@
 
         // project specific excludes:
         "package-lock.json": true,
+        "scripts/webpack/webpack.config.js": true,
 
         // don't always need this:
         "node_modules/": true,

TODO.md

@@ -5,16 +5,17 @@
 
 1. Get a basic, working implementation of an offline game.
 1. Write the stylesheets.
-1. Record music + find out how to play tracks together.
 1. Get working bundles for networked games.
+1. Add player sprites.
+1. Record music + find out how to play tracks together.
+1. Make the website accessible by ARIA standards.
 
 ## Concrete TODOs
 
 ### High Priority
 
-1. Brainstorm ways to split up the js and css to defer loading.
-    - Make lang files dynamically imported. This will save loading if the user only plays online (no game-manager implementation needed).
-1. Make and hook up lang registry (initialize in PostInit, define under Lang).
+1. Implement operator switching.
+    - Make the whole client-side only have one copy of the spotlight elements and always give it to the current operator.
 1. Fill in implementation of bubble event handler.
 1. Design decision: Change bubble mechanism:
     - Activates automatically and immediately upon players entering each others' (mutual) attack range, or by pressing space in the (mutual) attack range of other players.
@@ -31,8 +32,14 @@
 
 ### Low Priority
 
+- Tell WebPack to split out styling for each screen?
+- Test performance when using `cloneNode` to create Tile elements versus all those calls to `document.createElement`.
+  - [](https://developers.google.com/web/fundamentals/web-components)
 - If we start using SASS, make classes that always have .center-contents or .stack-contents use an extension mechanism so we don't have to manually specify those utility classes in the javascript. That makes it easier to see whats happening from looking just at the stylesheets.
+- [Create a mask-safe icon that is large enough (min 144px)](https://web.dev/maskable-icon/)
 - Read about these topics and see how they might be useful
+  - [](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB)
+  - [](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB)
   - [](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API)
   - [](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen)
   - [](https://www.npmjs.com/package/bad-words)
@@ -42,10 +49,12 @@
     - [](https://devcenter.heroku.com/articles/node-best-practices)
     - [](https://devcenter.heroku.com/articles/nodejs-support)
     - [](https://medium.com/deployplace/heroku-vs-docker-the-ultimate-comparison-with-hidden-pitfalls-revealed-f6b7f4075de5)
+  - [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
 - To discourage players from spamming the keyboard, which would make them move chaotically really fast and defeat the educational purpose of the game, detect their success rate of pressing relevant keys, or the rate in terms of time. If they seem to be spamming, then somehow throttle their requests. Maybe stop responding for a brief period of time.
 - For classes implementing some swappable component or ones in a long class hierarchy, see if there are elegance-improvements to be made by using re-exports.
 - Look into switching from JsDoc to TsDoc
   - [eslint plugin](https://www.npmjs.com/package/eslint-plugin-tsdoc)
+- [custom mouse images!](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property)
 
 ### Dependency Management
 
@@ -55,6 +64,10 @@
 - WebPack 5:
   - [Magic dynamic import strings](https://webpack.js.org/migrate/5/#cleanup-the-code) will start getting useful values by default.
   - `output.ecmaVersion` is `6` by default. If we have set it to `6` manually, we can delete the manual field specification.
+- [TypeScript / tslib bug](https://github.com/microsoft/TypeScript/issues/36841)
+  - This is on the roadmap for TypeScript 2.9.1... That may be a while.
+  - When it is fixed, we can take out the ts-loader compiler option forcing `importHelpers` to be off.
+- In package.json's scripts field, use node's `--enable-source-maps` flag when there is better support for it / we update node to a version with better support for it / I find out that there is good support and I was just using it wrong.
 
 ---
 
@@ -64,25 +77,35 @@
   - make BGM have a track that varies with lang and different selectable style variations such as jazz cafe/elevator music, fast 13/8.
   - Make movement sound effects able to depend on translated key input like morse sounds.
 
-## Research / Learning Links
-
-### Dynamic imports
+## Good Reads
 
 ```text
-https://javascript.info/modules-dynamic-imports
-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
-https://github.com/tc39/proposal-dynamic-import/#import
-https://v8.dev/features/dynamic-import
+https://javascript.info/class-inheritance
+https://medium.com/better-programming/prototypes-in-javascript-5bba2990e04b
+https://www.quirksmode.org/js/events_order.html#link4
+https://www.mikedoesweb.com/2017/dynamic-super-classes-extends-in-es6/
+https://javascript.info/mixins
+https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript
+
+https://github.com/whatwg/html/issues/4078
+
+https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
 ```
 
-### ES6 modules in NodeJS
+## Research / Learning Links
+
+### Licensing
 
 ```text
-https://stackoverflow.com/questions/45854169/how-can-i-use-an-es6-import-in-node
-https://medium.com/@iamstan/typescript-es-modules-micheal-jackson-2040216be793
-https://nodejs.org/api/esm.html#esm_enabling
+https://creativecommons.org/faq/#can-i-apply-a-creative-commons-license-to-software
+https://www.gnu.org/licenses/copyleft.html
+https://opensource.org/licenses
 ```
 
+### Dynamic imports
+
+Links no longer needed. Good things to know: both TypeScript and WebPack implement handling for dynamic imports. TypeScript will provide type information about the exports from a module, and WebPack will intercept the dynamic import to create a deferred-loading split chunk.
+
 ### Web API's
 
 I might use [this](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) for choosing which team you want to be part of.
@@ -97,12 +120,7 @@ https://www.w3schools.com/html/html5_webstorage.asp
 https://www.w3schools.com/html/html5_serversentevents.asp
 Navigator.{keyboard,online,connection,language,languages,battery}
 https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
-```
-
-### JsDoc
-
-```text
-https://devdocs.io/jsdoc/howto-es2015-classes
+https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
 ```
 
 ### Audio
@@ -115,6 +133,8 @@ For the background music track, I will have multiple layers. They will all be th
 
 I should keep my audio loops as short as possible. Ie. Every audio file 4 measures long except the melody file which is maybe 12 measures long.
 
+Here's [something fun I can do](https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API) (but don't have to).
+
 ```text
 https://devdocs.io/dom/web_audio_api/best_practices
 https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
@@ -140,23 +160,32 @@ https://developer.mozilla.org/en-US/docs/Web/CSS/display
 flex playground: https://codepen.io/enxaneta/full/adLPwv/
 ```
 
-### Handling Network Latency
+### ARIA
 
 ```text
-https://martinfowler.com/eaaDev/EventSourcing.html
-https://stackoverflow.com/a/9283222/11107541
+https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
+https://a11yproject.com/checklist/
 ```
 
-## Good Reads
+### ES6 modules in NodeJS
 
 ```text
-https://javascript.info/class-inheritance
-https://medium.com/better-programming/prototypes-in-javascript-5bba2990e04b
-https://www.quirksmode.org/js/events_order.html#link4
-https://www.mikedoesweb.com/2017/dynamic-super-classes-extends-in-es6/
-https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript
+https://stackoverflow.com/questions/45854169/how-can-i-use-an-es6-import-in-node
+https://medium.com/@iamstan/typescript-es-modules-micheal-jackson-2040216be793
+https://nodejs.org/api/esm.html#esm_enabling
+```
 
-https://github.com/whatwg/html/issues/4078
+### JsDoc
+
+```text
+https://devdocs.io/jsdoc/howto-es2015-classes
+```
+
+### Handling Network Latency
+
+```text
+https://martinfowler.com/eaaDev/EventSourcing.html
+https://stackoverflow.com/a/9283222/11107541
 ```
 
 ## Things I have Tried that Haven't Worked (and that's okay)

assets/style/colour/index.css

@@ -0,0 +1 @@
+@import "./smoothstone.css";

assets/style/colour/smoothstone.css

@@ -0,0 +1,14 @@
+[data-sk-colour-scheme="smooth-stone"] {
+    --colour-mainFg: #c3c5ce;
+    --colour-mainBg: #72888d;
+    --colour-tileFg: #a2b6bb;
+    --colour-tileBg: #546164;
+    --colour-tileBd: #ffffff;
+    --colour-healthFg: #21352e;
+    --colour-healthBg: #398f5a;
+    --colour-pFaceMe: #43aec9;
+    --colour-pFaceTeammate: #bdae58;
+    --colour-pFaceImtlTeammate: #f8df50;
+    --colour-pFaceOpponent: #a34e59;
+    --colour-pFaceImtlOpponent: #e23fa3;
+}

assets/style/game/coordsys/beehive.css

@@ -2,9 +2,11 @@
 /*
 https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
 */
-.game-grid[data-coord-sys="BEEHIVE"] .tile {
+/*
+.game-grid-impl-body[data-coord-sys="BEEHIVE"] .tile {
     --nothing: "yet";
 }
-.game-grid[data-coord-sys="BEEHIVE"] .tile > * {
+.game-grid-impl-body[data-coord-sys="BEEHIVE"] .tile > * {
     --nothing: "yet";
 }
+ */

assets/style/game/coordsys/euclid2.css

@@ -1,12 +1,12 @@
 
-.game-grid[data-coord-sys="EUCLID2"] .game-grid-impl-body {
-    --track-size: minmax(27px, 1fr);
+.game-grid-impl-body[data-coord-sys="EUCLID2"] {
+    --track-size: minmax(1.67em, 1fr);
     display:    grid;
     grid-template-columns:
         repeat(var(--euclid2-grid-width), var(--track-size));
     grid-auto-rows: var(--track-size);
 }
-.game-grid[data-coord-sys="EUCLID2"] .tile {
+.game-grid-impl-body[data-coord-sys="EUCLID2"] .tile {
     margin:     5%;
 }
 /* .game-grid[data-coord-sys="EUCLID2"] .tile > * {

assets/style/game/grid.css

@@ -1,50 +1,41 @@
 
-#game-grid-container {
-    height:     100vh;
-    flex-flow:  column nowrap;
-}
-
-
 .game-grid {
     /* Since this is given the `center-contents` and
     `stack-contents` classes, it defaults to taking
     up no space (its children all have their position
     property set to `absolute`). We rectify this case
     by giving `.game-grid-impl-body` `position: static`. */
+    border: 5px double var(--colour-tileBd);
+    border-radius:  15px;
+    padding: 5px;
 }
 
 .game-grid-impl-body {
     position:   static;
-    padding:    4px 4px;
-    border:     5px double var(--colour-tileBd);
-    border-radius: 15px;
     color:      var(--colour-tileFg);
-
-    /* To hide the spotlight off the edges */
-    overflow:   hidden hidden;
 }
 
-.game-grid-kbd-dc {
-    /* Take up the whole space of the parent, and
-    make sure that (regardless of element ordering,)
-    This doesn't prevent `.game-grid-impl-body` from
-    receiving focus via pointer. */
-    pointer-events: none;
+.game-grid-kbd-dc,
+.game-grid-pause-overlay {
     top: 0; left: 0; bottom: 0; right: 0;
-}
-.game-grid-kbd-dc {
-    color:      var(--colour-tileBd);
-    text-shadow: 0 0  0.5em black;
+    color: var(--colour-tileBd);
+    text-shadow: 0em 0.01em  0.5em black;
+    background-color: #00000040;
     visibility: hidden;
 }
-
-.game-grid-impl-body:focus {
-    /* cursor:     help; */
-    outline:    none;
+.game-grid-kbd-dc {
+    cursor: pointer;
 }
-.game-grid-impl-body:not(:focus) {
-    filter:     brightness(70%);
+.game-grid-pause-overlay {
+    cursor: not-allowed;
 }
-.game-grid-impl-body:not(:focus) ~ .game-grid-kbd-dc {
-    visibility: visible;
+
+@media screen {
+    .game-grid:focus {
+        outline:    none;
+    }
+    .game-grid[data-game-state="paused"] > .game-grid-pause-overlay,
+    .game-grid:not([data-game-state="paused"]):not(:focus) > .game-grid-kbd-dc {
+        visibility: visible;
+    }
 }