How shaistaaman/cyberpunk-key-smasher works
Cyberpunk Key Smasher is a browser typing game. The player enters a name, selects a difficulty, and starts a timed arena; matching keys score points and relocate the target, while wrong keys or timeouts consume lives. At game over, the app saves the score locally, shows the top five, and lets the player restart. The graph follows the sampled component and hook calls; README documents the sound assets and local-storage leaderboard. Unsampled view details are represented only where README or indexed references support them.
Main entry points: App.tsx Phase coordinator · WelcomeScreen.tsx Name and level · ArenaScreen.tsx Arena screen · useGame.ts Game controller
Components 16
Game flow
- Phase coordinator
src/App.tsx - Name and level
src/components/WelcomeScreen.tsx - Arena screen
src/components/ArenaScreen.tsx
Game mechanics
- Game controller
src/hooks/useGame.ts - Game rules
src/game/reducer.ts - Key matching
src/game/keys.ts - Target generation
src/game/target.ts - Target display
src/components/TargetBox.tsx - Score and lives
src/components/TopBar.tsx - Name validation
src/game/name.ts
Results and persistence
- Game over screen
src/components/GameOverScreen.tsx - Leaderboard display
src/components/Leaderboard.tsx - Local leaderboard
src/storage/leaderboard.ts
Sound effects
- Sound player
src/audio/SoundPlayer.ts - MP3 effects
public/sounds
Other components
- Player
Connections 21
- Player → Name and level: enters details
src/components/WelcomeScreen.tsx - Name and level → Name validation: validates name
src/components/WelcomeScreen.tsx - Name and level → Sound player: primes audio
src/components/WelcomeScreen.tsx - Name and level → Phase coordinator: starts game
src/App.tsx - Phase coordinator → Name and level: renders
src/App.tsx - Phase coordinator → Arena screen: renders
src/App.tsx - Arena screen → Game controller: runs round
src/components/ArenaScreen.tsx - Game controller → Game rules: dispatches actions
src/hooks/useGame.ts - Game rules → Key matching: checks key
src/game/reducer.ts - Game rules → Target generation: relocates target
src/game/reducer.ts - Arena screen → Target display: renders target
src/components/ArenaScreen.tsx - Arena screen → Score and lives: renders status
src/components/ArenaScreen.tsx - Game controller → Arena screen: signals game over
src/hooks/useGame.ts - Phase coordinator → Game over screen: renders
src/App.tsx - Game over screen → Local leaderboard: saves score
src/components/GameOverScreen.tsx - Game over screen → Leaderboard display: renders standings
src/components/GameOverScreen.tsx - Leaderboard display → Local leaderboard: uses leaderboard data
src/components/Leaderboard.tsx - Game over screen → Phase coordinator: restarts flow
src/App.tsx - Phase coordinator → Sound player: preloads effects
src/App.tsx - Game controller → Sound player: plays event sounds
src/hooks/useGame.ts - Sound player → MP3 effects: loads MP3s
README.md