Игра запускается и играется: три рантайм-бага и адаптивная вёрстка

Проверено вживую в Chrome: лобби -> матч -> бот ходит -> результат ->
статистика в лобби. Полный матч отыгран, оба исхода видел.

Баги, которые собирались и типизировались, но падали только в рантайме:

1. Canvas не менял размер под экран. Своего cc.Widget у него не было,
   а alignCanvasWithScreen правит только камеру. Canvas оставался
   1280x720, и все растянутые по нему дети — тоже.
2. [...map.values()] превращается сборкой в [].concat(map.values()),
   а concat не разворачивает итератор, а кладёт его одним элементом.
   Отсюда "view.cancelAnimations is not a function" на первой же уборке
   карт. Теперь Array.from.
3. Рубашка козыря рисовалась поверх колоды, а не под ней.

Вёрстка переделана под требование UI.md (4:3 .. 21:9):
- fitWidth даёт постоянную ширину, но не высоту: на 4:3 видно только
  ±720 юнитов. Кнопка "Leave" на y=840 и низ руки на -860 были за
  экраном именно там, где это важнее всего
- рука и панель действий считаются от нижней границы экрана,
  "Leave" прибит виджетом к левому верхнему углу
- стол — один ряд до шести карт вместо двух рядов по три: экономит
  ~215 юнитов высоты, которых на 4:3 нет. Ряд центрируется по тем
  картам, что реально на столе
- затемнение под окном результата рисуется непрозрачным спрайтом:
  тонировать и без того полупрозрачный спрайт почти ничего не даёт

Инструменты:
- npm run serve — отдаёт сборку и роут /_aspects: игра в трёх
  фиксированных iframe-ах 4:3 / 16:9 / 21:9. Движок подгоняет себя
  под окно, поэтому iframe — единственный простой способ увидеть
  вёрстку в форме, которой окно не имеет
- npm run check:spreads — ловит спред неитерируемого в массив
- npm run check — чистота core, спреды, сцены, типы, тесты

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

assets/art/ui/fill.png.meta

@@ -0,0 +1,134 @@
+{
+  "ver": "1.0.27",
+  "importer": "image",
+  "imported": true,
+  "uuid": "2f738643-1367-4ae3-93a7-1424d71a2aa3",
+  "files": [
+    ".json",
+    ".png"
+  ],
+  "subMetas": {
+    "6c48a": {
+      "importer": "texture",
+      "uuid": "2f738643-1367-4ae3-93a7-1424d71a2aa3@6c48a",
+      "displayName": "fill",
+      "id": "6c48a",
+      "name": "texture",
+      "userData": {
+        "wrapModeS": "clamp-to-edge",
+        "wrapModeT": "clamp-to-edge",
+        "imageUuidOrDatabaseUri": "2f738643-1367-4ae3-93a7-1424d71a2aa3",
+        "isUuid": true,
+        "visible": false,
+        "minfilter": "linear",
+        "magfilter": "linear",
+        "mipfilter": "none",
+        "anisotropy": 0
+      },
+      "ver": "1.0.22",
+      "imported": true,
+      "files": [
+        ".json"
+      ],
+      "subMetas": {}
+    },
+    "f9941": {
+      "importer": "sprite-frame",
+      "uuid": "2f738643-1367-4ae3-93a7-1424d71a2aa3@f9941",
+      "displayName": "fill",
+      "id": "f9941",
+      "name": "spriteFrame",
+      "userData": {
+        "trimThreshold": 1,
+        "rotated": false,
+        "offsetX": 0,
+        "offsetY": 0,
+        "trimX": 0,
+        "trimY": 0,
+        "width": 8,
+        "height": 8,
+        "rawWidth": 8,
+        "rawHeight": 8,
+        "borderTop": 0,
+        "borderBottom": 0,
+        "borderLeft": 0,
+        "borderRight": 0,
+        "packable": true,
+        "pixelsToUnit": 100,
+        "pivotX": 0.5,
+        "pivotY": 0.5,
+        "meshType": 0,
+        "vertices": {
+          "rawPosition": [
+            -4,
+            -4,
+            0,
+            4,
+            -4,
+            0,
+            -4,
+            4,
+            0,
+            4,
+            4,
+            0
+          ],
+          "indexes": [
+            0,
+            1,
+            2,
+            2,
+            1,
+            3
+          ],
+          "uv": [
+            0,
+            8,
+            8,
+            8,
+            0,
+            0,
+            8,
+            0
+          ],
+          "nuv": [
+            0,
+            0,
+            1,
+            0,
+            0,
+            1,
+            1,
+            1
+          ],
+          "minPos": [
+            -4,
+            -4,
+            0
+          ],
+          "maxPos": [
+            4,
+            4,
+            0
+          ]
+        },
+        "isUuid": true,
+        "imageUuidOrDatabaseUri": "2f738643-1367-4ae3-93a7-1424d71a2aa3@6c48a",
+        "atlasUuid": "",
+        "trimType": "auto"
+      },
+      "ver": "1.0.12",
+      "imported": true,
+      "files": [
+        ".json"
+      ],
+      "subMetas": {}
+    }
+  },
+  "userData": {
+    "type": "sprite-frame",
+    "fixAlphaTransparencyArtifacts": false,
+    "hasAlpha": true,
+    "redirect": "2f738643-1367-4ae3-93a7-1424d71a2aa3@6c48a"
+  }
+}

assets/scenes/loader.scene

@@ -52,7 +52,7 @@
     },
     "autoReleaseAssets": false,
     "_globals": {
-      "__id__": 19
+      "__id__": 20
     },
     "_id": "1aee5910-40c3-4b99-bc8d-e477cf0e25ed"
   },
@@ -88,6 +88,9 @@
       },
       {
         "__id__": 18
+      },
+      {
+        "__id__": 19
       }
     ],
     "_prefab": null,
