SP slotplate
Start here

What is slotplate?

An opinionated client boilerplate for slot games built on pixi-reels.

slotplate is a client. It is the presentation and flow layer of a slot game: it renders reels, runs the FSM that orchestrates a spin, animates wins, drives the HUD, plays sound. It is not a game server. It does not compute wins, does not hold the paytable, does not run the RNG, does not certify RTP.

It's shaped deliberately. Every choice here is a bet that a specific failure mode will not happen to your codebase: no silent timers, no bespoke reel engine, no paytable in TypeScript that math never audits, no two stores writing to each other.

What ships when you run npm create slotplate

  • TypeScript project with Vite, MobX, GSAP, and pixi-reels wired.
  • Composition root, tiny DI container, MobX RootStore (Balance, Data, UI).
  • A finite state machine with idle, spin, stopSpin, winShow phases — one file each.
  • ReelsPresenter as the sole bridge to pixi-reels. Biome prevents other layers from importing it.
  • GsapTicker — all scheduled calls go through it. Biome rejects raw setTimeout.
  • Sprite + optional Spine symbol wrappers. The Spine one follows the bonbon-hw SymbolAnimationPlayer pattern.
  • MockNetworkManager producing plausible SpinResponses — swap for your RGS transport in one file.
  • CLAUDE.md, AGENTS.md, .claude/commands/ — agent rules committed in the template.
  • Vitest with real phase + store tests. No canvas required.

The shape

SLOTPLATE · CLIENT UI plain DOM · optional React/Vue scenes Pixi application lifecycle · mounts pixi-reels flow · FSM + phase handlers idle → spin → stopSpin → winShow → idle owns GAME TIME · only writer to stores presenters ReelsPresenter · HUDPresenter state → view infrastructure Ticker · Network · AssetLoader · Analytics I/O boundary state · MobX RootStore = Balance + Data + UI domain · WIRE TYPES ONLY SpinRequest · SpinResponse · Grid · Winline config columns · rows · symbolIds (client-side only) ↓ import direction (enforced by Biome) SERVER (RGS) not slotplate paytable reelstrips RNG + spin eval RTP / math balance (truth) SpinResponse The client never computes these. It renders what the server said happened.
One layer per folder. Downward imports only. The domain folder holds only the wire types that cross the network boundary.

What slotplate is NOT

  • A game server. Your RGS is the server. If you don't have one, build one separately.
  • A math tool. RTP harnesses, volatility analysis, and paytable certification live on the server.
  • A UI framework. The HUD is plain DOM. Swap in React / Vue / Svelte as needed.
  • A monorepo template. One game per repo — monorepos are a cost that most slot teams don't need.

Who it's for

  • Teams starting a new slot client and want the architecture decision made for them.
  • Existing slot codebases that want a reference shape to refactor toward.
  • Anyone editing slot code with an AI agent — the Biome rules + CLAUDE.md keep the agent on-spec.

Next