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

Проверено вживую в 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
+44 -11
View File
@@ -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
},
+146 -77
View File
@@ -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
},