@codyswann/lisa 2.178.5 → 2.179.0

package/plugins/lisa-phaser/skills/phaser-services/SKILL.md

@@ -0,0 +1,208 @@
+---
+name: phaser-services
+description: This skill should be used when wiring cross-cutting services and shared state in a Phaser 4 game — the typed registry wrapper for global state, a single dedicated EventsCenter bus (never game.events), the .on()/.off() listener discipline enforced in scene shutdown, SoundService (mobile audio unlock on first gesture), InputService (semantic actions instead of raw keys), and SaveService (versioned localStorage with a migration chain). Use it when adding global state, an event bus, audio/input/save plumbing, or fixing listener leaks and lost saves. Pairs with phaser-scenes, phaser-testing, and phaser-i18n.
+---
+
+# Phaser 4 Services and Shared State
+
+## Overview
+
+Cross-cutting concerns — global state, app events, sound, input, save — live in
+`src/services/**` as thin, typed singletons, **not** scattered through scenes.
+Two rules anchor everything: state flows through a typed registry wrapper, and
+app messaging flows through **one dedicated EventsCenter** that is never
+`game.events`. Direct `localStorage` access outside `src/services/**` is
+lint-banned — persistence goes through SaveService.
+
+## Global state: a typed wrapper over the registry
+
+`this.registry` is a game-wide key/value `DataManager` shared across scenes. Raw
+access is stringly-typed and untestable, so wrap it once:
+
+```ts
+// src/services/state.ts
+interface GameState { coins: number; level: number; muted: boolean; seed: number; }
+const DEFAULTS: GameState = { coins: 0, level: 1, muted: false, seed: 0 };
+
+export class GameStore {
+  constructor(private reg: Phaser.Data.DataManager) {
+    for (const k in DEFAULTS) if (!reg.has(k)) reg.set(k, (DEFAULTS as any)[k]);
+  }
+  get<K extends keyof GameState>(k: K): GameState[K] { return this.reg.get(k); }
+  set<K extends keyof GameState>(k: K, v: GameState[K]) { this.reg.set(k, v); }
+  onChange<K extends keyof GameState>(k: K, fn: (v: GameState[K]) => void) {
+    const h = (_p: unknown, key: string, v: GameState[K]) => { if (key === k) fn(v); };
+    this.reg.events.on(Phaser.Data.Events.CHANGE_DATA, h);
+    return () => this.reg.events.off(Phaser.Data.Events.CHANGE_DATA, h); // caller .off()s in shutdown
+  }
+}
+```
+
+Construct it once (in Boot) and read it via the registry. Keys are typed by
+`GameState`, so a typo is a compile error. The registry holds *small* shared
+state (settings, run seed, currency) — not GameObjects and not per-frame data.
+
+## The EventsCenter bus (never `game.events`)
+
+App-level messaging ("enemy-died", "score-changed", "level-cleared") uses a
+single dedicated emitter. Reusing `game.events` (the engine's own bus) is
+lint-banned — it mixes your events with engine lifecycle events and is
+impossible to fully tear down.
+
+```ts
+// src/services/event-center.ts
+export const EventCenter = new Phaser.Events.EventEmitter();
+
+// typed key constants come from src/assets.ts (generated) — no raw strings
+import { GameEvent } from "../assets";
+EventCenter.emit(GameEvent.ScoreChanged, score);
+```
+
+## Listener discipline: every `.on()` has a matching `.off()`
+
+This is the leak rule the `require-shutdown-cleanup` lint rule and the testing
+leak gate ([[phaser-testing]]) enforce. **Any** external listener — `EventCenter`,
+`this.input`, `this.scale`, `this.time`, `window`, the registry — must be removed
+in the scene's `shutdown`. Listeners on the scene's own display objects die with
+the scene; external ones do not, and they fire again (doubled) after a restart.
+
+```ts
+export class Game extends Phaser.Scene {
+  private cleanups: Array<() => void> = [];
+
+  create() {
+    const onResize = (s: Phaser.Structs.Size) => this.layout(s.width, s.height);
+    this.scale.on(Phaser.Scale.Events.RESIZE, onResize);
+    this.cleanups.push(() => this.scale.off(Phaser.Scale.Events.RESIZE, onResize));
+
+    const onScore = (n: number) => this.hud.setScore(n);
+    EventCenter.on(GameEvent.ScoreChanged, onScore);
+    this.cleanups.push(() => EventCenter.off(GameEvent.ScoreChanged, onScore));
+
+    this.events.once(Phaser.Scenes.Events.SHUTDOWN, this.shutdown, this);
+  }
+
+  shutdown() { this.cleanups.forEach(fn => fn()); this.cleanups.length = 0; }
+}
+```
+
+Keeping the matching `.off()` next to each `.on()` (a `cleanups` array, or named
+handler methods you remove in `shutdown`) is the pattern that survives the leak
+gate. Prefer `.once()` where a listener should fire only once.
+
+## SoundService — audio unlock on first gesture
+
+Web Audio starts **suspended** until a user gesture; sound played before then is
+silently dropped ("works on my machine, silent on the phone"). Centralize the
+unlock and all playback:
+
+```ts
+// src/services/sound-service.ts
+export class SoundService {
+  private unlocked = false;
+  constructor(private sound: Phaser.Sound.BaseSoundManager, private store: GameStore) {}
+
+  attachUnlock(scene: Phaser.Scene) {
+    if (this.unlocked) return;
+    scene.input.once(Phaser.Input.Events.POINTER_DOWN, () => this.resume());
+    // Phaser also fires its own unlock; resume() is idempotent
+    this.sound.once(Phaser.Sound.Events.UNLOCKED, () => this.resume());
+  }
+  private resume() { if ((this.sound as any).context?.state === "suspended") (this.sound as any).context.resume(); this.unlocked = true; }
+  play(key: string, cfg?: Phaser.Types.Sound.SoundConfig) { if (!this.store.get("muted")) this.sound.play(key, cfg); }
+}
+```
+
+Scenes call `soundService.play(Sfx.Jump)` — never `this.sound.play("jump")`.
+Sound keys are generated constants ([[phaser-asset-pipeline]]).
+
+## InputService — semantic actions, not raw keys
+
+Scenes should ask "is *jump* down?", not "is the spacebar down?". A semantic
+layer makes rebinding, gamepads, and touch swap in without touching game code,
+and keeps replays deterministic (record actions, not hardware).
+
+```ts
+// src/services/input-service.ts
+export type Action = "left" | "right" | "jump" | "fire" | "pause";
+
+export class InputService {
+  private down = new Set<Action>();
+  private bindings: Record<number, Action> = {};
+  constructor(kb: Phaser.Input.Keyboard.KeyboardPlugin) {
+    this.bindings[Phaser.Input.Keyboard.KeyCodes.LEFT] = "left";
+    this.bindings[Phaser.Input.Keyboard.KeyCodes.SPACE] = "jump";
+    kb.on("keydown", (e: KeyboardEvent) => { const a = this.bindings[e.keyCode]; if (a) this.down.add(a); });
+    kb.on("keyup",   (e: KeyboardEvent) => { const a = this.bindings[e.keyCode]; if (a) this.down.delete(a); });
+  }
+  isDown(a: Action) { return this.down.has(a); }
+  snapshot(): readonly Action[] { return [...this.down]; } // for replay capture
+}
+```
+
+`update()` reads `input.isDown("jump")` and forwards the action set to pure logic
+in `src/logic/**`. (Register/remove the keyboard listeners with the same on/off
+discipline above.)
+
+## SaveService — versioned localStorage with a migration chain
+
+Raw `localStorage` outside `src/services/**` is lint-banned. Saves carry a schema
+`VERSION`; on load, unknown-but-older saves run forward through a migration chain,
+so an old player's data is never silently lost or crash-loaded.
+
+```ts
+// src/services/save-service.ts
+const KEY = "save:v"; const VERSION = 3;
+interface SaveV3 { version: 3; coins: number; unlocked: string[]; settings: { muted: boolean } }
+
+const migrations: Record<number, (s: any) => any> = {
+  1: s => ({ ...s, unlocked: [], version: 2 }),                 // v1 -> v2
+  2: s => ({ ...s, settings: { muted: false }, version: 3 }),  // v2 -> v3
+};
+
+export class SaveService {
+  load(): SaveV3 {
+    const raw = localStorage.getItem(KEY);                 // only legal localStorage access lives here
+    if (!raw) return this.fresh();
+    try {
+      let s = JSON.parse(raw);
+      while (s.version < VERSION) s = migrations[s.version](s);
+      return s as SaveV3;
+    } catch { return this.fresh(); }                       // corrupt save -> fresh, never crash
+  }
+  save(s: SaveV3) { localStorage.setItem(KEY, JSON.stringify({ ...s, version: VERSION })); }
+  private fresh(): SaveV3 { return { version: VERSION, coins: 0, unlocked: [], settings: { muted: false } }; }
+}
+```
+
+Bump `VERSION` and add the `n -> n+1` migration whenever the shape changes; never
+mutate the read path to "just handle" an old shape inline.
+
+## Errors and telemetry
+
+A vendor-neutral telemetry/analytics abstraction (`src/services/telemetry.ts`)
+exposes `track(event, props)` and `captureError(err, ctx)` behind a stable
+interface so the concrete sink (PostHog, Sentry, none) swaps without touching
+game code. Wire Phaser's error surfaces to it — `window.onerror`, the loader's
+`FILE_LOAD_ERROR`, and `try/catch` around scene transitions all route to
+`captureError`. Strings shown to players come from the i18n catalog
+([[phaser-i18n]]), never hardcoded.
+
+## Project conventions
+
+- Services live in `src/services/**`; that directory is the **only** place raw
+  `localStorage` is permitted.
+- One EventsCenter instance, exported once; never `game.events` for app events.
+- Every external `.on()` is paired with an `.off()` removed in `shutdown` (lint:
+  `require-shutdown-cleanup`; verified by the leak gate in [[phaser-testing]]).
+- Service logic that is pure (migrations, action mapping, mute gating) belongs in
+  or beside `src/logic/**` so Vitest covers it.
+
+## Verification
+
+Services are verified by the runtime gates: the leak gate ([[phaser-testing]])
+proves listeners are removed (start/stop a scene N times, counts return to
+baseline); a SaveService unit test feeds each old version through the migration
+chain and asserts the current shape; and on a real phone, the first tap unlocks
+audio (sound plays) — confirm before committing.
+</content>

package/plugins/lisa-phaser/skills/phaser-services/agents/openai.yaml

@@ -0,0 +1,4 @@
+display_name: "Phaser Services"
+short_description: "wiring cross-cutting services and shared state in a Phaser 4 game — the typed registry wrapper for global state, a single dedicated…"
+default_prompt:
+  - "Use $phaser-services: wiring cross-cutting services and shared state in a Phaser 4 game — the typed registry wrapper for global state, a single dedicated…."

package/plugins/lisa-phaser/skills/phaser-testing/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: phaser-testing
-description: This skill should be used when writing or designing tests for a Phaser 4 game — unit-testing pure game logic with Vitest, keeping logic Phaser-free so it tests without a browser, the Phaser.HEADLESS renderer for logic-only boots, asset-manifest coverage tests, and Playwright smoke tests that prove the game actually boots and renders. Use it when adding tests, setting up CI verification, or deciding what is testable at which level. Pairs with phaser-project-structure, phaser-assets, and phaser-physics.
+description: This skill should be used when writing or designing tests for a Phaser 4 game — unit-testing pure game logic with Vitest, keeping logic Phaser-free so it tests without a browser, the Phaser.HEADLESS renderer for logic-only boots, asset-manifest coverage tests, and the CI runtime gates (boot smoke, allocation/perf budget, leak gate, determinism gate, deterministic Playwright visual regression, bundle-size budget) that verify scenes and entities that are excluded from unit coverage. Use it when adding tests, setting up CI verification, or deciding what is testable at which level. Pairs with phaser-project-structure, phaser-assets, and phaser-services.
 ---
 
 # Phaser 4 Testing
@@ -13,10 +13,17 @@ pyramid, bottom-up:
 1. **Vitest unit tests** over `src/logic/**` — the bulk of coverage.
 2. **Manifest/contract tests** — cheap structural checks (asset packs, scene
    keys, anim definitions).
-3. **Playwright smoke test** — the game boots in a real browser, renders past
-   the Preloader, no console errors.
-
-There is no official Phaser testing harness — this layering IS the strategy.
+3. **Headless integration** (sparingly) — `Phaser.HEADLESS` for things that
+   genuinely need the engine loop.
+4. **Playwright smoke** — the game boots in a real browser, renders past the
+   Preloader, no console errors.
+5. **CI runtime gates** — scenes/entities are excluded from unit coverage and
+   instead verified by deterministic runtime gates: boot smoke, allocation/perf
+   budget, leak gate, determinism gate, visual regression, bundle-size budget.
+
+There is no official Phaser testing harness — this layering IS the strategy. The
+dividing line: pure logic is unit-tested; everything that needs the engine is a
+runtime gate, never a brittle unit test that mocks the world.
 
 ## Layer 1: pure logic under Vitest (the rule that makes it possible)
 
@@ -85,15 +92,101 @@ Convention: scenes set `window.__sceneReady = key` in `create()` (dev/test
 builds) so tests await real readiness instead of sleeping. Run against
 `bun run dev` (or `vite preview` in CI).
 
+## Layer 5: CI runtime gates (how scenes get verified)
+
+Scenes and entities are deliberately **excluded from unit coverage** — mocking
+the engine to "unit test" a scene tests the mock. Instead, CI runs a set of
+deterministic gates against a real (or headless) game. Each gate fails the build
+on regression; together they are the contract that the engine-coupled layer
+keeps working.
+
+**Boot smoke** — the Playwright test above, hardened: page error listener, wait
+for `__sceneReady`, assert zero console errors. This is the floor.
+
+**Allocation / perf budget** — run the game for N frames and assert the frame
+budget and heap growth. Per-frame allocation is what the `no-allocation-in-update`
+and `no-create-in-update` lint rules forbid statically; this gate catches what
+slips through dynamically.
+
+```ts
+test("steady-state frames stay within budget", async ({ page }) => {
+  await page.goto("/"); await bootTo(page, "Game");
+  const stats = await page.evaluate(async () => {
+    const g = (window as any).__game as Phaser.Game;
+    const frames: number[] = []; let last = performance.now();
+    for (let i = 0; i < 600; i++) { await new Promise(r => g.events.once("postrender", r)); const n = performance.now(); frames.push(n - last); last = n; }
+    return { p95: frames.sort((a,b)=>a-b)[Math.floor(frames.length*0.95)], heap: (performance as any).memory?.usedJSHeapSize };
+  });
+  expect(stats.p95).toBeLessThan(20); // ~50fps floor on CI hardware
+});
+```
+
+**Leak gate** — start and stop a scene N times and assert that texture count,
+event-listener count, active tweens, and timers all return to baseline. This is
+the runtime enforcement of the `require-shutdown-cleanup` rule and the
+on/off-discipline in [[phaser-services]].
+
+```ts
+test("scene start/stop leaves no leaks", async ({ page }) => {
+  await page.goto("/"); await bootTo(page, "MainMenu");
+  const before = await page.evaluate(() => (window as any).__game.textures.getTextureKeys().length);
+  for (let i = 0; i < 20; i++) await page.evaluate(async () => {
+    const g = (window as any).__game as Phaser.Game; g.scene.start("Game");
+    await new Promise(r => setTimeout(r, 50)); g.scene.stop("Game");
+    await new Promise(r => setTimeout(r, 50));
+  });
+  const after = await page.evaluate(() => (window as any).__game.textures.getTextureKeys().length);
+  expect(after).toBeLessThanOrEqual(before); // no per-cycle texture growth
+});
+```
+
+**Determinism gate** — boot twice with the same seed, drive the same inputs, and
+assert an identical state hash. Logic exposes a serializable snapshot; the gate
+hashes it. Same seed → same hash, always. This is the runtime backstop for the
+no-`Math.random()`/`Date.now()`/`performance.now()` rules ([[phaser-services]]).
+
+```ts
+const run = (seed: number) => page.evaluate(s => (window as any).__sim(s, REPLAY), seed);
+expect(hash(await run(1234))).toBe(hash(await run(1234)));
+```
+
+**Deterministic visual regression** — `toHaveScreenshot` under **software GL**
+(`--use-gl=swiftshader`), a **frozen frame** (pause the loop / step a fixed
+number of ticks at a fixed delta), and **masked dynamic regions** (timers,
+particles). Without all three, screenshots flake. Pin Playwright's browser and
+OS in CI so the baseline is stable.
+
+```ts
+await page.evaluate(() => { const g=(window as any).__game; g.loop.sleep(); g.step(0,16.6); });
+await expect(page).toHaveScreenshot("game.png", { mask: [page.locator("#timer")], maxDiffPixelRatio: 0.01 });
+```
+
+**Bundle-size budget** — assert the built bundle stays under a byte budget so a
+stray dependency or an un-split `phaser` chunk fails the PR. Wire it to the prod
+build's `manualChunks` split ([[phaser-build-deploy]]).
+
+```jsonc
+// size-limit / custom check after `bun run build`
+[{ "path": "dist/assets/index-*.js", "limit": "60 kB" },
+ { "path": "dist/assets/phaser-*.js", "limit": "400 kB" }]
+```
+
 ## Project conventions
 
-- `bun run test` = Vitest (layers 1–2, coverage-gated). Playwright smoke runs as
-  its own script/CI job against a built preview.
+- `bun run test` = Vitest (layers 1–2, coverage-gated **over `src/logic/**`
+  only** — scenes/entities are out of scope here). The layer-5 gates run as their
+  own CI jobs against a built `vite preview` (and a headless boot for the
+  determinism gate).
+- Build pins are part of the contract: `phaser ^4.2.0`, Vite, TypeScript 6.
 - Tests never assert on private scene fields; they assert on logic outputs
-  (layer 1) or observable behavior (layer 4).
+  (layer 1), observable behavior (layer 4), or the runtime invariants the gates
+  measure (layer 5).
 
 ## Verification
 
 The testing setup itself is verified when `bun run test` passes with coverage
-over `src/logic/**`, and the Playwright smoke fails when you deliberately break
-boot (rename a pack file) — a smoke test that can't fail is decoration.
+over `src/logic/**`, the Playwright smoke fails when you deliberately break boot
+(rename a pack file), and each layer-5 gate fails on its targeted regression —
+leak gate when a listener loses its `.off()`, determinism gate when a
+`Math.random()` sneaks in, visual gate when the frame changes. A gate that
+can't fail is decoration.

package/plugins/lisa-phaser-agy/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "lisa-phaser",
-  "version": "2.178.5",
+  "version": "2.179.0",
   "description": "Phaser 4 game-development rules for TypeScript projects",
   "author": {
     "name": "Cody Swann"

package/plugins/lisa-phaser-agy/skills/phaser-accessibility/SKILL.md

@@ -0,0 +1,135 @@
+---
+name: phaser-accessibility
+description: This skill should be used when making a Phaser 4 game accessible — honoring prefers-reduced-motion, pausing on window/tab blur, keyboard navigation and visible focus for menus, colorblind-safe palettes, and a screen-reader live region that announces game state through the DOM. Use it when building menus, settings, HUD, or any player-facing UI, or when an accessibility requirement comes up. Pairs with phaser-services, phaser-i18n, and phaser-scenes.
+---
+
+# Phaser 4 Accessibility
+
+## Overview
+
+The canvas is opaque to assistive tech, so accessibility is something you build
+in, not get for free. Five pillars carry most of the value: respect
+`prefers-reduced-motion`, pause when the window loses focus, make menus fully
+keyboard-navigable with visible focus, use colorblind-safe palettes, and mirror
+game state into a DOM **live region** for screen readers. These wire through the
+shared services ([[phaser-services]]) and use translated strings ([[phaser-i18n]]).
+
+## prefers-reduced-motion
+
+Read the media query once and gate non-essential motion (screen shake, parallax,
+big tweens, particle bursts) behind it. Reduced motion means "convey the same
+information with less movement", not "remove feedback".
+
+```ts
+// src/services/a11y.ts
+export const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+// in a scene
+if (!reduceMotion) this.cameras.main.shake(120, 0.004);
+this.tweens.add({ targets: panel, alpha: 1, duration: reduceMotion ? 0 : 250 });
+```
+
+Expose it as a togglable setting too (some players want it on regardless of OS),
+stored via SaveService ([[phaser-services]]).
+
+## Pause on blur
+
+A game that keeps running while the tab is hidden drains battery, desyncs audio,
+and is hostile to players who switch away. Phaser already exposes blur/focus
+events — pause the loop and audio, resume on focus.
+
+```ts
+this.game.events.on(Phaser.Core.Events.BLUR, () => { this.scene.pause(); this.sound.pauseAll(); });
+this.game.events.on(Phaser.Core.Events.FOCUS, () => { this.scene.resume(); this.sound.resumeAll(); });
+```
+
+Set `Phaser.Types.Core.GameConfig.autoFocus` and `disableContextMenu` as needed.
+(These are listeners — remove them in `shutdown` per the on/off discipline in
+[[phaser-services]].) For competitive/timed play, pausing on blur is also the
+fair behavior.
+
+## Keyboard navigation and visible focus
+
+Every menu must be operable without a pointer: arrow keys / Tab move focus, Enter
+or Space activates, Escape backs out. Keep a focus index over a typed list of
+items and render an unmistakable focus indicator (outline/scale, not color alone).
+
+```ts
+private items: MenuItem[] = [];
+private focus = 0;
+
+private move(delta: number) {
+  this.items[this.focus].setFocused(false);
+  this.focus = Phaser.Math.Wrap(this.focus + delta, 0, this.items.length);
+  this.items[this.focus].setFocused(true);          // visible outline + announce
+  this.announce(this.items[this.focus].label);
+}
+create() {
+  this.input.keyboard!.on("keydown-DOWN", () => this.move(1));
+  this.input.keyboard!.on("keydown-UP",   () => this.move(-1));
+  this.input.keyboard!.on("keydown-ENTER",() => this.items[this.focus].activate());
+}
+```
+
+Use the semantic InputService actions ([[phaser-services]]) so the same bindings
+serve gamepad and touch. Never rely on hover-only affordances.
+
+## Colorblind-safe palettes
+
+Never encode meaning in hue alone — pair every color cue with a shape, icon,
+label, or pattern (red enemy *and* a spike icon; green/red status *and* a check/x).
+Choose palettes that stay distinguishable across deuteranopia/protanopia
+/tritanopia, and offer a colorblind palette option in settings.
+
+```ts
+// src/logic/palette.ts — pure, testable, no phaser import
+export const palettes = {
+  default: { ally: 0x2e7d32, enemy: 0xc62828, neutral: 0xf9a825 },
+  deuter:  { ally: 0x0072b2, enemy: 0xd55e00, neutral: 0xf0e442 }, // Okabe–Ito, CB-safe
+} as const;
+```
+
+Keep palette selection in `src/logic/**` so contrast/choice logic is unit-tested,
+and store the player's choice via SaveService.
+
+## Screen-reader live region
+
+Mirror important state changes into an ARIA live region in the DOM (outside the
+canvas) so screen readers announce them. One polite region for status, one
+assertive for urgent events.
+
+```html
+<!-- index.html, alongside the game container -->
+<div id="sr-status" aria-live="polite"   class="sr-only"></div>
+<div id="sr-alert"  aria-live="assertive" class="sr-only"></div>
+```
+
+```ts
+// src/services/a11y.ts
+const status = document.getElementById("sr-status")!;
+export function announce(msg: string, urgent = false) {
+  const el = urgent ? document.getElementById("sr-alert")! : status;
+  el.textContent = ""; el.textContent = msg; // clear+set so identical repeats re-announce
+}
+```
+
+Announce menu focus, score milestones, level changes, and game-over. Messages
+come from the i18n catalog ([[phaser-i18n]]) — never hardcoded — and `.sr-only`
+keeps the region visually hidden but readable by AT.
+
+## Project conventions
+
+- A11y plumbing lives in `src/services/a11y.ts`; palette/choice logic lives in
+  `src/logic/**` (unit-tested).
+- Accessibility settings (reduced motion, colorblind palette) persist via
+  SaveService and apply on boot ([[phaser-services]]).
+- All announced/visible text comes from the i18n catalog ([[phaser-i18n]]).
+
+## Verification
+
+Verified by manual passes that double as runtime checks: tab through every menu
+with the pointer unplugged and confirm visible focus + activation; set the OS to
+reduce-motion and confirm shake/parallax stop while feedback remains; blur the
+tab and confirm the game pauses and audio stops; and run a screen reader (VoiceOver
+/NVDA) to confirm the live region announces menu focus and game state.
+</content>

package/plugins/lisa-phaser-agy/skills/phaser-asset-pipeline/SKILL.md

@@ -0,0 +1,148 @@
+---
+name: phaser-asset-pipeline
+description: This skill should be used when setting up or changing the build-time asset pipeline of a Phaser 4 game — packing raw art in assets/src into public/assets (free-tex-packer-core texture atlases, audiosprite audio sprites, BMFont bitmap fonts) and the codegen step that emits typed keys to src/assets.ts so a missing or renamed key is a compile error. Use it when adding source art, wiring packing into the build, regenerating typed keys, or eliminating raw string asset keys. Pairs with phaser-assets, phaser-build-deploy, and phaser-services.
+---
+
+# Phaser 4 Asset Pipeline
+
+## Overview
+
+Runtime assets are **generated, not hand-placed**. Raw source art lives in
+`assets/src/**` (PNGs, audio, font sources); a build step packs it into
+`public/assets/**` (atlases, audio sprites, bitmap fonts) and **codegens typed
+key constants into `src/assets.ts`**. The payoff: a missing or renamed asset is a
+**compile error**, not a green square or silent-missing audio at runtime. No raw
+string asset / scene / event keys anywhere — they all come from the generated
+module ([[phaser-assets]] covers loading those keys at runtime).
+
+## Layout
+
+| Path | Role |
+| --- | --- |
+| `assets/src/sprites/**` | Raw individual PNGs — the art source of truth |
+| `assets/src/audio/**` | Raw audio clips (wav/ogg sources) |
+| `assets/src/fonts/**` | Font sources for BMFont generation |
+| `public/assets/**` | **Generated** packed output (atlases, audiosprites, fonts, `pack.json`) — git-ignored or committed as a build artifact |
+| `src/assets.ts` | **Generated** typed key constants — never edited by hand |
+| `scripts/pack-assets.mjs` | The pipeline driver (runs the three packers + codegen) |
+
+## Step 1: texture atlases with free-tex-packer-core
+
+`free-tex-packer-core` packs many PNGs into atlas pages plus a JSON manifest, in
+a Node script (no GUI, runs in CI):
+
+```js
+// scripts/pack-assets.mjs (excerpt)
+import { packAsync } from "free-tex-packer-core";
+import { glob } from "glob";
+import { readFile, writeFile } from "node:fs/promises";
+
+const images = await Promise.all(
+  (await glob("assets/src/sprites/**/*.png")).map(async p => ({
+    path: p.replace("assets/src/sprites/", ""), contents: await readFile(p),
+  })));
+
+const files = await packAsync(images, {
+  textureName: "game", width: 2048, height: 2048,
+  padding: 2, allowRotation: false, allowTrim: true,
+  exporter: "JsonHash", removeFileExtension: true,
+});
+for (const f of files) await writeFile(`public/assets/atlases/${f.name}`, f.buffer ?? f.content);
+```
+
+The frame names in the manifest become the atlas frame keys you reference as
+generated constants. Atlas everything that renders together — loose images break
+sprite batching ([[phaser-assets]]).
+
+## Step 2: audio sprites with audiosprite
+
+`audiosprite` concatenates short SFX into one file (in multiple codecs) plus a
+JSON map of `{ start, end }` per clip — one request, one decode, instead of dozens:
+
+```jsonc
+// package.json script
+"pack:audio": "audiosprite --output public/assets/audio/sfx --export ogg,m4a --format howler2 assets/src/audio/*.wav"
+```
+
+Provide at least two codecs (`ogg` + `m4a`) so every browser can play one. Load
+with `this.load.audioSprite(Audio.Sfx, "audio/sfx.json")` and play by sprite key.
+
+## Step 3: bitmap fonts with BMFont
+
+`BitmapText` is the performant choice for high-churn text (scores, timers) —
+[[phaser-assets]] / [[phaser-i18n]]. Generate the `.fnt` (XML/JSON) + PNG page
+from a font source with a BMFont tool (`msdf-bmfont-xml` or the `bmfont` CLI) in
+the same script:
+
+```jsonc
+"pack:font": "msdf-bmfont -o public/assets/fonts/ui --font-size 42 --texture-size 1024 1024 assets/src/fonts/ui.ttf"
+```
+
+Load with `this.load.bitmapFont(Font.UI, "fonts/ui.png", "fonts/ui.fnt")`.
+
+## Step 4: codegen typed keys into `src/assets.ts`
+
+After packing, walk the generated manifests and emit `as const` key maps. This is
+the step that turns runtime failures into compile failures:
+
+```js
+// scripts/pack-assets.mjs (codegen excerpt)
+const atlas = JSON.parse(await readFile("public/assets/atlases/game.json", "utf8"));
+const frames = Object.keys(atlas.frames); // raw keys, e.g. "player/idle"
+const sfx = Object.keys(JSON.parse(await readFile("public/assets/audio/sfx.json","utf8")).spritemap);
+
+const out = `// AUTO-GENERATED by scripts/pack-assets.mjs — do not edit.
+export const Tex = { GameAtlas: "game" } as const;
+export const Frame = { ${frames.map(k => `${toIdent(k)}: "${k}"`).join(", ")} } as const;
+export const Audio = { Sfx: "sfx" } as const;
+export const Sfx = { ${sfx.map(s => `${toIdent(s)}: "${s}"`).join(", ")} } as const;
+export const Font = { UI: "ui" } as const;
+export const SceneKeys = { Boot:"Boot", Preloader:"Preloader", MainMenu:"MainMenu", Game:"Game" } as const;
+export const GameEvent = { ScoreChanged:"score-changed", EnemyDied:"enemy-died" } as const;
+`;
+await writeFile("src/assets.ts", out);
+```
+
+Scenes import `Tex`, `Frame`, `Sfx`, `Font`, `SceneKeys`, `GameEvent` — never an
+inline string. Rename art, re-run the pipeline, and every now-stale reference
+fails `bun run typecheck` immediately. (Scene/event keys are kept in the same
+generated module so they share the no-raw-string discipline; edit them via the
+codegen template, not by hand.)
+
+## Step 5: wire into the build
+
+The pipeline runs before dev and before build so generated output is never stale:
+
+```jsonc
+// package.json
+"scripts": {
+  "assets": "node scripts/pack-assets.mjs",
+  "predev":   "bun run assets",
+  "prebuild": "bun run assets",
+  "dev":   "vite",
+  "build": "vite build"
+}
+```
+
+For fast iteration, a `--watch` mode on the pack script re-packs changed source
+art. In CI the pack step runs once before `vite build`; the build then hashes the
+generated files for immutable caching ([[phaser-build-deploy]]).
+
+## Project conventions
+
+- `assets/src/**` is the source of truth; `public/assets/**` and `src/assets.ts`
+  are generated — treat them as build output (re-runnable, not hand-edited).
+- One atlas per render group, one audiosprite per SFX set, BMFont for hot text.
+- A contract test asserts every constant in `src/assets.ts` resolves to an entry
+  in the generated `pack.json`/manifests ([[phaser-testing]]).
+- The generated `src/assets.ts` is the single source of asset/scene/event keys —
+  the no-raw-string-keys rule depends on it existing.
+
+## Verification
+
+The pipeline is verified by deleting a source PNG and re-running `bun run assets`:
+the corresponding generated constant disappears and `bun run typecheck` fails at
+every use site (proving keys are compile-checked). Then boot the game and confirm
+the atlas/audiosprite/font load with no `FILE_LOAD_ERROR` and render/play
+correctly.
+</content>