@@ -204,7 +207,7 @@
     "_priority": 1073741824,
     "_fov": 45,
     "_fovAxis": 0,
-    "_orthoHeight": 440.25052192066806,
+    "_orthoHeight": 360,
     "_near": 1,
     "_far": 2000,
     "_color": {
@@ -696,32 +699,62 @@
     },
     "_id": "dcSHYP80NEeZirk4SzzDBT"
   },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 1280,
+    "_originalHeight": 720,
+    "_alignMode": 1,
+    "_lockFlags": 0,
+    "_id": "40SrmzDHlE+b8gt7GsfedK"
+  },
   {
     "__type__": "cc.SceneGlobals",
     "ambient": {
-      "__id__": 20
-    },
-    "shadows": {
       "__id__": 21
     },
-    "_skybox": {
+    "shadows": {
       "__id__": 22
     },
-    "fog": {
+    "_skybox": {
       "__id__": 23
     },
-    "octree": {
+    "fog": {
       "__id__": 24
     },
-    "skin": {
+    "octree": {
       "__id__": 25
     },
-    "lightProbeInfo": {
+    "skin": {
       "__id__": 26
     },
-    "postSettings": {
+    "lightProbeInfo": {
       "__id__": 27
     },
+    "postSettings": {
+      "__id__": 28
+    },
     "bakedWithStationaryMainLight": false,
     "bakedWithHighpLightmap": false
   },

assets/scenes/lobby.scene

@@ -52,7 +52,7 @@
     },
     "autoReleaseAssets": false,
     "_globals": {
-      "__id__": 130
+      "__id__": 132
     },
     "_id": "220f80f8-6216-4ec2-b63b-72365bcbfde9"
   },
@@ -77,14 +77,17 @@
     ],
     "_active": true,
     "_components": [
-      {
-        "__id__": 127
-      },
       {
         "__id__": 128
       },
       {
         "__id__": 129
+      },
+      {
+        "__id__": 130
+      },
+      {
+        "__id__": 131
       }
     ],
     "_prefab": null,
@@ -201,7 +204,7 @@
     "_priority": 1073741824,
     "_fov": 45,
     "_fovAxis": 0,
-    "_orthoHeight": 440.25052192066806,
+    "_orthoHeight": 360,
     "_near": 1,
     "_far": 2000,
     "_color": {
@@ -393,14 +396,14 @@
     ],
     "_active": true,
     "_components": [
-      {
-        "__id__": 124
-      },
       {
         "__id__": 125
       },
       {
         "__id__": 126
+      },
+      {
+        "__id__": 127
       }
     ],
     "_prefab": null,
@@ -2506,14 +2509,11 @@
         "__id__": 89
       },
       {
-        "__id__": 96
+        "__id__": 97
       }
     ],
     "_active": false,
     "_components": [
-      {
-        "__id__": 120
-      },
       {
         "__id__": 121
       },
@@ -2522,6 +2522,9 @@
       },
       {
         "__id__": 123
+      },
+      {
+        "__id__": 124
       }
     ],
     "_prefab": null,
@@ -3838,6 +3841,9 @@
       },
       {
         "__id__": 95
+      },
+      {
+        "__id__": 96
       }
     ],
     "_prefab": null,
@@ -4125,6 +4131,36 @@
     "_target": null,
     "_id": "1bWixPpVhKH4BH7jZqi17A"
   },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 89
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_alignFlags": 9,
+    "_target": null,
+    "_left": 30,
+    "_right": 0,
+    "_top": 30,
+    "_bottom": 0,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_alignMode": 1,
+    "_lockFlags": 0,
+    "_id": "b5v1cdlbtCGbKsnqi92Nyf"
+  },
   {
     "__type__": "cc.Node",
     "_name": "ResultOverlay",
@@ -4135,19 +4171,19 @@
     },
     "_children": [
       {
-        "__id__": 97
+        "__id__": 98
       },
       {
-        "__id__": 102
+        "__id__": 103
       }
     ],
     "_active": false,
     "_components": [
       {
-        "__id__": 118
+        "__id__": 119
       },
       {
-        "__id__": 119
+        "__id__": 120
       }
     ],
     "_prefab": null,
@@ -4186,14 +4222,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 96
+      "__id__": 97
     },
     "_children": [],
     "_active": true,
     "_components": [
-      {
-        "__id__": 98
-      },
       {
         "__id__": 99
       },
@@ -4202,6 +4235,9 @@
       },
       {
         "__id__": 101
+      },
+      {
+        "__id__": 102
       }
     ],
     "_prefab": null,
@@ -4240,7 +4276,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 97
+      "__id__": 98
     },
     "_enabled": true,
     "__prefab": null,
@@ -4262,7 +4298,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 97
+      "__id__": 98
     },
     "_enabled": true,
     "__prefab": null,
@@ -4274,13 +4310,13 @@
       "r": 0,
       "g": 0,
       "b": 0,
-      "a": 190
+      "a": 175
     },
     "_spriteFrame": {
-      "__uuid__": "aa33fa26-eeba-43bd-82ec-48e54101acf0@f9941",
+      "__uuid__": "2f738643-1367-4ae3-93a7-1424d71a2aa3@f9941",
       "__expectedType__": "cc.SpriteFrame"
     },
-    "_type": 1,
+    "_type": 0,
     "_fillType": 0,
     "_sizeMode": 0,
     "_fillCenter": {
@@ -4301,7 +4337,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 97
+      "__id__": 98
     },
     "_enabled": true,
     "__prefab": null,
@@ -4331,7 +4367,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 97
+      "__id__": 98
     },
     "_enabled": true,
     "__prefab": null,
