pixi-reels
All recipes

Beginner: carry the value as data

The same coin, but the number lives in data instead of being baked into the class. One generic coin symbol carries any value the server sends, painted from the coin:locked event. The Hold & Win way.

Loading recipe…

Press Run. Every coin is the same plain gold disc, yet each lands showing a different amount — because the number isn’t part of the coin, it’s data the board carried for you.

Baked-in vs. data

In the previous lesson each value was its own class variant (coin5 always drew 5). That’s great when the values are fixed. But a real Hold & Win server decides a different amount for every coin, so you’d need a class per amount — unworkable.

Instead, keep one generic coin and attach the number as data:

class PlainCoin extends ReelSymbol {     // no value anywhere in here
  onActivate() { this._draw(); }
  resize(w, h) { this._w = w; this._h = h; this._draw(); }
  _draw() { /* just a gold disc, no number */ }
  // onDeactivate / playWin / stopAnimation are tiny no-ops
}

The value rides in data

A Hold & Win hit is { cell, id, data }. The board stores data exactly as given and never reads it — it has no idea what “value” means:

board.respin([{ cell: { col: 0, row: 0 }, id: 'coin', data: { value: 25 } }]);

You paint the number

The number becomes visible only because you draw it, in the coin:locked handler, using the board’s own cell geometry:

board.events.on('coin:locked', ({ coin }) => {
  const c = board.cellCenter(coin.cell);           // board-local pixel center
  const label = new PIXI.BitmapText({ text: coin.data.value.toFixed(2), style: { fontFamily: 'GoldDigits', fontSize: 30 } });
  label.anchor.set(0.5);                           // anchor + cell center = centered
  label.position.set(board.container.x + c.x, board.container.y + c.y);
  labels.addChild(label);
});

The number is the game’s gold digit bitmap font (GoldDigits, loaded once up front), anchored at 0.5 and dropped on the cell’s center so it sits centered on the coin.

That’s the whole idea behind every Hold & Win recipe on this site: the coin art is generic, the value is data, and the game layer paints it. Swap value for a multiplier, a jackpot tier, or a collector flag and nothing about the coin changes.