MultiPlayController

The MultiPlayController component is a key part of the gameplay interface, allowing users to initiate a play based on their current game state. It supports manual play, autoplay, dynamic currency handling, and play amount adjustments.

Component Overview

The MultiPlayController allows the user to:

• Select a currency.
• Adjust the play amount.
• Start a play (manual or auto).
• Cash out winnings.
• Toggle between manual play and autoplay.

Setup

1. Install the package using npm:

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

2. Import the component and styles in your project:

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

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

Context & Provider

AutoManualPlayProvider

The AutoManualPlayProvider wraps the PlayController, managing both manual play and autoplay. It uses React Context to provide game state and actions throughout the component tree.

🔹 Features of AutoManualPlayProvider:

• Manages Game Mode: Switches between MANUAL and AUTOPLAY.
• Handles Autoplay: Sets the number of plays, tracks rounds, and stops automatically.
• Provides Context: Exposes state and functions for controlling play behavior.

Props

1. StylingProps

Handles the styling-related properties for the component.

• panel (optional): Custom styling for the play controller.

  • bgColorHex: Hex color for the panel background.
  • bottom: Position of the panel relative to the window.

• dropdown (optional): Custom styling for the dropdown.

  • bgColorHex: Hex color for the panel background.
  • riskColorConfig: Object defining colors for different risk levels.
    • LOW: color (e.g." #1AE380")
    • MEDIUM: color (e.g." #FAEB78")
    • HIGH: color (e.g." #FF5646")

2. CurrencyProps

Handles currency-related logic and settings.

• currencyOptions: An object containing the following properties:
  • current: The currently selected currency
  • available: Array of available currencies that the user can choose from.

3. ActionsProps

Defines functions for the user actions.

• onPlay: A callback function to trigger when the user starts a play.
• onAutoPlay: A callback function to trigger when the user starts autoplay. It accepts next (a function to execute the next play round), stop (a function to forcefully stop autoplay), and autoplay state (AUTO_PLAY_STATE.IDLE/AUTO_PLAY_STATE.PLAYING).

4. PlaySettingsProps

Handles game-specific settings and states.

• playOptions: An object containing the following properties:
  • isPlaying: Boolean flag indicating whether the game is currently in progress.
  • canCashout: Boolean flag indicating whether the user can cash out their current play.
  • disabledController: Boolean flag to disable all interactive elements in the component.
  • displayController: Boolean flag to determine if the play controller should be visible.
  • playHook: A hook providing the current play amount, play limits, and a function to set the play amount.
    • playLimits: Play limits for the game.
    • leftPlayAmount: The current left play amount.
    • rightPlayAmount: The current right play amount.
    • setLeftBetAmount: A function to set the left play amount.
    • setRightBetAmount: A function to set the right play amount.
  • autoPlayDelay (optional): The delay (in milliseconds) before auto play starts.
  • currentRisk: The current risk setting.
  • onRiskChange: Callback function to handle risk selection.
  • risks: Array of available risk types.
  • totalBalance: The available balance for the current currency

5. Widgets

Defines functions for the user actions.

• leftWidgets: A list of widgets that will be displayed on the left side
• centerWidgets: A list of widgets that will be displayed on the center
• rightWidgets: A list of widgets that will be displayed on the right side

Example Usage

import "@enigma-lake/multi-play-controller-sdk/dist/style.css";
import { AutoManualPlayProvider, GAME_MODE, AUTO_PLAY_STATE } from "@enigma-lake/multi-play-controller-sdk";
import { Currency } from "@enigma-lake/zoot-platform-sdk";

const GameExample = () => {
  const config = {
    currencyOptions: {
      currentCurrency: Currency.SWEEPS,
      currencies: [Currency.SWEEPS, Currency.GOLD],
    },
    onPlay: () => console.log("Play button clicked"),
    onAutoPlay: (next, stop, state) => {
      next(); // Proceed to the next autoplay round
      stop(); // Stop autoplay (e.g., in case of an error or when the user chooses to stop)
    },
    playOptions: {
      displayController: true,
      isManualButtonDisabled: {
        [PLAY_SIDE.LEFT] : false,
        [PLAY_SIDE.RIGHT] : false,
      }
      disabledController: false,
      playHook: () => {
        return {
          playLimits: { min: 1, max: 100 },
          leftPlayAmount: 10,
          rightPlayAmount: 10,
          autoPlayAmount: 10,
          setLeftBetAmount: (value) => console.log("New left play amount:", value),
          setRightBetAmount: (value) => console.log("New right play amount:", value),
          setAutoBetAmount: (value) => console.log("New auto play amount:", value),
        };
      },
    },
    panel: {
      bottom: window.innerWidth < 450 ? "55px" : "70px",
      bgColorHex: "#08643F"
    },
    dropdown: {
      bgColorHex: "#10243F",
      riskColorConfig: {
        LOW: "#1AE380",
        MEDIUM: "#FAEB78",
        HIGH: "#FF5646",
      },
    }
  };

  return (
    <AutoManualPlayProvider config={config}>
      {({ autoPlay: { state, scheduleNextLoop, numberOfPlays, playedRounds }, mode }) => (
        // children content
      )}
    </AutoManualPlayProvider>
  );
};

Key Features

1. Dynamic Currency Handling:

   • Supports multiple currencies (e.g., SWEEPS, GOLD).
   • Allows users to switch currencies easily.

2. Play Amount Adjustment:

   • Allows users to set different play amounts for left and right bets.
   • Validates play amounts against user balance and play limits.

3. Custom Styling:

   • Supports customizable input and button colors.

4. Play & Cashout Actions:

   • Allows users to initiate gameplay seamlessly.

Development Notes

1. Play Amount Validation:

   • The play amount is validated to ensure it falls within the minimum and maximum limits.

2. Responsive Design:

   • The component is styled to be responsive and integrate seamlessly into various layouts.