mirror of https://github.com/tiennm99/loto.git synced 2026-05-21 02:24:27 +00:00

Files

T

tiennm99 f7db20c13a feat: UI polish v2 + installable PWA with offline audio

Phase 1 — Vietnamese-safe font + master empty state:
- Add @fontsource/roboto-condensed (700 weight, all subsets including
  Vietnamese). font-display:swap. tan-tan-num now resolves the bundled
  face on Android instead of system Arial Narrow.
- New MasterEmptyState.svelte: ghost 11×9 grid + "Chế độ Quản trò"
  pill + readiness microcopy. Replaces the bare line of text in
  MasterPanel's no-game state.

Phase 2 — Mode picker icons, color picker layout, header polish:
- Inline SVG glyphs above each mode button (player card / megaphone /
  two stacked cards). Communicates role at a glance.
- Color picker wrapped in a single bordered card with "Tuỳ chỉnh"
  and "Mẫu sẵn" sub-headers.
- "Mặc định" → "Đặt lại" with a bordered chip style — clearer
  affordance than the previous near-invisible footer link.
- Header subline: drop tracking-[0.28em] all-caps SaaS look; replace
  with dash-flanked lantern band ("— 🏮 Hội chợ TN1 —") for
  fairground mood.

Phase 3 — Installable PWA + offline audio:
- @vite-pwa/sveltekit with autoUpdate. Precache app shell (~353 KB
  → 213 entries) PLUS the default voice's 92 clips so first-install
  is fully offline-capable. Alternate voices fall through to a
  CacheFirst runtime rule (cached on first play, 30-day TTL,
  maxEntries: 400 for future-proofing).
- New static/manifest.webmanifest (Lô tô — Hội chợ TN1, theme #1565c0,
  background #0a0f1f, standalone, vi).
- Icons: 192/512 standard + 512 maskable, generated from a single
  rose-amber-gradient SVG source.
- app.html: manifest link, dual theme-color meta (light + dark),
  apple-touch-icon, apple-mobile-web-app-capable for proper
  standalone launch on iOS Safari.
- _headers: add manifest-src + worker-src to CSP; no-cache on /sw.js
  and /manifest.webmanifest so deploys propagate.

Tests: 115/115 pass. Build clean (305 precache entries, 0 glob
warnings).

Reviewer concerns (addressed):
- maxEntries bumped 200 → 400 (was barely enough for 2 voices).
- Default voice precached so offline-first promise holds without
  requiring users to play every clip online first.
- "do NOT add skipWaiting" comment added next to autoUpdate.

2026-04-27 20:35:59 +07:00

4.3 KiB

Raw Blame History

Development Roadmap

This document tracks future work only. Completed features live in git commit history and plans/, not here. For "what's in the app right now", see docs/project-overview-pdr.md and docs/codebase-summary.md.

Shipped

Three-Mode Rendering + Master Auto-Tick (2026-04-27)

mode: "player" | "master" | "both" replaces masterMode: boolean
New call-bus.svelte.js coordinates master draws → player auto-tick in "both" mode
"Quản trò đọc số" voice now speaks Chờ/Kinh on master in "both" mode
One-shot migration: masterMode: true → mode: "both"

UI Polish v2 + Installable PWA (2026-04-27)

Font: Roboto Condensed self-hosted via @fontsource (Latin + Vietnamese subsets), swapped into tan-tan-num stack
Empty State: New MasterEmptyState.svelte component for first-run host (mirrors player UX)
Mode Picker: 3-way segmented toggle with inline SVG glyphs (player/master/both)
Color Picker: Bordered card with "Mẫu" (presets) + "Tuỳ chỉnh" (custom input) sections
Header Polish: Decorative dashes flanking subline (replaced all-caps tracking)
PWA: @vite-pwa/sveltekit generates SW + manifest. App shell precache (~353 KB). Audio runtime caching (CacheFirst). Auto-update w/ reload toast. Works offline at fairground (no signal venues)

Idea Phase

Undo Last Cell

Allow player to undo the most recent cross/uncross action. Requires change history or state snapshot. Status: Idea (low priority)

Considered Phase

Multiplayer Sync (Real-time)

Host and players connect via WebSocket to sync called numbers and state. Requires backend server. Would enable:

Decoupled devices (players' phones, host's laptop on big screen)
Remote tournaments
Master board auto-updates all players in real-time

Consideration: Out of scope for static export. Requires major refactor (SvelteKit API routes + WebSocket server). Deferred indefinitely.

i18n Beyond Vietnamese

Internationalization (English, Chinese, etc.). Requires extraction of all Vietnamese strings and i18n library (next-intl). Status: Considered (low demand for non-Vietnamese users)

Undo/Redo System

Full undo/redo stack with history navigation. Adds complexity to state management. Status: Considered (YAGNI for now)

Testing

Component Tests (Planned)

PlayerBoard with mocked localStorage, $state/$derived verification
MasterPanel with different game states

E2E Tests

Player flow: generate card → click cells → verify bingo popup
Host flow: new game → draw numbers → verify board state

Tech: Playwright

Future Enhancements (Speculative)

Export/Import Card

Allow player to export their grid as image or JSON, import someone else's card. Use Canvas API or print-friendly CSS.

Leaderboard / Stats

Track games won, time per bingo, etc. Requires server-side persistence. Out of scope for static export.

Accessibility Improvements

ARIA labels for grid cells
Keyboard navigation (arrow keys to move, Enter to toggle)
Screen reader support

Custom Number Range

Host selects range (e.g., 1–75 for American bingo) instead of hardcoded 1–90. Requires config UI and refactor of game logic constants. Out of scope per Lô tô hội chợ Tân Tân focus.

Different Grid Sizes

Support 8×8 or 10×10 grids, or 3×9 European Bingo 90 tickets. Out of scope — variant locked to 9×9 Tân Tân format.

Two-line / Full-house Win Tiers

European Bingo 90 patterns. Out of scope — Tân Tân uses single-line "Kinh!" only.

Decision Rationale

All decisions follow YAGNI (You Aren't Gonna Need It), KISS (Keep It Simple), DRY (Don't Repeat Yourself):

No multiplayer sync → adds server dependency, breaks static export (Cloudflare Pages)
No i18n → Vietnamese-only community, localizing adds complexity
Unit tests implemented → critical paths (constraints, persistence, settings) now have automated coverage
Component/E2E tests deferred → small codebase, manual testing sufficient for UI flows
No undo/redo → simple game, mistakes are play experience
Svelte 5 runes → cleaner reactivity than hooks, smaller mental model

Future work gates on real user demand, not speculation.

Last reviewed: 2026-04-27 Last synced: 2026-04-27 (UI polish v2 + PWA shipped)

4.3 KiB Raw Blame History Unescape Escape