Skip to content

Phone layout for the game screens, camera-ready gate, tap-to-score as practice - #30

Merged
MsMarion merged 1 commit into
mainfrom
feature/phone-game-layout
Oct 18, 2026
Merged

MsMarion merged 1 commit into
mainfrom
feature/phone-game-layout

Conversation

@MsMarion

Copy link
Copy Markdown
Owner

No new design: the existing SignHero look, narrowed for phones. Desktop is unchanged.

What a phone shows (under 640 px wide)

  • The site stage is 480 px wide instead of a 1920 x 1080 canvas shrunk to a fifth; header and menu panel are compact, the desktop tab arch is hidden, and in-flow pages (sign in, hero name, profile) start below the header.
  • Lobby: same panel, START full width, one tip line: "prop your phone up so your hand fits in the camera".
  • In play (portrait): timer/score/hits row, "SHOW N" with the existing neon sign picture, the camera under it, and the status line. No letter grid.
  • Results: already fit; the report just gets a practice note when it applies.

Camera-ready gate (all screen sizes)

Hand tracking used to be loaded when the game started, so on a phone the clock ran while it was still compiling (about 6 s from connecting to the first frame in the last mobile game). It is now loaded in the lobby, and START says "STARTING CAMERA..." until the camera and tracking are ready. It opens up anyway if the camera or tracking fails, or after 20 s, so nobody is blocked.

Tap = practice

Tapping the shown sign scores (a fallback if the camera won't work), but that game is marked practice: the report says "PRACTICE GAME · NOT ON THE LEADERBOARD" and the server does not create a leaderboard entry (player.updateFinalStats takes practice; Player.practice is additive). Camera games are ranked as before. On desktop, clicking a tile is unchanged.

Tested

  • Unit 42/42 (incl. the phone breakpoint), account 31/31 (incl. a practice game stays off the leaderboard), tsc.
  • Browser suite: 7 new phone tests (header/lobby fit, gate, in-play layout with no grid, camera path ranked, camera refused, a real 30 s tap game ending practice and off the leaderboard, in-flow pages below the header) plus a no-hand-tracking case; 100 matrix rows. Locally with real MediaPipe the whole Whack-A-Sign file and the phone file pass.
  • Looked at it in a 375 px browser: lobby, in-play, report and sign-in.

Not in this PR: tablet-specific layout and a phone pass for songs/community (both still use the desktop stage).

… practice

On a phone (under 640 px) the site no longer shrinks a 1920 x 1080 stage to a fifth of its size:
the stage is 480 px wide, the header and menu panel are compact, and the desktop tab arch is hidden.
In play the camera is on top, then the sign to show (the existing neon sign picture) with no letter
grid. Tapping the sign still scores but makes the game a practice game: the report says so and it
is not put on the leaderboard (server rule, tested).

START now waits for the camera and hand tracking (loaded in the lobby instead of during the
countdown, which is what made a phone game start late), and opens up anyway if either fails or it
takes over 20 seconds. Desktop layout is unchanged.
@MsMarion
MsMarion merged commit c687f58 into main Oct 18, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant