mirror of
https://github.com/tiennm99/loto.git
synced 2026-05-16 04:58:57 +00:00
tiennm99
574c22ddc1
Full stack swap to enable future extension (more pages / load functions /
backend) while keeping JSDoc-only code style.
Stack:
- SvelteKit 2 + adapter-static
- Svelte 5 runes ($state, $derived, $effect, $props)
- Vite 7 + @sveltejs/vite-plugin-svelte 6
- Tailwind 4 (Vite plugin)
- ESLint 9 (flat) + eslint-plugin-svelte
- Pure JS + JSDoc, no TypeScript
Source moves:
- app/page.jsx → src/routes/+page.svelte
- app/master/page.jsx → src/routes/master/+page.svelte
- app/layout.jsx → src/routes/+layout.svelte (+ +layout.js)
- components/player-board.jsx → src/lib/PlayerBoard.svelte
- lib/game-logic.js → src/lib/game-logic.js (verbatim)
- next.config.mjs → svelte.config.js + vite.config.js
- app/globals.css → src/app.css
- (new) → src/app.html
Behavior preserved: PlayerBoard with bingo "Kinh!" popup + waiting "Chờ X"
toast, master 9x10 tracking board with shuffled draw, host's own player
card via storagePrefix="loto_master_card", localStorage prefix model
(loto_*, loto_master, loto_master_card_*), basePath dual mode (CF default
empty, BUILD_PROFILE=gh → /loto, codeserver dev → /absproxy/{port}).
A11y kept from prior hardening: role-correct buttons, aria-pressed on
cells, role=dialog modal with Escape, role=status toast.
Plans: ts-to-jsdoc plan marked completed; sveltekit-refactor plan tracks
the work above. Docs under ./docs/ rewritten by docs-manager subagent to
match the SvelteKit terminology.
101 lines
3.8 KiB
Markdown
101 lines
3.8 KiB
Markdown
# Development Roadmap
|
||
|
||
This document tracks **future work only**. Completed features live in git commit history, not here.
|
||
|
||
## Currently Implemented Features
|
||
|
||
The app is fully functional for core gameplay:
|
||
- 9×9 player card generation with weighted number distribution
|
||
- Cell marking (toggle crossed state)
|
||
- Bingo detection and celebration popup
|
||
- "Chờ X" waiting notifications
|
||
- Host number drawing from 1–90 deck
|
||
- 9×10 master board tracking called numbers
|
||
- Host's own player card (isolated instance)
|
||
- localStorage persistence
|
||
- Dark mode
|
||
- Mobile responsive
|
||
- Offline capable
|
||
|
||
## Idea Phase
|
||
|
||
### Sound Effects on Bingo
|
||
Play celebratory chime or "Kinh!" voice snippet when row completes. Could use Web Audio API or `<audio>` tag. **Status**: Idea (no demand yet)
|
||
|
||
### Undo Last Cell
|
||
Allow player to undo the most recent cross/uncross action. Requires change history or state snapshot. **Status**: Idea (low priority)
|
||
|
||
### Theme Switcher
|
||
Explicit light/dark toggle button instead of relying on OS preference. **Status**: Idea (Tailwind already supports OS toggle)
|
||
|
||
### PWA Install
|
||
Add service worker and manifest for "Install App" prompt on Android/iOS. **Status**: Idea (would require server-side components)
|
||
|
||
## 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 (Planned but Unstarted)
|
||
|
||
### Unit Tests
|
||
- Game logic: `generateGrid()`, `isRowComplete()`, `getWaitingNumber()`
|
||
- localStorage helpers: `saveGrid()`, `loadGrid()`, etc.
|
||
|
||
**Tech**: Vitest (Vite's native test runner)
|
||
|
||
### Component Tests
|
||
- PlayerBoard with mocked localStorage, $state/$derived verification
|
||
- Master page 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.
|
||
|
||
### Different Grid Sizes
|
||
Support 8×8 or 10×10 grids. Major refactor (NUM_ROWS, NUM_COLS constants, weighted selection algorithm).
|
||
|
||
---
|
||
|
||
## 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
|
||
- No testing → small codebase (<300 LOC), manual testing covers critical paths; add when code grows
|
||
- 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-26
|