DicePlayController

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

Component Overview

The DicePlayController allows the user to:

• Select a currency.
• Adjust the play amount.
• Start a play

Setup

1. Install the package using npm:

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

2. Import the component and styles in your project:

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

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

Context & Provider

ManualPlayProvider

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

🔹 Features of ManualPlayProvider:

• 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.
  • bgColorOpacity (optional): Opacity 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.

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.

4. PlaySettingsProps

Handles game-specific settings and states.

• playOptions: An object containing the following properties:

  • disabledController: Boolean flag to disable all interactive elements in the component, preventing user interactions (e.g., when the game is in progress).
  • 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.
    • playAmount: The current play amount.
    • setPlayAmount: A function to set the play amount.
  • disabledMenu: Disable menu flag
  • 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/dice-play-controller-sdk/dist/style.css";
import { ManualPlayProvider } from "@enigma-lake/dice-play-controller-sdk";
import { Currency } from "@enigma-lake/zoot-platform-sdk";

const GameExample = () => {
  const config = {
    currencyOptions: {
      currentCurrency: Currency.SWEEPS,
      currencies: [Currency.SWEEPS, Currency.GOLD],
      winText: "0.00 SC",
    },
    onPlay: () => console.log("Play button clicked"),
    playOptions: {
      displayController: true,
      disabledController: false,
      disabledMenu: false,
      playHook: () => {
        return {
          playLimits: { min: 1, max: 100 },
          playAmount: 10,
          setPlayAmount: (value) => console.log("New play amount:", value),
        };
      },
    },
    panel: {
      bottom: window.innerWidth < 450 ? "55px" : "70px",
      bgColorHex: "#08643F"
      bgColorOpacity: 0.8,
    },
    dropdown: {
      bgColorHex: "#10243F",
    }
  };

  return (
    <ManualPlayProvider config={config}>
      {() => (
        // children content
      )}
    </ManualPlayProvider>
  );
};

Key Features

1. Dynamic Currency Handling:

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

2. Play Amount Adjustment:

   • Includes buttons to halve or double the play amount.
   • 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 or cash out winnings seamlessly.

Development Notes

1. Play Amount Validation:

   • The play amount is validated to ensure it falls within the minimum and maximum limits, as well as the user's available balance.

2. Responsive Design:

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