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

Проверено вживую в 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>
This commit is contained in:
ftc
2026-09-13 12:41:47 +03:00
co-authored by Claude Opus 5
parent 43f5bc5df3
commit 7fbe4c324d
14 changed files with 710 additions and 152 deletions
+28 -13
View File
@@ -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
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:
### Looking at it
```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`.