Demo

Install

yarn add reel-deal

Usage (TypeScript)

import { ReelDeal } from 'reel-deal';

const reel = new ReelDeal({
  canvas: 'canvas',
  container: 'reelWrap',
  button: 'spinBtn',
  sprite: new URL('./assets/reel.png', import.meta.url).href,
  slotCount: 8,
  reels: 3,
  initialSegments: [3, 2, 0],
  queuedSpinStates: [
    { stopAtSegments: [1, 1, 0] },
    { stopAtSegments: [2, 0, 2] },
  ],
});

await reel.init();

Usage (Vue 3)

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
import { ReelDeal } from 'reel-deal';

const containerRef = ref<HTMLDivElement | null>(null);
const canvasRef = ref<HTMLCanvasElement | null>(null);
const buttonRef = ref<HTMLButtonElement | null>(null);
const reel = shallowRef<ReelDeal | null>(null);

onMounted(async () => {
  if (!containerRef.value || !canvasRef.value) return;
  reel.value = new ReelDeal({
    container: containerRef.value,
    canvas: canvasRef.value,
    button: buttonRef.value ?? undefined,
    sprite: new URL('./assets/reel.webp', import.meta.url).href,
    slotCount: 8,
    reels: 3,
  });
  await reel.value.init();
});

onBeforeUnmount(() => {
  reel.value?.destroy();
  reel.value = null;
});
</script>

<template>
  <button ref="buttonRef">Spin</button>
  <div ref="containerRef">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

— Initialize in onMounted, destroy in onBeforeUnmount.

Usage (HTML)

<button id="spinBtn">Spin</button>

<div id="reelWrap">
  <canvas id="canvas"></canvas>
</div>

— To enable click-to-spin, pass button in options.
— Use queuedSpinStates for predefined spin sequences.

Sprite format

• Single vertical spritesheet.
• Each slot is a square frame.
• Total height is slotCount * frameWidth.
• Recommended: use a POT texture (power-of-two), for example 256x2048 for 8 slots.
• POT textures guarantee REPEAT + mipmap in WebGL1. In WebGL2, mipmap also works with NPOT, but POT is still the safest default.

Options

| Option | Type | Default | Description | |:-------------------|:------------------------------|:-------:|:----------------------------------------| | canvas | HTMLCanvasElement \| string | — | Canvas element or element id. | | container | HTMLElement \| string | — | Container element or element id. | | sprite | string \| HTMLImageElement | — | Sprite sheet URL or image element. | | slotCount | number | — | Number of frames in the sprite. | | reels | number | 1 | Number of reels (1–5). | | initialSegments | number[] | — | Initial stop index per reel. | | button | HTMLButtonElement \| string | — | Optional spin button element or DOM id. | | queuedSpinStates | ReelDealSpinState[] | — | Optional queue of predefined spins. |

Queue item type

type ReelDealSpinState = {
  stopAtSegments: number[];
  callback?: (spinIndex: number, stopAtSegments: number[]) => void;
};

Methods

await reel.init();

reel.destroy();

License

MIT