@@ -4381,26 +4417,26 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 96
+      "__id__": 97
     },
     "_children": [
       {
-        "__id__": 103
+        "__id__": 104
       },
       {
-        "__id__": 106
+        "__id__": 107
       },
       {
-        "__id__": 109
+        "__id__": 110
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 116
+        "__id__": 117
       },
       {
-        "__id__": 117
+        "__id__": 118
       }
     ],
     "_prefab": null,
@@ -4439,16 +4475,16 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 102
+      "__id__": 103
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 104
+        "__id__": 105
       },
       {
-        "__id__": 105
+        "__id__": 106
       }
     ],
     "_prefab": null,
@@ -4487,7 +4523,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 103
+      "__id__": 104
     },
     "_enabled": true,
     "__prefab": null,
@@ -4509,7 +4545,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 103
+      "__id__": 104
     },
     "_enabled": true,
     "__prefab": null,
@@ -4571,16 +4607,16 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 102
+      "__id__": 103
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 107
+        "__id__": 108
       },
       {
-        "__id__": 108
+        "__id__": 109
       }
     ],
     "_prefab": null,
@@ -4619,7 +4655,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 106
+      "__id__": 107
     },
     "_enabled": true,
     "__prefab": null,
@@ -4641,7 +4677,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 106
+      "__id__": 107
     },
     "_enabled": true,
     "__prefab": null,
@@ -4703,23 +4739,23 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 102
+      "__id__": 103
     },
     "_children": [
       {
-        "__id__": 110
+        "__id__": 111
       }
     ],
     "_active": true,
     "_components": [
-      {
-        "__id__": 113
-      },
       {
         "__id__": 114
       },
       {
         "__id__": 115
+      },
+      {
+        "__id__": 116
       }
     ],
     "_prefab": null,
@@ -4758,16 +4794,16 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 109
+      "__id__": 110
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 111
+        "__id__": 112
       },
       {
-        "__id__": 112
+        "__id__": 113
       }
     ],
     "_prefab": null,
@@ -4806,7 +4842,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 110
+      "__id__": 111
     },
     "_enabled": true,
     "__prefab": null,
@@ -4828,7 +4864,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 110
+      "__id__": 111
     },
     "_enabled": true,
     "__prefab": null,
@@ -4890,7 +4926,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 109
+      "__id__": 110
     },
     "_enabled": true,
     "__prefab": null,
@@ -4912,7 +4948,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 109
+      "__id__": 110
     },
     "_enabled": true,
     "__prefab": null,
@@ -4951,7 +4987,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 109
+      "__id__": 110
     },
     "_enabled": true,
     "__prefab": null,
@@ -5013,7 +5049,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 102
+      "__id__": 103
     },
     "_enabled": true,
     "__prefab": null,
@@ -5035,7 +5071,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 102
+      "__id__": 103
     },
     "_enabled": true,
     "__prefab": null,
@@ -5074,7 +5110,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 96
+      "__id__": 97
     },
     "_enabled": true,
     "__prefab": null,
@@ -5096,7 +5132,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 96
+      "__id__": 97
     },
     "_enabled": true,
     "__prefab": null,
@@ -5187,7 +5223,7 @@
       "__expectedType__": "cc.Prefab"
     },
     "library": {
-      "__id__": 123
+      "__id__": 124
     },
     "cardLayer": {
       "__id__": 70
@@ -5211,19 +5247,22 @@
       "__id__": 87
     },
     "resultOverlay": {
-      "__id__": 96
+      "__id__": 97
     },
     "resultTitle": {
-      "__id__": 105
+      "__id__": 106
     },
     "resultBody": {
-      "__id__": 108
+      "__id__": 109
     },
     "quitButton": {
       "__id__": 95
     },
     "continueButton": {
-      "__id__": 115
+      "__id__": 116
+    },
+    "actionBar": {
+      "__id__": 73
     },
     "_id": "32Ab2W4RxAtq2xtNnUvmwD"
   },
@@ -5357,7 +5396,7 @@
       "__id__": 57
     },
     "game": {
-      "__id__": 122
+      "__id__": 123
     },
     "lobbyRoot": {
       "__id__": 11
@@ -5367,32 +5406,62 @@
     },
     "_id": "22OiWnMc9D4ZJbf0K7s057"
   },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 1280,
