From d54ace7f563bb671cb5dc300307b2b810cec7af2 Mon Sep 17 00:00:00 2001 From: tiennm99 Date: Mon, 27 Apr 2026 00:17:21 +0700 Subject: [PATCH] feat(master): circular token style with pink/green ring per value range MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaces the orange/red filled-square cells on the master tracking board with a circular token treatment inspired by the Hội chợ "Các số đã ra" panel. Each numbered cell now renders a centered circle with a colored ring — pink for 1–49, green for 50–90 — over a cream-yellow fill when the number has been called, or dimmed/empty when it has not. The most recent draw keeps its red accent via a ring-offset highlight + slight scale, so the host can still find "vừa xổ" at a glance. Draw-order superscript stays at the cell's top-right corner, now in muted slate (visible against both the cream-filled and dim-empty token states). --- web/docs/codebase-summary.md | 2 +- web/docs/project-overview-pdr.md | 4 ++- web/src/routes/master/+page.svelte | 44 ++++++++++++++++++++---------- 3 files changed, 33 insertions(+), 17 deletions(-) diff --git a/web/docs/codebase-summary.md b/web/docs/codebase-summary.md index 8f884e9..73bad39 100644 --- a/web/docs/codebase-summary.md +++ b/web/docs/codebase-summary.md @@ -7,7 +7,7 @@ |------|---------| | `src/routes/+layout.svelte` | Root HTML layout. Sets Vietnamese lang, imports Geist font, applies global flex layout. | | `src/routes/+page.svelte` | Player page (`/`). Instructions toggle, PlayerBoard component, indigo gradient branding. | -| `src/routes/master/+page.svelte` | Host page (`/master`). Controls (new game, draw number), 11×9 last-digit-aligned master board with draw-order overlay, host's player card. | +| `src/routes/master/+page.svelte` | Host page (`/master`). Controls (new game, draw number), 11×9 last-digit-aligned master board with circular tokens (pink ring for 1–49, green for 50–90; cream fill when called, dim when uncalled; red ring + scale on last-called) and draw-order overlay, host's player card. | ### Shared Components | File | Purpose | diff --git a/web/docs/project-overview-pdr.md b/web/docs/project-overview-pdr.md index 0d32751..9016eeb 100644 --- a/web/docs/project-overview-pdr.md +++ b/web/docs/project-overview-pdr.md @@ -26,7 +26,9 @@ That format is intentionally out of scope. may keep playing further rows (game does not end). - **Waiting state**: when a row needs only 1 number, app announces **"Chờ N"**. - **Host (quản trò)** draws numbers from a shuffled 1–90 deck, tracks them on - a master board, and may also play their own card. + a master board with circular tokens (pink ring for 1–49, green for 50–90, + cream fill on called, dim on uncalled, red ring + scale on the most + recent draw), and may also play their own card. - **Settings**: gear icon in headers opens a modal with a color picker for the empty/blank cell color (default brown matches physical card). Persisted to `loto_settings`. diff --git a/web/src/routes/master/+page.svelte b/web/src/routes/master/+page.svelte index 376729d..af5afe7 100644 --- a/web/src/routes/master/+page.svelte +++ b/web/src/routes/master/+page.svelte @@ -213,27 +213,41 @@ {@const order = hasNumber ? callOrder.get(num) : undefined} {@const isCalled = order !== undefined} {@const isLast = isCalled && num === lastCalled} + {@const isLow = hasNumber && num <= 49}
- {hasNumber ? num : ""} - {#if isCalled} - +
- {order} - + {num} +
+ {#if isCalled} + + {order} + + {/if} {/if}
{/each}