A browser-based retro arcade game hub built with Vite + React 18 + TypeScript. Pick a game from the neon-lit landing page and play it in a CRT-framed canvas — no backend, runs entirely in the browser.
| Game | Status | Controls |
|---|---|---|
| Tetris | ✅ Available | ← → move · ↑ rotate · ↓ soft drop · Space hard drop · C hold · P pause · Enter start |
| Snake | ✅ Available | ← → ↑ ↓ or WASD move · P pause · Enter start |
Prerequisites: Node.js 18+, npm
# Clone the repo
git clone <repo-url>
cd arcade
# Install dependencies
npm install
# Start the dev server
npm run devOpen http://localhost:5173 in your browser.
npm run build # Type-check + production build (output: dist/)
npm run preview # Serve the production build locally| Layer | Choice |
|---|---|
| Build / Dev server | Vite 5 |
| UI Framework | React 18 + TypeScript |
| Routing | React Router v6 |
| Game rendering | HTML5 Canvas API |
| Styling | CSS Modules + CSS custom properties |
| Font | Press Start 2P (Google Fonts) |
src/
├── main.tsx # App entry point
├── App.tsx # Route declarations
├── styles/
│ ├── globals.css # Reset + base styles
│ └── theme.css # CSS vars: neon palette, animations, CRT effects
├── components/
│ ├── ArcadeScreen # CRT bezel wrapper component
│ └── GameCard # Landing page game card
├── pages/
│ └── LandingPage # Game selector page
└── games/
├── registry.ts # Central list of all games
└── tetris/ # Tetris implementation
├── constants.ts
├── TetrisEngine.ts # Pure game logic (no React)
├── useTetris.ts # React hook: game loop + input
├── TetrisPage.tsx # Canvas + HUD layout
└── TetrisPage.module.css
See plan/ARCHITECTURE.md for the full architecture decision record.
- Create
src/games/<name>/with engine, hook, page, and constants files. - Add a
GameEntrytosrc/games/registry.ts— the card appears automatically. - Add a
<Route>insrc/App.tsx. - Create
feature/<NAME>.mdand updatefeature/INDEX.md.
Full checklist in AGENTS.md.
Commit Messages — Conventional Commits
<type>(<optional scope>): <short description>
| Type | When to use |
|---|---|
feat |
New feature or game |
fix |
Bug fix |
chore |
Tooling, deps, config, cleanup |
style |
CSS / visual-only changes |
refactor |
Code restructure, no behaviour change |
docs |
Documentation only |
perf |
Performance improvement |
test |
Adding or fixing tests |
<type>/<short-kebab-description>
Examples: feat/snake-game · fix/tetris-rotation-wallkick · chore/upgrade-dependencies
See feature/INDEX.md for a log of all implemented features.