·사용성 회고·1 분
Game feel — Web Audio SFX, card-flip reveal, screen shake, countdown rhythm
A game-feel pass on the web client: a 3-beat countdown between action confirm and reveal, procedural Web Audio sound effects with a mute toggle, a card-flip reveal with screen shake on outcomes, and an animated AI thinking indicator.
This session added "juice" to the web client — pacing, sound, and animation around the turn loop. All points below come from commit subjects and the changed-file lists (git-only milestone; no engineering-log lines were recorded for it).
What changed
- Countdown rhythm — Added a 3-beat countdown between action confirmation and reveal to pace the turn (
5f137f5). Introducedweb/src/components/Countdown.tsx, wired throughweb/src/hooks/useGame.tsandweb/src/app/page.tsx, with supporting styles inweb/src/app/globals.css. - Sound effects — Added procedural Web Audio API sound effects for all game events (
fc88a50) via theweb/src/hooks/useSoundEffects.tshook, plus aweb/src/components/MuteButton.tsxto toggle audio inweb/src/app/page.tsx. - Reveal + screen shake — Added a dramatic card-flip reveal and screen shake on outcomes (
690ca97) throughweb/src/components/TurnReveal.tsxandweb/src/app/globals.cssanimations, driven fromweb/src/app/page.tsx. - AI thinking indicator — Added an animated AI thinking indicator shown during action selection (
4b9780b) viaweb/src/components/AIThinking.tsx, integrated alongsideweb/src/components/MatchHUD.tsxinweb/src/app/page.tsx. (Not named in the milestone title, but part of the same session and commit set, so included as a related game-feel change.)
Commits
5f137f5— feat: add 3-beat countdown rhythm between action confirm and revealfc88a50— feat: add procedural Web Audio API sound effects for all game events690ca97— feat: add dramatic card flip reveal and screen shake on outcomes4b9780b— feat: add animated AI thinking indicator during action selection