# CCC Game Kit — Template

A juicy Phaser 3 starter that already meets the CCC GAME STANDARD: Boot → Preload (progress bar) → Menu → Game → GameOver, full juice (screen shake, hit-stop, particles, flash, squash & stretch, score popups), Web-Audio SFX + music loop, localStorage best score, object pooling, pixelRatio capped at 1, and keyboard + pointer + touch input.

It also ships the **CCC GAME UI DESIGN SYSTEM** — our website "design bar" ported to games — so every game looks tight, centered, and aligned out of the box (see below).

Run it: `python3 -m http.server 8000` then open `http://localhost:8000`. It plays out of the box with placeholder shapes — you make it yours by editing **three places**.

## Design system (the look) — `game-ui.css` + `src/gameui.js`

Two files give every game the same polished chrome and in-canvas UI. Don't fork them; reuse them.

**`game-ui.css`** — page chrome (HTML/CSS):
- full-viewport dark base with a slow drifting **mesh-gradient** (4 big blurred radial blobs, low opacity);
- the Phaser canvas **centered both axes** inside a `.stage` **frosted-glass card** (semi-transparent dark fill + `backdrop-filter` blur + 1px light border + 20px radius + soft shadow), with generous padding and a slim **header row**: game title in the display font + a `.stage-controls` slot for **mute / restart**;
- Google Fonts: **Space Grotesk** (display, 600/700) + **Inter** (body); responsive — the stage scales to fit small screens and stays centered.

`index.html` mounts the canvas inside `.stage > #game`, waits on `window.__fontsReady` so the fonts render *inside* the canvas, and wires the header buttons via `UI.wireControls(game)` in `Boot.js`.

**`src/gameui.js`** (exported on `window.UI`, pure Phaser graphics + text, dependency-free) — the in-canvas toolkit, everything snapped to an **8px grid** with one accent colour and a fixed type scale:
- `UI.palette` — `{ glass, panel, accent, text, muted, success, danger, radius }`.
- `UI.panel(scene, x, y, w, h, {title, radius})` — frosted-glass rounded panel (centered on x,y).
- `UI.button(scene, x, y, w, h, label, onClick, {ghost, accent})` — the one consistent pill button: accent fill, rounded, centered display-font label, hover lighten+scale, press feedback.
- `UI.title / UI.label / UI.value / UI.body(scene, x, y, str, {style, origin})` — type-scale text, centered/aligned, baseline-correct.
- `UI.hudBar(scene, slots, opts)` — a clean frosted top HUD strip with evenly-spaced, aligned stat slots; `.set(key|index, value)` / `.setColor(...)` update a slot in place.
- `UI.scrim(scene, alpha)` — full-screen dim for menus/dialogs. `UI.grid(n)` snaps any number to the 8px scale.

The template's **Menu / HUD / GameOver** are built entirely with `UI.*`, so any new game inherits the look just by using these helpers instead of ad-hoc `add.text` + `add.rectangle`. Keep the game's **art and gameplay** as-is; only the surrounding chrome and menu/HUD/dialog UI use the design system.

## The 3 places you edit

### 1. Assets — `src/scenes/Preload.js`
Find the `ASSET LIST — EDIT POINT #1` block. Uncomment / add your images:

```js
this.load.image('bg',   'assets/bg.png');
this.load.image('hero', 'assets/hero.png');
this.load.image('good', 'assets/good.png');
this.load.image('bad',  'assets/bad.png');
```

Generate cohesive art with the kit tool:

```bash
node ../tools/gen-assets.mjs ./assets ./assets.json
```

where `assets.json` is `[{ "name": "bg", "prompt": "..." }, ...]`. For sprites that need transparency, put **"isolated on solid #FF00FF background"** in the prompt — the tool chroma-keys magenta to transparent and trims.

### 2. Mechanic — `src/scenes/Game.js`
Find `// === YOUR MECHANIC HERE ===`. Everything between that marker and `endGame()` is the gameplay. Rewrite it for your game. Keep using:
- `this.physics.add.group()` for recyclable actors (built-in pooling),
- `Juice.*` for feel, `Audio.sfx('name')` for sound,
- `this.endGame()` when the run ends.

### 3. Tuning — `src/config.js`
`window.GAME.tuning` holds every gameplay knob (lives, spawn rate, fall speed, difficulty ramp, player speed) plus title, colors, and the localStorage key. Change feel here without touching logic.

## Juice API (`src/juice.js`)
`Juice.screenShake(scene, dur, intensity)` · `Juice.hitStop(scene, ms)` · `Juice.burstParticles(scene, x, y, color, count)` · `Juice.flash(scene, dur, [r,g,b])` · `Juice.squashStretch(scene, obj, amount, dur)` · `Juice.scorePopup(scene, x, y, text, color)`

## Audio API (`src/audio.js`)
`Audio.sfx('move'|'catch'|'score'|'hit'|'lose'|'start'|'miss')` · `Audio.startMusic()` · `Audio.stopMusic()` · `Audio.toggleMute()`. AudioContext resumes on first gesture automatically.

## Verify (definition of done)
```bash
node ../tools/verify.mjs .
```
Serves the folder, loads it in a real browser, fails on ANY console error, confirms the canvas rendered, and saves `verify-screenshot.png`. Zero errors = shippable.
