mirror of
https://github.com/tiennm99/loto.git
synced 2026-05-21 10:25:46 +00:00
tiennm99
f7db20c13a
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.
94 lines
4.3 KiB
Markdown
94 lines
4.3 KiB
Markdown
# 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)
|