Add a symbol

Adding a new reel symbol to a slotplate project.

Short version

/add-symbol Watermelon

(In Claude Code. The slash command does the steps below.)

Long version

1. Add the texture. Drop the sprite in public/assets/symbols/watermelon.png, or add it to your TexturePacker atlas.
2. Register in the asset bundle. In composition.ts, add the alias to the asset bundle loaded before the main scene mounts.
3. Create the symbol class. src/view/symbols/WatermelonSymbol.ts:

   export class WatermelonSymbol extends SpriteReelSymbol {
     constructor() {
       super('watermelon', Texture.from('watermelon'));
     }
   }

   Subclass SpriteReelSymbol only if you need custom win animation, particles, or sub-sprites. For a simple sprite, reuse the base class directly from the factory.
4. Register in the factory. SymbolFactory picks a renderer per id. Add { id: 'watermelon', renderer: 'sprite', textureAlias: 'watermelon' } to its definitions.
5. Add the id to gameConfig.ts. The symbolIds array is the whitelist of what the server is allowed to send. An id not in this list means the factory throws loud — which is intentional.
6. Test it. tests/view/WatermelonSymbol.test.ts — assert the lifecycle (activate, resize, playWin, dispose) works without throwing.
7. Run: pnpm typecheck && pnpm test && pnpm lint.

If it's a Spine symbol

Use SpineReelSymbol instead. See the Spine symbols guide for the peer-dep install, the SymbolAnimationPlayer wiring, and the per-symbol animation config. SymbolFactory picks per-id, so you can mix sprite and Spine symbols in the same game.

Anti-patterns

• Importing pixi-reels or pixi.js outside view/ or presenters/ — lint error.
• Putting payout info on the symbol. The client doesn't know payouts.
• Calling setTimeout for the win pulse. Use gsap.to(this.scale, ...).
• Scattering layout logic across constructor + onActivate + resize. Put it in resize; it runs on every swap anyway.