The play area grew and shrank as cards entered and left play. Two slots
were sized independently of the cards that fill them: the pet zone
reserved 150px for a 162px battle card, and the empty-deck placeholder
kept its desktop 84x116 on phones where the face-down card is 56x78. So
each faint/reveal moved the arena 12px per side on desktop, and a deck
running dry moved it 38px per side on a phone.
Every arena slot now derives from one set of --unit-*/--deck-* metrics on
.battle, and holds that size whether or not a card occupies it. Measured
across a battle's states (no pets, both revealed, one fainted, fans of
apples, decks dry), the arena height spread goes from 24px desktop /
76px phone to 0.
Also hide the arena's horizontal scrollbar: a wide apple fan made it
appear and vanish mid-battle, and with a content-driven height that alone
jumped the arena by the scrollbar's thickness. Touch, trackpad and
shift+wheel still scroll it.
- End-of-battle result is now a centered dialog (Victory/Defeat/Draw) with
'Next round' and 'Not yet'; 'Not yet' dismisses it to rewatch the battle,
and a toolbar button remains to advance. A modal is always fully on screen,
fixing the next-round button being unreachable below the arena on phones.
- Also make the play area genuinely scrollable on phones (stretch the body
so table-main's overflow can engage) as a safety net.
- Collapse the 5-button playback speed picker into one button that cycles
through the options, keeping the battle controls on a single row.
- Topbar: show the round as a die face (1-6 pips) on all screens, move the
room code and Leave into a '...' dropdown menu, and drop the wordmark on
phones so the rail stays one row (die + players + menu).
- On phones, strip battle cards to art + power/damage + name (no suit, tier,
or ability text); the magnified view still shows the full card.
Lock the app to the viewport on screens <=600px wide so the page itself
never scrolls: the topbar becomes a slim rail and the play area fills the
rest. Cards, trays, and type shrink so a shop round or a battle fits on
one screen; the shop and deck rows scroll sideways when a full six-pet
deck outgrows the width, keeping each tray's height fixed. Arrange is the
one screen allowed to scroll past the viewport, since a battle line can
run long.
Prev/next/play-pause/restart and a step counter let a player walk the
battle log manually and replay it before hitting Next. Local-only view
state; nothing is shared or sent to the server.
Record each seat's arranged lineup on the battle result (already public)
and reveal the full deck in a popover when hovering a deck pile in the
battle view — the opponent's included.
Emit the individual rock-die faces (0/0/1/1/2/2) from the battle
resolver so the client can render a real CSS 3D cube per die that
tumbles and settles on the rolled face, replacing the flat random
damage number. Falls back to the flying-rock cue for older battle logs
without per-die data.
Greyson Parrelli