diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..5e478fd --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,71 @@ +# Working in The Clanked Game + +## Stack + +- **React 19** — UI rendering +- **Vite 8** — Dev server and build tooling +- **WebAudio API** — All sound synthesis (no audio files) +- **pnpm** — Package manager + +## Project Layout + +``` +src/ + App.jsx — Root component, screen state (home/main-menu/game) + components/ + Game.jsx — Core game loop: canvas rendering, state, collision, input + soundEffects.js — WebAudio sound synthesis functions +``` + +## Key Implementation Notes + +- The game loop runs in `Game.jsx` via `requestAnimationFrame`. All game logic (`updateStars`, `updatePlayer`, `updateAliens`, `checkCollisions`, etc.) is defined inside the `useEffect` and operates on `gameStateRef.current`. +- Sound effects use the WebAudio API and are stateless helpers in `soundEffects.js`. Call `getAudioContext()` lazily on first use (browser autoplay policy). +- Shields are stored as 2D boolean grids (pixel-level destruction without canvas complexity). +- The canvas renders at **800×600** (`CANVAS_WIDTH`, `CANVAS_HEIGHT`). + +## Adding Sound Effects + +Functions in `soundEffects.js` follow the same pattern: + +```js +export const playXSound = () => { + const ctx = getAudioContext(); + const currentTime = ctx.currentTime; + + const oscillator = ctx.createOscillator(); + const gainNode = ctx.createGain(); + + oscillator.type = 'square'; // or 'sine', 'sawtooth', or white noise via AudioBuffer + // configure frequency... + // configure gain envelope... + oscillator.connect(gainNode); + gainNode.connect(ctx.destination); + + oscillator.start(currentTime); + oscillator.stop(currentTime + duration); +}; +``` + +For white noise, create an `AudioBuffer` filled with `Math.random() * 2 - 1` values and use a `BufferSourceNode`. + +## Adding Gameplay Features + +- New game state fields go in `gameStateRef.current` (line ~95). +- New per-frame update functions follow `updateStars`, `updatePlayer`, etc. pattern and are called in the game loop in order. +- New draw functions follow `drawStars`, `drawPlayer`, etc. pattern and are called in the render section of `gameLoop()`. +- Screen transitions happen via `setCurrentScreen()` in `App.jsx` — pass an `onExit` callback from `Game` to return to main menu. + +## Git Workflow + +- Branch: `develop` +- Push to `origin/develop` after meaningful changes. + +## npm Scripts + +| Command | Description | +|---------|-------------| +| `pnpm dev` | Start Vite dev server with HMR | +| `pnpm build` | Production build to `dist/` | +| `pnpm lint` | Run ESLint | +| `pnpm preview` | Preview production build locally | diff --git a/README.md b/README.md index a36934d..7a24b5f 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,49 @@ -# React + Vite +# The Clanked Game -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +A Space Invaders-inspired browser game built with React and Vite. -Currently, two official plugins are available: +## Installation -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) +```bash +pnpm install +``` -## React Compiler +## Development -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). +```bash +pnpm dev +``` -## Expanding the ESLint configuration +Runs the Vite dev server. Open the URL shown in your terminal (typically http://localhost:5173/). -If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. +## Gameplay + +### Controls + +| Key | Action | +|-----|--------| +| Arrow Left / A | Move left | +| Arrow Right / D | Move right | +| Space | Fire missile | +| Escape | Pause / Resume | + +### Objective + +Destroy all waves of aliens before they reach your position or deplete your lives. + +- **Green aliens** (bottom rows): 10 points +- **Yellow aliens** (middle rows): 20 points +- **Red aliens** (top rows): 30 points + +### Screens + +- **Home** — Landing screen with "Main Menu" button +- **Main Menu** — Access "Start New Game" and "Options" (Options not yet implemented) +- **Game** — Canvas-based gameplay with HUD showing Score, Lives, and Round +- **Pause** — Overlay when Escape is pressed; press Escape again to resume + +### Sound + +Aliens play the classic four-note descending march throughout gameplay. The tempo accelerates as you destroy more aliens, matching the original 1978 arcade experience. Player fire and alien hits also produce synthesized sound effects. + +Lose a life → Game Over → Return to Main Menu or start a New Game.