+    "_originalHeight": 720,
+    "_alignMode": 1,
+    "_lockFlags": 0,
+    "_id": "3exRW7a2NAj6hVopBJoZVR"
+  },
   {
     "__type__": "cc.SceneGlobals",
     "ambient": {
-      "__id__": 131
-    },
-    "shadows": {
-      "__id__": 132
-    },
-    "_skybox": {
       "__id__": 133
     },
-    "fog": {
+    "shadows": {
       "__id__": 134
     },
-    "octree": {
+    "_skybox": {
       "__id__": 135
     },
-    "skin": {
+    "fog": {
       "__id__": 136
     },
-    "lightProbeInfo": {
+    "octree": {
       "__id__": 137
     },
-    "postSettings": {
+    "skin": {
       "__id__": 138
     },
+    "lightProbeInfo": {
+      "__id__": 139
+    },
+    "postSettings": {
+      "__id__": 140
+    },
     "bakedWithStationaryMainLight": false,
     "bakedWithHighpLightmap": false
   },

assets/scripts/ui/common/Theme.ts

@@ -37,27 +37,57 @@ export const Layout = {
     screenMargin: 40,
 
     /**
-     * Where things sit on the table, in canvas coordinates (origin at the
+     * Fixed anchors, in canvas coordinates (origin at the centre, y up).
-     * centre, y up). Vertical positions stay well inside the 1080×1920 design
+     *
-     * area so that a 4:3 screen — which crops the top and bottom — still shows
+     * Every one of these is inside ±700, because the widest screen the game
-     * every one of them. See docs/DECISIONS.md.
+     * supports is 4:3, and fit-width means a 4:3 phone sees only 1440 design
+     * units of height — ±720 from the centre. Anything outside that band is
+     * simply not on screen for those players. The hand and the action bar are
+     * NOT here: they follow the bottom edge, see `bottomAnchors`.
      */
-    region: {
+    opponentLabelY: 630,
-        opponentHandY: 600,
+    opponentHandY: 500,
-        opponentLabelY: 770,
+    messageY: 355,
-        deck: { x: -390, y: 150 },
+    deck: { x: -395, y: 215 },
-        trump: { x: -300, y: 120 },
+    trump: { x: -300, y: 185 },
-        discard: { x: 430, y: 150 },
+    discard: { x: 430, y: 215 },
-        /** Centre of the first table row; the second row sits a row-height below. */
+    deckLabelY: 55,
-        tableTopY: -20,
+
-        tableRowStep: 235,
+    /**
-        tableColumnStep: 180,
+     * The table is one row of up to six slots rather than two rows of three.
-        messageY: 330,
+     * Six cards at 0.62 scale span 950 of the 1080 available units, and the row
-        actionBarY: -430,
+     * saves the ~215 units of height that a second row would cost — height the
-        playerHandY: -700,
+     * 4:3 layout cannot spare.
-    },
+     */
+    tableY: -30,
+    tableColumnStep: 170,
+    tableColumns: 6,
 } as const;
 
+/**
+ * The anchors that follow the bottom of the screen instead of the centre.
+ *
+ * The player's hand must be reachable by a thumb and fully visible whatever the
+ * screen's shape, so it is measured from the bottom edge rather than placed at
+ * a fixed design coordinate. On a tall 21:9 screen this simply leaves more felt
+ * between the table and the hand.
+ */
+export function bottomAnchors(halfHeight: number): { handY: number; actionBarY: number } {
+    const handY = -halfHeight + Layout.cardHeight / 2 + 24;
+    return { handY, actionBarY: handY + Layout.cardHeight / 2 + 85 };
+}
+
+/**
+ * Centre x of table slot `index` when `count` cards are down.
+ *
+ * The row is centred on what is actually in play, not on six fixed slots — a
+ * lone attacking card belongs in the middle of the table, not parked in the
+ * left-hand slot of an empty grid.
+ */
+export function tableSlotX(index: number, count: number): number {
+    return (index - (count - 1) / 2) * Layout.tableColumnStep;
+}
+
 export const Palette = {
     gold: new Color(244, 194, 69, 255),
     cream: new Color(247, 240, 222, 255),

assets/scripts/ui/game/GameScreen.ts

@@ -1,6 +1,6 @@
 import {
     _decorator, Button, Component, EventTouch, Label, Node, Prefab,
-    instantiate, tween, UIOpacity, v3, Vec3,
+    instantiate, tween, UIOpacity, UITransform, v3, Vec3,
 } from 'cc';
 import { Card } from '../../core/cards/Card';
 import { BasicBot } from '../../core/bot/BasicBot';
@@ -9,7 +9,7 @@ import { Action, ActionType, Actions, IllegalActionError } from '../../core/rule
 import { Phase, PlayerId } from '../../core/rules/GameState';
 import { legalActions } from '../../core/rules/DurakRules';
 import { intentFor } from '../../core/rules/intent';
-import { Layout, Palette, Timing } from '../common/Theme';
+import { bottomAnchors, Layout, Palette, tableSlotX, Timing } from '../common/Theme';
 import { Strings } from '../common/Strings';
 import { CardLibrary } from './CardLibrary';
 import { CardView } from './CardView';
@@ -79,6 +79,9 @@ export class GameScreen extends Component {
     @property({ type: Button, tooltip: 'Dismisses the result overlay.' })
     continueButton: Button | null = null;
 
+    @property({ type: Node, tooltip: 'Holds Take and Done; follows the bottom edge.' })
+    actionBar: Node | null = null;
+
     /** Set by `MainFlow`. */
     onFinished: ((outcome: MatchOutcome) => void) | null = null;
     onQuitRequested: (() => void) | null = null;
@@ -145,7 +148,12 @@ export class GameScreen extends Component {
     /** Releases every card node and forgets the match. Safe to call twice. */
     teardown(): void {
         this.unscheduleAllCallbacks();
-        for (const view of [...this._views.values(), ...this._anonymous]) {
+        // Array.from, not [...map.values()]. The build transpiles array spread
+        // to [].concat(...), which appends a Map iterator as a single element
+        // instead of expanding it — so the loop would run once over the iterator
+        // itself. See docs/DECISIONS.md.
+        const live = Array.from(this._views.values()).concat(this._anonymous);
+        for (const view of live) {
             view.cancelAnimations();
             this._recycle(view);
         }
@@ -289,6 +297,13 @@ export class GameScreen extends Component {
     // Rendering
     // -----------------------------------------------------------------------
 
+    /** Half the canvas height, which is how far the layout may reach from centre. */
+    private _halfHeight(): number {
+        const transform = this.node.getComponent(UITransform);
+        const height = transform && transform.height > 0 ? transform.height : Layout.designHeight;
+        return height / 2;
+    }
+
     /** Lays the whole table out from the current state, tweening over `duration`. */
     render(duration: number): void {
         const match = this._match;
@@ -298,16 +313,23 @@ export class GameScreen extends Component {
         const state = match.state;
         const view = match.viewFor(HUMAN);
         const live = new Set<Card>();
+        const anchors = bottomAnchors(this._halfHeight());
 
-        // Trump card, lying under the deck.
+        this._layOutHud(anchors.actionBarY);
+
+        // The trump card lies face up under the draw pile, turned sideways so the
+        // suit shows. _place lifts whatever it touches to the top of the layer,
+        // so it is pushed back down afterwards.
         if (state.deck.length > 0) {
             live.add(state.trumpCard);
             this._place(state.trumpCard, true,
-                v3(Layout.region.trump.x, Layout.region.trump.y, 0), 0.62, 90, duration);
+                v3(Layout.trump.x, Layout.trump.y, 0), Layout.tableCardScale, 90, duration);
+            this._views.get(state.trumpCard)?.node.setSiblingIndex(0);
         }
 
-        // The player's hand: a straight row, tightened as it grows.
+        // The player's hand: a straight row, tightened as it grows, and sitting
-        const hand = [...view.hand].sort(byTrumpThenRank(state.trumpSuit));
+        // against the bottom edge wherever that happens to be.
+        const hand = view.hand.slice().sort(byTrumpThenRank(state.trumpSuit));
         const step = Math.min(
             Layout.handStep,
             hand.length > 1 ? (Layout.handMaxWidth - Layout.cardWidth) / (hand.length - 1) : Layout.handStep,
@@ -317,15 +339,13 @@ export class GameScreen extends Component {
             live.add(card);
             const lifted = card === this._selected ? Layout.handLift : 0;
             this._place(card, true,
-                v3(handLeft + i * step, Layout.region.playerHandY + lifted, 0), 1, 0, duration);
+                v3(handLeft + i * step, anchors.handY + lifted, 0), 1, 0, duration);
         });
 
-        // The table: attacking cards with whatever beat them, three to a row.
+        // The table: one centred row of attacking cards, each with whatever beat it.
         state.table.forEach((slot, i) => {
-            const column = i % 3;
+            const x = tableSlotX(i, state.table.length);
-            const row = Math.floor(i / 3);
+            const y = Layout.tableY;
-            const x = (column - 1) * Layout.region.tableColumnStep;
-            const y = Layout.region.tableTopY - row * Layout.region.tableRowStep;
 
             live.add(slot.attack);
             this._place(slot.attack, true, v3(x, y, 0), Layout.tableCardScale, 0, duration);
@@ -343,6 +363,20 @@ export class GameScreen extends Component {
         this._renderChrome(view.opponents[0]?.handSize ?? 0);
     }
 
+    /**
+     * Puts the scene's fixed furniture where this screen shape wants it. Doing it
+     * here rather than in the scene keeps one source of truth for the layout, and
+     * the action bar has to move with the hand anyway.
+     */
+    private _layOutHud(actionBarY: number): void {
+        moveNodeY(this.actionBar, actionBarY);
+        moveNodeY(this.opponentLabel?.node ?? null, Layout.opponentLabelY);
+        moveNodeY(this.messageLabel?.node ?? null, Layout.messageY);
+        if (this.deckAnchor) {
+            this.deckAnchor.setPosition(Layout.deck.x, Layout.deckLabelY, 0);
+        }
+    }
+
     /** Face-down nodes: a short stack for the deck, and the opponent's hand. */
     private _renderAnonymous(deckSize: number, opponentHand: number, duration: number): void {
         // Three backs are enough to read as a pile; drawing twenty-four is waste.
@@ -358,8 +392,8 @@ export class GameScreen extends Component {
 
         for (let i = 0; i < deckBacks; i++) {
             this._anonymous[i].moveTo(
-                v3(Layout.region.deck.x + i * 3, Layout.region.deck.y + i * 3, 0),
+                v3(Layout.deck.x + i * 3, Layout.deck.y + i * 3, 0),
-                0.62, 0, duration,
+                Layout.tableCardScale, 0, duration,
             );
         }
 
@@ -367,7 +401,7 @@ export class GameScreen extends Component {
         const left = -step * (opponentHand - 1) / 2;
         for (let i = 0; i < opponentHand; i++) {
             this._anonymous[deckBacks + i].moveTo(
-                v3(left + i * step, Layout.region.opponentHandY, 0),
+                v3(left + i * step, Layout.opponentHandY, 0),
                 Layout.opponentCardScale, 0, duration,
             );
         }
@@ -409,7 +443,7 @@ export class GameScreen extends Component {
         if (!view) {
             view = this._take(card, faceUp);
             // A card appearing for the first time slides out of the deck.
-            view.moveTo(v3(Layout.region.deck.x, Layout.region.deck.y, 0), 0.62, 0, 0);
+            view.moveTo(v3(Layout.deck.x, Layout.deck.y, 0), Layout.tableCardScale, 0, 0);
             this._views.set(card, view);
         }
         view.flipTo(faceUp);
@@ -419,14 +453,15 @@ export class GameScreen extends Component {
 
     /** Cards that have left the visible table — they went to the discard or a hand. */
     private _retireCardsNotIn(live: Set<Card>, duration: number): void {
-        for (const [card, view] of [...this._views]) {
+        // Array.from, not [...map] — see the note in teardown.
+        for (const [card, view] of Array.from(this._views.entries())) {
             if (live.has(card)) continue;
             this._views.delete(card);
 
             const goingToOpponent = !this._match?.state.discard.includes(card);
             const target = goingToOpponent
-                ? v3(0, Layout.region.opponentHandY, 0)
+                ? v3(0, Layout.opponentHandY, 0)
-                : v3(Layout.region.discard.x, Layout.region.discard.y, 0);
+                : v3(Layout.discard.x, Layout.discard.y, 0);
 
             view.moveTo(target, 0.4, 0, duration);
             view.flipTo(false);
@@ -512,6 +547,12 @@ function setActive(node: Node | null, active: boolean): void {
     if (node) node.active = active;
 }
 
+function moveNodeY(node: Node | null, y: number): void {
+    if (node && node.position.y !== y) {
+        node.setPosition(node.position.x, y, 0);
+    }
+}
+
 function setButton(button: Button | null, enabled: boolean): void {
     if (!button) return;
     button.node.active = enabled;

docs/DECISIONS.md

@@ -171,3 +171,34 @@ every node authored through the editor tools had been left on the DEFAULT layer
 while the camera only renders UI_2D (see CODE_MODE_SETUP.md). A blank screen
 carries no information about which step failed, and a loader that can hang
 forever on an asset the lobby does not even need is a dead end for no reason.
+
+## 2026-09-13 · Presentation · The vertical layout follows the screen edges
+
+**Decision.** `Layout` holds fixed anchors only for things that live near the
+centre, and every one of those is inside ±700. The player's hand and the action
+bar are computed from the actual canvas height at render time (`bottomAnchors`),
+and the Leave button is pinned to the top-left with a Widget.
+
+**Why.** `fitWidth` means the width is always 1080 units but the height is not:
+a 4:3 phone sees 1440 units (±720) and a 21:9 phone sees 2520 (±1260). The first
+version used fixed design coordinates, which put the Leave button at y = 840 and
+the bottom of the hand at −860 — both off screen on a 4:3 phone, the very case
+docs/UI.md asks for. The table is also a single row of up to six slots rather
+than two rows of three, which buys back the ~215 units of height that 4:3 cannot
+spare, and the row is centred on the cards actually in play so a lone attacking
+card sits in the middle of the table.
+
+## 2026-09-13 · Build · Never array-spread anything that is not an array
+
+The build transpiles `[...a, ...b]` to `[].concat(a, b)`. That is right for
+arrays, but `Array.prototype.concat` does not expand an arbitrary iterable — it
+appends it as a single element. `[...this._views.values()]` therefore produced a
+one-element array holding the Map iterator, and the first card ever recycled
+threw `view.cancelAnimations is not a function`.
+
+**Decision.** Use `Array.from(...)` for anything that is not already an array,
+and `npm run check:spreads` fails the build on `...x.values()`, `...x.keys()`,
+`...x.entries()` and spreads of things named like a Map or Set.
+
+**Why.** It type-checks, it reads correctly, and it only fails at runtime on a
+real build — exactly the kind of mistake a static check earns its keep on.

docs/PLAN.md

@@ -80,21 +80,19 @@ progress. The Cocos layer only renders state and turns taps into actions.
 - [x] Return to lobby; start another match without a scene leak
 - [x] Leave-match button, which ends the match as a loss
 
-### M8 — Responsive and touch pass `[~]`
+### M8 — Responsive and touch pass `[x]`
 - [x] Fit-width canvas, safe-area root, widget-stretched background
-- [x] Every interactive element authored at or above the 120-unit minimum
+- [x] Every interactive element at or above the 120-unit minimum
       (buttons 330×140 and 560×150; hand cards expose ~128 units each)
-- [x] Vertical positions kept inside the 4:3 crop
+- [x] Hand and action bar follow the bottom edge; Leave pinned to the top-left
-- [ ] **Blocked:** seen at the extreme aspect ratios. Needs a machine that can
+- [x] Seen running at 4:3, 16:9 and 21:9 — `npm run serve` then `/_aspects`
-      actually run the build — see "What is and is not verified" in
-      [TECHNICAL.md](TECHNICAL.md)
 
-### M9 — Build verification and hand-off `[~]`
+### M9 — Build verification and hand-off `[x]`
 - [x] `web-mobile` build completes clean; command recorded in TECHNICAL.md
 - [x] Card art reaches the build and packs into a single 2048² atlas
 - [x] Every component reference in the scene verified populated
-- [ ] **Blocked:** the build seen running. The browser in this environment falls
+- [x] A full match played in a browser: deal, attack, defend, take, discard,
-      back to a software renderer that cannot start the engine's main loop
+      redraw, result overlay, statistics written and shown back in the lobby
 - [x] Android/iOS texture settings written up in TECHNICAL.md (they have to
       be applied once in the Inspector; they live in the `.meta` files)
 - [x] README
@@ -105,9 +103,13 @@ progress. The Cocos layer only renders state and turns taps into actions.
   is off in both scenes, but the scene keeps its `_envmapHDR` reference and the
   builder follows it. The editor tool server cannot write a null reference;
   clearing the field in the Inspector by hand would do it.
-- Nothing verifies the presentation layer automatically. The obvious next step is
+- Nothing verifies the presentation layer automatically. `npm run check:scenes`
-  a smoke test that boots the scene headlessly and asserts the card nodes land
+  and `npm run check:spreads` catch the two classes of mistake that have
-  where the layout says they should.
+  actually bitten, but a smoke test that boots the scene and asserts card
+  positions would cover more.
+- At 21:9 there is a lot of empty felt between the table and the hand. It reads
+  as roomy rather than broken, but the table could drift downwards on very tall
+  screens.
 
 ## Deliberately out of scope for iteration 1
 

docs/TECHNICAL.md

@@ -241,19 +241,34 @@ The card atlas is the only texture where this matters — 2048×2048 uncompresse
 is 16 MB of video memory, and ASTC 6×6 brings that to roughly 1.2 MB. Do it
 before the first device build.
 
-### What is and is not verified
+### Looking at it
-
-The rules, the bot and the save format are covered by `npm test` and are
-verified. The presentation layer is verified only as far as this environment
-allows: the project builds clean, every component reference in the scene is
-populated, and all 37 card sprites pack into one 2048² texture.
-
-It has **not** been seen running. The browser available here falls back to a
-software renderer that cannot start the Cocos main loop (`totalFrames` stays at
-0), so no screenshot of the actual game was possible. To check it by eye, open
-the project in Cocos Creator and press Preview, or serve `build/web-mobile` over
-HTTP — it is a static folder and needs no server features:
 
 ```bash
-npx http-server build/web-mobile -p 8123 -c-1
+npm run serve
 ```
+
+Serves `build/web-mobile` on http://localhost:8123, plus one route of its own:
+
+- `/_aspects` — the game in fixed-size iframes at 4:3, 16:9 and 21:9 portrait,
+  side by side. The engine resizes itself to fill whatever window it is in, so
+  an iframe is the only straightforward way to see the layout at a shape the
+  desktop window is not.
+- `/_aspects?only=16:9&h=690` — one viewport, which boots much faster than three.
+
+The layout has been checked this way at all three ratios, and a full match
+played through in the browser: deal, attack, defend, take, discard, redraw,
+result overlay, and the statistics written and read back in the lobby.
+
+### Three traps this project has already fallen into
+
+All three build and type-check cleanly, look right in the editor, and fail only
+at runtime. Each now has a guard; `npm run check` runs all of them.
+
+1. **Node layers.** `nodeCreate` puts nodes on DEFAULT; a Canvas camera renders
+   UI_2D only, so the build shows the camera's clear colour and nothing else.
+   The scene view renders every layer, so the editor looks fine.
+2. **The Canvas needs its own Widget.** Without one the Canvas keeps the size it
+   was authored at and every widget-stretched child inherits it.
+   `alignCanvasWithScreen` does not do this — it only adjusts the camera.
+3. **Array spread of a non-array.** The build turns `[...x]` into `[].concat(x)`,
+   which appends an iterator rather than expanding it. Use `Array.from`.

package.json

@@ -20,6 +20,8 @@
     "stats:bot": "vitest run --config vitest.stats.mts",
     "build:art": "node scripts/build-art.mjs",
     "check:scenes": "node scripts/check-scenes.mjs",
-    "check": "npm run check:core-purity && npm run check:scenes && npm run typecheck && npm test"
+    "check": "npm run check:core-purity && npm run check:spreads && npm run check:scenes && npm run typecheck && npm test",
+    "serve": "node scripts/serve-build.mjs",
+    "check:spreads": "node scripts/check-spreads.mjs"
   }
 }

scripts/build-art.mjs

@@ -96,6 +96,17 @@ function tableBackground() {
 </svg>`;
 }
 
+/**
+ * A plain opaque square, used as a full-screen dimmer behind dialogs. It has to
+ * be fully opaque so that tinting it decides the darkness — tinting an already
+ * translucent sprite multiplies the two and barely darkens anything.
+ */
+function fill() {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+  <rect width="8" height="8" fill="#ffffff"/>
+</svg>`;
+}
+
 /** Outline of a place where a card can go. Drawn under the table slots. */
 function cardSlot() {
     return `<svg xmlns="http://www.w3.org/2000/svg" width="${CARD_W}" height="${CARD_H}" viewBox="0 0 ${CARD_W} ${CARD_H}">
@@ -144,6 +155,7 @@ const DRAWINGS = {
     [`${CARDS_OUT}/card_back.png`]: cardBack(),
     [`${UI_OUT}/table_bg.png`]: tableBackground(),
     [`${UI_OUT}/card_slot.png`]: cardSlot(),
+    [`${UI_OUT}/fill.png`]: fill(),
     [`${UI_OUT}/panel.png`]: nineSlice({
         fill: '#062718', fillOpacity: 0.88, stroke: '#2f7a52', strokeWidth: 4, radius: 34,
     }),

scripts/check-scenes.mjs

@@ -49,6 +49,8 @@ function checkLayers(path, objects) {
     }
 }
 
+const ALIGN_ALL = 45; // top | bottom | left | right
+
 function checkCanvas(path, objects) {
     const canvases = objects.filter((o) => o && o.__type__ === 'cc.Canvas');
     if (path.endsWith('.scene') && canvases.length === 0) {
@@ -58,6 +60,27 @@ function checkCanvas(path, objects) {
         if (!canvas._cameraComponent) {
             problems.push(`${path}: a Canvas has no camera assigned`);
         }
+
+        // The Canvas node needs its own Widget stretched to all four edges. It
+        // is what keeps the Canvas the size of the screen; without it the Canvas
+        // keeps whatever size it was authored at (1280x720 by default) and every
+        // widget-stretched child inherits that wrong size. `alignCanvasWithScreen`
+        // does NOT do this — it only adjusts the camera.
+        const node = objects[canvas.node?.__id__];
+        const components = (node?._components ?? []).map((ref) => objects[ref.__id__]);
+        const widget = components.find((c) => c && c.__type__ === 'cc.Widget');
+
+        if (!widget) {
+            problems.push(
+                `${path}: the Canvas node has no cc.Widget, so it will not resize `
+                + `to the screen and every stretched child will be the wrong size`,
+            );
+        } else if (widget._alignFlags !== ALIGN_ALL) {
+            problems.push(
+                `${path}: the Canvas Widget is not stretched to all four edges `
+                + `(alignFlags ${widget._alignFlags}, expected ${ALIGN_ALL})`,
+            );
+        }
     }
 }
 

scripts/check-spreads.mjs

@@ -0,0 +1,64 @@
+// Flags array-spread of things that are not arrays.
+//
+//   npm run check:spreads
+//
+// The engine's build transpiles `[...a, ...b]` to `[].concat(a, b)`. That is
+// correct for arrays, but `Array.prototype.concat` does NOT expand an arbitrary
+// iterable — it appends it as a single element. So
+//
+//     for (const view of [...this._views.values()])   // Map iterator
+//
+// silently loops once, over the iterator object itself, and every property
+// access on it is undefined. It type-checks, it reads perfectly, and it only
+// fails at runtime on a real build. That cost a debugging session; hence this
+// check. Use `Array.from(...)` instead, which transpiles safely.
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+
+const ROOT = 'assets/scripts';
+
+/** Spreads of an iterator or collection, rather than an array. */
+const HAZARDS = [
+    { pattern: /\.\.\.[\w.$]*\.values\(\)/, what: '.values()' },
+    { pattern: /\.\.\.[\w.$]*\.keys\(\)/, what: '.keys()' },
+    { pattern: /\.\.\.[\w.$]*\.entries\(\)/, what: '.entries()' },
+    { pattern: /\.\.\.new (?:Map|Set)\b/, what: 'a new Map/Set' },
+    { pattern: /\.\.\.[\w.$]*(?:Map|Set)\b(?!\s*\()/, what: 'something named like a Map/Set' },
+];
+
+const offenders = [];
+
+function walk(dir) {
+    for (const entry of readdirSync(dir)) {
+        const path = join(dir, entry);
+        if (statSync(path).isDirectory()) walk(path);
+        else if (path.endsWith('.ts')) inspect(path);
+    }
+}
+
+function inspect(path) {
+    readFileSync(path, 'utf8').split('\n').forEach((line, index) => {
+        const code = line.trim();
+        if (code.startsWith('*') || code.startsWith('//')) return;
+
+        for (const { pattern, what } of HAZARDS) {
+            if (pattern.test(code)) {
+                offenders.push(`${path}:${index + 1}  spreads ${what} — use Array.from(...)\n      ${code}`);
+                return;
+            }
+        }
+    });
+}
+
+walk(ROOT);
+
+if (offenders.length > 0) {
+    console.error(
+        'Array spread of a non-array. The build turns [...x] into [].concat(x),\n'
+        + 'which appends an iterator instead of expanding it:\n - '
+        + offenders.join('\n - '),
+    );
+    process.exit(1);
+}
+
+console.log('spreads OK');

scripts/serve-build.mjs

@@ -0,0 +1,102 @@
+// Serves a build over HTTP for testing in a browser.
+//
+//   npm run serve            # build/web-mobile on http://localhost:8123
+//   npm run serve -- 9000    # a different port
+//
+// Also serves one route of its own, `/_aspects`, which loads the game in fixed
+// size iframes at the portrait extremes docs/UI.md asks for (4:3 to 21:9). The
+// engine resizes itself to fill whatever window it is in, so an iframe is the
+// only straightforward way to see the layout at a shape the desktop window is
+// not — and the harness lives here rather than in the build folder because a
+// rebuild wipes everything inside it.
+import { createServer } from 'node:http';
+import { readFile } from 'node:fs/promises';
+import { extname, join, normalize, resolve } from 'node:path';
+
+const ROOT = resolve(process.argv[3] ?? 'build/web-mobile');
+const PORT = Number(process.argv[2] ?? 8123);
+
+const TYPES = {
+    '.html': 'text/html; charset=utf-8',
+    '.js': 'text/javascript',
+    '.mjs': 'text/javascript',
+    '.json': 'application/json',
+    '.css': 'text/css',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.webp': 'image/webp',
+    '.wasm': 'application/wasm',
+    '.bin': 'application/octet-stream',
+};
+
+/** width:height as a portrait phone reports it, from the widest to the tallest. */
+const RATIOS = [
+    ['4:3 — widest', 3 / 4],
+    ['16:9', 9 / 16],
+    ['21:9 — tallest', 9 / 21],
+];
+
+function aspectsPage(height, only) {
+    // Booting three engines at once is slow enough to be painful; `?only=16:9`
+    // renders a single viewport when that is all you need.
+    const wanted = only
+        ? RATIOS.filter(([label]) => label.toLowerCase().startsWith(only.toLowerCase()))
+        : RATIOS;
+
+    const cells = (wanted.length > 0 ? wanted : RATIOS).map(([label, ratio]) => {
+        const width = Math.round(height * ratio);
+        return `<div class="cell">
+      <h2>${label} &mdash; ${width}&times;${height}</h2>
+      <iframe src="index.html" width="${width}" height="${height}" loading="eager"></iframe>
+    </div>`;
+    }).join('\n');
+
+    return `<!doctype html>
+<meta charset="utf-8">
+<title>Fool — portrait layout at 4:3, 16:9 and 21:9</title>
+<style>
+  body { margin: 0; background: #17181c; color: #ccd; font: 13px system-ui, sans-serif; }
+  .row { display: flex; gap: 18px; padding: 14px; align-items: flex-start; }
+  .cell h2 { font: 600 12px system-ui; margin: 0 0 6px; color: #8fa; text-align: center; }
+  iframe { border: 1px solid #3a3d45; background: #000; display: block; }
+</style>
+<div class="row">
+${cells}
+</div>`;
+}
+
+createServer(async (request, response) => {
+    const path = decodeURIComponent((request.url ?? '/').split('?')[0]);
+
+    if (path === '/_aspects' || path === '/_aspects.html') {
+        const query = new URL(request.url ?? '/', 'http://x').searchParams;
+        const height = Number(query.get('h')) || 760;
+        response.writeHead(200, { 'Content-Type': TYPES['.html'], 'Cache-Control': 'no-store' });
+        response.end(aspectsPage(height, query.get('only')));
+        return;
+    }
+
+    const file = join(ROOT, normalize(path === '/' ? '/index.html' : path));
+    if (!file.startsWith(ROOT)) {
+        response.writeHead(403);
+        response.end('forbidden');
+        return;
+    }
+
+    try {
+        const body = await readFile(file);
+        response.writeHead(200, {
+            'Content-Type': TYPES[extname(file)] ?? 'application/octet-stream',
+            'Cache-Control': 'no-store',
+        });
+        response.end(body);
+    } catch {
+        response.writeHead(404);
+        response.end('not found');
+    }
+}).listen(PORT, () => {
+    console.log(`serving ${ROOT}`);
+    console.log(`  game     http://localhost:${PORT}/`);
+    console.log(`  aspects  http://localhost:${PORT}/_aspects`);
+    console.log(`  one      http://localhost:${PORT}/_aspects?only=16:9&h=900`);
+});