Игра запускается и играется: три рантайм-бага и адаптивная вёрстка
Проверено вживую в 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:
Claude Opus 5
Binary file not shown.
|
After Width: | Height: | Size: 93 B |
@@ -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"
|
||||
}
|
||||
}
|
||||
+44
-11
@@ -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
@@ -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
|
||||
},
|
||||
|
||||
@@ -37,27 +37,57 @@ export const Layout = {
|
||||
screenMargin: 40,
|
||||
|
||||
/**
|
||||
* Where things sit on the table, in canvas coordinates (origin at the
|
||||
* 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 them. See docs/DECISIONS.md.
|
||||
* Fixed anchors, in canvas coordinates (origin at the centre, y up).
|
||||
*
|
||||
* Every one of these is inside ±700, because the widest screen the game
|
||||
* 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: {
|
||||
opponentHandY: 600,
|
||||
opponentLabelY: 770,
|
||||
deck: { x: -390, y: 150 },
|
||||
trump: { x: -300, y: 120 },
|
||||
discard: { x: 430, y: 150 },
|
||||
/** Centre of the first table row; the second row sits a row-height below. */
|
||||
tableTopY: -20,
|
||||
tableRowStep: 235,
|
||||
tableColumnStep: 180,
|
||||
messageY: 330,
|
||||
actionBarY: -430,
|
||||
playerHandY: -700,
|
||||
},
|
||||
opponentLabelY: 630,
|
||||
opponentHandY: 500,
|
||||
messageY: 355,
|
||||
deck: { x: -395, y: 215 },
|
||||
trump: { x: -300, y: 185 },
|
||||
discard: { x: 430, y: 215 },
|
||||
deckLabelY: 55,
|
||||
|
||||
/**
|
||||
* The table is one row of up to six slots rather than two rows of three.
|
||||
* Six cards at 0.62 scale span 950 of the 1080 available units, and the row
|
||||
* saves the ~215 units of height that a second row would cost — height the
|
||||
* 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),
|
||||
|
||||
@@ -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.
|
||||
const hand = [...view.hand].sort(byTrumpThenRank(state.trumpSuit));
|
||||
// The player's hand: a straight row, tightened as it grows, and sitting
|
||||
// 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 row = Math.floor(i / 3);
|
||||
const x = (column - 1) * Layout.region.tableColumnStep;
|
||||
const y = Layout.region.tableTopY - row * Layout.region.tableRowStep;
|
||||
const x = tableSlotX(i, state.table.length);
|
||||
const y = Layout.tableY;
|
||||
|
||||
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),
|
||||
0.62, 0, duration,
|
||||
v3(Layout.deck.x + i * 3, Layout.deck.y + i * 3, 0),
|
||||
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(Layout.region.discard.x, Layout.region.discard.y, 0);
|
||||
? v3(0, Layout.opponentHandY, 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;
|
||||
|
||||
@@ -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.
|
||||
|
||||
+14
-12
@@ -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
|
||||
|
||||
|
||||
+28
-13
@@ -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`.
|
||||
|
||||
+3
-1
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
}),
|
||||
|
||||
@@ -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})`,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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');
|
||||
@@ -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} — ${width}×${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`);
|
||||
});
|
||||
Reference in New Issue
Block a user