ducoterra
95ca3fd1fa
**Final report — phase 07 final verification pass** - **Verified:** all 5 tasks present in `complete/`; app boots (`/healthz` 200, `/` 200, static + atlas + `/api/levels` served); `docs/CLIENT.md` module map matches the on-disk `app/static/` tree; no code defects found. - **Tests/lint/coverage:** `bash .agents/validate.sh` → ruff clean, pyright 0 errors, `undercooked-levels validate` pass, **full pytest 1838 passed, 97.21% coverage (floor 90%)**, slow sim stage 2 passed, repo hygiene clean. `uv run pytest tests/e2e -q` → **53 passed** (all 8 suites added this phase). - **Criteria:** (1) two tabs create→join→ready→start→serve one dish, keyboard only — green via `test_us01/02/03/04` ✔; (2) e2e green ✔; (3) canvas non-blank, pixels change after a move — `test_us04_render_smoke` ✔; (4) HUD score within 200 ms of the `served` event — asserted, green ✔; (5) zero console errors + zero off-origin requests — `test_atlas_loads` / `test_us01_landing_surface` ✔; (6) `docs/CLIENT.md` matches layout ✔; (7) 100% suite + 97.21% ✔; (8) docs pass below ✔; (9) no regression in completed phases (all prior suites green) ✔. - **README.md fixed:** status still said "next pending phase is 07" → now 07 complete, 08 pending; the phase-07 client text buried in the phase-05 bullet → its own "canvas client, art, HUD (phase 07)" bullet; stale "What does not exist yet" (claimed movement/controls missing) → rewritten to phases 08–14; "once the room flow ships" → "live in the browser today"; Layout `app/static/` "renderer arrives with the rest of phase 07" → full shipped-client map; Layout `docs/` "CLIENT lands with phase 07" → `CLIENT.md` listed; added `gen_art_index.py` Layout entry. - **AGENTS.md fixed:** "the eight screens" (7 listed) → "the seven screens" (+ `dom.js` is the shared builder, not a screen); e2e naming line → notes the non-story guard `test_atlas_loads.py`. - **Decisions:** no code changes were needed; only the two doc fixes above. Docs re-verified by `test_docs_commands`/`test_docs_index` (44 passed) plus the final full gate. - **Next pending phase:** `08_client_prediction_and_touch`.
663 lines
12 KiB
CSS
663 lines
12 KiB
CSS
/* Undercooked — screen styles (phase 07 task 02).
|
|
*
|
|
* Rules this file must keep (base.css's, extended):
|
|
* - every byte is same-origin: no @import, no web fonts, no remote images (A12);
|
|
* - the palette, spacing and type scale exist only as base.css custom properties,
|
|
* so a `[data-palette]` swap (e.g. `data-palette="cb"` for the colourblind-safe
|
|
* alternate in assets/palette.css) recolours the screens automatically;
|
|
* - 44x44 minimum hit targets (base.css --uc-hit) on every interactive control;
|
|
* - the layout is fluid from a 360px phone to a 4K desktop without breakpoints;
|
|
* - motion is decorative: prefers-reduced-motion turns all of it off;
|
|
* - visible focus rings: base.css's :focus-visible rule covers every element here.
|
|
*/
|
|
|
|
.screen-root {
|
|
display: grid;
|
|
justify-items: center;
|
|
}
|
|
|
|
/* The screens share the phase-01 panel skin; each owns its content. */
|
|
.panel.lobby,
|
|
.panel.result,
|
|
.panel.error,
|
|
.panel.connecting,
|
|
.panel.countdown {
|
|
max-width: 40rem;
|
|
}
|
|
|
|
.section-label {
|
|
margin: 0;
|
|
font-size: var(--uc-step--1);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--uc-ink-muted);
|
|
}
|
|
|
|
/* ------------------------------------------------------------- landing */
|
|
|
|
.join-field {
|
|
display: grid;
|
|
gap: var(--uc-space-1);
|
|
flex: 1 1 10rem;
|
|
}
|
|
|
|
/* ------------------------------------------------------------- connecting */
|
|
|
|
.connecting {
|
|
text-align: center;
|
|
}
|
|
|
|
#connecting-text {
|
|
margin: 0;
|
|
font-size: var(--uc-step-1);
|
|
}
|
|
|
|
/* ------------------------------------------------------------- lobby */
|
|
|
|
.lobby-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--uc-space-2);
|
|
}
|
|
|
|
.room-code {
|
|
margin: 0;
|
|
font-family: var(--uc-font-ui);
|
|
font-size: var(--uc-step-2);
|
|
font-weight: 800;
|
|
letter-spacing: 0.3em;
|
|
color: var(--uc-accent);
|
|
}
|
|
|
|
.code-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--uc-space-2);
|
|
}
|
|
|
|
.seat-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
gap: var(--uc-space-1);
|
|
}
|
|
|
|
.seat {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--uc-space-1);
|
|
min-height: calc(var(--uc-hit) - 12px);
|
|
padding: 0 var(--uc-space-2);
|
|
background: var(--uc-bg);
|
|
border: 1px solid var(--uc-line);
|
|
border-radius: var(--uc-radius);
|
|
}
|
|
|
|
.chip {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 50%;
|
|
flex: none;
|
|
border: 1px solid var(--uc-line);
|
|
}
|
|
|
|
/* The 4-colour seat palette (server/seats.py `SEAT_PALETTE`,
|
|
* docs/PROTOCOL.md "Lobby"). Colours ride on classes, not inline
|
|
* `style` attributes — the CSP's `style-src 'self'` blocks the
|
|
* latter (a console error). */
|
|
.chip-red {
|
|
background: #e5484d;
|
|
}
|
|
|
|
.chip-blue {
|
|
background: #3b9eff;
|
|
}
|
|
|
|
.chip-green {
|
|
background: #3ddc84;
|
|
}
|
|
|
|
.chip-amber {
|
|
background: #ffb224;
|
|
}
|
|
|
|
.seat-index {
|
|
color: var(--uc-ink-muted);
|
|
font-size: var(--uc-step--1);
|
|
}
|
|
|
|
.seat-name {
|
|
flex: 1;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.crown {
|
|
color: var(--uc-accent);
|
|
font-size: var(--uc-step-1);
|
|
}
|
|
|
|
.ready-badge,
|
|
.ghost-badge {
|
|
font-size: var(--uc-step--1);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
padding: 0.1rem 0.5rem;
|
|
border-radius: var(--uc-radius);
|
|
border: 1px solid var(--uc-line);
|
|
}
|
|
|
|
.ready-badge {
|
|
color: var(--uc-accent-ink);
|
|
background: var(--uc-accent);
|
|
border-color: var(--uc-accent);
|
|
}
|
|
|
|
.ghost-badge {
|
|
color: var(--uc-ink-muted);
|
|
}
|
|
|
|
.lobby-controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--uc-space-2);
|
|
}
|
|
|
|
#ready-btn {
|
|
min-width: 12rem;
|
|
}
|
|
|
|
.level-pick {
|
|
display: grid;
|
|
gap: var(--uc-space-1);
|
|
}
|
|
|
|
#level-picker {
|
|
min-height: var(--uc-hit);
|
|
padding: 0 var(--uc-space-2);
|
|
background: var(--uc-bg);
|
|
color: var(--uc-ink);
|
|
border: 1px solid var(--uc-line);
|
|
border-radius: var(--uc-radius);
|
|
font: inherit;
|
|
}
|
|
|
|
#level-picker:disabled {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
#start-btn:disabled {
|
|
opacity: 0.55;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.session {
|
|
margin-top: var(--uc-space-2);
|
|
}
|
|
|
|
.session h3 {
|
|
margin: 0 0 var(--uc-space-1);
|
|
font-size: var(--uc-step-0);
|
|
}
|
|
|
|
.session p,
|
|
.session li {
|
|
margin: 0;
|
|
}
|
|
|
|
.bests {
|
|
margin: var(--uc-space-1) 0 0;
|
|
padding-left: 1.25rem;
|
|
display: grid;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
#spectator-note {
|
|
margin: var(--uc-space-2) 0 0;
|
|
}
|
|
|
|
#lobby-banner {
|
|
margin: var(--uc-space-2) 0 0;
|
|
}
|
|
|
|
/* ------------------------------------------------------------- countdown */
|
|
|
|
.countdown {
|
|
text-align: center;
|
|
}
|
|
|
|
.countdown-num {
|
|
margin: 0;
|
|
font-family: var(--uc-font-ui);
|
|
font-size: clamp(5rem, 20vw, 11rem);
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
color: var(--uc-accent);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.countdown-num {
|
|
animation: countdown-pulse 1s var(--uc-ease);
|
|
}
|
|
|
|
@keyframes countdown-pulse {
|
|
from {
|
|
transform: scale(1.25);
|
|
opacity: 0.4;
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------------------------------- play */
|
|
|
|
.play-screen {
|
|
display: grid;
|
|
gap: var(--uc-space-2);
|
|
width: 100%;
|
|
max-width: 46rem;
|
|
}
|
|
|
|
.play-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--uc-space-2);
|
|
}
|
|
|
|
#play-banner {
|
|
margin: 0;
|
|
}
|
|
|
|
#kcanvas {
|
|
width: 100%;
|
|
aspect-ratio: 2 / 1;
|
|
background: var(--uc-bg);
|
|
border: 1px solid var(--uc-line);
|
|
border-radius: var(--uc-radius);
|
|
}
|
|
|
|
.hud {
|
|
min-height: calc(var(--uc-hit) - 8px);
|
|
}
|
|
|
|
/* The HUD (task 04): the order rail, the score bar, the timer, the
|
|
status row. The timer's colour bands carry a non-colour cue too:
|
|
`low` (amber) and `critical` (red) each add a striped background
|
|
and a label word (`hurry` / `now`). */
|
|
|
|
.hud-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 1fr) auto;
|
|
gap: var(--uc-space-2);
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
.hud-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.hud-orders .section-label {
|
|
margin: 0 0 var(--uc-space-1);
|
|
}
|
|
|
|
.ticket-list {
|
|
display: grid;
|
|
gap: var(--uc-space-1);
|
|
}
|
|
|
|
.ticket {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
grid-template-rows: auto auto;
|
|
align-items: center;
|
|
gap: 2px var(--uc-space-1);
|
|
padding: var(--uc-space-1) var(--uc-space-2);
|
|
background: var(--uc-surface-2);
|
|
border: 1px solid var(--uc-line);
|
|
border-radius: var(--uc-radius);
|
|
}
|
|
|
|
.ticket.oldest {
|
|
border-color: var(--uc-accent);
|
|
box-shadow: 0 0 0 1px var(--uc-accent);
|
|
}
|
|
|
|
.ticket-icon {
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
grid-row: span 2;
|
|
}
|
|
|
|
.ticket-pts {
|
|
font-family: var(--uc-font-ui);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ticket-bar {
|
|
grid-column: 2 / 4;
|
|
height: 0.4rem;
|
|
background: var(--uc-bg);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ticket-bar-fill {
|
|
height: 100%;
|
|
background: var(--uc-accent);
|
|
}
|
|
|
|
.hud-score-line {
|
|
margin: 0;
|
|
font-family: var(--uc-font-ui);
|
|
}
|
|
|
|
.hud-streak {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
margin-left: var(--uc-space-1);
|
|
color: var(--uc-accent);
|
|
}
|
|
|
|
.hud-streak img {
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
}
|
|
|
|
.score-bar {
|
|
margin-top: var(--uc-space-1);
|
|
height: 0.5rem;
|
|
background: var(--uc-bg);
|
|
border: 1px solid var(--uc-line);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.score-bar-fill {
|
|
height: 100%;
|
|
background: var(--uc-accent);
|
|
}
|
|
|
|
.hud-timer {
|
|
padding: var(--uc-space-1) var(--uc-space-2);
|
|
border: 1px solid var(--uc-line);
|
|
border-radius: var(--uc-radius);
|
|
font-family: var(--uc-font-ui);
|
|
font-size: var(--uc-step-1);
|
|
min-width: 5.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* The non-colour halves: the striped background + the label word. */
|
|
|
|
.hud-timer-low {
|
|
color: var(--uc-accent);
|
|
border-color: var(--uc-accent);
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
transparent 0 0.5rem,
|
|
color-mix(in srgb, var(--uc-accent) 18%, transparent) 0.5rem 1rem
|
|
);
|
|
}
|
|
|
|
.hud-timer-critical {
|
|
color: var(--uc-danger);
|
|
border-color: var(--uc-danger);
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
transparent 0 0.5rem,
|
|
color-mix(in srgb, var(--uc-danger) 22%, transparent) 0.5rem 1rem
|
|
);
|
|
}
|
|
|
|
.hud-timer-label {
|
|
margin-left: 0.4rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
font-size: var(--uc-step--1);
|
|
}
|
|
|
|
.hud-meta {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
align-content: start;
|
|
}
|
|
|
|
.hud-dirty,
|
|
.hud-conn {
|
|
font-family: var(--uc-font-ui);
|
|
}
|
|
|
|
.hud-conn.is-live {
|
|
color: var(--uc-ink-muted);
|
|
}
|
|
|
|
.hud-conn.is-down {
|
|
color: var(--uc-danger);
|
|
}
|
|
|
|
#hud-spectator {
|
|
margin: 0;
|
|
color: var(--uc-accent);
|
|
}
|
|
|
|
.emote-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--uc-space-1);
|
|
}
|
|
|
|
.emote {
|
|
min-width: var(--uc-hit);
|
|
min-height: var(--uc-hit);
|
|
padding: 0 var(--uc-space-2);
|
|
font-size: var(--uc-step-1);
|
|
}
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
background: color-mix(in srgb, var(--uc-bg) 82%, transparent);
|
|
z-index: 10;
|
|
}
|
|
|
|
.overlay p {
|
|
margin: 0;
|
|
padding: var(--uc-space-3);
|
|
background: var(--uc-surface);
|
|
border: 1px solid var(--uc-line);
|
|
border-radius: var(--uc-radius);
|
|
font-size: var(--uc-step-1);
|
|
}
|
|
|
|
/* ------------------------------------------------------------- result */
|
|
|
|
.result {
|
|
text-align: center;
|
|
}
|
|
|
|
#result-word {
|
|
font-size: var(--uc-step-2);
|
|
margin: 0;
|
|
}
|
|
|
|
.stars {
|
|
margin: var(--uc-space-1) 0;
|
|
font-size: var(--uc-step-2);
|
|
letter-spacing: 0.15em;
|
|
}
|
|
|
|
.star.filled {
|
|
color: var(--uc-accent);
|
|
}
|
|
|
|
.star {
|
|
color: var(--uc-line);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.star.filled {
|
|
animation: star-pop 600ms var(--uc-ease);
|
|
}
|
|
|
|
@keyframes star-pop {
|
|
from {
|
|
transform: scale(0.3);
|
|
}
|
|
60% {
|
|
transform: scale(1.3);
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
#score-line,
|
|
#best-line,
|
|
#counters-line {
|
|
margin: var(--uc-space-1) 0;
|
|
}
|
|
|
|
#result-players {
|
|
text-align: left;
|
|
}
|
|
|
|
.result-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: var(--uc-space-2);
|
|
margin-top: var(--uc-space-2);
|
|
}
|
|
|
|
/* ------------------------------------------------------------- error */
|
|
|
|
.error h2 {
|
|
margin: 0 0 var(--uc-space-1);
|
|
}
|
|
|
|
#error-detail,
|
|
#error-code {
|
|
margin: 0 0 var(--uc-space-2);
|
|
}
|
|
|
|
#error-code {
|
|
color: var(--uc-ink-muted);
|
|
font-family: var(--uc-font-ui);
|
|
letter-spacing: 0.15em;
|
|
}
|
|
|
|
.error-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--uc-space-2);
|
|
}
|
|
|
|
/* ------------------------------------------------------------- shared */
|
|
|
|
/* Screen-reader-only: the result announcement, focusable nowhere. */
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
/* ------------------------------------------------------------- help (task 05) */
|
|
|
|
/* The `?`-key in-game help: a body-level fixed overlay over the panel
|
|
skin, dismissed by its Close button, the backdrop click, or the
|
|
keyboard's `?`/`Esc` (the module's `Esc` branch defers to it while
|
|
it is open). The rows are `getKeyMap()`'s (the README's controls
|
|
section renders the same thing). */
|
|
.help-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100;
|
|
display: grid;
|
|
place-items: center;
|
|
background: color-mix(in srgb, var(--uc-bg) 72%, transparent);
|
|
}
|
|
|
|
.help-panel {
|
|
width: min(30rem, calc(100vw - 2 * var(--uc-space-3)));
|
|
margin: 0;
|
|
max-width: none;
|
|
}
|
|
|
|
.help-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--uc-space-2);
|
|
}
|
|
|
|
.help-heading {
|
|
font-size: var(--uc-step-1);
|
|
}
|
|
|
|
.help-rows {
|
|
display: grid;
|
|
gap: var(--uc-space-1);
|
|
}
|
|
|
|
.help-row {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: var(--uc-space-2);
|
|
align-items: baseline;
|
|
}
|
|
|
|
.help-keys {
|
|
font-family: var(--uc-font-ui);
|
|
font-size: var(--uc-step--1);
|
|
color: var(--uc-accent);
|
|
background: var(--uc-surface-2);
|
|
border: 1px solid var(--uc-line);
|
|
border-radius: calc(var(--uc-radius) / 2);
|
|
padding: 0.1rem 0.45rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.help-action {
|
|
color: var(--uc-ink);
|
|
}
|
|
|
|
.help-foot {
|
|
margin: 0;
|
|
color: var(--uc-ink-muted);
|
|
font-size: var(--uc-step--1);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.help-overlay {
|
|
animation: uc-help-fade 120ms var(--uc-ease);
|
|
}
|
|
}
|
|
|
|
@keyframes uc-help-fade {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
}
|