From 4a84245b39bec97753dded8bfec08a58cab55581 Mon Sep 17 00:00:00 2001 From: tiennm99 Date: Mon, 27 Apr 2026 07:52:05 +0700 Subject: [PATCH] =?UTF-8?q?feat(player):=20add=20"Xo=C3=A1=20=C4=91=C3=A1n?= =?UTF-8?q?h=20d=E1=BA=A5u"=20button=20to=20clear=20marks=20without=20rege?= =?UTF-8?q?n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Lets the player wipe all crossed cells on the current card without generating a new grid. Shown next to "Tạo bảng mới" only when a grid exists. Confirms before clearing if any cell is marked. - src/lib/PlayerBoard.svelte: handleClear + secondary outline button - docs/codebase-summary.md, project-overview-pdr.md: reflect new action --- web/docs/codebase-summary.md | 2 +- web/docs/project-overview-pdr.md | 1 + web/src/lib/PlayerBoard.svelte | 26 +++++++++++++++++++++++++- 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/web/docs/codebase-summary.md b/web/docs/codebase-summary.md index 9f9ef1b..6543a9a 100644 --- a/web/docs/codebase-summary.md +++ b/web/docs/codebase-summary.md @@ -11,7 +11,7 @@ ### Shared Components | File | Purpose | |------|---------| -| `src/lib/PlayerBoard.svelte` | Reusable player card (9×9 grid rendered as 3 stacked 3×9 mini-cards: Tân Tân / An khang thịnh vượng / Tân Tân tốt nhất). Tall (3:5 on mobile; wider on sm+) cells with condensed bold black numbers (`tan-tan-num` font stack), white number cells, purple empty cells by default. Handles crossed state, bingo popup, "Chờ X" toast. Accepts `storagePrefix` prop for multi-card isolation. Empty cells use `--empty-cell-bg` CSS var from settings store. | +| `src/lib/PlayerBoard.svelte` | Reusable player card (9×9 grid rendered as 3 stacked 3×9 mini-cards: Tân Tân / An khang thịnh vượng / Tân Tân tốt nhất). Tall (3:5 on mobile; wider on sm+) cells with condensed bold black numbers (`tan-tan-num` font stack), white number cells, purple empty cells by default. Handles crossed state, bingo popup, "Chờ X" toast. Two header actions: "Tạo bảng mới" (regenerate grid) and "Xoá đánh dấu" (clear all marks, keep grid — only shown when a grid exists). Accepts `storagePrefix` prop for multi-card isolation. Empty cells use `--empty-cell-bg` CSS var from settings store. | | `src/lib/SettingsButton.svelte` | Gear icon + modal. 4 fieldsets: Giao diện (theme auto/light/dark), Chế độ quản trò (master mode toggle), Tự động xổ (auto-call + speed 1–10s), Màu ô trống (10 Excel color swatches). Reset-to-default button. Mounted on `/`. | | `src/lib/MasterPanel.svelte` | Host controls. New game / draw, "Số vừa xổ" hero token, "Thứ tự đã xổ" history list, 11×9 last-digit-aligned tracking grid (with circular tokens + draw-order overlay). No host's own player card (the player already has one above). "Xổ số" / "Bắt đầu / Dừng" button bound to auto-call. Mounted conditionally on `/` when `settings.masterMode === true`. | | `src/lib/PageFooter.svelte` | Footer with tagline ("Made by miti99 with ❤️ SVG icon") + link. Mounted on `/`. | diff --git a/web/docs/project-overview-pdr.md b/web/docs/project-overview-pdr.md index ee51966..7046ee4 100644 --- a/web/docs/project-overview-pdr.md +++ b/web/docs/project-overview-pdr.md @@ -88,6 +88,7 @@ State is entirely client-side. Each card / panel instance uses a unique localSto - [x] Player card is 9×9 with **exactly 5 per row and 5 per column**. - [x] Numbers within each column are **ascending top-to-bottom**. - [x] Player can click cells to toggle crossed state. +- [x] Player can clear all marks on the current card without regenerating it (confirm prompt when marks exist). - [x] Bingo popup triggers when row is complete, shows row number and "Kinh!" message. - [x] Player may keep marking after a Kinh — no game-end lock. - [x] Toast notifications show "Chờ X" before bingo (one number remaining). diff --git a/web/src/lib/PlayerBoard.svelte b/web/src/lib/PlayerBoard.svelte index 776e47d..042d545 100644 --- a/web/src/lib/PlayerBoard.svelte +++ b/web/src/lib/PlayerBoard.svelte @@ -120,6 +120,17 @@ dismissToast(); } + function handleClear() { + if (!grid) return; + const hasMarks = crossed.some((row) => row.some(Boolean)); + if (hasMarks && !confirm("Bạn có muốn xoá tất cả đánh dấu không?")) return; + crossed = grid.map((row) => row.map(() => false)); + celebratedRows.clear(); + notifiedWaitingRows.clear(); + dismissToast(); + showCongrats = false; + } + /** * @param {number} row * @param {number} col @@ -146,7 +157,7 @@ ]; -
+
+ {/if}
{#if grid}