Refactor: React 18 + TypeScript + Tailwind + Vite

[balajmarius]

Summary

• Ground-up rewrite replacing Phaser 2.6.2 + ES2015 + FuseBox with React 18, TypeScript, Tailwind CSS 3, and Vite 5
• All game logic in a pure useReducer — no framework, no canvas, just CSS sprite rendering via background-position on divs
• Pixel-exact sprite positions and timing constants migrated from original config.js + levels.js

What changed

• Types: GamePhase, GameState, and all sub-state interfaces in src/types/
• Reducer: Single gameReducer.ts handles TICK (rAF-driven), FIRE, MOVE, collision detection, bug spawning/advancing, difficulty scaling
• Hooks: useGameLoop (rAF), useKeyboard, useAudio (pooled Audio elements), useAssetLoader, useSoundEffects (state-diff based)
• Components: 13 components — leaf sprites (Bug, Bullet, Octocat) wrapped in React.memo, containers (BugColumn, BulletColumn, layers), and shell (ArcadeCabinet, Loader, GameScreen)
• Removed: Phaser CDN dependency, FuseBox bundler, Babel, old ESLint config

Claude Code session

https://claudebin.com/threads/zR4hf854E0

Test plan

• npm run dev → game loads, LCD cabinet visible with scanline overlay
• Press Enter → game starts, Octocat visible in column 0
• Arrow keys → Octocat moves between 4 columns with press sound
• Spacebar → bullet fires upward from current column
• Bugs spawn and descend at 500ms intervals
• Bullet hitting bug → explosion + score increment + explode sound
• Score reaching 25/50/100/150 → bug speed increases
• Bug reaching bottom → player dies, die sound, game over
• Enter after death → full restart

🤖 Generated with Claude Code