@enigma-lake/tower-play-controller-sdk 1.0.0

package/README.md

@@ -0,0 +1,202 @@
+
+# TowerPlayController
+
+The `TowerPlayController` 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, autoplay for a specified number of plays, dynamic currency handling, and play amount adjustments.
+
+---
+
+## Component Overview
+
+The `TowerPlayController` 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.
+- Select risk difficulty
+
+---
+
+## Setup
+
+### 1. Install the package using npm:
+
+```bash
+npm install @enigma-lake/tower-play-controller-sdk
+```
+
+### 2. Import the component and styles in your project:
+
+```tsx
+import {
+  AUTO_PLAY_STATE,
+  GAME_MODE,
+  AutoManualPlayProvider,
+} from "@enigma-lake/tower-play-controller-sdk";
+
+import "@enigma-lake/tower-play-controller-sdk/dist/style.css";
+```
+
+---
+
+## Context & Provider
+
+### `AutoManualPlayProvider`
+
+The `AutoManualPlayProvider` wraps the TowerPlayController, 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:
+  - **`currentCurrency`**: The currently selected currency (e.g., `Currency.SWEEPS`).
+  - **`currencies`**: Array of available currencies that the user can choose from.
+  - **`winText`**: The win amount during the playing.
+
+### 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 `selection` (an array of selected indices) and `callback` (a function to be executed once autoplay finishes).
+- **`onCashout`**: A callback function to trigger when the user decides to cash out their winnings.
+
+### 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, preventing user interactions (e.g., when the game is in progress).
+  - **`displayController`**: Boolean flag to determine if the play controller should be visible.
+  - **`showAutoPlayToast`**: A function to show a toast message during autoplay. Accepts an object with:
+    - **`type`**: Message type (`"success"`, `"error"`, `"warning"`, or `"info"`).
+    - **`message`**: The message to display.
+  - **`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.
+  - **`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.
+  - **`disabledMenu`**: Disable menu flag
+---
+
+## Example Usage
+
+```tsx
+import "@enigma-lake/tower-play-controller-sdk/dist/style.css";
+import { AutoManualPlayProvider, GAME_MODE, AUTO_PLAY_STATE } from "@enigma-lake/tower-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"),
+    onAutoPlay: (selection, next, stop) => {
+      console.log("Auto Play started with selection:", selection);
+      next(); // Proceed to the next autoplay round
+      stop(); // Stop autoplay (e.g., in case of an error or when the user chooses to stop)
+    },
+    onCashout: () => console.log("Cashout clicked"),
+    playOptions: {
+      displayController: true,
+      canCashout: false,
+      isPlaying: false,
+      disabledController: false,
+      onRiskChange: (risk: RiskType) => {},
+      disabledMenu: false,
+      risks: [RiskTypes.LOW, RiskTypes.MEDIUM, RiskTypes.HIGH],
+      showAutoPlayToast: (props) => {
+        console.log(`${props.type}: ${props.message}`);
+      },
+      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"
+    },
+    dropdown: {
+      bgColorHex: "#10243F",
+      riskColorConfig: {
+        LOW: "#1AE380",
+        MEDIUM: "#FAEB78",
+        HIGH: "#FF5646",
+      },
+    }
+  };
+
+  return (
+    <AutoManualPlayProvider config={config}>
+      {({ autoPlay: { selection, setSelection, state }, 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**:
+   - 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.

package/dist/components/AutoManualPlayStateProvider/AutoManualPlayProvider.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from "react";
+import { PlayControllerProps } from "../../types/playController";
+import { AutoManualPlayStateContextType } from "./AutoManualPlayStateContext";
+interface AutoManualPlayStateProviderProps {
+    children: React.ReactNode | ((state: AutoManualPlayStateContextType) => ReactElement);
+    config: PlayControllerProps;
+}
+declare const AutoManualPlayProvider: React.FC<AutoManualPlayStateProviderProps>;
+export default AutoManualPlayProvider;

package/dist/components/AutoManualPlayStateProvider/AutoManualPlayStateContext.d.ts

@@ -0,0 +1,28 @@
+import { GAME_MODE, AUTO_PLAY_STATE } from "../../types/gameMode";
+import { PlayControllerProps } from "../../types/playController";
+export interface AutoManualPlayStateContextType {
+    mode: GAME_MODE;
+    config: PlayControllerProps;
+    manual: {
+        playManualMode: () => void;
+    };
+    autoPlay: {
+        state: AUTO_PLAY_STATE;
+        playedRounds: number;
+        numberOfPlays: number;
+        selection: number[];
+        isActive: boolean;
+        setIsActive: React.Dispatch<React.SetStateAction<boolean>>;
+        start: (numberOfPlays: number) => void;
+        stop: () => void;
+        setState: React.Dispatch<React.SetStateAction<AUTO_PLAY_STATE>>;
+        setPlayedRounds: React.Dispatch<React.SetStateAction<number>>;
+        setNumberOfPlays: React.Dispatch<React.SetStateAction<number>>;
+        setSelection: (values: number[]) => void;
+        updateState: (newState: AUTO_PLAY_STATE.SELECTING | AUTO_PLAY_STATE.PLAYING) => void;
+    };
+    reset: () => void;
+    toggleMode: () => void;
+}
+export declare const AutoManualPlayStateContext: import("react").Context<AutoManualPlayStateContextType | undefined>;
+export declare const useAutoManualPlayState: () => AutoManualPlayStateContextType;

package/dist/components/AutoManualPlayStateProvider/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./AutoManualPlayProvider";

package/dist/components/base/AutoPlayController/AutoPlayController.d.ts

@@ -0,0 +1,2 @@
+declare const AutoPlayController: () => import("react/jsx-runtime").JSX.Element;
+export default AutoPlayController;

package/dist/components/base/AutoPlayController/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./AutoPlayController";

package/dist/components/base/Button/Button.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { GAME_MODE } from "../../../types";
+declare const themes: {
+    primary: string;
+    success: string;
+    ghost: string;
+};
+type Props = React.ComponentProps<"button"> & {
+    theme?: (typeof themes)[keyof typeof themes];
+    roleType?: GAME_MODE;
+    className?: string;
+};
+declare const Button: {
+    ({ disabled, roleType, className, theme, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+    themes: {
+        primary: string;
+        success: string;
+        ghost: string;
+    };
+};
+export default Button;

package/dist/components/base/Button/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Button";

package/dist/components/base/ChevronIcon/ChevronIcon.d.ts

@@ -0,0 +1,5 @@
+declare const ChevronIcon: ({ open, disabled, }: {
+    open: boolean;
+    disabled: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ChevronIcon;

package/dist/components/base/ChevronIcon/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./ChevronIcon";

package/dist/components/base/DifficultySelector/DifficultySelector.d.ts

@@ -0,0 +1,14 @@
+import { PlaySettingsProps } from "../../../types/playController";
+import { RiskTypes } from "./types";
+declare const DifficultySelector: ({ playOptions, dropdownConfig, }: {
+    playOptions: PlaySettingsProps;
+    dropdownConfig: {
+        bgColorHex: string;
+        riskColorConfig: {
+            [RiskTypes.LOW]: string;
+            [RiskTypes.MEDIUM]: string;
+            [RiskTypes.HIGH]: string;
+        };
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+export default DifficultySelector;

package/dist/components/base/DifficultySelector/Selector.d.ts

@@ -0,0 +1,3 @@
+import { SelectorProps } from "./types";
+declare const Selector: <T>({ currentValue, label, riskColor, values, onSelect, disabled, }: SelectorProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Selector;

package/dist/components/base/DifficultySelector/types.d.ts

@@ -0,0 +1,16 @@
+export interface SelectorProps<T> {
+    label: string;
+    values: T[];
+    onSelect: (value: T) => void;
+    riskColor: string;
+    disabled: boolean;
+    currentValue: T;
+}
+export declare enum SELECTORS {
+    RISK = "Risk"
+}
+export declare enum RiskTypes {
+    LOW = "LOW",
+    MEDIUM = "MEDIUM",
+    HIGH = "HIGH"
+}

package/dist/components/base/GroupRow/GroupRow.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from "react";
+export type Props = ComponentProps<"div"> & {
+    label?: string;
+};
+declare const GroupRow: ({ children, label, className, ...restProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export default GroupRow;

package/dist/components/base/GroupRow/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./GroupRow";

package/dist/components/base/Input/Input.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Input: ({ onChange, disabled, className, ...restProps }: React.ComponentProps<"input">) => import("react/jsx-runtime").JSX.Element;
+export default Input;

package/dist/components/base/Input/cleanInputNumber.d.ts

@@ -0,0 +1,2 @@
+export declare function findFirstSeparatorIndex(value: string): number | undefined;
+export declare function cleanInputNumber(value: string): string;

package/dist/components/base/Input/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Input";

package/dist/components/base/InputWithIcon/InputWithIcon.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps, PropsWithChildren } from "react";
+import { Currency } from "@enigma-lake/zoot-platform-sdk";
+export type Props = PropsWithChildren<ComponentProps<"input">> & {
+    switcherConfig?: {
+        onSwitch: () => void;
+        isPlaying: boolean;
+        enabled: boolean;
+        currency: Currency;
+        disabled: boolean;
+    };
+    currency: Currency;
+    label?: string;
+};
+declare const InputWithIcon: ({ children, switcherConfig, disabled, currency, label, className, ...restProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export default InputWithIcon;

package/dist/components/base/InputWithIcon/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./InputWithIcon";

package/dist/components/base/InputWithSwitch/InputWithSwitch.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps, PropsWithChildren } from "react";
+import { Currency } from "@enigma-lake/zoot-platform-sdk";
+export type Props = PropsWithChildren<ComponentProps<"input">> & {
+    switcherConfig: {
+        onSwitch: () => void;
+        isPlaying: boolean;
+        enabled: boolean;
+        currency: Currency;
+        disabled: boolean;
+    };
+    currency: Currency;
+    label?: string;
+};
+declare const InputWithSwitch: ({ children, switcherConfig, disabled, currency, label, className, ...restProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export default InputWithSwitch;

package/dist/components/base/InputWithSwitch/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./InputWithSwitch";

package/dist/components/base/ManualPlayController/ManualPlayController.d.ts

@@ -0,0 +1,2 @@
+declare const ManualPlayController: () => import("react/jsx-runtime").JSX.Element;
+export default ManualPlayController;

package/dist/components/base/ManualPlayController/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./ManualPlayController";

package/dist/components/base/PlayController/PlayController.d.ts

@@ -0,0 +1,15 @@
+import { Currency } from "@enigma-lake/zoot-platform-sdk";
+interface PlayAmountControlProps {
+    playAmount: number;
+    minPlayAmount: number;
+    maxPlayAmount: number;
+    isDisabled: () => boolean;
+    adjustPlayAmount: (multiplier: number) => void;
+    onChangeAmount: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlurAmount: (event: React.FocusEvent<HTMLInputElement>) => void;
+    currentCurrency: Currency;
+    currencies: Currency[];
+    disableInput: boolean;
+}
+declare const PlayAmountControl: ({ playAmount, minPlayAmount, maxPlayAmount, isDisabled, adjustPlayAmount, onChangeAmount, onBlurAmount, currentCurrency, currencies, disableInput, }: PlayAmountControlProps) => import("react/jsx-runtime").JSX.Element;
+export default PlayAmountControl;

package/dist/components/base/SelectMenu/GoldIcon.d.ts

@@ -0,0 +1 @@
+export declare const GoldIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/base/SelectMenu/SelectMenu.d.ts

@@ -0,0 +1,11 @@
+import { Currency } from "@enigma-lake/zoot-platform-sdk";
+interface ISelectMenuProps {
+    currencies: Currency[];
+    selectedCurrency: Currency;
+    setSelectedCurrency: (currency: {
+        currency: Currency;
+    }) => void;
+    disabled?: boolean;
+}
+declare const SelectMenu: ({ currencies, selectedCurrency, setSelectedCurrency, disabled, }: ISelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectMenu;

package/dist/components/base/SelectMenu/SweepsIcon.d.ts

@@ -0,0 +1 @@
+export declare const SweepsIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/base/SelectMenu/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./SelectMenu";

package/dist/components/base/Switch/Switch.d.ts

@@ -0,0 +1,10 @@
+import { Currency } from "@enigma-lake/zoot-platform-sdk";
+interface SwitchProps {
+    enabled: boolean;
+    onSwitch: () => void;
+    isPlaying: boolean;
+    currency: Currency;
+    disabled: boolean;
+}
+export declare const Switch: ({ enabled, onSwitch, disabled, currency, isPlaying, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/base/index.d.ts

@@ -0,0 +1,6 @@
+import Button from "./Button";
+import GroupRow from "./GroupRow";
+import Input from "./Input";
+import InputWithIcon from "./InputWithIcon";
+import SelectMenu from "./SelectMenu";
+export { Button, InputWithIcon, GroupRow, Input, SelectMenu };

package/dist/components/hooks/usePlayController.d.ts

@@ -0,0 +1,27 @@
+import { AUTO_PLAY_STATE } from "../../types";
+import { ChangeEvent, FocusEvent } from "react";
+export declare const usePlayController: () => {
+    currentCurrency: import("@enigma-lake/zoot-platform-sdk").Currency;
+    currencies: import("@enigma-lake/zoot-platform-sdk").Currency[];
+    playAmount: number;
+    minPlayAmount: number;
+    maxPlayAmount: number;
+    setPlayAmount: (value: number) => void;
+    adjustPlayAmount: (multiplier: number) => void;
+    onChangeAmount: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlurAmount: (event: FocusEvent<HTMLInputElement>) => void;
+    playOptions: import("../../types/playController").PlaySettingsProps;
+    isValidPlayAmount: boolean;
+    winText: string;
+    manualPlay: {
+        isDisabled: () => boolean;
+        onPlay: () => void;
+        canCashout: boolean;
+    };
+    autoPlay: {
+        isDisabled: () => boolean;
+        state: AUTO_PLAY_STATE;
+        onPlay: () => void;
+        onStopPlay: () => void;
+    };
+};

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+import { Button, Input, InputWithIcon, GroupRow, SelectMenu } from "./base";
+import AutoManualPlayProvider from "./AutoManualPlayStateProvider";
+import { GAME_MODE, AUTO_PLAY_STATE } from "../types/gameMode";
+export { Button, InputWithIcon, GroupRow, Input, SelectMenu, AutoManualPlayProvider, GAME_MODE, AUTO_PLAY_STATE, };

package/dist/components/utils.d.ts

@@ -0,0 +1,5 @@
+import { GAME_MODE } from "../types";
+export declare const hexToRgb: (hex: string) => string | null;
+export declare const selectButton: (gameMode: GAME_MODE) => HTMLButtonElement;
+export declare const addPressedClass: (gameMode: GAME_MODE, activeClassName: string) => void;
+export declare const removePressedClass: (gameMode: GAME_MODE, activeClassName: string) => void;

package/dist/index.d.ts

@@ -0,0 +1,101 @@
+import { ReactElement } from 'react';
+import { Currency, PlayLimits } from '@enigma-lake/zoot-platform-sdk';
+
+declare enum GAME_MODE {
+    MANUAL = "manual",
+    AUTOPLAY = "autoplay"
+}
+declare enum AUTO_PLAY_STATE {
+    IDLE = "idle",
+    SELECTING = "selecting",
+    PLAYING = "playing"
+}
+
+declare enum RiskTypes {
+    LOW = "LOW",
+    MEDIUM = "MEDIUM",
+    HIGH = "HIGH"
+}
+
+type StylingProps = {
+    panel: {
+        bottom: string;
+        bgColorHex: string;
+    };
+    dropdown: {
+        bgColorHex: string;
+        riskColorConfig: {
+            [RiskTypes.LOW]: string;
+            [RiskTypes.MEDIUM]: string;
+            [RiskTypes.HIGH]: string;
+        };
+    };
+};
+type CurrencyProps = {
+    currentCurrency: Currency;
+    currencies: Currency[];
+    winText: string;
+};
+type ActionsProps = {
+    onPlay: () => void;
+    onAutoPlay: (selection: number[], next: () => void, stop: () => void) => void;
+    onCashout: () => void;
+};
+type PlaySettingsProps = {
+    isPlaying: boolean;
+    canCashout: boolean;
+    disabledController: boolean;
+    risks: RiskTypes[];
+    currentRisk: RiskTypes;
+    onRiskChange: (risk: RiskTypes) => void;
+    disabledMenu: boolean;
+    displayController: boolean;
+    disableInput: boolean;
+    showAutoPlayToast: (props: {
+        type: "success" | "error" | "warning" | "info";
+        message: string;
+    }) => void;
+    playHook: () => {
+        playLimits?: PlayLimits;
+        playAmount: number;
+        setPlayAmount: (value: number) => void;
+    };
+    autoPlayDelay?: number;
+};
+type PlayControllerProps = StylingProps & ActionsProps & {
+    currencyOptions: CurrencyProps;
+    playOptions: PlaySettingsProps;
+};
+
+interface AutoManualPlayStateContextType {
+    mode: GAME_MODE;
+    config: PlayControllerProps;
+    manual: {
+        playManualMode: () => void;
+    };
+    autoPlay: {
+        state: AUTO_PLAY_STATE;
+        playedRounds: number;
+        numberOfPlays: number;
+        selection: number[];
+        isActive: boolean;
+        setIsActive: React.Dispatch<React.SetStateAction<boolean>>;
+        start: (numberOfPlays: number) => void;
+        stop: () => void;
+        setState: React.Dispatch<React.SetStateAction<AUTO_PLAY_STATE>>;
+        setPlayedRounds: React.Dispatch<React.SetStateAction<number>>;
+        setNumberOfPlays: React.Dispatch<React.SetStateAction<number>>;
+        setSelection: (values: number[]) => void;
+        updateState: (newState: AUTO_PLAY_STATE.SELECTING | AUTO_PLAY_STATE.PLAYING) => void;
+    };
+    reset: () => void;
+    toggleMode: () => void;
+}
+
+interface AutoManualPlayStateProviderProps {
+    children: React.ReactNode | ((state: AutoManualPlayStateContextType) => ReactElement);
+    config: PlayControllerProps;
+}
+declare const AutoManualPlayProvider: React.FC<AutoManualPlayStateProviderProps>;
+
+export { AUTO_PLAY_STATE, AutoManualPlayProvider, GAME_MODE };