Experimental/undercooked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

phase: 07_canvas_client_and_hud

Browse Source 
**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`.
This commit is contained in:
ducoterra
2026-10-10 18:03:52 -04:00
parent f26849c1f3
commit 95ca3fd1fa
78 changed files with 13650 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/assets/cooks.svg
+116
View File
@@ -0,0 +1,116 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
<!-- Undercooked cooks (phase 07, task 01). Four bodies (cook-1..4),
each 4 facings x 2 walk frames; the torso colour is
`currentColor`, so a <use> recolors it: in the DOM through the
page's cook-colour CSS custom properties, in the canvas through
the var() fallback (app/static/assets/palette.css). The carry
overlay and the stun frame are shared. -->
<defs>
<ellipse id="shadow" cx="16" cy="29.5" rx="8" ry="1.8" fill="#1a1713" opacity="0.18"/>
<g id="legs-0">
<rect x="12.4" y="23" width="3.2" height="6" rx="1.4" fill="#4a4238"/>
<rect x="16.4" y="23" width="3.2" height="6" rx="1.4" fill="#4a4238"/>
</g>
<g id="legs-1">
<path d="M13.5 23 L10.8 28.8" stroke="#4a4238" stroke-width="3.2" stroke-linecap="round" fill="none"/>
<path d="M18.5 23 L21.2 28.8" stroke="#4a4238" stroke-width="3.2" stroke-linecap="round" fill="none"/>
</g>
<g id="chef-torso">
<rect x="10" y="14" width="12" height="11" rx="3" fill="currentColor"/>
<path d="M12 18.5 h8 v3.5 a4 3.4 0 0 1 -8 0 z" fill="#f2ede3"/>
</g>
<g id="chef-hat">
<path d="M11.4 8.6 a4.6 4.2 0 0 1 9.2 0 z" fill="#fbf7ee"/>
<circle cx="16" cy="5.4" r="2.8" fill="#fbf7ee"/>
<path d="M11.4 8.6 h9.2" stroke="#e2dbcb" stroke-width="1.2" stroke-linecap="round" fill="none"/>
</g>
<g id="chef-head-down">
<circle cx="16" cy="11" r="4.6" fill="#f2c9a0"/>
<use href="#chef-hat"/>
<circle cx="14.2" cy="10.6" r="0.75" fill="#3a322a"/>
<circle cx="17.8" cy="10.6" r="0.75" fill="#3a322a"/>
<path d="M15.2 13 q0.8 0.7 1.6 0" stroke="#c98a5e" stroke-width="0.9" stroke-linecap="round" fill="none"/>
</g>
<g id="chef-head-up">
<circle cx="16" cy="11" r="4.6" fill="#f2c9a0"/>
<use href="#chef-hat"/>
<path d="M12.6 13.4 q3.4 2 6.8 0" stroke="#e0b184" stroke-width="1" stroke-linecap="round" fill="none"/>
</g>
<g id="chef-head-right">
<circle cx="16" cy="11" r="4.6" fill="#f2c9a0"/>
<use href="#chef-hat"/>
<circle cx="18.9" cy="10.6" r="0.75" fill="#3a322a"/>
<path d="M18.4 13.2 q0.8 0.6 1.6 0" stroke="#c98a5e" stroke-width="0.9" stroke-linecap="round" fill="none"/>
</g>
<g id="chef-head-left">
<circle cx="16" cy="11" r="4.6" fill="#f2c9a0"/>
<use href="#chef-hat"/>
<circle cx="13.1" cy="10.6" r="0.75" fill="#3a322a"/>
<path d="M12 13.2 q0.8 0.6 1.6 0" stroke="#c98a5e" stroke-width="0.9" stroke-linecap="round" fill="none"/>
</g>
<g id="shape-up-0"><use href="#shadow"/><use href="#legs-0"/><use href="#chef-torso"/><use href="#chef-head-up"/></g>
<g id="shape-up-1"><use href="#shadow"/><use href="#legs-1"/><use href="#chef-torso"/><use href="#chef-head-up"/></g>
<g id="shape-right-0"><use href="#shadow"/><use href="#legs-0"/><use href="#chef-torso"/><use href="#chef-head-right"/></g>
<g id="shape-right-1"><use href="#shadow"/><use href="#legs-1"/><use href="#chef-torso"/><use href="#chef-head-right"/></g>
<g id="shape-down-0"><use href="#shadow"/><use href="#legs-0"/><use href="#chef-torso"/><use href="#chef-head-down"/></g>
<g id="shape-down-1"><use href="#shadow"/><use href="#legs-1"/><use href="#chef-torso"/><use href="#chef-head-down"/></g>
<g id="shape-left-0"><use href="#shadow"/><use href="#legs-0"/><use href="#chef-torso"/><use href="#chef-head-left"/></g>
<g id="shape-left-1"><use href="#shadow"/><use href="#legs-1"/><use href="#chef-torso"/><use href="#chef-head-left"/></g>
</defs>
<symbol id="cook-1-up-0" viewBox="0 0 32 32"><use href="#shape-up-0" style="color: var(--uc-cook-1, #e0533d)"/></symbol>
<symbol id="cook-1-up-1" viewBox="0 0 32 32"><use href="#shape-up-1" style="color: var(--uc-cook-1, #e0533d)"/></symbol>
<symbol id="cook-1-right-0" viewBox="0 0 32 32"><use href="#shape-right-0" style="color: var(--uc-cook-1, #e0533d)"/></symbol>
<symbol id="cook-1-right-1" viewBox="0 0 32 32"><use href="#shape-right-1" style="color: var(--uc-cook-1, #e0533d)"/></symbol>
<symbol id="cook-1-down-0" viewBox="0 0 32 32"><use href="#shape-down-0" style="color: var(--uc-cook-1, #e0533d)"/></symbol>
<symbol id="cook-1-down-1" viewBox="0 0 32 32"><use href="#shape-down-1" style="color: var(--uc-cook-1, #e0533d)"/></symbol>
<symbol id="cook-1-left-0" viewBox="0 0 32 32"><use href="#shape-left-0" style="color: var(--uc-cook-1, #e0533d)"/></symbol>
<symbol id="cook-1-left-1" viewBox="0 0 32 32"><use href="#shape-left-1" style="color: var(--uc-cook-1, #e0533d)"/></symbol>
<symbol id="cook-2-up-0" viewBox="0 0 32 32"><use href="#shape-up-0" style="color: var(--uc-cook-2, #3d84a8)"/></symbol>
<symbol id="cook-2-up-1" viewBox="0 0 32 32"><use href="#shape-up-1" style="color: var(--uc-cook-2, #3d84a8)"/></symbol>
<symbol id="cook-2-right-0" viewBox="0 0 32 32"><use href="#shape-right-0" style="color: var(--uc-cook-2, #3d84a8)"/></symbol>
<symbol id="cook-2-right-1" viewBox="0 0 32 32"><use href="#shape-right-1" style="color: var(--uc-cook-2, #3d84a8)"/></symbol>
<symbol id="cook-2-down-0" viewBox="0 0 32 32"><use href="#shape-down-0" style="color: var(--uc-cook-2, #3d84a8)"/></symbol>
<symbol id="cook-2-down-1" viewBox="0 0 32 32"><use href="#shape-down-1" style="color: var(--uc-cook-2, #3d84a8)"/></symbol>
<symbol id="cook-2-left-0" viewBox="0 0 32 32"><use href="#shape-left-0" style="color: var(--uc-cook-2, #3d84a8)"/></symbol>
<symbol id="cook-2-left-1" viewBox="0 0 32 32"><use href="#shape-left-1" style="color: var(--uc-cook-2, #3d84a8)"/></symbol>
<symbol id="cook-3-up-0" viewBox="0 0 32 32"><use href="#shape-up-0" style="color: var(--uc-cook-3, #7da84b)"/></symbol>
<symbol id="cook-3-up-1" viewBox="0 0 32 32"><use href="#shape-up-1" style="color: var(--uc-cook-3, #7da84b)"/></symbol>
<symbol id="cook-3-right-0" viewBox="0 0 32 32"><use href="#shape-right-0" style="color: var(--uc-cook-3, #7da84b)"/></symbol>
<symbol id="cook-3-right-1" viewBox="0 0 32 32"><use href="#shape-right-1" style="color: var(--uc-cook-3, #7da84b)"/></symbol>
<symbol id="cook-3-down-0" viewBox="0 0 32 32"><use href="#shape-down-0" style="color: var(--uc-cook-3, #7da84b)"/></symbol>
<symbol id="cook-3-down-1" viewBox="0 0 32 32"><use href="#shape-down-1" style="color: var(--uc-cook-3, #7da84b)"/></symbol>
<symbol id="cook-3-left-0" viewBox="0 0 32 32"><use href="#shape-left-0" style="color: var(--uc-cook-3, #7da84b)"/></symbol>
<symbol id="cook-3-left-1" viewBox="0 0 32 32"><use href="#shape-left-1" style="color: var(--uc-cook-3, #7da84b)"/></symbol>
<symbol id="cook-4-up-0" viewBox="0 0 32 32"><use href="#shape-up-0" style="color: var(--uc-cook-4, #b0699a)"/></symbol>
<symbol id="cook-4-up-1" viewBox="0 0 32 32"><use href="#shape-up-1" style="color: var(--uc-cook-4, #b0699a)"/></symbol>
<symbol id="cook-4-right-0" viewBox="0 0 32 32"><use href="#shape-right-0" style="color: var(--uc-cook-4, #b0699a)"/></symbol>
<symbol id="cook-4-right-1" viewBox="0 0 32 32"><use href="#shape-right-1" style="color: var(--uc-cook-4, #b0699a)"/></symbol>
<symbol id="cook-4-down-0" viewBox="0 0 32 32"><use href="#shape-down-0" style="color: var(--uc-cook-4, #b0699a)"/></symbol>
<symbol id="cook-4-down-1" viewBox="0 0 32 32"><use href="#shape-down-1" style="color: var(--uc-cook-4, #b0699a)"/></symbol>
<symbol id="cook-4-left-0" viewBox="0 0 32 32"><use href="#shape-left-0" style="color: var(--uc-cook-4, #b0699a)"/></symbol>
<symbol id="cook-4-left-1" viewBox="0 0 32 32"><use href="#shape-left-1" style="color: var(--uc-cook-4, #b0699a)"/></symbol>
<!-- The carrying overlay: one arm raised with the item slot ring; the
renderer draws the item sprite in the slot. -->
<symbol id="cook-carry" viewBox="0 0 32 32">
<path d="M19 17 l7 -5.5" stroke="#f2c9a0" stroke-width="3" stroke-linecap="round" fill="none"/>
<circle cx="27" cy="11" r="2.4" fill="#f2c9a0"/>
<circle cx="27" cy="9.6" r="4.6" fill="none" stroke="#cfc5b5" stroke-width="1" stroke-dasharray="2.4 2.2"/>
</symbol>
<!-- The stun frame: a dizzy swirl and a star. -->
<symbol id="cook-stun" viewBox="0 0 32 32">
<path d="M19.5 12.5 a3.5 3.5 0 1 1 -3.5 -3.5 a5 5 0 1 0 5 5" fill="none" stroke="#3a322a" stroke-width="1.4" stroke-linecap="round"/>
<path d="M16 2.6 l1 2.2 2.4 0.3 -1.8 1.6 0.5 2.3 -2.1 -1.2 -2.1 1.2 0.5 -2.3 -1.8 -1.6 2.4 -0.3 z" fill="#ffd95e"/>
</symbol>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

app/static/assets/fx.svg
+39
View File
@@ -0,0 +1,39 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
<!-- Undercooked transient FX (phase 07, task 01). One symbol per event
the sim can emit; the renderer plays them at the event position. -->
<symbol id="fx-chop" viewBox="0 0 32 32">
<path d="M10 16 L4 16 M16 10 L16 4 M22 16 L28 16 M12.5 11.5 L8.5 7.5 M19.5 11.5 L23.5 7.5" stroke="#ffd95e" stroke-width="2" stroke-linecap="round" fill="none"/>
</symbol>
<symbol id="fx-steam" viewBox="0 0 32 32">
<path d="M11 22 q1.4 -2.4 0 -4.8 q-1.4 -2.4 0 -4.8" stroke="#e8e2d4" stroke-width="1.8" stroke-linecap="round" fill="none" opacity="0.9"/>
<path d="M16 24 q1.4 -2.4 0 -4.8 q-1.4 -2.4 0 -4.8" stroke="#e8e2d4" stroke-width="1.8" stroke-linecap="round" fill="none" opacity="0.75"/>
<path d="M21 22 q1.4 -2.4 0 -4.8 q-1.4 -2.4 0 -4.8" stroke="#e8e2d4" stroke-width="1.8" stroke-linecap="round" fill="none" opacity="0.9"/>
</symbol>
<symbol id="fx-flame" viewBox="0 0 32 32">
<path d="M16 3.5 c3.4 3 5.4 5.6 5.4 8.6 a5.4 5.4 0 0 1 -10.8 0 c0 -3 2 -5.6 5.4 -8.6 z" fill="#ff5a4e"/>
<path d="M16 9 c1.8 1.8 3 3.2 3 4.8 a3 3 0 0 1 -6 0 c0 -1.6 1.2 -3 3 -4.8 z" fill="#ffa63d"/>
</symbol>
<symbol id="fx-splash" viewBox="0 0 32 32">
<path d="M16 8 c2 2.6 3.4 4.6 3.4 6.6 a3.4 3.4 0 0 1 -6.8 0 c0 -2 1.4 -4 3.4 -6.6 z" fill="#6fa8c9"/>
<path d="M8 18 q-1.5 2 0 3.4 M24 18 q1.5 2 0 3.4 M12 24.5 q-1 1.6 0 2.6 M20 24.5 q1 1.6 0 2.6" stroke="#6fa8c9" stroke-width="1.6" stroke-linecap="round" fill="none"/>
</symbol>
<symbol id="fx-deny" viewBox="0 0 32 32">
<path d="M9 9 L23 23 M23 9 L9 23" stroke="#ff5a4e" stroke-width="4" stroke-linecap="round" fill="none"/>
</symbol>
<symbol id="fx-score" viewBox="0 0 32 32">
<path d="M16 3 l2.6 6.4 6.9 0.8 -5.2 4.6 1.5 6.8 -5.8 -3.6 -5.8 3.6 1.5 -6.8 -5.2 -4.6 6.9 -0.8 z" fill="#ffd95e"/>
<path d="M16 11.5 v7 M12.8 15 h6.4" stroke="#8a6b45" stroke-width="1.8" stroke-linecap="round" fill="none"/>
</symbol>
<symbol id="fx-serve" viewBox="0 0 32 32">
<path d="M10 8 l1.2 2.8 2.8 1.2 -2.8 1.2 L10 16 l-1.2 -2.8 L6 12 l2.8 -1.2 z" fill="#fff7d6"/>
<path d="M22 14 l1 2.4 2.4 1 -2.4 1 L22 20.8 l-1 -2.4 -2.4 -1 2.4 -1 z" fill="#fff7d6"/>
<path d="M17 22 l0.8 1.8 1.8 0.8 -1.8 0.8 L17 27.2 l-0.8 -1.8 -1.8 -0.8 1.8 -0.8 z" fill="#ffd95e"/>
</symbol>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

app/static/assets/index.json
+527
View File
@@ -0,0 +1,527 @@
{
"cook-1-down-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-1-down-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-1-left-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-1-left-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-1-right-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-1-right-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-1-up-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-1-up-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-2-down-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-2-down-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-2-left-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-2-left-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-2-right-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-2-right-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-2-up-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-2-up-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-3-down-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-3-down-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-3-left-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-3-left-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-3-right-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-3-right-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-3-up-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-3-up-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-4-down-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-4-down-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-4-left-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-4-left-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-4-right-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-4-right-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-4-up-0": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-4-up-1": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-carry": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"cook-stun": {
"file": "cooks.svg",
"h": 32.0,
"w": 32.0
},
"fx-chop": {
"file": "fx.svg",
"h": 32.0,
"w": 32.0
},
"fx-deny": {
"file": "fx.svg",
"h": 32.0,
"w": 32.0
},
"fx-flame": {
"file": "fx.svg",
"h": 32.0,
"w": 32.0
},
"fx-score": {
"file": "fx.svg",
"h": 32.0,
"w": 32.0
},
"fx-serve": {
"file": "fx.svg",
"h": 32.0,
"w": 32.0
},
"fx-splash": {
"file": "fx.svg",
"h": 32.0,
"w": 32.0
},
"fx-steam": {
"file": "fx.svg",
"h": 32.0,
"w": 32.0
},
"item-dough-burnt": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-dough-chopped": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-dough-cooked": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-dough-cooking": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-dough-raw": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-fish-burnt": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-fish-chopped": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-fish-cooked": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-fish-cooking": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-fish-raw": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-lettuce-burnt": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-lettuce-chopped": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-lettuce-cooked": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-lettuce-cooking": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-lettuce-raw": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-onion-burnt": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-onion-chopped": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-onion-cooked": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-onion-cooking": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-onion-raw": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-patty-burnt": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-patty-chopped": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-patty-cooked": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-patty-cooking": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-patty-raw": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-plate-dirty": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-plate-plated": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-plate-raw": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-rice-burnt": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-rice-cooked": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-rice-cooking": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-rice-raw": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-tomato-burnt": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-tomato-chopped": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-tomato-cooked": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-tomato-cooking": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"item-tomato-raw": {
"file": "items.svg",
"h": 32.0,
"w": 32.0
},
"station-chop_board": {
"file": "stations.svg",
"h": 32.0,
"w": 32.0
},
"station-pan": {
"file": "stations.svg",
"h": 32.0,
"w": 32.0
},
"station-pot": {
"file": "stations.svg",
"h": 32.0,
"w": 32.0
},
"station-prep": {
"file": "stations.svg",
"h": 32.0,
"w": 32.0
},
"station-serve": {
"file": "stations.svg",
"h": 32.0,
"w": 32.0
},
"station-sink": {
"file": "stations.svg",
"h": 32.0,
"w": 32.0
},
"station-spawn_shelf": {
"file": "stations.svg",
"h": 32.0,
"w": 32.0
},
"station-stove": {
"file": "stations.svg",
"h": 32.0,
"w": 32.0
},
"station-stove-burning": {
"file": "stations.svg",
"h": 32.0,
"w": 32.0
},
"station-stove-off": {
"file": "stations.svg",
"h": 32.0,
"w": 32.0
},
"station-stove-ready": {
"file": "stations.svg",
"h": 32.0,
"w": 32.0
},
"station-stove-working": {
"file": "stations.svg",
"h": 32.0,
"w": 32.0
},
"station-trash": {
"file": "stations.svg",
"h": 32.0,
"w": 32.0
},
"tile-counter": {
"file": "tiles.svg",
"h": 32.0,
"w": 32.0
},
"tile-floor": {
"file": "tiles.svg",
"h": 32.0,
"w": 32.0
},
"tile-floor-1": {
"file": "tiles.svg",
"h": 32.0,
"w": 32.0
},
"tile-floor-2": {
"file": "tiles.svg",
"h": 32.0,
"w": 32.0
},
"tile-floor-3": {
"file": "tiles.svg",
"h": 32.0,
"w": 32.0
},
"tile-floor-4": {
"file": "tiles.svg",
"h": 32.0,
"w": 32.0
},
"tile-void": {
"file": "tiles.svg",
"h": 32.0,
"w": 32.0
},
"tile-wall": {
"file": "tiles.svg",
"h": 32.0,
"w": 32.0
},
"ui-crown": {
"file": "ui.svg",
"h": 32.0,
"w": 32.0
},
"ui-ghost": {
"file": "ui.svg",
"h": 32.0,
"w": 32.0
},
"ui-ready": {
"file": "ui.svg",
"h": 32.0,
"w": 32.0
},
"ui-star": {
"file": "ui.svg",
"h": 32.0,
"w": 32.0
},
"ui-streak": {
"file": "ui.svg",
"h": 32.0,
"w": 32.0
},
"ui-ticket": {
"file": "ui.svg",
"h": 32.0,
"w": 32.0
}
}
app/static/assets/items.svg
+202
View File
@@ -0,0 +1,202 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
<!-- Undercooked items (phase 07, task 01). Every ItemKind x reachable
ItemForm the simulation can produce (see tools/gen_art_index.py),
32x32. Shared geometry lives in <defs>; the per-kind colour rides
on `currentColor` so a <use> recolors it. -->
<defs>
<g id="grid-dice">
<rect x="8" y="11" width="7" height="7" rx="1.6" fill="currentColor"/>
<rect x="17" y="11" width="7" height="7" rx="1.6" fill="currentColor"/>
<rect x="8" y="20" width="7" height="7" rx="1.6" fill="currentColor"/>
<rect x="17" y="20" width="7" height="7" rx="1.6" fill="currentColor"/>
</g>
<g id="pot-steam">
<rect x="7" y="13.5" width="18" height="11.5" rx="3" fill="#8b8b8b"/>
<rect x="5.6" y="11.2" width="20.8" height="3.4" rx="1.7" fill="#a3a3a3"/>
<path d="M11 7 q1 -1.6 0 -3 M16 6.4 q1 -1.6 0 -3 M21 7 q1 -1.6 0 -3" stroke="#e8e2d4" stroke-width="1.4" stroke-linecap="round" fill="none" opacity="0.9"/>
</g>
<g id="bowl">
<path d="M6.5 13 h19 c0 5.6 -4 8.6 -9.5 8.6 s-9.5 -3 -9.5 -8.6 z" fill="#f6f1e7"/>
<ellipse cx="16" cy="13" rx="9.5" ry="3" fill="#e2dbcb"/>
</g>
<g id="char">
<path d="M16 11 c4.2 0 7.2 2.7 7.2 6 c0 3.6 -3.2 6.3 -7.2 6.3 s-7.2 -2.7 -7.2 -6.3 c0 -3.3 3 -6 7.2 -6 z" fill="#3b3b3b"/>
<path d="M13.2 8.4 q0.8 -1.4 0 -2.8 M17.8 8 q0.8 -1.4 0 -2.8" stroke="#6b6b6b" stroke-width="1.2" stroke-linecap="round" fill="none"/>
</g>
</defs>
<!-- ============================== tomato ============================== -->
<symbol id="item-tomato-raw" viewBox="0 0 32 32">
<circle cx="16" cy="18" r="8" fill="#e0533d"/>
<ellipse cx="13" cy="15.4" rx="2.6" ry="1.7" fill="#f08a63" opacity="0.8"/>
<path d="M16 11.4 v-2.4" stroke="#5d8a3c" stroke-width="1.6" stroke-linecap="round" fill="none"/>
<path d="M16 10.2 c-2.4 -1.4 -4.6 -1 -6 0.6 c2 0.4 4 0.2 6 -0.6 z" fill="#5d8a3c"/>
<path d="M16 10.2 c2.4 -1.4 4.6 -1 6 0.6 c-2 0.4 -4 0.2 -6 -0.6 z" fill="#5d8a3c"/>
</symbol>
<symbol id="item-tomato-chopped" viewBox="0 0 32 32">
<use href="#grid-dice" style="color: #e0533d"/>
</symbol>
<symbol id="item-tomato-cooking" viewBox="0 0 32 32">
<circle cx="16" cy="10.8" r="2.8" fill="#e0533d"/>
<use href="#pot-steam"/>
</symbol>
<symbol id="item-tomato-cooked" viewBox="0 0 32 32">
<path d="M10 12.4 c1 -2.2 11 -2.2 12 0" stroke="#e0533d" stroke-width="2.6" stroke-linecap="round" fill="none"/>
<use href="#bowl"/>
</symbol>
<symbol id="item-tomato-burnt" viewBox="0 0 32 32">
<use href="#char"/>
</symbol>
<!-- ============================== onion ============================== -->
<symbol id="item-onion-raw" viewBox="0 0 32 32">
<ellipse cx="16" cy="18.5" rx="8" ry="7.4" fill="#c9a2cf"/>
<path d="M10.4 14.6 c1.8 -3 9.4 -3 11.2 0 M9.4 19 h13.2 M11.4 23.4 c1.8 1.5 7.4 1.5 9.2 0" stroke="#a67fb0" stroke-width="1" fill="none"/>
<path d="M16 11.6 c0 -2 0.8 -3.2 2.2 -3.8" stroke="#8a6b45" stroke-width="1.6" stroke-linecap="round" fill="none"/>
</symbol>
<symbol id="item-onion-chopped" viewBox="0 0 32 32">
<use href="#grid-dice" style="color: #c9a2cf"/>
</symbol>
<symbol id="item-onion-cooking" viewBox="0 0 32 32">
<circle cx="16" cy="10.8" r="2.8" fill="#c9a2cf"/>
<use href="#pot-steam"/>
</symbol>
<symbol id="item-onion-cooked" viewBox="0 0 32 32">
<path d="M10 12.4 c1 -2.2 11 -2.2 12 0" stroke="#c9a2cf" stroke-width="2.6" stroke-linecap="round" fill="none"/>
<use href="#bowl"/>
</symbol>
<symbol id="item-onion-burnt" viewBox="0 0 32 32">
<use href="#char"/>
</symbol>
<!-- ============================= lettuce ============================= -->
<symbol id="item-lettuce-raw" viewBox="0 0 32 32">
<circle cx="12.5" cy="17" r="5.5" fill="#7db85a"/>
<circle cx="20" cy="16.5" r="5.5" fill="#8bc76c"/>
<circle cx="16.5" cy="20.5" r="5.5" fill="#6ea84e"/>
<path d="M10 15 c2 -2.5 8 -2.5 10 0" stroke="#a9dc8f" stroke-width="1.3" fill="none" stroke-linecap="round"/>
</symbol>
<symbol id="item-lettuce-chopped" viewBox="0 0 32 32">
<use href="#grid-dice" style="color: #7db85a"/>
</symbol>
<symbol id="item-lettuce-cooking" viewBox="0 0 32 32">
<circle cx="16" cy="10.8" r="2.8" fill="#7db85a"/>
<use href="#pot-steam"/>
</symbol>
<symbol id="item-lettuce-cooked" viewBox="0 0 32 32">
<path d="M10 12.4 c1 -2.2 11 -2.2 12 0" stroke="#7db85a" stroke-width="2.6" stroke-linecap="round" fill="none"/>
<use href="#bowl"/>
</symbol>
<symbol id="item-lettuce-burnt" viewBox="0 0 32 32">
<use href="#char"/>
</symbol>
<!-- ============================== dough ============================== -->
<symbol id="item-dough-raw" viewBox="0 0 32 32">
<circle cx="16" cy="18" r="7.5" fill="#d9b97c"/>
<ellipse cx="13.5" cy="15.5" rx="2.4" ry="1.5" fill="#e8d3a5" opacity="0.9"/>
<circle cx="19.5" cy="19" r="0.7" fill="#f2ead8"/>
<circle cx="14.5" cy="20.5" r="0.6" fill="#f2ead8"/>
<circle cx="18.5" cy="14.5" r="0.5" fill="#f2ead8"/>
</symbol>
<symbol id="item-dough-chopped" viewBox="0 0 32 32">
<use href="#grid-dice" style="color: #d9b97c"/>
</symbol>
<symbol id="item-dough-cooking" viewBox="0 0 32 32">
<circle cx="16" cy="10.8" r="2.8" fill="#d9b97c"/>
<use href="#pot-steam"/>
</symbol>
<symbol id="item-dough-cooked" viewBox="0 0 32 32">
<path d="M10 12.4 c1 -2.2 11 -2.2 12 0" stroke="#d9b97c" stroke-width="2.6" stroke-linecap="round" fill="none"/>
<use href="#bowl"/>
</symbol>
<symbol id="item-dough-burnt" viewBox="0 0 32 32">
<use href="#char"/>
</symbol>
<!-- ============================== patty ============================== -->
<symbol id="item-patty-raw" viewBox="0 0 32 32">
<ellipse cx="16" cy="19" rx="8.5" ry="5.5" fill="#8a5a3a"/>
<ellipse cx="16" cy="17.4" rx="7" ry="4" fill="#a06c48"/>
<path d="M11 16.5 c1.5 -1.5 8.5 -1.5 10 0" stroke="#6f462c" stroke-width="0.9" fill="none"/>
</symbol>
<symbol id="item-patty-chopped" viewBox="0 0 32 32">
<use href="#grid-dice" style="color: #8a5a3a"/>
</symbol>
<symbol id="item-patty-cooking" viewBox="0 0 32 32">
<circle cx="16" cy="10.8" r="2.8" fill="#8a5a3a"/>
<use href="#pot-steam"/>
</symbol>
<symbol id="item-patty-cooked" viewBox="0 0 32 32">
<path d="M10 12.4 c1 -2.2 11 -2.2 12 0" stroke="#8a5a3a" stroke-width="2.6" stroke-linecap="round" fill="none"/>
<use href="#bowl"/>
</symbol>
<symbol id="item-patty-burnt" viewBox="0 0 32 32">
<use href="#char"/>
</symbol>
<!-- ============================== fish ============================== -->
<symbol id="item-fish-raw" viewBox="0 0 32 32">
<path d="M8 17 c2.5 -3.5 7 -5 11 -3.5 c2 0.8 3.5 2.4 4 3.5 c-0.5 1.1 -2 2.7 -4 3.5 c-4 1.5 -8.5 0 -11 -3.5 z" fill="#7fb2c9"/>
<path d="M23 17 l5 -3.5 v7 z" fill="#7fb2c9"/>
<circle cx="11.5" cy="16" r="1" fill="#3a322a"/>
<path d="M15 14.5 c1.5 1.5 1.5 3.5 0 5 M18 14.8 c1.2 1.2 1.2 3.4 0 4.6" stroke="#5f95ad" stroke-width="0.9" fill="none"/>
</symbol>
<symbol id="item-fish-chopped" viewBox="0 0 32 32">
<use href="#grid-dice" style="color: #7fb2c9"/>
</symbol>
<symbol id="item-fish-cooking" viewBox="0 0 32 32">
<circle cx="16" cy="10.8" r="2.8" fill="#7fb2c9"/>
<use href="#pot-steam"/>
</symbol>
<symbol id="item-fish-cooked" viewBox="0 0 32 32">
<path d="M10 12.4 c1 -2.2 11 -2.2 12 0" stroke="#7fb2c9" stroke-width="2.6" stroke-linecap="round" fill="none"/>
<use href="#bowl"/>
</symbol>
<symbol id="item-fish-burnt" viewBox="0 0 32 32">
<use href="#char"/>
</symbol>
<!-- ============================== rice ============================== -->
<symbol id="item-rice-raw" viewBox="0 0 32 32">
<ellipse cx="16" cy="19.5" rx="9" ry="5" fill="#e8dfc8"/>
<circle cx="12" cy="18" r="1.8" fill="#f2ead8"/>
<circle cx="16" cy="16" r="1.8" fill="#f2ead8"/>
<circle cx="20" cy="18" r="1.8" fill="#f2ead8"/>
<circle cx="14" cy="20.5" r="1.7" fill="#f2ead8"/>
<circle cx="18.5" cy="20.5" r="1.7" fill="#f2ead8"/>
</symbol>
<symbol id="item-rice-cooking" viewBox="0 0 32 32">
<circle cx="16" cy="10.8" r="2.8" fill="#f2ead8"/>
<use href="#pot-steam"/>
</symbol>
<symbol id="item-rice-cooked" viewBox="0 0 32 32">
<ellipse cx="16" cy="12.2" rx="7" ry="3" fill="#f2ead8"/>
<use href="#bowl"/>
</symbol>
<symbol id="item-rice-burnt" viewBox="0 0 32 32">
<use href="#char"/>
</symbol>
<!-- ============================== plate ============================== -->
<symbol id="item-plate-raw" viewBox="0 0 32 32">
<ellipse cx="16" cy="17" rx="10" ry="6.5" fill="#f6f1e7"/>
<ellipse cx="16" cy="17" rx="10" ry="6.5" fill="none" stroke="#cfc5b5" stroke-width="1.2"/>
<ellipse cx="16" cy="17" rx="5.5" ry="3.4" fill="none" stroke="#e2dbcb" stroke-width="1"/>
</symbol>
<symbol id="item-plate-dirty" viewBox="0 0 32 32">
<ellipse cx="16" cy="17" rx="10" ry="6.5" fill="#f6f1e7"/>
<ellipse cx="16" cy="17" rx="10" ry="6.5" fill="none" stroke="#cfc5b5" stroke-width="1.2"/>
<ellipse cx="13" cy="15.5" rx="3" ry="1.8" fill="#9a8f7a" opacity="0.85"/>
<ellipse cx="20" cy="18.5" rx="2.4" ry="1.5" fill="#8a7d5a" opacity="0.8"/>
<ellipse cx="17" cy="13.8" rx="1.8" ry="1.1" fill="#7d8a5a" opacity="0.8"/>
</symbol>
<symbol id="item-plate-plated" viewBox="0 0 32 32">
<ellipse cx="16" cy="17" rx="10" ry="6.5" fill="#f6f1e7"/>
<ellipse cx="16" cy="17" rx="10" ry="6.5" fill="none" stroke="#cfc5b5" stroke-width="1.2"/>
<ellipse cx="16" cy="16.4" rx="6.5" ry="3" fill="#8a5a3a"/>
<path d="M10.5 15.4 c1 -2 8.5 -2 9.5 0 c0.5 1.2 -8.5 2.2 -9.5 0 z" fill="#7db85a"/>
<circle cx="16" cy="13.4" r="2.6" fill="#e0533d"/>
</symbol>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

app/static/assets/palette.css
+34
View File
@@ -0,0 +1,34 @@
/* Undercooked palette (phase 07, task 01).
*
* The single source of every colour the DOM and the Canvas 2D renderer
* both use. The canvas half re-exports the same hex values from
* app/static/js/render/palette.js; tests/unit/test_assets.py asserts the
* two files agree, so the CSS and the canvas can never drift apart.
*
* The four cook colours are what a player sees their own and their
* teammates' cooks in; [data-palette="cb"] swaps them for the Okabe-Ito
* set, which stays distinguishable under deuteranopia/protanopia. The
* semantic colours name the game's state vocabulary (a danger reads red,
* a ready reads green, dirt reads mud) and are shared by the CSS, the
* JS module and the SVG var() fallbacks in app/static/assets/.
*/
:root {
--uc-cook-1: #e0533d;
--uc-cook-2: #3d84a8;
--uc-cook-3: #7da84b;
--uc-cook-4: #b0699a;
--uc-danger: #ff5a4e;
--uc-hot: #ffa63d;
--uc-ready: #67d16c;
--uc-dirty: #9a8f7a;
}
/* Okabe-Ito cook colours: colourblind-safe (deutan/protan) without
losing the "four different cooks" signal. */
[data-palette="cb"] {
--uc-cook-1: #d55e00;
--uc-cook-2: #0072b2;
--uc-cook-3: #009e73;
--uc-cook-4: #cc79a7;
}
app/static/assets/stations.svg
+106
View File
@@ -0,0 +1,106 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
<!-- Undercooked station fixtures (phase 07, task 01). 32x32 symbols.
The spawn shelf's stock circle is drawn neutral on purpose: the
renderer tints it per ingredient with the atlas `tint` option. -->
<symbol id="station-spawn_shelf" viewBox="0 0 32 32">
<rect x="4" y="5" width="24" height="4" rx="1.5" fill="#a5825a"/>
<rect x="4" y="22" width="24" height="4" rx="1.5" fill="#a5825a"/>
<rect x="6" y="9" width="3" height="13" fill="#8a6b45"/>
<rect x="23" y="9" width="3" height="13" fill="#8a6b45"/>
<circle cx="16" cy="15.5" r="6" fill="#cfc5b5"/>
<circle cx="16" cy="15.5" r="6" fill="none" stroke="#8a6b45" stroke-width="1.2"/>
</symbol>
<symbol id="station-chop_board" viewBox="0 0 32 32">
<rect x="5" y="9" width="22" height="15" rx="3" fill="#c99e63"/>
<rect x="5" y="9" width="22" height="15" rx="3" fill="none" stroke="#a5825a" stroke-width="1.4"/>
<path d="M9 13 H23 M9 17 H23 M9 21 H23" stroke="#a5825a" stroke-width="0.9" fill="none"/>
<path d="M7 6 L21 4 L21 6 L8 8 Z" fill="#dfe3e6"/>
<rect x="21" y="3.6" width="6" height="2.8" rx="1.2" fill="#6b5a48"/>
</symbol>
<symbol id="station-stove" viewBox="0 0 32 32">
<rect x="3" y="6" width="26" height="21" rx="3" fill="#4a4238"/>
<rect x="3" y="6" width="26" height="21" rx="3" fill="none" stroke="#3a322a" stroke-width="1.4"/>
<circle cx="16" cy="16.5" r="7" fill="none" stroke="#6b625a" stroke-width="2.4"/>
<circle cx="8.5" cy="24" r="1.4" fill="#6b625a"/>
<circle cx="12.5" cy="24" r="1.4" fill="#6b625a"/>
</symbol>
<symbol id="station-stove-off" viewBox="0 0 32 32">
<rect x="3" y="6" width="26" height="21" rx="3" fill="#4a4238"/>
<rect x="3" y="6" width="26" height="21" rx="3" fill="none" stroke="#3a322a" stroke-width="1.4"/>
<circle cx="16" cy="16.5" r="7" fill="none" stroke="#6b625a" stroke-width="2.4"/>
<circle cx="8.5" cy="24" r="1.4" fill="#6b625a"/>
</symbol>
<symbol id="station-stove-working" viewBox="0 0 32 32">
<rect x="3" y="6" width="26" height="21" rx="3" fill="#4a4238"/>
<rect x="3" y="6" width="26" height="21" rx="3" fill="none" stroke="#3a322a" stroke-width="1.4"/>
<path d="M12.5 20.5 q1.5 -2.5 3.5 0 q2 -2.5 3.5 0 z" fill="#ffa63d"/>
<rect x="10" y="11" width="12" height="8" rx="2" fill="#8b8b8b"/>
<rect x="9" y="9.6" width="14" height="2.6" rx="1.3" fill="#a3a3a3"/>
<circle cx="16" cy="8.6" r="1.1" fill="#a3a3a3"/>
</symbol>
<symbol id="station-stove-ready" viewBox="0 0 32 32">
<rect x="3" y="6" width="26" height="21" rx="3" fill="#4a4238"/>
<rect x="3" y="6" width="26" height="21" rx="3" fill="none" stroke="#3a322a" stroke-width="1.4"/>
<rect x="10" y="11" width="12" height="8" rx="2" fill="#8b8b8b"/>
<rect x="9" y="9.6" width="14" height="2.6" rx="1.3" fill="#a3a3a3"/>
<circle cx="16" cy="8.6" r="1.1" fill="#a3a3a3"/>
<path d="M12 5 q1 -1.6 0 -3 M16 4.6 q1 -1.6 0 -3 M20 5 q1 -1.6 0 -3" stroke="#e8e2d4" stroke-width="1.4" stroke-linecap="round" fill="none" opacity="0.85"/>
</symbol>
<symbol id="station-stove-burning" viewBox="0 0 32 32">
<rect x="3" y="6" width="26" height="21" rx="3" fill="#4a4238"/>
<rect x="3" y="6" width="26" height="21" rx="3" fill="none" stroke="#3a322a" stroke-width="1.4"/>
<rect x="11" y="12" width="10" height="7" rx="2" fill="#3b3b3b"/>
<path d="M16 4.5 c2.6 2.2 4 4 4 6.2 a4 4 0 0 1 -8 0 c0 -2.2 1.4 -4 4 -6.2 z" fill="#ff5a4e"/>
<path d="M16 8 c1.4 1.4 2.2 2.4 2.2 3.6 a2.2 2.2 0 0 1 -4.4 0 c0 -1.2 0.8 -2.2 2.2 -3.6 z" fill="#ffa63d"/>
</symbol>
<symbol id="station-pot" viewBox="0 0 32 32">
<rect x="8" y="12" width="16" height="11" rx="2.5" fill="#8b8b8b"/>
<rect x="6.6" y="10.4" width="18.8" height="3" rx="1.5" fill="#a3a3a3"/>
<circle cx="16" cy="9.2" r="1.4" fill="#a3a3a3"/>
<rect x="4.6" y="14" width="3.4" height="2.4" rx="1.2" fill="#6f6a63"/>
<rect x="24" y="14" width="3.4" height="2.4" rx="1.2" fill="#6f6a63"/>
</symbol>
<symbol id="station-pan" viewBox="0 0 32 32">
<ellipse cx="14" cy="17" rx="9.5" ry="6" fill="#55504a"/>
<ellipse cx="14" cy="15.8" rx="8" ry="4.6" fill="#6b625a"/>
<rect x="22" y="14.6" width="8" height="3" rx="1.5" fill="#6b5a48"/>
</symbol>
<symbol id="station-prep" viewBox="0 0 32 32">
<rect x="4" y="10" width="24" height="15" rx="2.5" fill="#d8c49a"/>
<rect x="4" y="10" width="24" height="15" rx="2.5" fill="none" stroke="#a5825a" stroke-width="1.4"/>
<ellipse cx="13" cy="17.5" rx="6" ry="3.4" fill="#f6f1e7"/>
<ellipse cx="13" cy="17.5" rx="6" ry="3.4" fill="none" stroke="#cfc5b5" stroke-width="1"/>
<circle cx="24" cy="17.5" r="3.4" fill="#8b8b8b"/>
</symbol>
<symbol id="station-serve" viewBox="0 0 32 32">
<rect x="4" y="8" width="24" height="18" rx="2.5" fill="#d8c49a"/>
<rect x="7" y="12" width="18" height="10" rx="1.8" fill="#4a4238"/>
<path d="M11 17 h10" stroke="#f6f1e7" stroke-width="1.6" stroke-linecap="round" fill="none"/>
<path d="M16 4.5 a3 3 0 0 1 3 3 v1 h-6 v-1 a3 3 0 0 1 3 -3 z" fill="#ffd95e"/>
<circle cx="16" cy="3.4" r="1" fill="#ffd95e"/>
</symbol>
<symbol id="station-sink" viewBox="0 0 32 32">
<rect x="5" y="9" width="22" height="16" rx="2.5" fill="#b9b9b9"/>
<rect x="8" y="12" width="16" height="10" rx="2" fill="#8f8f8f"/>
<circle cx="16" cy="18.5" r="1.5" fill="#6f6f6f"/>
<path d="M22 6 v4 a3 3 0 0 1 -3 3 h-2" stroke="#a3a3a3" stroke-width="2.4" stroke-linecap="round" fill="none"/>
</symbol>
<symbol id="station-trash" viewBox="0 0 32 32">
<path d="M10 9 L22 9 L20.5 27 L11.5 27 Z" fill="#7a7f85"/>
<rect x="8.4" y="5.6" width="15.2" height="3.4" rx="1.4" fill="#9aa0a6"/>
<path d="M13.4 12 V24 M16 12 V24 M18.6 12 V24" stroke="#62676d" stroke-width="1.3" fill="none"/>
</symbol>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

app/static/assets/tiles.svg
+61
View File
@@ -0,0 +1,61 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
<!-- Undercooked tileset (phase 07, task 01). One <symbol> per drawable,
32x32 viewBox, hand-authored vector cartoon. Served from
app/static/assets/ and indexed by index.json. -->
<symbol id="tile-floor" viewBox="0 0 32 32">
<rect width="32" height="32" fill="#b98a5c"/>
<path d="M0 10.5 H32 M0 21.5 H32" stroke="#a1734c" stroke-width="1.5" fill="none"/>
<path d="M9.5 0 V10.5 M23 10.5 V21.5 M14.5 21.5 V32" stroke="#a1734c" stroke-width="1" fill="none"/>
</symbol>
<symbol id="tile-floor-1" viewBox="0 0 32 32">
<rect width="32" height="32" fill="#b98a5c"/>
<path d="M0 10.5 H32 M0 21.5 H32" stroke="#a1734c" stroke-width="1.5" fill="none"/>
<path d="M9.5 0 V10.5 M23 10.5 V21.5 M14.5 21.5 V32" stroke="#a1734c" stroke-width="1" fill="none"/>
<ellipse cx="24" cy="5" rx="2.6" ry="1.7" fill="#a1734c"/>
<ellipse cx="24" cy="5" rx="1.1" ry="0.7" fill="#8d6340"/>
</symbol>
<symbol id="tile-floor-2" viewBox="0 0 32 32">
<rect width="32" height="32" fill="#b98a5c"/>
<path d="M0 10.5 H32 M0 21.5 H32" stroke="#a1734c" stroke-width="1.5" fill="none"/>
<path d="M9.5 0 V10.5 M23 10.5 V21.5 M14.5 21.5 V32" stroke="#a1734c" stroke-width="1" fill="none"/>
<path d="M3 15 L8 15 M25 25 L30 25 M5 27 L10 27" stroke="#ab7d52" stroke-width="1.4" stroke-linecap="round" fill="none"/>
</symbol>
<symbol id="tile-floor-3" viewBox="0 0 32 32">
<rect width="32" height="32" fill="#b98a5c"/>
<path d="M0 10.5 H32 M0 21.5 H32" stroke="#a1734c" stroke-width="1.5" fill="none"/>
<path d="M9.5 0 V10.5 M23 10.5 V21.5 M14.5 21.5 V32" stroke="#a1734c" stroke-width="1" fill="none"/>
<rect x="13" y="13.5" width="6" height="6" rx="1.6" fill="#c4976b"/>
</symbol>
<symbol id="tile-floor-4" viewBox="0 0 32 32">
<rect width="32" height="32" fill="#b98a5c"/>
<path d="M0 10.5 H32 M0 21.5 H32" stroke="#a1734c" stroke-width="1.5" fill="none"/>
<path d="M9.5 0 V10.5 M23 10.5 V21.5 M14.5 21.5 V32" stroke="#a1734c" stroke-width="1" fill="none"/>
<circle cx="6" cy="6" r="0.9" fill="#ab7d52"/>
<circle cx="27" cy="16" r="0.9" fill="#ab7d52"/>
<circle cx="12" cy="27" r="0.9" fill="#ab7d52"/>
<circle cx="24" cy="28" r="0.7" fill="#ab7d52"/>
</symbol>
<symbol id="tile-counter" viewBox="0 0 32 32">
<rect width="32" height="32" fill="#d8c49a"/>
<rect y="24" width="32" height="8" fill="#a5825a"/>
<rect y="22" width="32" height="3" fill="#8a6b45"/>
<path d="M3 3 H29" stroke="#c4b088" stroke-width="1.4" stroke-linecap="round" fill="none"/>
</symbol>
<symbol id="tile-wall" viewBox="0 0 32 32">
<rect width="32" height="32" fill="#6b5a48"/>
<path d="M0 10.5 H32 M0 21.5 H32" stroke="#5a4b3b" stroke-width="1.5" fill="none"/>
<path d="M16 0 V10.5 M8 10.5 V21.5 M24 10.5 V21.5 M16 21.5 V32" stroke="#5a4b3b" stroke-width="1.5" fill="none"/>
</symbol>
<symbol id="tile-void" viewBox="0 0 32 32">
<rect width="32" height="32" fill="#241f1a"/>
<path d="M-4 36 L36 -4 M-4 24 L24 -4 M8 36 L36 8 M20 36 L36 20" stroke="#3a322a" stroke-width="1.4" fill="none"/>
</symbol>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

app/static/assets/ui.svg
+41
View File
@@ -0,0 +1,41 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
<!-- Undercooked HUD symbols (phase 07, task 01): the order ticket,
the result stars, the host crown, the ready check, the
disconnected-cook ghost and the streak flame. -->
<symbol id="ui-ticket" viewBox="0 0 32 32">
<path d="M7 5 h18 v22 l-3 -2.4 -3 2.4 -3 -2.4 -3 2.4 -3 -2.4 -3 2.4 z" fill="#f6f1e7"/>
<path d="M7 5 h18 v5 H7 z" fill="#ffd95e"/>
<path d="M10.5 15 h11 M10.5 19 h11 M10.5 23 h7" stroke="#9a8f7a" stroke-width="1.5" stroke-linecap="round" fill="none"/>
</symbol>
<symbol id="ui-star" viewBox="0 0 32 32">
<path d="M16 3.5 l3.8 7.7 8.5 1.2 -6.2 6 1.5 8.4 -7.6 -4 -7.6 4 1.5 -8.4 -6.2 -6 8.5 -1.2 z" fill="#ffd95e"/>
<path d="M16 3.5 l3.8 7.7 8.5 1.2 -6.2 6 1.5 8.4 -7.6 -4 -7.6 4 1.5 -8.4 -6.2 -6 8.5 -1.2 z" fill="none" stroke="#d9a92e" stroke-width="1.2"/>
</symbol>
<symbol id="ui-crown" viewBox="0 0 32 32">
<path d="M6 22 L8 10 l5 5 3 -7 3 7 5 -5 2 12 z" fill="#ffd95e"/>
<rect x="6" y="22" width="20" height="4" rx="1.6" fill="#d9a92e"/>
<circle cx="8" cy="9.4" r="1.5" fill="#d9a92e"/>
<circle cx="16" cy="6.4" r="1.5" fill="#d9a92e"/>
<circle cx="24" cy="9.4" r="1.5" fill="#d9a92e"/>
</symbol>
<symbol id="ui-ready" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="11" fill="#67d16c"/>
<path d="M10.5 16.5 L14.5 20.5 L21.5 12.5" stroke="#f6f1e7" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</symbol>
<symbol id="ui-ghost" viewBox="0 0 32 32">
<path d="M9 26 V15 a7 7 0 0 1 14 0 v11 l-2.3 -2 -2.4 2 -2.3 -2 -2.3 2 -2.4 -2 z" fill="#f6f1e7" opacity="0.55"/>
<circle cx="13.5" cy="14.5" r="1.4" fill="#4a4238"/>
<circle cx="18.5" cy="14.5" r="1.4" fill="#4a4238"/>
</symbol>
<symbol id="ui-streak" viewBox="0 0 32 32">
<path d="M16 5 c3 2.8 4.8 5.2 4.8 8 a4.8 4.8 0 0 1 -9.6 0 c0 -2.8 1.8 -5.2 4.8 -8 z" fill="#ffa63d"/>
<path d="M16 10 c1.5 1.6 2.6 2.9 2.6 4.3 a2.6 2.6 0 0 1 -5.2 0 c0 -1.4 1.1 -2.7 2.6 -4.3 z" fill="#fff7d6"/>
<path d="M9 22.5 q-1.4 1.8 0 3 M23 22.5 q1.4 1.8 0 3" stroke="#ffa63d" stroke-width="1.6" stroke-linecap="round" fill="none"/>
</symbol>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB