Roulette Widget

Embed a full roulette widget with spinning wheel, stats panel, chip selector, and animated gameplay. Supports play mode (interactive spins) and simulation mode (click-to-simulate). Receives round results via postMessage.

Quick Start

Copy this snippet into your HTML to embed a roulette widget:

<iframe
  src="https://spinstrategy.app/embed/roulette"
  style="border:none;width:100%;height:700px"
></iframe>

Query Parameters

All parameters from the main embed docs apply. Key roulette-specific parameters:

postMessage API

The widget communicates with its parent frame via window.postMessage. Listen for messages on the parent window to react to resize and round events.

Resize Event

Emitted whenever the widget's content size changes. Useful for auto-sizing the iframe.

{
  type: "spinstrategy:resize",
  payload: { width: number, height: number }
}

Round Result Event

Emitted after every finalized spin or simulation click with the outcome details.

{
  type: "spinstrategy:roundResult",
  payload: {
    pocket: number,      // 0-36, the winning pocket
    won: boolean,        // whether any bet won
    net: number,         // net result in dollars (can be negative)
    totalRounds: number  // cumulative rounds played
  }
}

Listener Example

window.addEventListener("message", (event) => {
  if (event.data?.type === "spinstrategy:roundResult") {
    const { pocket, won, net, totalRounds } = event.data.payload;
    console.log(`Round ${totalRounds}: pocket ${pocket}, ${won ? "WIN" : "LOSS"}, net $${net}`);
  }

  if (event.data?.type === "spinstrategy:resize") {
    const iframe = document.getElementById("my-roulette");
    if (iframe) iframe.style.height = event.data.payload.height + "px";
  }
});

Responsive Behavior

The widget adapts to its container width automatically. Above 860px, the wheel panel sits beside the board (horizontal layout). Below 860px, it stacks vertically. Below 540px, the content scales proportionally to fit.

Examples