560f137 get game setup lang option

.vscode/cSpell.json

@@ -27,7 +27,7 @@
         "bubbler",
         "csps",
         "elim",
-        "gameparts",
+        "gamepart", "gameparts",
         "sesh",
         "sysname",
         "typeable",
@@ -43,6 +43,7 @@
         "dests",
         "elem", "elems",
         "minmax",
+        "mixins",
         "nsps",
         "retval",
         "refs",

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+    "typescript.tsdk": "node_modules/typescript/lib",
     "files.exclude": {
         // generic excludes:
         "node_modules/{[^.@]*,}": true,

TODO.md

@@ -14,10 +14,11 @@
 
 ### High Priority
 
+1. Style active-descendant in SkPickOne
+1. Implement game creation event communications for online game.
 1. Unpause game on clicking pause overlay. Make pause overlay darker and keyboard-dc overlay lighter.
-1. Play an emphasis animation on switching to a different operator, and dim non-current-operator faces.
 1. Implement the scores/player-listing sidebar in __PlayScreen.
-    - Also show scores very small on top of player faces.
+    - Also show scores (very small size) on top of player faces.
 1. Display the operator's current sequence buffer.
 1. Fill in implementation of bubble event handler.
 1. Design decision: Change bubble mechanism:
@@ -35,8 +36,16 @@
 
 ### Low Priority
 
+1. Play an emphasis animation on switching to a different operator, and dim non-current-operator faces.
 - Use [this](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) with the .grid element to improve grid viewport. Scroll to center the current operator if it intersects with some rootMargin of the .grid element.
   - Also see [this](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)
+  - Steps:
+    - Set .game-grid contain to content and make it control its sizing (ex. 70vmin).
+    - Put .game-grid-impl-body inside a new wrapper that is sized according to its content.
+    - Put the sizing wrapper inside a new "scroll" wrapper.
+      - Make this scrolling wrapper control padding instead of .game-grid.
+        - This is so that the scroll bars will hug the grid viewport.
+      - Size the scrolling wrapper according to its parent, which is .game-grid.
 - 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.
@@ -108,7 +117,7 @@ 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.
+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 (A WebPack-internal mechanism).
 
 ### Web API's
 
@@ -127,6 +136,12 @@ https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
 https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
 ```
 
+Presentation API:
+
+- [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Presentation_API)
+- [W3C](https://www.w3.org/TR/presentation-api)
+- [Google Example](https://googlechrome.github.io/samples/presentation-api/)
+
 ### Audio
 
 [AudioContextOptions](https://devdocs.io/dom/audiocontextoptions): I should make two separate contexts: one for the layered music optimized for playback and lower power consumption, and one for sound effects optimized for low latency.

assets/images/textures/readme.md

@@ -0,0 +1,4 @@
+
+# Credits
+
+Images courtesy of [Toptal Patterns](https://www.toptal.com/designers/subtlepatterns/).

assets/style/game/player.css

@@ -82,6 +82,10 @@ https://www.w3schools.com/cssref/pr_background-blend-mode.asp
 .player[data-face="me"] ~ .tile__char */ {
     background-color: var(--colour-pFaceMe);
 }
+.player[data-face="meOppo"] > .player__face/* ,
+.player[data-face="meOppo"] ~ .tile__char */ {
+    background-color: var(--colour-pFaceMeOppo);
+}
 .player[data-face="teammate"] > .player__face/* ,
 .player[data-face="teammate"] ~ .tile__char */ {
     background-color: var(--colour-pFaceTeammate);

assets/style/game/tile.css

@@ -23,7 +23,12 @@
 
 .tile__char {
     background-color: var(--colour-tileBg);
-    overflow: hidden hidden;
+    overflow:       hidden hidden;
+    display:        grid;
+    align-items:    center;
+}
+.tile__char > * {
+    height:         initial;
 }
 .tile[data-health] .tile__char {
     border-color:     var(--colour-tileBd);

assets/style/initial/components/pickone.css

@@ -5,8 +5,23 @@
     align-items:    stretch;
     overflow-x:     hidden;
     overflow-y:     auto;
+
+    text-align:     start;
+}
+.sk-pick-one:focus {
+    outline:        none;
 }
 
 .sk-pick-one--opt {
-    overflow: hidden hidden;
+    overflow:   hidden hidden;
+    cursor:     default;
+    transition-property: opacity;
+    transition-duration: 0.35s;
+    transition-timing-function: ease-out;
+}
+.sk-pick-one--opt:not([aria-active-descendant="true"]):not([aria-selected="true"]) {
+    opacity:    0.4;
+}
+.sk-pick-one--opt[aria-selected="true"] {
+    text-decoration: underline;
 }

assets/style/initial/root.css

@@ -9,7 +9,8 @@ html {
 }
 
 body {
-    font-family:    "Trebuchet MS", "Lucida Sans Unicode";
+    margin:         0;
+    font-family:    "Trebuchet MS", "Lucida Sans Unicode", "MS PGothic";
     font-weight:    bold;
     color:          var(--colour-mainFg);
     text-align:     center;

assets/style/initial/screen.css

@@ -25,17 +25,29 @@ is part of the markup- not generated by javascript,
 so it will always appear even if the initial script
 takes a long time to arrive. */
 #background {
-    will-change:    transform;
+    /* If will-change is on, the texture overlay
+    screen doesn't "see" the background layer. */
+    /* will-change:    transform; */
     z-index:        -10000;
     display:        initial;
     background-color: var(--colour-mainBg);
 }
-#screen-tint {
+#screen-tint, #screen-texture {
     pointer-events: none;
     z-index:        10000;
-    visibility:     visible;
-    opacity:        0.0;
+    display:        initial;
     transition-property: opacity, background-color;
     /* transition-duration will be assigned programmatically. */
     transition-timing-function: ease-in-out;
 }
+#screen-tint {
+    opacity:        0.0;
+}
+#screen-texture {
+    background-size: 13.5rem;
+    mix-blend-mode: overlay;
+    background-color: #919191;
+    background-image: url(../../images/textures/cheap_diagonal_fabric.png);
+    background-blend-mode: color-burn;
+    filter: contrast(2.3);
+}

assets/style/initial/screen/__play.css

@@ -3,9 +3,9 @@
     display:        grid;
     grid-template:
         "controls main scoreboard" 1fr /
-        minmax( 5em, 1fr)
+        minmax(auto, 1fr)
         minmax(24em, auto)
-        minmax(12em, 1fr);
+        minmax(auto, 1fr);
 }
 .screen-play--grid-container {
     grid-area:      main;
@@ -15,20 +15,28 @@
 .screen-play--controls-bar {
     --spacing:      0.3rem;
     --border-radius: 0.7rem;
+    --track-size:   5rem;
     grid-area:      controls;
     display:        grid;
-    grid-auto-rows: 1fr;
+    grid-auto-rows: var(--track-size);
+    grid-template-columns: minmax(var(--track-size), 1fr);
+    align-content:  center;
+    font-size:      80%;
 }
-.screen-play--scoreboard-bar {
-    grid-area:      scoreboard;
+.screen-play--players-bar {
+    grid-area:      players;
 }
 @media screen and (max-aspect-ratio: 1/1) {
     .screen-play {
         grid-template:
-        "main" 1fr
-        "controls scoreboard" 1fr /
-        minmax( 5em, 1fr)
-        minmax(24em, auto)
-        minmax(12em, 1fr);
+        "main"          auto
+        "controls"      min-content
+        "players"       auto /
+        1fr;
+    }
+    .screen-play--controls-bar {
+        /* grid-auto-flow:     column; */
+        grid-template-columns:  repeat(3, var(--track-size));
+        grid-template-rows: var(--track-size);
     }
 }

assets/style/initial/snakey.css

@@ -7,8 +7,9 @@
     --colour-healthFg: #21352e;
     --colour-healthBg: #4edf8f;
     --colour-pFaceMe: #35e7ff;
-    --colour-pFaceTeammate: #f8df50;
-    --colour-pFaceImtlTeammate: #f8df50;
+    --colour-pFaceMeOppo: #937ad8;
+    --colour-pFaceTeammate: #f8d150;
+    --colour-pFaceImtlTeammate: #f8d150;
     --colour-pFaceOpponent: #ec4daf;
     --colour-pFaceImtlOpponent: #e23fa3;
 }