tiennm99
d77d4a5652
Six small UI/UX phases shipped together: 1. Mobile legibility — cell aspect 3:4 on mobile (was 1:1), text-lg number, active:scale-90 press, navigator.vibrate(10) on tap, 200ms cross-draw clip-path animation on cell mark. 2. Brand — H1 italic rose-amber gradient with drop-shadow + "Hội chợ Tân Tân" subtitle. First-run state shows a faded preview card + warm welcome line instead of a gray placeholder. 3. Master focal point — "Số vừa xổ" hero scaled w-40/56 with text-7xl/8xl, role=status aria-live=assertive, scrollIntoView on each user-driven draw (gated by scrollOnNextDraw flag so reload doesn't yank the page). Master section uses transition:slide. 4. Settings polish — modal max-w-md on sm+; switchRow snippet replaces 4 boolean buttons with role=switch UI (focus ring, keyboard space/enter); empty cells get dark:[filter:brightness(0.85)_saturate(0.9)] so user's chosen purple isn't neon in dark mode. 5. Celebration tiering — 3rd+ bingo per card triggers a 12-emoji CSS confetti rain at z-[60] above the popup. 6. Docs sync — codebase-summary + pdr. Reviewer fixes applied: confetti z-index above popup; scroll-on-load guarded by interaction flag; switch focus ring. Tests 98/98 pass; build clean.
Lô tô
Bàn số của trò chơi "Lô tô" — SvelteKit app.
Single page (/). The host enables "Chế độ quản trò" in settings to
reveal the master panel inline below their player card; called numbers
get spoken aloud in Vietnamese using bundled MP3 clips (no runtime TTS).
See docs/ for architecture, code standards, and deployment.
Development
npm install
npm run dev
Inside code-server (reverse proxy)
cp .env.example .env.local
# edit .env.local: set CODESERVER_HOST and CODESERVER_PORT
npm run dev:codeserver
Open https://<CODESERVER_HOST>/absproxy/<CODESERVER_PORT>/.
Use /absproxy/{port}/, not /proxy/{port}/ — the latter strips the
path prefix and breaks the SvelteKit base path.
Build
npm run build # default — root basePath, for Cloudflare Pages
npm run build:gh # /loto basePath, for tiennm99.github.io/loto manual export
Static export to build/. Deployed to Cloudflare Pages from main
(set up via the CF dashboard — see docs/deployment-guide.md).
Regenerating audio
Vietnamese voice clips live in static/audio/{voiceId}/. Generated
once with edge-tts (free, no API
key) — runtime never calls TTS. To regenerate (e.g., to add a new voice
that Microsoft ships, or to change wording):
pip install edge-tts
python3 scripts/generate-audio.py
The script auto-discovers every vi-* voice and writes a manifest the
app reads on next reload.