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

Проверено вживую в 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
+31
View File
@@ -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.