4905729 get roughly-working client-server interactions

.templates/tsconfig.json

@@ -13,11 +13,13 @@
         "target": "es6",
         "lib": [ "es6", "dom", "ES2019.Array" ],
         "module": "ES2020",
+        "experimentalDecorators": true,
 
         // Emit Flags:
         "sourceMap":      true,
         //"removeComments": true,
         "alwaysStrict":   true,
+        "preserveConstEnums": true,
 
         // Grammar Checking:
         "strictNullChecks":     true,

.vscode/cSpell.json

@@ -82,6 +82,7 @@
         "gameplay",
         "hinderance",
         "hitbox",
+        "jank",
         "lifestages",
         "lifecycle",
         "millis",

.vscode/settings.json

@@ -6,7 +6,6 @@
 
         // project specific excludes:
         "package-lock.json": true,
-        "scripts/webpack/webpack.config.js": true,
 
         // don't always need this:
         "node_modules/": true,
@@ -18,6 +17,7 @@
         "**/bower_components": true,
         "**/*.code-search": true,
         "{**/.templates/,**/tsconfig.json}": false,
+        "scripts/webpack/webpack.config.js": true,
     },
     "json.schemas": [
         {

TODO.md

@@ -14,10 +14,19 @@
 
 ### High Priority
 
+1. Server authentication is not working.
+1. Make circular references in `Player` non-enumerable and see if that improves the debug logging experience.
+1. Move StorageHooks to `client/` and make it smarter.
+   - Make sure that index.ejs is updated for changes to colourSchemeStyleLiteral key name.
+1. Make window title indicate current screen.
+1. Implement game creation event communications for online game.
+1. Implement Pause and Unpause events over network.
+1. ~Review all throw clauses and remove those declared in class constructors.~
+    - The new approach is to put these checks in the UI input validators and on the receiving end of the server side.
+1. Debug and handle goToScreen when user navigates forward in history.
 1. Make the cost of boosting proportional to the length of the lang-sequence of the boost-destination tile.
 1. Disable colour schemes when media is print.
     - See [javascript media queries API](https://www.w3schools.com/jsref/met_win_matchmedia.asp).
-1. Implement game creation event communications for online game.
 1. Implement the scores/player-listing sidebar in __PlayScreen.
     - Also show scores (very small size) on top of player faces.
 1. Display the operator's current sequence buffer.
@@ -35,6 +44,7 @@
 ### Routine Checkups
 
 - Check if there are any overridden setters without a getter also overridden or vice versa. This is a subtle and unexpected cause of bugs.
+- Make sure all button elements have `type=button`, or else they will default to `type=submit`, which usually does not matter, but is also usually not my intention when it does matter (ie. when there are forms in the button' vicinity).
 
 ### Low Priority
 

assets/style/initial/screen/_barrel.css

@@ -1,5 +1,6 @@
 @import "./home.css";
+@import "./colourctrl.css";
 @import "./setup.css";
 @import "./play.css";
 @import "./groupjoiner.css";
-@import "./colourctrl.css";
+@import "./grouplobby.css";

assets/style/initial/screen/groupjoiner.css

@@ -7,25 +7,34 @@
     height: 27em; max-height: 80vh;
     width:  27em; max-width:  90vw;
     display:        grid;
-    grid-template-rows: repeat(3, 2fr) 1fr;
+    /* grid-template-rows: repeat(3, 2fr) 1fr; */
     gap:            7.0%;
+    grid-template:
+    "host-url   host-url"   2fr
+    "group-name group-name" 2fr
+    "passphrase passphrase" 2fr
+    "prev       next"       1fr
+    / 1fr       1fr;
 }
 .screen-joiner--content-wrapper > label {
     display:        grid;
     grid-template-rows: 1fr 2.0fr;
-}
-.screen-joiner--content-wrapper input {
-    padding:        0px;
-}
-.screen-joiner--content-wrapper input:invalid {
-    border-style:   dotted;
+    grid-column:    1/3;
 }
 
 .screen-joiner--host-url {
+    /* grid-area: host-url; */
 }
 .screen-joiner--group-name {
+    /* grid-area: group-name; */
 }
 .screen-joiner--passphrase {
+    /* grid-area: passphrase; */
+}
+
+.screen-joiner .screen--back-button {
+    grid-area: prev;
 }
-.screen-joiner--next-button {
+.screen-joiner .screen--next-button {
+    grid-area: next;
 }

assets/style/initial/screen/grouplobby.css

@@ -0,0 +1,39 @@
+.screen-lobby {
+    display:        grid;
+    justify-items:  center;
+    align-content:  center;
+}
+
+.screen-lobby--client-info-section {
+    --spacing:       0.2em;
+    --border-radius: 0.8em;
+    gap: 0.2em; margin: 0.2em;
+    height:  6em; max-height: 80vh;
+    width:  15em; /* max-width:  30vw; */
+    display:        grid;
+    grid-template-rows: 1fr 1fr;
+}
+
+.screen-lobby--teams-section {
+    display:        grid;
+}
+
+.screen-lobby--team {
+}
+
+.screen-lobby--player {
+    max-width: 20em;
+    display: grid;
+    grid-template-columns: 3em 2em 1fr;
+}
+.screen-lobby--player * {
+    pointer-events: none;
+}
+.screen-lobby--player__name {
+    justify-self: start;
+    padding-inline-start: 0.5em;
+}
+
+.screen-lobby .screen--next-button:disabled {
+    display: none;
+}

assets/style/initial/screen/setup.css

@@ -8,7 +8,15 @@
     gap: 1.0em;
 }
 
-.screen-setup--next-button {
+.screen-setup .screen--prev-button,
+.screen-setup .screen--next-button {
     padding: 0.3em 0.7em;
     font-size: 2.0em;
 }
+
+.screen-setup--lang-sel {
+}
+
+.screen-setup--lang-weight-exagg {
+    width: 100%;
+}

assets/style/initial/utils.css

@@ -41,6 +41,12 @@ margins and padding, and its own padding. */
     contain:        strict;
     position:       relative;
 }
+.sk-input-group input.sk-input-group-item {
+    padding:        0px;
+}
+.sk-input-group input.sk-input-group-item:invalid {
+    border-style:   dotted;
+}
 .sk-input-group .sk-input-group-item {
     border-radius:  var(--border-radius);
     margin:         var(--spacing);

dev-guide.md

@@ -53,6 +53,10 @@ Methodology: Use #private fields for fields that back accessors- Ie. Fields that
 
 ### Field / Method Naming
 
+### Typescript Array Syntax
+
+When describing array types, use the `Array<>` form if the arrays are nested (since `readonly T[][]` is not clear which dimension is readonly), or if the entry type is mainly intended to be used as an interface-style type-map. An example of when `T[]` syntax is acceptable is when `T` is a builtin literal type such as `string` and the array is one dimensional.
+
 #### Prefixing with Underscore
 
 TLDR: use such naming if a member / variable must be public, but is only meant to be called in a very specific place.