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.