pixi-rainman-game-engine 0.0.6 → 0.1.1

package/dist/ComponentRegistry/ComponentRegistry.d.ts

@@ -18,6 +18,7 @@ export declare class ComponentRegistry {
     remove(component: Container): void;
     updateAllSpeedAdaptable(speedLevel: SpeedLevel): void;
     get<T extends keyof RegistryMap>(componentName: T): RegistryMap[T];
+    getIfExists<T extends keyof RegistryMap>(componentName: T): RegistryMap[T];
     has<T extends keyof RegistryMap>(componentName: T): boolean;
     addMany(components: Container[]): void;
     removeMany(components: Container[]): void;

package/dist/ComponentRegistry/ComponentRegistry.js

@@ -85,6 +85,10 @@ export class ComponentRegistry {
         }
         return componentToReturn;
     }
+    getIfExists(componentName) {
+        const componentToReturn = this.registry.get(componentName);
+        return componentToReturn;
+    }
     has(componentName) {
         return this.registry.has(componentName);
     }

package/dist/ComponentRegistry/types.d.ts

@@ -1,4 +1,4 @@
-import { AbstractColumnsContainer, AbstractFrame, AbstractInnerFrame, AutoplayButton, Background, BaseButton, BUTTONS, COMPONENTS, FreeSpinBox, MessageBox, SpeedControlButton, StylefulUpdatableText, UpdatableTextComponent, UpdatableValueComponent, VolumeButton } from "../components";
+import { AbstractColumnsContainer, AbstractFrame, AbstractInnerFrame, AutoplayButton, Background, BaseButton, BUTTONS, COMPONENTS, FreeSpinBox, InfoButton, MessageBox, MoreButton, NegButton, PlusButton, RefreshButton, SpeedControlButton, StylefulUpdatableText, UpdatableTextComponent, UpdatableValueComponent, VolumeButton } from "../components";
 export interface RegistryMap {
     [MessageBox.autoSpinTextRegistryName]: UpdatableValueComponent;
     [MessageBox.currentWinTextRegistryName]: UpdatableTextComponent;
@@ -8,15 +8,15 @@ export interface RegistryMap {
     [Background.registryName]: Background;
     [VolumeButton.registryName]: VolumeButton;
     [AutoplayButton.registryName]: AutoplayButton;
-    [FreeSpinBox.registryName]: FreeSpinBox;
+    [FreeSpinBox.registryName]?: FreeSpinBox;
     [AbstractFrame.registryName]: AbstractFrame;
     [AbstractInnerFrame.registryName]: AbstractInnerFrame;
     [AbstractColumnsContainer.registryName]: AbstractColumnsContainer;
-    [BUTTONS.refresh]: BaseButton;
-    [BUTTONS.plus]: BaseButton;
-    [BUTTONS.neg]: BaseButton;
-    [BUTTONS.info]: BaseButton;
-    [BUTTONS.more]: BaseButton;
+    [RefreshButton.registryName]: RefreshButton;
+    [PlusButton.registryName]: PlusButton;
+    [NegButton.registryName]: NegButton;
+    [InfoButton.registryName]: InfoButton;
+    [MoreButton.registryName]: MoreButton;
     [BUTTONS.gamble]: BaseButton;
     [COMPONENTS.betText]: UpdatableTextComponent;
     [COMPONENTS.creditText]: UpdatableTextComponent;

package/dist/ComponentRegistry/types.js

@@ -1 +1 @@
-import { AbstractColumnsContainer, AbstractFrame, AbstractInnerFrame, AutoplayButton, Background, BUTTONS, COMPONENTS, FreeSpinBox, MessageBox, SpeedControlButton, VolumeButton, } from "../components";
+import { AbstractColumnsContainer, AbstractFrame, AbstractInnerFrame, AutoplayButton, Background, BUTTONS, COMPONENTS, FreeSpinBox, InfoButton, MessageBox, MoreButton, NegButton, PlusButton, RefreshButton, SpeedControlButton, VolumeButton, } from "../components";

package/dist/DescribedPlayableAction/DescribedPlayableAction.d.ts

@@ -1,5 +1,5 @@
 import { Nullable, PlayableAction } from "../utils";
-export declare class DescribedPlayableAction<T = Record<string, never>> {
+export declare class DescribedPlayableAction<T = number> {
     readonly type: T;
     action: PlayableAction;
     winAmount: Nullable<number>;

package/dist/Money/MoneyText.js

@@ -3,9 +3,9 @@ import { RainMan } from "../Rainman";
 export class MoneyText {
     money;
     constructor(amount) {
-        this.money = Money.fromDecimal(amount, RainMan.config?.currency, Math.round);
+        this.money = Money.fromDecimal(amount, RainMan.config.currency, Math.round);
     }
     toString() {
-        return `${this.money} ${RainMan.config.currency}`;
+        return `${this.money} ${RainMan.config.currency.symbol_native}`;
     }
 }

package/dist/Rainman/Rainman.js

@@ -1,7 +1,7 @@
 import "../components/dictionary/i18n";
 import { merge } from "lodash";
 import { ComponentRegistry } from "../ComponentRegistry";
-import { SettingsStore } from "../stores";
+import { settingStore } from "../SettingsUI/hooks";
 import { defaultAppConfig } from "./appConfig";
 export class RainMan {
     static app;
@@ -16,7 +16,7 @@ export class RainMan {
         RainMan.config = merge(defaultAppConfig, config);
         RainMan.symbolIds = symbolIds;
         RainMan.winTypeIds = winTypeIds;
-        RainMan.settingsStore = new SettingsStore();
+        RainMan.settingsStore = settingStore;
         RainMan.componentRegistry = new ComponentRegistry(app);
         RainMan.spinLogicFactory = spinLogicFactory;
     }

package/dist/Rainman/appConfig.js

@@ -1,10 +1,11 @@
 import { Color } from "pixi.js";
 import { Currencies } from "ts-money";
 export const defaultAppConfig = {
-    gameHeight: 1920,
-    gameWidth: 1080,
+    gameWidth: 1920,
+    gameHeight: 1080,
     idleTimeout: 10000,
     fontSize: 35,
+    mobileFontSize: 45,
     fontColor: new Color(0xfbd400).toHex(),
     updatableTextValueColor: new Color(0xffffff).toHex(),
     fontFace: "HelveticaNeueLTStd",
@@ -15,7 +16,7 @@ export const defaultAppConfig = {
         timeToSpeedUp: 200,
         timeToSlowDown: 10,
         symbolDropDownTime: 500,
-        wiggleTweenDuration: 1000,
+        wiggleTweenDuration: 400,
         balloonFlyUpTime: 500,
         timeToSetResults: 10,
         bigWinDuration: 2000,

package/dist/Rainman/types.d.ts

@@ -14,6 +14,7 @@ export type OptionalAppConfig = {
     idleTimeout: number;
     currency: Currency;
     fontSize: number;
+    mobileFontSize: number;
     fontColor: string;
     updatableTextValueColor: string;
     fontFace: string;

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

@@ -0,0 +1,3 @@
+import "./systemSettings.css";
+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/SystemSettings/systemSettings.css

@@ -0,0 +1,35 @@
+.settings__title {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.settings {
+    display: flex;
+    flex-direction: column;
+    height: 90%;
+    align-items: center;
+    width: 90%;
+}
+
+.settings__title h2 {
+    color: #ec5e27;
+    margin: 0px;
+    text-decoration: underline;
+    text-transform: uppercase;
+}
+
+.settings__column {
+    display: flex;
+    flex-direction: row;
+    overflow: auto;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+@media only screen and (max-width: 900px) {
+    .settings__column {
+        flex-direction: column-reverse;
+    }
+}

package/dist/SettingsUI/components/AutoplaySettings/autoplaySettings.css

@@ -0,0 +1,267 @@
+.autoplay-settings {
+    display: flex;
+    flex-direction: column;
+    height: 90%;
+    align-items: center;
+    width: 70%;
+    max-width: 800px;
+    justify-content: space-between;
+}
+
+.autoplay-settings__title {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.autoplay-settings__exit {
+    font-size: 30px;
+    color: white;
+    position: absolute;
+    right: 30px;
+    top: 15px;
+    background-color: #00000000;
+    border-style: none;
+}
+
+.autoplay-settings__title h2 {
+    color: #ec5e27;
+    margin: 0px;
+    text-decoration: underline;
+    text-transform: uppercase;
+}
+
+.autoplay-settings__sliders {
+    width: 100%;
+}
+
+.autoplay-settings__switch {
+    width: 300px;
+}
+
+.autoplay-settings__column {
+    display: flex;
+    flex-direction: row;
+    overflow: auto;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+.autoplay-settings__switches {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin: 10px 0px;
+}
+
+.autoplay-settings__stop-limits {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 50px;
+    justify-content: center;
+}
+
+.autoplay-settings__limit {
+    width: 40px;
+    border: solid 2px white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    font-weight: bolder;
+    margin: 0px 5px;
+    color: white;
+}
+
+.autoplay-settings__limit:hover {
+    background-color: #fdf42525;
+    border: 2px solid #fdf425;
+    color: #fdf425;
+}
+
+.autoplay-settings__limit--active {
+    background-color: #fdf42550;
+    border: 2px solid #fdf425;
+    color: #fdf425;
+}
+
+.autoplay-settings__limit--infinity {
+    border: 2px solid #5a5a5aad;
+    color: #5a5a5aad;
+}
+
+.left {
+    border-radius: 34px 0px 0px 34px;
+}
+
+.right {
+    border-radius: 0px 34px 34px 0px;
+}
+
+.middle {
+    width: 60px;
+    border-radius: 0px 0px 0px 0px;
+    background-color: #00000000;
+}
+
+.circle {
+    border-radius: 34px;
+    font-size: 40px;
+}
+
+.autoplay-settings__limit.circle p {
+    position: relative;
+    top: -4px;
+}
+
+.autoplay-settings__limit.left p {
+    position: relative;
+    top: -2px;
+}
+
+.autoplay-settings__limit.right p {
+    position: relative;
+    top: -2px;
+}
+
+.autoplay-settings__confirmation {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin-top: 20px;
+}
+
+.autoplay-settings__confirmation-button {
+    margin: 10px 0px 10px 10px;
+    width: 100px;
+    height: 40px;
+    border: solid white 2px;
+    background-color: black;
+    border-radius: 34px;
+    font-size: large;
+    font-weight: bold;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0px 10px;
+}
+
+.autoplay-settings__confirmation-button:hover {
+    background-color: #fdf42550;
+    border: 2px solid #fdf425;
+    color: #fdf425;
+}
+
+@media only screen and (max-width: 900px) {
+    .autoplay-settings {
+        width: 90%;
+    }
+
+    .autoplay-settings__column {
+        flex-direction: column-reverse;
+    }
+
+    .autoplay-settings__switches {
+        width: 100%;
+        flex-direction: column;
+    }
+
+    .autoplay-settings__switch {
+        width: 250px;
+        flex-direction: column;
+        margin: 5px 0px;
+    }
+
+    .left {
+        width: 40px;
+        border-radius: 34px 0px 0px 34px;
+    }
+
+    .right {
+        width: 40px;
+        border-radius: 0px 34px 34px 0px;
+    }
+
+    .middle {
+        width: 70px;
+        font-size: 12px;
+        border-radius: 0px 0px 0px 0px;
+    }
+
+    .circle {
+        border-radius: 34px;
+        font-size: 40px;
+        width: 30px;
+    }
+
+    .autoplay-settings__stop-limits {
+        height: 35px;
+    }
+
+    .autoplay-settings__limit.circle p {
+        position: relative;
+        top: -4px;
+        font-size: 20px;
+    }
+
+    .autoplay-settings__limit.left p {
+        position: relative;
+        top: -2px;
+    }
+
+    .autoplay-settings__limit.right p {
+        position: relative;
+        top: -2px;
+    }
+
+    .autoplay-settings__confirmation {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        margin-top: 0px;
+    }
+
+    .left {
+        border-radius: 34px 0px 0px 34px;
+    }
+
+    .right {
+        border-radius: 0px 34px 34px 0px;
+    }
+
+    .middle {
+        width: 60px;
+        border-radius: 0px 0px 0px 0px;
+    }
+
+    .circle {
+        border-radius: 34px;
+        font-size: 40px;
+    }
+
+    .autoplay-settings__limit.circle p {
+        top: -2px;
+    }
+
+    .autoplay-settings__limit.left p {
+        top: -2px;
+    }
+
+    .autoplay-settings__limit.right p {
+        top: -2px;
+    }
+
+    .autoplay-settings__exit {
+        right: -10px;
+        top: 10px;
+    }
+}

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

@@ -0,0 +1,6 @@
+import "react-custom-scroll/dist/customScroll.css";
+import "./autoplaySettings.css";
+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/bet.css

@@ -0,0 +1,71 @@
+.bet-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 50%;
+    height: 150px;
+    margin: 0px 30px;
+}
+
+.bet-container__value {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 150px;
+    height: 60px;
+    border-radius: 60px;
+    border: 2px white;
+    border-style: solid;
+    margin: 0px 10px;
+}
+
+.bet-container__value p {
+    font-size: 25px;
+}
+
+.bet-container__button {
+    height: 62px;
+    width: 62px;
+    font-size: 40px;
+    font-weight: bold;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0);
+    border: 2px solid white;
+    color: white;
+    text-align: center;
+    cursor: pointer;
+}
+
+.bet-container h2 {
+    text-transform: uppercase;
+}
+
+.bet-container__controls {
+    display: flex;
+    flex-direction: row;
+}
+
+.bet-container__button:hover {
+    background-color: #fdf42550;
+    color: #fdf425;
+    border: 2px solid #fdf425;
+}
+
+@media only screen and (max-width: 900px) {
+    .bet-container__value {
+        width: 70px;
+        height: 30px;
+    }
+
+    .bet-container__value p {
+        font-size: 12px;
+    }
+
+    .bet-container__button {
+        height: 32px;
+        width: 32px;
+        font-size: 20px;
+        padding: 0px;
+    }
+}

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

@@ -0,0 +1,5 @@
+import "./bet.css";
+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>);
+});