diff --git a/README.md b/README.md index c678b30..487e077 100644 --- a/README.md +++ b/README.md @@ -4,58 +4,15 @@ A browser-based clone of the [Suika Game](https://en.wikipedia.org/wiki/Suika_Ga Built with [ClaudeKit](https://github.com/carlrannaberg/claudekit). -## Tech Stack - -| Category | Tool | Version | Purpose | -|----------|------|---------|---------| -| **Runtime** | [Matter.js](https://brm.io/matter-js/) | ^0.20.0 | 2D rigid-body physics engine | -| **Rendering** | Canvas2D | (built-in) | Fruit drawing, UI overlay, game-over screen | -| **Build** | [Vite](https://vitejs.dev/) | ^8.0.4 | Dev server, ES module bundling, production builds | -| **Testing** | [Vitest](https://vitest.dev/) | ^4.1.4 | Unit and integration tests | -| **Language** | JavaScript (ES Modules) | — | Vanilla JS, no framework | -| **Dev Tooling** | [ClaudeKit](https://github.com/carlrannaberg/claudekit) | — | Git hooks for linting, type-checking, testing, self-review | - -## Project Structure - -``` -src/ - main.js Entry point: initializes game, attaches event listeners - game.js Game class: orchestrates engine, renderer, input, state - physics.js Matter.js engine setup, world configuration, walls - renderer.js Canvas2D rendering: fruits, walls, UI overlay - input.js Mouse/touch input handling, drop control - fruits.js Fruit definitions (sizes, colors, labels, progression) - merger.js Collision detection callback, merge logic, scoring - constants.js Game dimensions, physics tuning, timing constants - style.css Page styling - *.test.js Vitest test files -index.html Single HTML page with canvas element -specs/ Feature and bugfix specifications -``` - -## Getting Started +## Quick Start ```bash npm install npm run dev ``` -Open the URL shown in the terminal (default: http://localhost:5173). +## Documentation -## How to Play - -1. Move your mouse (or touch on mobile) to position the fruit -2. Click/tap to drop it into the container -3. When two identical fruits touch, they merge into the next larger fruit -4. The fruit chain goes: Cherry → Strawberry → Grapes → Dekopon → Persimmon → Apple → Pear → Peach → Pineapple → Melon → Watermelon -5. Game ends when fruits stack above the danger line - -## Scripts - -| Command | Description | -|---------|-------------| -| `npm run dev` | Start Vite dev server with HMR | -| `npm run build` | Production build to `dist/` | -| `npm run preview` | Preview the production build | -| `npm test` | Run all tests once | -| `npm run test:watch` | Run tests in watch mode | +- [Getting Started](docs/getting-started.md) — Setup, scripts, and prerequisites +- [Tech Stack](docs/tech-stack.md) — Dependencies, tools, and project structure +- [Gameplay](docs/gameplay.md) — How to play and the full fruit chain diff --git a/docs/gameplay.md b/docs/gameplay.md new file mode 100644 index 0000000..b3bd94d --- /dev/null +++ b/docs/gameplay.md @@ -0,0 +1,26 @@ +# How to Play + +1. Move your mouse (or touch on mobile) to position the fruit +2. Click/tap to drop it into the container +3. When two identical fruits touch, they merge into the next larger fruit +4. Game ends when fruits stack above the danger line + +## Fruit Chain + +Cherry → Strawberry → Grapes → Dekopon → Persimmon → Apple → Pear → Peach → Pineapple → Melon → Watermelon + +| Tier | Fruit | Radius | Color | Merge Points | +|------|-------|--------|-------|-------------| +| 0 | Cherry | 12px | Red | 1 | +| 1 | Strawberry | 16px | Light Red | 3 | +| 2 | Grapes | 20px | Purple | 6 | +| 3 | Dekopon | 26px | Orange | 10 | +| 4 | Persimmon | 32px | Dark Orange | 15 | +| 5 | Apple | 36px | Red | 21 | +| 6 | Pear | 42px | Green-Yellow | 28 | +| 7 | Peach | 48px | Peach | 36 | +| 8 | Pineapple | 57px | Yellow | 45 | +| 9 | Melon | 64px | Green | 55 | +| 10 | Watermelon | 77px | Dark Green | 66 | + +Only the 5 smallest fruits (Cherry through Persimmon) appear as drop candidates. When two Watermelons merge, they disappear and award 66 bonus points. diff --git a/docs/getting-started.md b/docs/getting-started.md new file mode 100644 index 0000000..9035c21 --- /dev/null +++ b/docs/getting-started.md @@ -0,0 +1,25 @@ +# Getting Started + +## Prerequisites + +- [Node.js](https://nodejs.org/) (LTS recommended) +- npm (comes with Node.js) + +## Setup + +```bash +npm install +npm run dev +``` + +Open the URL shown in the terminal (default: http://localhost:5173). + +## Scripts + +| Command | Description | +|---------|-------------| +| `npm run dev` | Start Vite dev server with HMR | +| `npm run build` | Production build to `dist/` | +| `npm run preview` | Preview the production build | +| `npm test` | Run all tests once | +| `npm run test:watch` | Run tests in watch mode | diff --git a/docs/tech-stack.md b/docs/tech-stack.md new file mode 100644 index 0000000..d039342 --- /dev/null +++ b/docs/tech-stack.md @@ -0,0 +1,29 @@ +# Tech Stack + +| Category | Tool | Version | Purpose | +|----------|------|---------|---------| +| **Runtime** | [Matter.js](https://brm.io/matter-js/) | ^0.20.0 | 2D rigid-body physics engine | +| **Rendering** | Canvas2D | (built-in) | Fruit drawing, UI overlay, game-over screen | +| **Build** | [Vite](https://vitejs.dev/) | ^8.0.4 | Dev server, ES module bundling, production builds | +| **Testing** | [Vitest](https://vitest.dev/) | ^4.1.4 | Unit and integration tests | +| **Language** | JavaScript (ES Modules) | — | Vanilla JS, no framework | +| **Dev Tooling** | [ClaudeKit](https://github.com/carlrannaberg/claudekit) | — | Git hooks for linting, type-checking, testing, self-review | + +## Project Structure + +``` +src/ + main.js Entry point: initializes game, attaches event listeners + game.js Game class: orchestrates engine, renderer, input, state + physics.js Matter.js engine setup, world configuration, walls + renderer.js Canvas2D rendering: fruits, walls, UI overlay + input.js Mouse/touch input handling, drop control + fruits.js Fruit definitions (sizes, colors, labels, progression) + merger.js Collision detection callback, merge logic, scoring + constants.js Game dimensions, physics tuning, timing constants + style.css Page styling + *.test.js Vitest test files +index.html Single HTML page with canvas element +specs/ Feature and bugfix specifications +docs/ Documentation +```