Plinko Play Controller SDK

React SDK for rendering a manual/autoplay play controller with play amount selection, currency-aware styles, and optional widget slots.

Install

npm install @enigma-lake/plinko-play-controller-sdk

Import styles once in your app entry:

import "@enigma-lake/plinko-play-controller-sdk/dist/style.css";

Quick Start

import { useState } from "react";
import {
  AutoManualPlayProvider,
  AUTO_PLAY_STATE,
  PlinkoRisk,
} from "@enigma-lake/plinko-play-controller-sdk";
import { Currency } from "@enigma-lake/zoot-platform-sdk";

function GameController() {
  const [playAmount, setPlayAmount] = useState(10);
  const [risk, setRisk] = useState<PlinkoRisk>("LOW");
  const [rows, setRows] = useState(16);

  const config = {
    layoutVariant: "classic", // "default" | "classic"
    panel: {
      bottom: "16px",
      bgColorHex: "#081E64",
      overlayButtonBgColor: "#01243A",
    },
    classicGame: {
      dropdown: {
        bgColorHex: "#361791",
      },
    },
    currencyOptions: {
      current: {
        code: Currency.SWEEPS,
        label: "Sweeps",
        abbr: "SC",
        decimals: 2,
      },
      available: [
        {
          code: Currency.SWEEPS,
          label: "Sweeps",
          abbr: "SC",
          decimals: 2,
        },
        {
          code: Currency.GOLD,
          label: "Gold",
          abbr: "GC",
          decimals: 2,
        },
      ],
    },
    onPlay: () => {
      // Trigger one game round
    },
    onAutoPlay: (
      next: () => void,
      stop: () => void,
      state: AUTO_PLAY_STATE,
    ) => {
      // Trigger one round, then call next() when done
      // Call stop() if autoplay must be interrupted
      next();
    },
    playOptions: {
      isPlaying: false,
      disabledController: false,
      displayController: true,
      autoPlayDelay: 500,
      totalBalance: 1000,
      classicGame: {
        disabledMenu: false,
        risks: ["LOW", "MEDIUM", "HIGH", "EXPERT"],
        rows: [8, 9, 10, 11, 12, 13, 14, 15, 16],
        currentRisk: risk, // defaults to "MEDIUM" if omitted
        currentRow: rows, // defaults to rows[0] if omitted
        riskColors: {
          LOW: "#83E674",
          MEDIUM: "#DDC300",
          HIGH: "#F4542F",
          EXPERT: "#FF83E8",
        },
        onRiskChange: setRisk,
        onRowNumberChange: setRows,
      },
      playHook: () => ({
        playAmount,
        setPlayAmount,
        playLimits: {
          [Currency.SWEEPS]: {
            limits: { min: 1, max: 500 },
            defaultBetOptions: [1, 2, 5, 10, 25, 50],
          },
        },
      }),
    },
    leftWidgets: [],
    centerWidgets: [],
    rightWidgets: [],
  };

  return (
    <AutoManualPlayProvider config={config}>
      {({ mode, autoPlay }) => (
        <>
          <div>Mode: {mode}</div>
          <div>Autoplay state: {autoPlay.state}</div>
          <div>Rounds played: {autoPlay.playedRounds}</div>
        </>
      )}
    </AutoManualPlayProvider>
  );
}

What You Get

• Manual and autoplay modes with one provider.
• Play amount controls (-, +, preset list).
• Currency-aware button/input display.
• Optional overlay action button when controller is disabled.
• Left/center/right widget slots.

Main Exports

import {
  AutoManualPlayProvider,
  GAME_MODE,
  AUTO_PLAY_STATE,
  WIDGET,
  format,
  PlayActionButton,
  usePlayController,
  useAutoPlay,
  useTogglePlayAmountPanel,
  useControllerButtonStyles,
  useKeyboardPlayButton,
} from "@enigma-lake/plinko-play-controller-sdk";

Config Shape

AutoManualPlayProvider expects:

• config.layoutVariant ("default" or "classic")
• config.panel
• config.currencyOptions
• config.onPlay
• config.onAutoPlay
• config.onAutoPlayStart (optional)
• config.onAutoPlayStop (optional)
• config.playOptions
• config.leftWidgets
• config.centerWidgets
• config.rightWidgets

playOptions

• isPlaying: boolean
• disabledController: boolean
• displayController: boolean
• classicGame?: { disabledMenu, currentRisk, currentRow, onRiskChange, onRowNumberChange, risks?, rows?, riskColors? }
• totalBalance: number
• playHook: () => { playAmount, setPlayAmount, playLimits? }
• autoPlayDelay?: number
• overlayPlayButton?: () => ReactNode
• isPlayButtonPressed?: boolean
• isStopButtonPressed?: boolean
• setIsStopButtonPressed?: (value: boolean) => void

classicGame

Classic Plinko can render Risk and Rows selectors above the autoplay switcher.

• config.classicGame.dropdown.bgColorHex?: string
• config.playOptions.classicGame.disabledMenu: boolean
• config.playOptions.classicGame.risks: ("LOW" | "MEDIUM" | "HIGH" | "EXPERT")[]
• config.playOptions.classicGame.rows: number[]
• config.playOptions.classicGame.currentRisk?: "LOW" | "MEDIUM" | "HIGH" | "EXPERT"
• config.playOptions.classicGame.currentRow?: number
• config.playOptions.classicGame.onRiskChange: (risk) => void
• config.playOptions.classicGame.onRowNumberChange: (row) => void
• config.playOptions.classicGame.riskColors?: { LOW?: string; MEDIUM?: string; HIGH?: string; EXPERT?: string }

Defaults:

• currentRisk: "MEDIUM"
• currentRow: rows[0]
• riskColors: LOW "#83E674", MEDIUM "#DDC300", HIGH "#F4542F", EXPERT "#F4542F"

Autoplay Contract

onAutoPlay(next, stop, state) is called each autoplay round.

• Call next() after the current round is finished.
• Call stop() to terminate autoplay immediately.
• state is AUTO_PLAY_STATE.IDLE or AUTO_PLAY_STATE.PLAYING.

Autoplay Lifecycle Hooks (optional)

Two optional callbacks fire exactly once per autoplay session:

• onAutoPlayStart?: () => void — called when the user clicks the autoplay start button, before the first round begins.
• onAutoPlayStop?: () => void — called when autoplay ends, whether by the user clicking stop, rounds exhausting, or an error.

These are useful for playing distinct start/stop sounds or tracking autoplay sessions. Both are optional and backward compatible — omitting them changes nothing.

const config = {
  // ...
  onAutoPlayStart: () => playStartSound(),
  onAutoPlayStop: () => playStopSound(),
  onAutoPlay: (next, stop, state) => {
    // per-round logic
    next();
  },
};

Notes

• The package has peer dependencies on react, react-dom, and @enigma-lake/zoot-platform-sdk.
• Keep your playHook stable and fast because it is used repeatedly while controller UI updates.
• layoutVariant: "classic" applies the classic controller layout behavior: desktop left panel (374px, full viewport height) plus classic split content distribution.
• Risk and Rows selectors render only when layoutVariant: "classic" and playOptions.classicGame is provided.