ftc/fool-cardgame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Проверено вживую в 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
Download Patch File Download Diff File Expand all files Collapse all files
assets/art/ui/fill.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 B

assets/art/ui/fill.png.meta
+134
View File
@@ -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"
}
}
assets/scenes/loader.scene
+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
},
assets/scenes/lobby.scene
+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
},
assets/scripts/ui/common/Theme.ts
+48 -18
View File
@@ -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),
assets/scripts/ui/game/GameScreen.ts
+61 -20
View File
@@ -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;