Win animations

SymbolSpotlight dims the losers, lifts the winners above the mask, and cycles through lines for you.

One win, one line#

reelSet.events.on('spin:complete', async (result) => {
  const wins = detectWins(result.symbols);      // your logic
  if (wins.length === 0) return;

  // positions: [{ reelIndex, cellIndex }, ...]
  await reelSet.spotlight.show(wins[0].positions, {
    dimAmount: 0.3,
    playWinAnimation: true,
  });
});

Multiple lines, cycled#

await reelSet.spotlight.cycle(
  wins.map((w) => ({ positions: w.positions })),   // WinLine[]
  {
    displayDuration: 1000,   // ms per line. Default 2000
    gapDuration: 300,        // ms between lines
    cycles: 1,
    dimAmount: 0.3,          // losers fade to 30%
  },
);

Play per-symbol animations#

Set playWinAnimation: true and the spotlight calls playWin() on each highlighted symbol. SpriteSymbol, AnimatedSpriteSymbol and SpineSymbol all implement it.

await reelSet.spotlight.show(wins[0].positions, { playWinAnimation: true });

show() resolves when the animation is done, so await it to gate whatever comes next.

Events#

spotlight:start and spotlight:end bracket a cycle(). Use them to disable the spin button while a win plays.