SP slotplate
Start here

Quickstart

From zero to a running client in two commands.

Scaffold

npm create slotplate my-slot
cd my-slot
pnpm install
pnpm dev

Open http://localhost:5173. Click Spin. You're watching the FSM run end-to-end: HUD click → transition → bet debit → parallel reels-start + network — then result playback → winShow → idle.

The reels themselves are a stub. slotplate ships with a StubReelsEngine so the FSM can boot before your assets are loaded. You'll swap it for a real ReelSetBuilder call in src/view/scenes/MainScene.ts once you have art.

What just booted

The composition root (src/composition.ts) wired:

  1. A Pixi Application mounted in #app.
  2. A MobX RootStore holding balance, data, ui.
  3. The FSM with phases idle, spin, stopSpin, winShow.
  4. A HUDPresenter binding the plain HTML buttons to FSM transitions.
  5. A MockNetworkManager returning a random grid after 300 ms.
  6. A GsapTicker synced to Pixi's ticker — no setTimeout leaks.

Next checkpoints

  1. Read CLAUDE.md in the project root. The principles there are hard rules, and Biome enforces them. You'll save yourself a lint-failure commit.
  2. Wire pixi-reels properly. Replace StubReelsEngine in src/view/scenes/MainScene.ts with a real ReelSetBuilder call. See the Add a symbol guide for the shape.
  3. Swap the network transport. MockNetworkManager is for dev only. Your real RGS goes in src/infrastructure/NetworkManager.ts. Keep the interface; replace the class. See Swap the network transport.
  4. Tune the HUD. The default HUD is three DOM elements. Swap in React / Vue / Svelte when you're ready — the presenter contract stays the same.
  5. Run the tests. pnpm test. The scaffolded project ships with real tests for the FSM and stores.

Running commands

pnpm dev        # vite on :5173
pnpm typecheck  # tsc --noEmit
pnpm test       # vitest
pnpm lint       # enforces the principles
pnpm build      # static bundle in dist/

If something breaks

  • Build the project first with pnpm install && pnpm typecheck — catches dep mismatches.
  • Check the browser console. __PIXI_REELS_DEBUG.log() shows the reel state.
  • Use the /loop of TypeScript → lint → test as your editing rhythm.