SP slotplate
Concept

View (pixi-reels)

The rendering surface, behind one presenter.

src/view/ is the only layer (besides presenters/) that imports pixi.js or pixi-reels. Everything else talks to the view through ReelsPresenter.

Contents

  • scenes/MainScene.ts — Pixi app lifecycle, creates the reel engine.
  • symbols/SpriteReelSymbol.ts — default symbol class using Pixi sprites + GSAP.
  • symbols/SpineReelSymbol.ts — optional Spine wrapper (stub; enable with peer dep).
  • symbols/SymbolAnimationPlayer.ts — companion for Spine symbols (bonbon-hw pattern).
  • symbols/SymbolFactory.ts — picks sprite vs spine per symbol id.
  • overlays/ — payline renderers, bigwin, anticipation glows.

Wiring pixi-reels

MainScene.createReelsEngine() is where you call new ReelSetBuilder(app). The builder's fluent API lets you configure columns, rows, symbols, middleware, and spotlight in one chain. See the Add a symbol guide for concrete wiring.

What goes in view vs presenter

  • view/: Pixi objects, display tree, rendering, texture/animation lifecycle.
  • presenter/: "when state changes, call these view methods."

The test: can a presenter's API be re-implemented over a totally different renderer (Phaser, Canvas2D, Three.js)? If yes, the boundary is in the right place.