Mines Play Controller SDK

A React SDK that renders a full play controller for Mines-style games.

It includes:

• manual play and autoplay modes
• play amount controls
• mines difficulty selector (classic mode)
• extensible widget slots
• external styling for controller buttons and autoplay switch

Install

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

Exports

import {
  AutoManualPlayProvider,
  AUTO_PLAY_STATE,
  GAME_MODE,
  WIDGET,
  format,
} from "@enigma-lake/mines-play-controller-sdk";

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

Quick Start

import React from "react";
import {
  AutoManualPlayProvider,
  AUTO_PLAY_STATE,
  WIDGET,
} from "@enigma-lake/mines-play-controller-sdk";

const config = {
  panel: {
    bgColorHex: "#081E64",
    bottom: "15px",
    opacity: 0.5,
  },

  classicGame: {
    dropdown: { bgColorHex: "#01243A" },
    forceLeftStyle: false,
  },

  isClassicGame: true,

  currencyOptions: {
    current: { code: "USD", symbol: "$", name: "US Dollar" },
    available: [{ code: "USD", symbol: "$", name: "US Dollar" }],
  },

  playOptions: {
    isPlaying: false,
    canCashout: false,
    disabledController: false,
    displayController: true,

    classicGame: {
      disabledMenu: false,
      currentMines: 4,
      numberOfMines: 24,
      onMinesChange: (mines: number) => {
        console.log("Selected mines:", mines);
      },
    },

    showAutoPlayToast: ({ type, message }) => {
      console.log(type, message);
    },

    playHook: () => ({
      playAmount: 1,
      setPlayAmount: (value: number) => console.log("set amount", value),
      playLimits: {
        amount: { min: 1, max: 1000 },
      },
    }),

    autoPlayDelay: 300,
    totalBalance: 1000,
  },

  onPlay: () => console.log("play"),
  onAutoPlay: (selection, next, stop, state) => {
    console.log("autoplay", selection, state);
    next();
  },
  onAutoPlayStop: () => console.log("autoplay stopped"),
  onCashout: () => console.log("cashout"),

  leftWidgets: [],
  centerWidgets: [],
  rightWidgets: [],
};

export default function Example() {
  return (
    <AutoManualPlayProvider config={config}>
      <></>
    </AutoManualPlayProvider>
  );
}

How It Works

AutoManualPlayProvider stores controller state and renders the whole UI when playOptions.displayController is true.

Main internal states:

• mode: manual/autoplay (GAME_MODE)
• autoplay lifecycle: IDLE, SELECTING, PLAYING (AUTO_PLAY_STATE)
• selected tiles for autoplay
• number of autoplay rounds

You provide business logic through callbacks (onPlay, onAutoPlay, onCashout) and data through playOptions + currencyOptions.

Config Reference

config is PlayControllerProps and is composed of these parts.

1) Styling Props

panel: {
  bgColorHex: string;
  bottom?: string;
  opacity?: number;
}

classicGame?: {
  dropdown: {
    bgColorHex: string;
  };
  forceLeftStyle: boolean;
}

2) Actions Props

onPlay: () => void;
onAutoPlay: (
  selection: number[],
  next: () => void,
  stop: () => void,
  state: AUTO_PLAY_STATE,
) => void;
onAutoPlayStop?: () => void;
onCashout: () => void;

3) Play Settings

playOptions: {
  isPlaying: boolean;
  canCashout: boolean;
  disabledController: boolean;
  displayController: boolean;

  classicGame?: {
    disabledMenu: boolean;
    currentMines: number;
    numberOfMines?: number; // default: 24
    onMinesChange: (mines: number) => void;
  };

  showAutoPlayToast: (props: {
    type: "success" | "error" | "warning" | "info";
    message: string;
  }) => void;

  playHook: () => {
    playLimits?: PlayLimitsV2;
    playAmount: number;
    setPlayAmount: (value: number) => void;
  };

  autoPlayDelay?: number;
  totalBalance: number;
}

Classic mines selector behavior:

• selector values are auto-generated from 1..numberOfMines
• if numberOfMines is omitted, it defaults to 24
• selected value is currentMines
• selection change calls onMinesChange

4) Widgets

leftWidgets: Widget[];
centerWidgets: Widget[];
rightWidgets: Widget[];

Widget shape:

type Widget = {
  type: WIDGET;
  renderElement: ({
    state,
    displayPlayAmountView,
  }: {
    state: AUTO_PLAY_STATE;
    displayPlayAmountView: boolean;
  }) => ReactNode;
};

5) Optional Flags

isClassicGame?: boolean;

When isClassicGame is true, the controller shows classic-game-specific layout and mines difficulty selector.

Button Customization (playControllerButtons)

Use this to control button labels and styles without editing SDK CSS.

type ControllerButtonConfig = {
  label: string;
  labelDisabled?: string; // only for "play"
  variant?: string;
  backgroundColor?: string;
  pressedBackgroundColor?: string;
  textTransform?: "none" | "uppercase" | "lowercase" | "capitalize";
  style?: React.CSSProperties;
  pressedStyle?: React.CSSProperties;
  disabledStyle?: React.CSSProperties;
};

playControllerButtons: {
  textStyle?: {
    color?: string;
    fontSize?: string | number;
    fontWeight?: string | number;
    lineHeight?: string | number;
    letterSpacing?: string | number;
    textTransform?: "none" | "uppercase" | "lowercase" | "capitalize";
    disableOpacity?: number;
  };

  variants?: Record<string, {
    backgroundColor: string;
    pressedBackgroundColor?: string;
    textTransform?: "none" | "uppercase" | "lowercase" | "capitalize";
    style?: React.CSSProperties;
    pressedStyle?: React.CSSProperties;
    disabledStyle?: React.CSSProperties;
  }>;

  buttons: {
    play?: ControllerButtonConfig;
    startAutoplay?: ControllerButtonConfig;
    stopAutoplay?: ControllerButtonConfig;
    cashout?: ControllerButtonConfig;
    selectPlayAmount?: ControllerButtonConfig;
  };
}

Notes:

• button-level values override variant values
• variant values override SDK defaults
• labelDisabled is only used for play when disabled during play

Switch Customization (playControllerSwitcher)

playControllerSwitcher: {
  checked?: {
    thumb?: string;
    slider?: string;
  };
  unchecked?: {
    thumb?: string;
    slider?: string;
  };
}

If omitted, SDK default switch colors are used.

Utility

format is exported for number formatting helpers used by the SDK UI.

Children

AutoManualPlayProvider accepts:

• normal React children (ReactNode)
• a render-function child receiving provider state

Minimal Checklist

To render the controller successfully, you must provide:

• panel.bgColorHex
• currencyOptions.current and currencyOptions.available
• playOptions with playHook, showAutoPlayToast, and state flags
• onPlay, onAutoPlay, onCashout
• widget arrays (leftWidgets, centerWidgets, rightWidgets), can be empty