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

Проверено вживую в 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
+14 -12
View File
@@ -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
- [ ] **Blocked:** seen at the extreme aspect ratios. Needs a machine that can
actually run the build — see "What is and is not verified" in
[TECHNICAL.md](TECHNICAL.md)
- [x] Hand and action bar follow the bottom edge; Leave pinned to the top-left
- [x] Seen running at 4:3, 16:9 and 21:9 — `npm run serve` then `/_aspects`
### 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
back to a software renderer that cannot start the engine's main loop
- [x] A full match played in a browser: deal, attack, defend, take, discard,
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
a smoke test that boots the scene headlessly and asserts the card nodes land
where the layout says they should.
- Nothing verifies the presentation layer automatically. `npm run check:scenes`
and `npm run check:spreads` catch the two classes of mistake that have
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