pixi-rainman-game-engine 0.1.0 → 0.1.1

package/dist/SettingsUI/SystemSettings/SystemSettingsComponent.d.ts

@@ -1,2 +1,3 @@
 import "./systemSettings.css";
-export declare const SystemSettingsComponent: () => import("react/jsx-runtime").JSX.Element;
+import React from "react";
+export declare const SystemSettingsComponent: () => React.JSX.Element;

package/dist/SettingsUI/SystemSettings/SystemSettingsComponent.jsx

@@ -0,0 +1,17 @@
+import "./systemSettings.css";
+import i18next from "i18next";
+import React from "react";
+import { UI_ITEMS } from "../../utils";
+import { BetComponent, CloseModalButton, UXSettings } from "../components";
+export const SystemSettingsComponent = () => {
+    return (<div className="settings">
+            <div className="settings__title">
+                <h2>{i18next.t("systemSettings")}</h2>
+            </div>
+            <CloseModalButton layerId={UI_ITEMS.settings}/>
+            <div className="settings__column">
+                <BetComponent />
+                <UXSettings />
+            </div>
+        </div>);
+};

package/dist/SettingsUI/components/AutoplaySettings/index.d.ts

@@ -1,5 +1,6 @@
 import "react-custom-scroll/dist/customScroll.css";
 import "./autoplaySettings.css";
-export declare const AutoplaySettings: (() => import("react/jsx-runtime").JSX.Element) & {
+import React from "react";
+export declare const AutoplaySettings: (() => React.JSX.Element) & {
     displayName: string;
 };

package/dist/SettingsUI/components/AutoplaySettings/index.jsx

@@ -0,0 +1,121 @@
+import "react-custom-scroll/dist/customScroll.css";
+import "./autoplaySettings.css";
+import i18next from "i18next";
+import { observer } from "mobx-react-lite";
+import React, { useEffect, useState } from "react";
+import { COMPONENTS } from "../../../components";
+import { UI_ITEMS } from "../../../utils";
+import { useStores } from "../../hooks";
+import { closeModal, CloseModalButton } from "../CloseModalButton";
+import { RichLimitingSlider } from "../RichLimitingSlider";
+import { SpeedButtonWithHeader, SwitchWithHeader } from "../SwitchWithHeader";
+export const AutoplaySettings = observer(() => {
+    const [limit_numbers, setLimitNumbers] = useState([0]);
+    const initialAutoSpinCount = 50;
+    const availableAutoSpinLimits = [10, 20, 50, 100, 150, 200, 250, 300, 350, 400, 500, 600, 700, 800, 900, 1000];
+    const { settingStore } = useStores();
+    const calculateLimitBounds = (indexOfSelectedLimit) => {
+        let bottomLimitIndex = indexOfSelectedLimit - 2;
+        let topLimitIndex = indexOfSelectedLimit + 1;
+        if (bottomLimitIndex < 0) {
+            bottomLimitIndex = availableAutoSpinLimits.length - -bottomLimitIndex;
+        }
+        if (topLimitIndex === availableAutoSpinLimits.length) {
+            topLimitIndex = 0;
+        }
+        return {
+            bottomLimitIndex,
+            topLimitIndex,
+        };
+    };
+    const updateLimitsBounds = (newLimit) => {
+        setAutoSpinsCount(newLimit);
+        const indexOfSelectedSpinsLimit = availableAutoSpinLimits.findIndex((limitCount) => limitCount === newLimit);
+        if (indexOfSelectedSpinsLimit === -1) {
+        }
+        const { bottomLimitIndex, topLimitIndex } = calculateLimitBounds(indexOfSelectedSpinsLimit);
+        const limitNumbersIndexes = [];
+        for (let index = bottomLimitIndex; index !== topLimitIndex + 1; index++) {
+            if (index === availableAutoSpinLimits.length) {
+                index = 0;
+            }
+            limitNumbersIndexes.push(availableAutoSpinLimits[index]);
+            if (limitNumbersIndexes.length === 4) {
+                break;
+            }
+        }
+        setLimitNumbers(limitNumbersIndexes);
+    };
+    useEffect(() => {
+        updateLimitsBounds(initialAutoSpinCount);
+    }, []);
+    const { singleWinExceeds, balancedIncreased, balancedDecreased, howManyAutoSpinsLeft, infinitySpinsEnabled, setSingleWinExceeds, setBalancedIncreased, setBalancedDecreased, setAutoSpinsCount, flipInfinitySpinsFlag, resetAutoplaySettings, } = settingStore;
+    return (<div className="autoplay-settings">
+            <CloseModalButton layerId={UI_ITEMS.autoplay}/>
+            <div className="autoplay-settings__title">
+                <h2>{i18next.t("autoPlay")}</h2>
+            </div>
+            <div className="autoplay-settings__stop-limits">
+                <div className={`autoplay-settings__limit left ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`} onClick={() => {
+            let indexOfSelectedSpinsLimit = availableAutoSpinLimits.findIndex((limitCount) => limitCount === howManyAutoSpinsLeft);
+            indexOfSelectedSpinsLimit -= 1;
+            if (indexOfSelectedSpinsLimit === -1) {
+                indexOfSelectedSpinsLimit = availableAutoSpinLimits.length - 1;
+            }
+            updateLimitsBounds(availableAutoSpinLimits[indexOfSelectedSpinsLimit]);
+        }}>
+                    <p>-</p>
+                </div>
+                {limit_numbers.map((limiter, index) => {
+            return (<button key={`${limiter}${index}`} value={limiter} className={`autoplay-settings__limit ${limiter === howManyAutoSpinsLeft ? "autoplay-settings__limit--active" : ""} middle ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`} onClick={(event) => updateLimitsBounds(Number(event.currentTarget.value))}>
+                            <p>{limiter}</p>
+                        </button>);
+        })}
+                <div className={`autoplay-settings__limit right ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`} onClick={() => {
+            let indexOfSelectedSpinsLimit = availableAutoSpinLimits.findIndex((limitCount) => limitCount === howManyAutoSpinsLeft);
+            indexOfSelectedSpinsLimit += 1;
+            if (indexOfSelectedSpinsLimit === availableAutoSpinLimits.length) {
+                indexOfSelectedSpinsLimit = 0;
+            }
+            const newAutoSpinsLimitNumber = availableAutoSpinLimits[indexOfSelectedSpinsLimit];
+            updateLimitsBounds(newAutoSpinsLimitNumber);
+        }}>
+                    <p>+</p>
+                </div>
+                <div className={`autoplay-settings__limit circle ${infinitySpinsEnabled ? "autoplay-settings__limit--active" : ""}`} onClick={() => flipInfinitySpinsFlag()}>
+                    <p>∞</p>
+                </div>
+            </div>
+
+            <div className="autoplay-settings__title">
+                <h2>{i18next.t("stopAutoPlay")}</h2>
+            </div>
+            <div className="autoplay-settings__sliders">
+                <RichLimitingSlider value={singleWinExceeds} setValue={setSingleWinExceeds} maxValue={Number(i18next.t("ifSingleWinExceedsMax"))} description={i18next.t("ifSingleWinExceedsMaxDescription")}/>
+                <RichLimitingSlider value={balancedIncreased} setValue={setBalancedIncreased} maxValue={Number(i18next.t("ifBalanceIncreasesBy"))} description={i18next.t("ifBalanceIncreasesByDescription")}/>
+                <RichLimitingSlider value={balancedDecreased} setValue={setBalancedDecreased} maxValue={Number(i18next.t("ifSingleWinExceedsMax"))} description={i18next.t("ifBalanceDecreaseByDescription")}/>
+            </div>
+
+            <div className="autoplay-settings__switches">
+                <div className="autoplay-settings__switch">
+                    <SwitchWithHeader header={i18next.t("onAnyWin")} flag={settingStore.onAnyWin} setFlag={settingStore.setOnAnyWin}/>
+                </div>
+                <div className="autoplay-settings__switch">
+                    <SpeedButtonWithHeader header={i18next.t("speedButtonHeader")} description={i18next.t("speedButtonDescription")}/>
+                </div>
+            </div>
+
+            <div className="autoplay-settings__confirmation">
+                <div className="autoplay-settings__confirmation-button" onClick={() => {
+            resetAutoplaySettings();
+            updateLimitsBounds(initialAutoSpinCount);
+            closeModal(UI_ITEMS.autoplay);
+        }}>
+                    <p>{i18next.t("cancel")}</p>
+                </div>
+                <div id={COMPONENTS.autoSpinConfirm} className="autoplay-settings__confirmation-button" onClick={() => closeModal(UI_ITEMS.autoplay)}>
+                    <p>{i18next.t("confirm")}</p>
+                </div>
+            </div>
+        </div>);
+});

package/dist/SettingsUI/components/Bet/index.d.ts

@@ -1,4 +1,5 @@
 import "./bet.css";
-export declare const BetComponent: (() => import("react/jsx-runtime").JSX.Element) & {
+import React from "react";
+export declare const BetComponent: (() => React.JSX.Element) & {
     displayName: string;
 };

package/dist/SettingsUI/components/Bet/index.jsx

@@ -0,0 +1,21 @@
+import "./bet.css";
+import { observer } from "mobx-react-lite";
+import React from "react";
+import { useStores } from "../../hooks";
+export const BetComponent = observer(() => {
+    const { settingStore } = useStores();
+    return (<div className="bet-container">
+            <h2>Total bet</h2>
+            <div className="bet-container__controls">
+                <button name="bet-minus" className="bet-container__button">
+                    -
+                </button>
+                <div className="bet-container__value">
+                    <p>{settingStore.betText}</p>
+                </div>
+                <button name="bet-plus" className="bet-container__button">
+                    +
+                </button>
+            </div>
+        </div>);
+});

package/dist/SettingsUI/components/BuyFreeSpins/index.jsx

@@ -0,0 +1,25 @@
+import "./buyFreeSpin.css";
+import React, { useState } from "react";
+import { Currencies } from "ts-money";
+import { UI_ITEMS } from "../../../utils";
+import { useBuyFreeSpinOptions } from "../../hooks";
+import { CloseModalButton } from "../CloseModalButton";
+import { OptionButton } from "../OptionButton";
+export const BuyFreeSpinModal = () => {
+    const [errorMessage, setErrorMessage] = useState("");
+    const freeSpinOptions = useBuyFreeSpinOptions();
+    const currency = Currencies[localStorage.getItem("currency")]?.symbol_native || "$";
+    const clearErrorMessage = () => setErrorMessage("");
+    return (<div className="buyFreeSpins__container">
+            <CloseModalButton layerId={UI_ITEMS.freeSpin} afterClose={clearErrorMessage}/>
+            <div className="buyFreeSpins__title-container">
+                <h1>Buy Free Spins</h1>
+            </div>
+            <div className="buyFreeSpins__buttons-container">
+                {freeSpinOptions.map((option) => (<OptionButton key={option.amount} setMessage={setErrorMessage} option={option} currency={currency}/>))}
+            </div>
+            {errorMessage ? (<div>
+                    <p className="buyFreeSpins__error-message">{errorMessage}</p>
+                </div>) : null}
+        </div>);
+};

package/dist/SettingsUI/components/CloseModalButton/{index.js → index.jsx}

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import "./closeModalButton.css";
+import React from "react";
 export const closeModal = (modalID, afterCloseCallBack) => {
     const gameRulesModal = window.document.getElementById(modalID);
     if (gameRulesModal !== null)
@@ -7,5 +7,7 @@ export const closeModal = (modalID, afterCloseCallBack) => {
     afterCloseCallBack && afterCloseCallBack();
 };
 export const CloseModalButton = ({ layerId, afterClose }) => {
-    return (_jsx("button", { className: "close-modal-button", onClick: () => closeModal(layerId, afterClose), children: "x" }));
+    return (<button className="close-modal-button" onClick={() => closeModal(layerId, afterClose)}>
+            x
+        </button>);
 };

package/dist/SettingsUI/components/GameRules/index.d.ts

@@ -1,5 +1,6 @@
 import "react-custom-scroll/dist/customScroll.css";
 import "./gameRules.css";
-export declare const GameRules: (() => import("react/jsx-runtime").JSX.Element) & {
+import React from "react";
+export declare const GameRules: (() => React.JSX.Element) & {
     displayName: string;
 };

package/dist/SettingsUI/components/GameRules/index.jsx

@@ -0,0 +1,41 @@
+import "react-custom-scroll/dist/customScroll.css";
+import "./gameRules.css";
+import i18next from "i18next";
+import { observer } from "mobx-react-lite";
+import React, { useState } from "react";
+import CustomScroll from "react-custom-scroll";
+import { UI_ITEMS } from "../../../utils";
+import { closeModal, CloseModalButton } from "../CloseModalButton";
+import { gameRulesContent } from "./data";
+export const GameRules = observer(() => {
+    const [pageNumber, setPageNumber] = useState(0);
+    const changePage = (incrementor) => {
+        const numberOfPages = gameRulesContent.pages.length;
+        if (pageNumber + incrementor === numberOfPages) {
+            setPageNumber(0);
+            return;
+        }
+        if (pageNumber + incrementor === -1) {
+            setPageNumber(numberOfPages - 1);
+            return;
+        }
+        setPageNumber(pageNumber + incrementor);
+    };
+    return (<div className="game-rules">
+            <div className="settings__title">
+                <h2>{i18next.t("gameRules")}</h2>
+            </div>
+            <CloseModalButton layerId={UI_ITEMS.gameRules}/>
+
+            <div className="game-rules__container custom-scroll">
+                <CustomScroll className="game-rules__scroll" allowOuterScroll={true}>
+                    <div className="game-rules__content">{gameRulesContent.pages[pageNumber]}</div>
+                </CustomScroll>
+            </div>
+            <div className="game-rules__page-control">
+                <div className="page-left" onClick={() => changePage(-1)}></div>
+                <div className="page-middle" onClick={() => closeModal(UI_ITEMS.gameRules)}></div>
+                <div className="page-right" onClick={() => changePage(1)}></div>
+            </div>
+        </div>);
+});

package/dist/SettingsUI/components/OptionButton/{index.js → index.jsx}

@@ -1,6 +1,6 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import i18next from "i18next";
 import { upperFirst } from "lodash";
+import React from "react";
 import { UI_ITEMS } from "../../../utils";
 import { useStores } from "../../hooks";
 import { closeModal } from "../CloseModalButton";
@@ -29,5 +29,12 @@ export const OptionButton = ({ option, currency, setMessage }) => {
             settingStore.setIsFreeSpinBought(false);
         }
     };
-    return (_jsxs("div", { className: "optionButton", onClick: async () => await onButtonClick(option), children: [_jsxs("p", { children: [i18next.t("amount"), ": ", option.amount] }), _jsxs("p", { children: [option.price, " ", currency] })] }, option.amount));
+    return (<div className="optionButton" key={option.amount} onClick={async () => await onButtonClick(option)}>
+            <p>
+                {i18next.t("amount")}: {option.amount}
+            </p>
+            <p>
+                {option.price} {currency}
+            </p>
+        </div>);
 };

package/dist/SettingsUI/components/RichLimitingSlider/index.d.ts

@@ -1,12 +1,13 @@
 import "rc-slider/assets/index.css";
 import "./richLimitingSlider.css";
+import React from "react";
 type RichLimitingSliderProps = {
     value: number;
     setValue: (value: number) => void;
     maxValue: number;
     description: string;
 };
-export declare const RichLimitingSlider: (({ value, setValue, maxValue, description }: RichLimitingSliderProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const RichLimitingSlider: (({ value, setValue, maxValue, description }: RichLimitingSliderProps) => React.JSX.Element) & {
     displayName: string;
 };
 export {};

package/dist/SettingsUI/components/RichLimitingSlider/index.jsx

@@ -0,0 +1,26 @@
+import "rc-slider/assets/index.css";
+import "./richLimitingSlider.css";
+import { observer } from "mobx-react-lite";
+import Slider from "rc-slider";
+import React from "react";
+export const RichLimitingSlider = observer(({ value, setValue, maxValue, description }) => {
+    return (<div className="rich-slider">
+            {/* @ts-expect-error type error in library */}
+            <Slider className="rich-slider__slider" step={1} min={0} max={maxValue} defaultValue={value} value={value} handleStyle={{
+            backgroundColor: "#fdf425",
+            borderColor: "#fdf425",
+            width: "20px",
+            height: "20px",
+            bottom: "-4px",
+        }} railStyle={{
+            backgroundColor: "#fff",
+        }} trackStyle={{
+            backgroundColor: "#fdf425",
+        }} dotStyle={{
+            borderColor: "#fdf425",
+        }} onChange={(value) => setValue(value)}>
+                <p className="rich-slider__description">{description}</p>
+            </Slider>
+            <div className="rich-slider__number">{value}</div>
+        </div>);
+});

package/dist/SettingsUI/components/SlidingSwitch/index.d.ts

@@ -1,9 +1,10 @@
 import "./slidingSwitch.css";
+import React from "react";
 type SlidingSwitchProps = {
     flag: boolean;
     setFlag: (flag: boolean) => void;
 };
-export declare const SlidingSwitch: (({ flag, setFlag }: SlidingSwitchProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const SlidingSwitch: (({ flag, setFlag }: SlidingSwitchProps) => React.JSX.Element) & {
     displayName: string;
 };
 export {};

package/dist/SettingsUI/components/SlidingSwitch/index.jsx

@@ -0,0 +1,10 @@
+import "./slidingSwitch.css";
+import { observer } from "mobx-react-lite";
+import React from "react";
+export const SlidingSwitch = observer(({ flag, setFlag }) => {
+    return (<label className="switch">
+            <span className={`switch-round-box round ${flag ? "switch-round-box--active" : ""}`}/>
+            <input type="checkbox" defaultChecked={flag} onChange={(event) => setFlag(event.target.checked)}/>
+            <p className={`switch__text ${flag ? "switch__text--active" : ""}`}>{flag ? "ON" : "OFF"}</p>
+        </label>);
+});

package/dist/SettingsUI/components/SpeedSettingsPopup/index.d.ts

@@ -1,6 +1,7 @@
 import "react-custom-scroll/dist/customScroll.css";
 import "./speedSettingsPopup.css";
+import React from "react";
 export declare const SPEED_PREFIX = "speed-";
-export declare const SpeedSettingsPopup: (() => import("react/jsx-runtime").JSX.Element) & {
+export declare const SpeedSettingsPopup: (() => React.JSX.Element) & {
     displayName: string;
 };

package/dist/SettingsUI/components/SpeedSettingsPopup/index.jsx

@@ -0,0 +1,27 @@
+import "react-custom-scroll/dist/customScroll.css";
+import "./speedSettingsPopup.css";
+import i18next from "i18next";
+import { observer } from "mobx-react-lite";
+import React from "react";
+import { SPEED_LEVELS } from "../../../application";
+import { UI_ITEMS } from "../../../utils";
+import { useStores } from "../../hooks";
+import { CloseModalButton } from "../CloseModalButton";
+export const SPEED_PREFIX = "speed-";
+export const SpeedSettingsPopup = observer(() => {
+    const speedLevelMapper = {
+        slow: SPEED_LEVELS.slow,
+        normal: SPEED_LEVELS.normal,
+        fast: SPEED_LEVELS.fast,
+    };
+    const { settingStore } = useStores();
+    return (<div className="speed-settings-popup">
+            <CloseModalButton layerId={UI_ITEMS.speedSettings}/>
+            <div className="speed-settings-popup__title">{i18next.t("howDoYouWantToPlay")}</div>
+            <div className="speed-settings-popup__speed-options">
+                {Object.keys(speedLevelMapper).map((speedLevelKey) => (<div id={`${SPEED_PREFIX}${speedLevelKey}`} key={`${SPEED_PREFIX}${speedLevelKey}`} className={`speed-settings-popup__option ${speedLevelKey === settingStore.currentSpeed ? "speed-settings-popup_option--active" : ""}`}>
+                        <img className={`speed-settings-popup__icon ${speedLevelMapper[speedLevelKey]}`} src={`../../../assets/settings/speedPopup/speed-${speedLevelMapper[speedLevelKey]}.png`}/>
+                    </div>))}
+            </div>
+        </div>);
+});

package/dist/SettingsUI/components/SpeedSwitchButton/index.d.ts

@@ -1,3 +1,4 @@
-export declare const SpeedButtonSwitch: (() => import("react/jsx-runtime").JSX.Element) & {
+import React from "react";
+export declare const SpeedButtonSwitch: (() => React.JSX.Element) & {
     displayName: string;
 };

package/dist/SettingsUI/components/SpeedSwitchButton/index.jsx

@@ -0,0 +1,19 @@
+import { observer } from "mobx-react-lite";
+import React from "react";
+import { useStores } from "../../hooks";
+export const SpeedButtonSwitch = observer(() => {
+    const speedLevelMapper = {
+        slow: "turtle",
+        normal: "rabbit",
+        fast: "cheetah",
+    };
+    const { settingStore } = useStores();
+    const { currentSpeed } = settingStore;
+    return (<label className="switch turtle-switch speed-level-id">
+            <span className="turtle-switch-round-box"/>
+            <img className="turtle-switch__icon" src={`assets/settings/speed-${speedLevelMapper[currentSpeed]}.png`}/>
+            <div className="dot-container">
+                {Array.from({ length: 3 }).map((_, i) => (<div key={i} className={`white-dot ${i < settingStore.indexOfSpeedLevel ? "white-dot--active" : ""}`}/>))}
+            </div>
+        </label>);
+});

package/dist/SettingsUI/components/SwitchWithHeader/index.d.ts

@@ -1,9 +1,10 @@
 import "./headerStyle.css";
+import React from "react";
 import { HeaderWithDescriptionProps, SpeedButtonWithHeaderProps, SwitchHeaderProps } from "./types";
-export declare const HeaderWithDescription: ({ header, description }: HeaderWithDescriptionProps) => import("react/jsx-runtime").JSX.Element;
-export declare const SwitchWithHeader: (({ header, description, flag, setFlag }: SwitchHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const HeaderWithDescription: ({ header, description }: HeaderWithDescriptionProps) => React.JSX.Element;
+export declare const SwitchWithHeader: (({ header, description, flag, setFlag }: SwitchHeaderProps) => React.JSX.Element) & {
     displayName: string;
 };
-export declare const SpeedButtonWithHeader: (({ header, description }: SpeedButtonWithHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const SpeedButtonWithHeader: (({ header, description }: SpeedButtonWithHeaderProps) => React.JSX.Element) & {
     displayName: string;
 };

package/dist/SettingsUI/components/SwitchWithHeader/index.jsx

@@ -0,0 +1,23 @@
+import "./headerStyle.css";
+import { observer } from "mobx-react-lite";
+import React from "react";
+import { SlidingSwitch } from "../SlidingSwitch";
+import { SpeedButtonSwitch } from "../SpeedSwitchButton";
+export const HeaderWithDescription = ({ header, description }) => {
+    return (<div className="header-description">
+            <h2 className="header-description__title">{header}</h2>
+            {description && <h6 className="header-description__text">{description}</h6>}
+        </div>);
+};
+export const SwitchWithHeader = observer(({ header, description, flag, setFlag }) => {
+    return (<div className="flex-containers-stretched">
+            <HeaderWithDescription header={header} description={description}/>
+            <SlidingSwitch flag={flag} setFlag={setFlag}/>
+        </div>);
+});
+export const SpeedButtonWithHeader = observer(({ header, description }) => {
+    return (<div className="flex-containers-stretched">
+            <HeaderWithDescription header={header} description={description}/>
+            <SpeedButtonSwitch />
+        </div>);
+});

package/dist/SettingsUI/components/SymbolMultiplierPopup/index.d.ts

@@ -1,4 +1,5 @@
 import "./symbolPopup.css";
-export declare const SymbolMultiplierPopup: (() => import("react/jsx-runtime").JSX.Element) & {
+import React from "react";
+export declare const SymbolMultiplierPopup: (() => React.JSX.Element) & {
     displayName: string;
 };

package/dist/SettingsUI/components/SymbolMultiplierPopup/{index.js → index.jsx}

@@ -1,17 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./symbolPopup.css";
 import { observer } from "mobx-react-lite";
+import React from "react";
 import { MoneyText } from "../../../Money";
 import { RainMan } from "../../../Rainman";
 import { getDeviceOrientation } from "../../../utils";
 import { useStores } from "../../hooks";
 const getPaytableValueDetails = (paytableValue, bet) => {
     if (typeof paytableValue === "number") {
-        return _jsx("div", { className: "symbol-popup__value", children: new MoneyText(paytableValue * bet).toString() });
+        return <div className="symbol-popup__value">{new MoneyText(paytableValue * bet).toString()}</div>;
     }
     const min = Array.isArray(paytableValue) ? paytableValue[0] : paytableValue.min;
     const max = Array.isArray(paytableValue) ? paytableValue.at(-1) || 0 : paytableValue.max;
-    return (_jsxs("div", { className: "symbol-popup__value--range", children: [_jsx("div", { children: `min: ${new MoneyText(min * bet).toString()}` }), _jsx("div", { children: `max: ${new MoneyText(max * bet).toString()}` })] }));
+    return (<div className="symbol-popup__value--range">
+            <div>{`min: ${new MoneyText(min * bet).toString()}`}</div>
+            <div>{`max: ${new MoneyText(max * bet).toString()}`}</div>
+        </div>);
 };
 export const SymbolMultiplierPopup = observer(() => {
     const { settingStore } = useStores();
@@ -37,12 +40,19 @@ export const SymbolMultiplierPopup = observer(() => {
             default:
                 break;
         }
-        return (_jsx("div", { className: "symbol-multiplier-popup-modal modal-style", style: {
+        return (<div className="symbol-multiplier-popup-modal modal-style" style={{
                 left: destinationX,
                 top: destinationY,
-            }, children: _jsx("div", { className: `symbol-popup ${arrowDirection}`, children: popupPaytableData.map((popupPaytableRow) => {
-                    return (_jsxs("div", { className: "symbol-popup__row", children: [_jsxs("div", { className: "symbol-popup__prefix", children: [popupPaytableRow.prefix, "x"] }), getPaytableValueDetails(popupPaytableRow.value, settingStore.bet)] }, popupPaytableRow.prefix));
-                }) }) }));
+            }}>
+                <div className={`symbol-popup ${arrowDirection}`}>
+                    {popupPaytableData.map((popupPaytableRow) => {
+                return (<div key={popupPaytableRow.prefix} className="symbol-popup__row">
+                                <div className="symbol-popup__prefix">{popupPaytableRow.prefix}x</div>
+                                {getPaytableValueDetails(popupPaytableRow.value, settingStore.bet)}
+                            </div>);
+            })}
+                </div>
+            </div>);
     }
-    return _jsx("div", {});
+    return <div></div>;
 });

package/dist/SettingsUI/components/UXSettings/index.d.ts

@@ -1,4 +1,5 @@
 import "./uxsettings.css";
-export declare const UXSettings: (() => import("react/jsx-runtime").JSX.Element) & {
+import React from "react";
+export declare const UXSettings: (() => React.JSX.Element) & {
     displayName: string;
 };

package/dist/SettingsUI/components/UXSettings/index.jsx

@@ -0,0 +1,30 @@
+import "./uxsettings.css";
+import { observer } from "mobx-react-lite";
+import React from "react";
+import { useStores } from "../../hooks";
+import { SpeedButtonWithHeader, SwitchWithHeader } from "../SwitchWithHeader";
+export const UXSettings = observer(() => {
+    const { settingStore } = useStores();
+    return (<div className="ux-settings">
+            <div className="ux-settings__switch-container">
+                <div className="ux-settings__switch">
+                    <SpeedButtonWithHeader header="Quick Spin" description="Play faster by reducing total spin time"/>
+                </div>
+                <div className="ux-settings__switch">
+                    <SwitchWithHeader header="Battery saver" description="Safe battery life by reducing animation speed" flag={settingStore.batterySaverFlag} setFlag={settingStore.setBatteryFlag}/>
+                </div>
+                <div className="ux-settings__switch">
+                    <SwitchWithHeader header="Ambient music" description="Turn on or off the game music" flag={settingStore.ambientMusicFlag} setFlag={settingStore.setAmbientMusicFlag}/>
+                </div>
+                <div className="ux-settings__switch">
+                    <SwitchWithHeader header="Sound fx" description="Turn on or off the game sounds" flag={settingStore.soundFxFlag} setFlag={settingStore.setSoundFxFlag}/>
+                </div>
+                <div className="ux-settings__switch">
+                    <SwitchWithHeader header="Full screen mode" description="Turn on or off game fullscreen" flag={settingStore.fullScreenFlag} setFlag={settingStore.setFullScreenFlag}/>
+                </div>
+                <div className="ux-settings__switch">
+                    <SwitchWithHeader header="HI resolution" description="Enable high resolution files" flag={settingStore.HiResolutionFlag} setFlag={settingStore.setHiResolutionFlag}/>
+                </div>
+            </div>
+        </div>);
+});

package/dist/SettingsUI/components/VolumeSettings/index.d.ts

@@ -1,5 +1,6 @@
 import "rc-slider/assets/index.css";
 import "./volume.css";
-export declare const VolumeSettings: (() => import("react/jsx-runtime").JSX.Element) & {
+import React from "react";
+export declare const VolumeSettings: (() => React.JSX.Element) & {
     displayName: string;
 };

package/dist/SettingsUI/components/VolumeSettings/index.jsx

@@ -0,0 +1,46 @@
+import "rc-slider/assets/index.css";
+import "./volume.css";
+import { observer } from "mobx-react-lite";
+import Slider from "rc-slider";
+import React from "react";
+import { RainMan } from "../../../Rainman";
+import { useStores } from "../../hooks";
+const handleStyle = { width: "7px", height: "24px", bottom: "-6px", borderRadius: "4px" };
+const onChange = (newVolumeLevel) => {
+    RainMan.settingsStore.setVolumeLevel(newVolumeLevel);
+    RainMan.settingsStore.setIsSoundEnabled(newVolumeLevel > 0 && !RainMan.settingsStore.isSoundEnabled);
+};
+export const VolumeSettings = observer(() => {
+    const { settingStore } = useStores();
+    return (<div className="volume-control">
+            <div className="volume-control__volume-icon"></div>
+            <Slider className="volume-control__slider" step={1} min={0} max={100} value={settingStore.volumeLevel} handleStyle={settingStore.volumeLevel === 0
+            ? {
+                backgroundColor: "#FA5F27",
+                borderColor: "#FA5F27",
+                ...handleStyle,
+            }
+            : {
+                backgroundColor: "#2FC408",
+                borderColor: "#2FC408",
+                ...handleStyle,
+            }} railStyle={{
+            backgroundColor: "#fff",
+        }} trackStyle={{
+            backgroundColor: "#fff",
+            height: "5px",
+            borderRadius: "1px",
+        }} dotStyle={{
+            borderColor: "#2FC408",
+        }} onChange={onChange}/>
+            <p className="volume-control__text" style={settingStore.volumeLevel === 0
+            ? {
+                color: "#FA5F27",
+            }
+            : {
+                color: "#2FC408",
+            }}>
+                {settingStore.volumeLevel}
+            </p>
+        </div>);
+});

package/dist/SettingsUI/index.d.ts

@@ -1,2 +1,3 @@
 import "./index.css";
-export declare const SettingsUI: () => import("react/jsx-runtime").JSX.Element;
+import React from "react";
+export declare const SettingsUI: () => React.JSX.Element;

package/dist/SettingsUI/index.jsx

@@ -0,0 +1,30 @@
+import "./index.css";
+import React from "react";
+import { UI_ITEMS } from "../utils";
+import { AutoplaySettings, BuyFreeSpinModal, GameRules, SpeedSettingsPopup, SymbolMultiplierPopup, VolumeSettings, } from "./components";
+import { SystemSettingsComponent } from "./SystemSettings/SystemSettingsComponent";
+export const SettingsUI = () => {
+    return (<>
+            <div id={UI_ITEMS.settings} className="modal modal-style">
+                <SystemSettingsComponent />
+            </div>
+            <div id={UI_ITEMS.gameRules} className="modal modal-style">
+                <GameRules />
+            </div>
+            <div id={UI_ITEMS.volume} className="volume-modal modal-style">
+                <VolumeSettings />
+            </div>
+            <div id={UI_ITEMS.autoplay} className="modal modal-style">
+                <AutoplaySettings />
+            </div>
+            <div id={UI_ITEMS.speedSettings} className="speed-settings-modal modal-style">
+                <SpeedSettingsPopup />
+            </div>
+            <div id={UI_ITEMS.symbolPayTable}>
+                <SymbolMultiplierPopup />
+            </div>
+            <div id={UI_ITEMS.freeSpin} className="modal modal-style">
+                <BuyFreeSpinModal />
+            </div>
+        </>);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixi-rainman-game-engine",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "description": "This repository contains all of the mechanics that used in rainman games.",
     "main": "./dist/index.js",
     "module": "./dist/index.js",

package/dist/SettingsUI/SystemSettings/SystemSettingsComponent.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./systemSettings.css";
-import i18next from "i18next";
-import { UI_ITEMS } from "../../utils";
-import { BetComponent, CloseModalButton, UXSettings } from "../components";
-export const SystemSettingsComponent = () => {
-    return (_jsxs("div", { className: "settings", children: [_jsx("div", { className: "settings__title", children: _jsx("h2", { children: i18next.t("systemSettings") }) }), _jsx(CloseModalButton, { layerId: UI_ITEMS.settings }), _jsxs("div", { className: "settings__column", children: [_jsx(BetComponent, {}), _jsx(UXSettings, {})] })] }));
-};

package/dist/SettingsUI/components/AutoplaySettings/index.js

@@ -1,76 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "react-custom-scroll/dist/customScroll.css";
-import "./autoplaySettings.css";
-import i18next from "i18next";
-import { observer } from "mobx-react-lite";
-import { useEffect, useState } from "react";
-import { COMPONENTS } from "../../../components";
-import { UI_ITEMS } from "../../../utils";
-import { useStores } from "../../hooks";
-import { closeModal, CloseModalButton } from "../CloseModalButton";
-import { RichLimitingSlider } from "../RichLimitingSlider";
-import { SpeedButtonWithHeader, SwitchWithHeader } from "../SwitchWithHeader";
-export const AutoplaySettings = observer(() => {
-    const [limit_numbers, setLimitNumbers] = useState([0]);
-    const initialAutoSpinCount = 50;
-    const availableAutoSpinLimits = [10, 20, 50, 100, 150, 200, 250, 300, 350, 400, 500, 600, 700, 800, 900, 1000];
-    const { settingStore } = useStores();
-    const calculateLimitBounds = (indexOfSelectedLimit) => {
-        let bottomLimitIndex = indexOfSelectedLimit - 2;
-        let topLimitIndex = indexOfSelectedLimit + 1;
-        if (bottomLimitIndex < 0) {
-            bottomLimitIndex = availableAutoSpinLimits.length - -bottomLimitIndex;
-        }
-        if (topLimitIndex === availableAutoSpinLimits.length) {
-            topLimitIndex = 0;
-        }
-        return {
-            bottomLimitIndex,
-            topLimitIndex,
-        };
-    };
-    const updateLimitsBounds = (newLimit) => {
-        setAutoSpinsCount(newLimit);
-        const indexOfSelectedSpinsLimit = availableAutoSpinLimits.findIndex((limitCount) => limitCount === newLimit);
-        if (indexOfSelectedSpinsLimit === -1) {
-        }
-        const { bottomLimitIndex, topLimitIndex } = calculateLimitBounds(indexOfSelectedSpinsLimit);
-        const limitNumbersIndexes = [];
-        for (let index = bottomLimitIndex; index !== topLimitIndex + 1; index++) {
-            if (index === availableAutoSpinLimits.length) {
-                index = 0;
-            }
-            limitNumbersIndexes.push(availableAutoSpinLimits[index]);
-            if (limitNumbersIndexes.length === 4) {
-                break;
-            }
-        }
-        setLimitNumbers(limitNumbersIndexes);
-    };
-    useEffect(() => {
-        updateLimitsBounds(initialAutoSpinCount);
-    }, []);
-    const { singleWinExceeds, balancedIncreased, balancedDecreased, howManyAutoSpinsLeft, infinitySpinsEnabled, setSingleWinExceeds, setBalancedIncreased, setBalancedDecreased, setAutoSpinsCount, flipInfinitySpinsFlag, resetAutoplaySettings, } = settingStore;
-    return (_jsxs("div", { className: "autoplay-settings", children: [_jsx(CloseModalButton, { layerId: UI_ITEMS.autoplay }), _jsx("div", { className: "autoplay-settings__title", children: _jsx("h2", { children: i18next.t("autoPlay") }) }), _jsxs("div", { className: "autoplay-settings__stop-limits", children: [_jsx("div", { className: `autoplay-settings__limit left ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`, onClick: () => {
-                            let indexOfSelectedSpinsLimit = availableAutoSpinLimits.findIndex((limitCount) => limitCount === howManyAutoSpinsLeft);
-                            indexOfSelectedSpinsLimit -= 1;
-                            if (indexOfSelectedSpinsLimit === -1) {
-                                indexOfSelectedSpinsLimit = availableAutoSpinLimits.length - 1;
-                            }
-                            updateLimitsBounds(availableAutoSpinLimits[indexOfSelectedSpinsLimit]);
-                        }, children: _jsx("p", { children: "-" }) }), limit_numbers.map((limiter, index) => {
-                        return (_jsx("button", { value: limiter, className: `autoplay-settings__limit ${limiter === howManyAutoSpinsLeft ? "autoplay-settings__limit--active" : ""} middle ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`, onClick: (event) => updateLimitsBounds(Number(event.currentTarget.value)), children: _jsx("p", { children: limiter }) }, `${limiter}${index}`));
-                    }), _jsx("div", { className: `autoplay-settings__limit right ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`, onClick: () => {
-                            let indexOfSelectedSpinsLimit = availableAutoSpinLimits.findIndex((limitCount) => limitCount === howManyAutoSpinsLeft);
-                            indexOfSelectedSpinsLimit += 1;
-                            if (indexOfSelectedSpinsLimit === availableAutoSpinLimits.length) {
-                                indexOfSelectedSpinsLimit = 0;
-                            }
-                            const newAutoSpinsLimitNumber = availableAutoSpinLimits[indexOfSelectedSpinsLimit];
-                            updateLimitsBounds(newAutoSpinsLimitNumber);
-                        }, children: _jsx("p", { children: "+" }) }), _jsx("div", { className: `autoplay-settings__limit circle ${infinitySpinsEnabled ? "autoplay-settings__limit--active" : ""}`, onClick: () => flipInfinitySpinsFlag(), children: _jsx("p", { children: "\u221E" }) })] }), _jsx("div", { className: "autoplay-settings__title", children: _jsx("h2", { children: i18next.t("stopAutoPlay") }) }), _jsxs("div", { className: "autoplay-settings__sliders", children: [_jsx(RichLimitingSlider, { value: singleWinExceeds, setValue: setSingleWinExceeds, maxValue: Number(i18next.t("ifSingleWinExceedsMax")), description: i18next.t("ifSingleWinExceedsMaxDescription") }), _jsx(RichLimitingSlider, { value: balancedIncreased, setValue: setBalancedIncreased, maxValue: Number(i18next.t("ifBalanceIncreasesBy")), description: i18next.t("ifBalanceIncreasesByDescription") }), _jsx(RichLimitingSlider, { value: balancedDecreased, setValue: setBalancedDecreased, maxValue: Number(i18next.t("ifSingleWinExceedsMax")), description: i18next.t("ifBalanceDecreaseByDescription") })] }), _jsxs("div", { className: "autoplay-settings__switches", children: [_jsx("div", { className: "autoplay-settings__switch", children: _jsx(SwitchWithHeader, { header: i18next.t("onAnyWin"), flag: settingStore.onAnyWin, setFlag: settingStore.setOnAnyWin }) }), _jsx("div", { className: "autoplay-settings__switch", children: _jsx(SpeedButtonWithHeader, { header: i18next.t("speedButtonHeader"), description: i18next.t("speedButtonDescription") }) })] }), _jsxs("div", { className: "autoplay-settings__confirmation", children: [_jsx("div", { className: "autoplay-settings__confirmation-button", onClick: () => {
-                            resetAutoplaySettings();
-                            updateLimitsBounds(initialAutoSpinCount);
-                            closeModal(UI_ITEMS.autoplay);
-                        }, children: _jsx("p", { children: i18next.t("cancel") }) }), _jsx("div", { id: COMPONENTS.autoSpinConfirm, className: "autoplay-settings__confirmation-button", onClick: () => closeModal(UI_ITEMS.autoplay), children: _jsx("p", { children: i18next.t("confirm") }) })] })] }));
-});

package/dist/SettingsUI/components/Bet/index.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./bet.css";
-import { observer } from "mobx-react-lite";
-import { useStores } from "../../hooks";
-export const BetComponent = observer(() => {
-    const { settingStore } = useStores();
-    return (_jsxs("div", { className: "bet-container", children: [_jsx("h2", { children: "Total bet" }), _jsxs("div", { className: "bet-container__controls", children: [_jsx("button", { name: "bet-minus", className: "bet-container__button", children: "-" }), _jsx("div", { className: "bet-container__value", children: _jsx("p", { children: settingStore.betText }) }), _jsx("button", { name: "bet-plus", className: "bet-container__button", children: "+" })] })] }));
-});

package/dist/SettingsUI/components/BuyFreeSpins/index.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./buyFreeSpin.css";
-import { useState } from "react";
-import { Currencies } from "ts-money";
-import { UI_ITEMS } from "../../../utils";
-import { useBuyFreeSpinOptions } from "../../hooks";
-import { CloseModalButton } from "../CloseModalButton";
-import { OptionButton } from "../OptionButton";
-export const BuyFreeSpinModal = () => {
-    const [errorMessage, setErrorMessage] = useState("");
-    const freeSpinOptions = useBuyFreeSpinOptions();
-    const currency = Currencies[localStorage.getItem("currency")]?.symbol_native || "$";
-    const clearErrorMessage = () => setErrorMessage("");
-    return (_jsxs("div", { className: "buyFreeSpins__container", children: [_jsx(CloseModalButton, { layerId: UI_ITEMS.freeSpin, afterClose: clearErrorMessage }), _jsx("div", { className: "buyFreeSpins__title-container", children: _jsx("h1", { children: "Buy Free Spins" }) }), _jsx("div", { className: "buyFreeSpins__buttons-container", children: freeSpinOptions.map((option) => (_jsx(OptionButton, { setMessage: setErrorMessage, option: option, currency: currency }, option.amount))) }), errorMessage ? (_jsx("div", { children: _jsx("p", { className: "buyFreeSpins__error-message", children: errorMessage }) })) : null] }));
-};

package/dist/SettingsUI/components/GameRules/index.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "react-custom-scroll/dist/customScroll.css";
-import "./gameRules.css";
-import i18next from "i18next";
-import { observer } from "mobx-react-lite";
-import { useState } from "react";
-import CustomScroll from "react-custom-scroll";
-import { UI_ITEMS } from "../../../utils";
-import { closeModal, CloseModalButton } from "../CloseModalButton";
-import { gameRulesContent } from "./data";
-export const GameRules = observer(() => {
-    const [pageNumber, setPageNumber] = useState(0);
-    const changePage = (incrementor) => {
-        const numberOfPages = gameRulesContent.pages.length;
-        if (pageNumber + incrementor === numberOfPages) {
-            setPageNumber(0);
-            return;
-        }
-        if (pageNumber + incrementor === -1) {
-            setPageNumber(numberOfPages - 1);
-            return;
-        }
-        setPageNumber(pageNumber + incrementor);
-    };
-    return (_jsxs("div", { className: "game-rules", children: [_jsx("div", { className: "settings__title", children: _jsx("h2", { children: i18next.t("gameRules") }) }), _jsx(CloseModalButton, { layerId: UI_ITEMS.gameRules }), _jsx("div", { className: "game-rules__container custom-scroll", children: _jsx(CustomScroll, { className: "game-rules__scroll", allowOuterScroll: true, children: _jsx("div", { className: "game-rules__content", children: gameRulesContent.pages[pageNumber] }) }) }), _jsxs("div", { className: "game-rules__page-control", children: [_jsx("div", { className: "page-left", onClick: () => changePage(-1) }), _jsx("div", { className: "page-middle", onClick: () => closeModal(UI_ITEMS.gameRules) }), _jsx("div", { className: "page-right", onClick: () => changePage(1) })] })] }));
-});

package/dist/SettingsUI/components/RichLimitingSlider/index.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "rc-slider/assets/index.css";
-import "./richLimitingSlider.css";
-import { observer } from "mobx-react-lite";
-import Slider from "rc-slider";
-export const RichLimitingSlider = observer(({ value, setValue, maxValue, description }) => {
-    return (_jsxs("div", { className: "rich-slider", children: [_jsx(Slider, { className: "rich-slider__slider", step: 1, min: 0, max: maxValue, defaultValue: value, value: value, handleStyle: {
-                    backgroundColor: "#fdf425",
-                    borderColor: "#fdf425",
-                    width: "20px",
-                    height: "20px",
-                    bottom: "-4px",
-                }, railStyle: {
-                    backgroundColor: "#fff",
-                }, trackStyle: {
-                    backgroundColor: "#fdf425",
-                }, dotStyle: {
-                    borderColor: "#fdf425",
-                }, onChange: (value) => setValue(value), children: _jsx("p", { className: "rich-slider__description", children: description }) }), _jsx("div", { className: "rich-slider__number", children: value })] }));
-});

package/dist/SettingsUI/components/SlidingSwitch/index.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./slidingSwitch.css";
-import { observer } from "mobx-react-lite";
-export const SlidingSwitch = observer(({ flag, setFlag }) => {
-    return (_jsxs("label", { className: "switch", children: [_jsx("span", { className: `switch-round-box round ${flag ? "switch-round-box--active" : ""}` }), _jsx("input", { type: "checkbox", defaultChecked: flag, onChange: (event) => setFlag(event.target.checked) }), _jsx("p", { className: `switch__text ${flag ? "switch__text--active" : ""}`, children: flag ? "ON" : "OFF" })] }));
-});

package/dist/SettingsUI/components/SpeedSettingsPopup/index.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "react-custom-scroll/dist/customScroll.css";
-import "./speedSettingsPopup.css";
-import i18next from "i18next";
-import { observer } from "mobx-react-lite";
-import { SPEED_LEVELS } from "../../../application";
-import { UI_ITEMS } from "../../../utils";
-import { useStores } from "../../hooks";
-import { CloseModalButton } from "../CloseModalButton";
-export const SPEED_PREFIX = "speed-";
-export const SpeedSettingsPopup = observer(() => {
-    const speedLevelMapper = {
-        slow: SPEED_LEVELS.slow,
-        normal: SPEED_LEVELS.normal,
-        fast: SPEED_LEVELS.fast,
-    };
-    const { settingStore } = useStores();
-    return (_jsxs("div", { className: "speed-settings-popup", children: [_jsx(CloseModalButton, { layerId: UI_ITEMS.speedSettings }), _jsx("div", { className: "speed-settings-popup__title", children: i18next.t("howDoYouWantToPlay") }), _jsx("div", { className: "speed-settings-popup__speed-options", children: Object.keys(speedLevelMapper).map((speedLevelKey) => (_jsx("div", { id: `${SPEED_PREFIX}${speedLevelKey}`, className: `speed-settings-popup__option ${speedLevelKey === settingStore.currentSpeed ? "speed-settings-popup_option--active" : ""}`, children: _jsx("img", { className: `speed-settings-popup__icon ${speedLevelMapper[speedLevelKey]}`, src: `../../../assets/settings/speedPopup/speed-${speedLevelMapper[speedLevelKey]}.png` }) }, `${SPEED_PREFIX}${speedLevelKey}`))) })] }));
-});

package/dist/SettingsUI/components/SpeedSwitchButton/index.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { observer } from "mobx-react-lite";
-import { useStores } from "../../hooks";
-export const SpeedButtonSwitch = observer(() => {
-    const speedLevelMapper = {
-        slow: "turtle",
-        normal: "rabbit",
-        fast: "cheetah",
-    };
-    const { settingStore } = useStores();
-    const { currentSpeed } = settingStore;
-    return (_jsxs("label", { className: "switch turtle-switch speed-level-id", children: [_jsx("span", { className: "turtle-switch-round-box" }), _jsx("img", { className: "turtle-switch__icon", src: `assets/settings/speed-${speedLevelMapper[currentSpeed]}.png` }), _jsx("div", { className: "dot-container", children: Array.from({ length: 3 }).map((_, i) => (_jsx("div", { className: `white-dot ${i < settingStore.indexOfSpeedLevel ? "white-dot--active" : ""}` }, i))) })] }));
-});

package/dist/SettingsUI/components/SwitchWithHeader/index.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./headerStyle.css";
-import { observer } from "mobx-react-lite";
-import { SlidingSwitch } from "../SlidingSwitch";
-import { SpeedButtonSwitch } from "../SpeedSwitchButton";
-export const HeaderWithDescription = ({ header, description }) => {
-    return (_jsxs("div", { className: "header-description", children: [_jsx("h2", { className: "header-description__title", children: header }), description && _jsx("h6", { className: "header-description__text", children: description })] }));
-};
-export const SwitchWithHeader = observer(({ header, description, flag, setFlag }) => {
-    return (_jsxs("div", { className: "flex-containers-stretched", children: [_jsx(HeaderWithDescription, { header: header, description: description }), _jsx(SlidingSwitch, { flag: flag, setFlag: setFlag })] }));
-});
-export const SpeedButtonWithHeader = observer(({ header, description }) => {
-    return (_jsxs("div", { className: "flex-containers-stretched", children: [_jsx(HeaderWithDescription, { header: header, description: description }), _jsx(SpeedButtonSwitch, {})] }));
-});

package/dist/SettingsUI/components/UXSettings/index.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./uxsettings.css";
-import { observer } from "mobx-react-lite";
-import { useStores } from "../../hooks";
-import { SpeedButtonWithHeader, SwitchWithHeader } from "../SwitchWithHeader";
-export const UXSettings = observer(() => {
-    const { settingStore } = useStores();
-    return (_jsx("div", { className: "ux-settings", children: _jsxs("div", { className: "ux-settings__switch-container", children: [_jsx("div", { className: "ux-settings__switch", children: _jsx(SpeedButtonWithHeader, { header: "Quick Spin", description: "Play faster by reducing total spin time" }) }), _jsx("div", { className: "ux-settings__switch", children: _jsx(SwitchWithHeader, { header: "Battery saver", description: "Safe battery life by reducing animation speed", flag: settingStore.batterySaverFlag, setFlag: settingStore.setBatteryFlag }) }), _jsx("div", { className: "ux-settings__switch", children: _jsx(SwitchWithHeader, { header: "Ambient music", description: "Turn on or off the game music", flag: settingStore.ambientMusicFlag, setFlag: settingStore.setAmbientMusicFlag }) }), _jsx("div", { className: "ux-settings__switch", children: _jsx(SwitchWithHeader, { header: "Sound fx", description: "Turn on or off the game sounds", flag: settingStore.soundFxFlag, setFlag: settingStore.setSoundFxFlag }) }), _jsx("div", { className: "ux-settings__switch", children: _jsx(SwitchWithHeader, { header: "Full screen mode", description: "Turn on or off game fullscreen", flag: settingStore.fullScreenFlag, setFlag: settingStore.setFullScreenFlag }) }), _jsx("div", { className: "ux-settings__switch", children: _jsx(SwitchWithHeader, { header: "HI resolution", description: "Enable high resolution files", flag: settingStore.HiResolutionFlag, setFlag: settingStore.setHiResolutionFlag }) })] }) }));
-});

package/dist/SettingsUI/components/VolumeSettings/index.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "rc-slider/assets/index.css";
-import "./volume.css";
-import { observer } from "mobx-react-lite";
-import Slider from "rc-slider";
-import { RainMan } from "../../../Rainman";
-import { useStores } from "../../hooks";
-const handleStyle = { width: "7px", height: "24px", bottom: "-6px", borderRadius: "4px" };
-const onChange = (newVolumeLevel) => {
-    RainMan.settingsStore.setVolumeLevel(newVolumeLevel);
-    RainMan.settingsStore.setIsSoundEnabled(newVolumeLevel > 0 && !RainMan.settingsStore.isSoundEnabled);
-};
-export const VolumeSettings = observer(() => {
-    const { settingStore } = useStores();
-    return (_jsxs("div", { className: "volume-control", children: [_jsx("div", { className: "volume-control__volume-icon" }), _jsx(Slider, { className: "volume-control__slider", step: 1, min: 0, max: 100, value: settingStore.volumeLevel, handleStyle: settingStore.volumeLevel === 0
-                    ? {
-                        backgroundColor: "#FA5F27",
-                        borderColor: "#FA5F27",
-                        ...handleStyle,
-                    }
-                    : {
-                        backgroundColor: "#2FC408",
-                        borderColor: "#2FC408",
-                        ...handleStyle,
-                    }, railStyle: {
-                    backgroundColor: "#fff",
-                }, trackStyle: {
-                    backgroundColor: "#fff",
-                    height: "5px",
-                    borderRadius: "1px",
-                }, dotStyle: {
-                    borderColor: "#2FC408",
-                }, onChange: onChange }), _jsx("p", { className: "volume-control__text", style: settingStore.volumeLevel === 0
-                    ? {
-                        color: "#FA5F27",
-                    }
-                    : {
-                        color: "#2FC408",
-                    }, children: settingStore.volumeLevel })] }));
-});

package/dist/SettingsUI/index.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import "./index.css";
-import { UI_ITEMS } from "../utils";
-import { AutoplaySettings, BuyFreeSpinModal, GameRules, SpeedSettingsPopup, SymbolMultiplierPopup, VolumeSettings, } from "./components";
-import { SystemSettingsComponent } from "./SystemSettings/SystemSettingsComponent";
-export const SettingsUI = () => {
-    return (_jsxs(_Fragment, { children: [_jsx("div", { id: UI_ITEMS.settings, className: "modal modal-style", children: _jsx(SystemSettingsComponent, {}) }), _jsx("div", { id: UI_ITEMS.gameRules, className: "modal modal-style", children: _jsx(GameRules, {}) }), _jsx("div", { id: UI_ITEMS.volume, className: "volume-modal modal-style", children: _jsx(VolumeSettings, {}) }), _jsx("div", { id: UI_ITEMS.autoplay, className: "modal modal-style", children: _jsx(AutoplaySettings, {}) }), _jsx("div", { id: UI_ITEMS.speedSettings, className: "speed-settings-modal modal-style", children: _jsx(SpeedSettingsPopup, {}) }), _jsx("div", { id: UI_ITEMS.symbolPayTable, children: _jsx(SymbolMultiplierPopup, {}) }), _jsx("div", { id: UI_ITEMS.freeSpin, className: "modal modal-style", children: _jsx(BuyFreeSpinModal, {}) })] }));
-};