pixi-rainman-game-engine 0.1.21 → 0.1.23

package/dist/SettingsUI/components/SwitchWithHeader/headerStyle.css

@@ -0,0 +1,28 @@
+.header-description {
+    max-width: 200px;
+}
+
+.header-description__title {
+    min-width: 200px;
+    margin: 0px;
+    text-transform: uppercase;
+}
+
+.header-description__text {
+    max-width: 170px;
+    margin: 0px;
+}
+
+@media only screen and (max-width: 900px) {
+    .header-description {
+        max-width: 150px;
+    }
+
+    .header-description h2 {
+        font-size: 20px;
+    }
+
+    .header-description h6 {
+        font-size: 10px;
+    }
+}

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

@@ -1,3 +1,4 @@
+import "./headerStyle.css";
 import React from "react";
 import { HeaderWithDescriptionProps, SpeedButtonWithHeaderProps, SwitchHeaderProps } from "./types";
 export declare const HeaderWithDescription: ({ header, description }: HeaderWithDescriptionProps) => React.JSX.Element;

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

@@ -1,21 +1,22 @@
+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="flex flex-col gap-2">
-            <h2 className="text-xl font-bold uppercase">{header}</h2>
-            {description && <span>{description}</span>}
+    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 w-full items-center justify-between">
+    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 w-full items-center justify-between">
+    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";
 import React from "react";
-export declare const SymbolMultiplierPopup: (() => React.JSX.Element | null) & {
+export declare const SymbolMultiplierPopup: (() => React.JSX.Element) & {
     displayName: string;
 };

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

@@ -1,40 +1,38 @@
+import "./symbolPopup.css";
 import { observer } from "mobx-react-lite";
 import React from "react";
 import { MoneyText } from "../../../Money";
 import { RainMan } from "../../../Rainman";
 import { useStores } from "../../hooks";
-import { cn } from "../../utils/tw";
 const getPaytableValueDetails = (paytableValue, bet) => {
     if (typeof paytableValue === "number") {
-        return (<div className="whitespace-nowrap text-xs text-white sm:ml-5 sm:text-2xl">
-                {new MoneyText(paytableValue * bet).toString()}
-            </div>);
+        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 (<div className="text-md flex flex-col whitespace-nowrap sm:text-xs">
-            <div>min: {new MoneyText(min * bet).toString()}</div>
-            <div>max: {new MoneyText(max * bet).toString()}</div>
+    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();
     const { popupPaytablePosition, popupPaytableData } = settingStore;
     if (popupPaytablePosition && popupPaytableData) {
-        const arrowDirection = popupPaytablePosition.x > RainMan.app.screen.width / 2 ? "arrow-on-right" : "arrow-on-left ";
-        return (<div className={cn("text-md absolute flex h-fit flex-col items-center justify-center rounded-lg bg-zinc-800 p-2 shadow-lg sm:text-2xl", arrowDirection)} style={{
+        const arrowDirection = popupPaytablePosition.x > RainMan.app.screen.width / 2 ? "arrow-on-right" : "arrow-on-left";
+        return (<div className={`symbol-multiplier-popup-modal modal-style ${arrowDirection}`} style={{
                 left: popupPaytablePosition.x,
                 top: popupPaytablePosition.y,
             }}>
-                <div className="flex h-full w-fit flex-col items-center justify-center sm:w-full">
-                    {popupPaytableData.map((popupPaytableRow) => (<div key={popupPaytableRow.prefix} className="flex gap-1 text-xs sm:text-2xl">
-                            <div className="text-xs font-bold text-primary-500 sm:text-2xl">
-                                {popupPaytableRow.prefix}x
-                            </div>
-                            {getPaytableValueDetails(popupPaytableRow.value, settingStore.bet)}
-                        </div>))}
+                <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 null;
+    return <div></div>;
 });

package/dist/SettingsUI/components/SymbolMultiplierPopup/symbolPopup.css

@@ -0,0 +1,101 @@
+.symbol-multiplier-popup-modal {
+    align-items: center;
+    justify-content: center;
+    padding: 20px 25px;
+}
+
+.symbol-multiplier-popup-modal.arrow-on-left {
+    transform: translate(75px, -50%);
+}
+
+.symbol-multiplier-popup-modal.arrow-on-right {
+    transform: translate(calc(-100% - 75px), -50%);
+}
+
+.symbol-popup {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.symbol-popup.arrow-on-left::after {
+    content: "";
+    position: absolute;
+    display: block;
+    background: url("/assets/settings/symbol-pointer.png");
+    top: 50%;
+    right: 100%;
+    height: 25px;
+    width: 25px;
+    transform: translateY(-50%);
+}
+
+.symbol-popup.arrow-on-right::after {
+    content: "";
+    position: absolute;
+    display: block;
+    background: url("/assets/settings/symbol-pointer.png");
+    top: 50%;
+    left: 100%;
+    height: 25px;
+    width: 25px;
+    transform: translate(0, -50%) rotate(180deg);
+}
+
+.symbol-popup__row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 80%;
+}
+
+.symbol-popup__prefix {
+    font-size: 25px;
+    color: #ec5e27;
+    margin: 0;
+    font-weight: 500;
+}
+
+.symbol-popup__value {
+    font-size: 25px;
+    font-weight: 500;
+    text-align: left;
+    margin-left: 20px;
+    white-space: nowrap;
+}
+
+.symbol-popup__value--range {
+    display: flex;
+    flex-direction: column;
+    font-size: 0.8em;
+    font-weight: 400;
+    margin-left: 20px;
+    margin-bottom: 10px;
+    text-align: left;
+}
+
+.symbol-popup__value--range > div {
+    white-space: nowrap;
+}
+
+@media only screen and (max-width: 900px) {
+    .symbol-popup__prefix {
+        font-size: 15px;
+    }
+
+    .symbol-popup__value {
+        font-size: 15px;
+    }
+
+    .symbol-multiplier-popup-modal.arrow-on-left {
+        transform: translate(50px, -50%);
+    }
+
+    .symbol-multiplier-popup-modal.arrow-on-right {
+        transform: translate(calc(-100% - 50px), -50%);
+    }
+}

package/dist/SettingsUI/components/UXSettings/UXSettings.css

@@ -0,0 +1,28 @@
+.ux-settings {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    width: 50%;
+    height: 100%;
+    margin: 0px 30px;
+}
+
+.ux-settings__switch {
+    width: 500px;
+}
+
+.ux-settings__switch-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    height: 80%;
+    width: 100%;
+}
+
+@media only screen and (max-width: 1125px) {
+    .ux-settings__switch {
+        width: 250px;
+    }
+}

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

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

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

@@ -1,17 +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="flex w-full max-w-xl flex-col">
-            <div className="flex flex-col gap-4">
-                <SpeedButtonWithHeader header="Quick Spin" description="Play faster by reducing total spin time"/>
-                <SwitchWithHeader header="Battery saver" description="Safe battery life by reducing animation speed" flag={settingStore.batterySaverFlag} setFlag={settingStore.setBatteryFlag}/>
-                <SwitchWithHeader header="Ambient music" description="Turn on or off the game music" flag={settingStore.ambientMusicFlag} setFlag={settingStore.setAmbientMusicFlag}/>
-                <SwitchWithHeader header="Sound fx" description="Turn on or off the game sounds" flag={settingStore.soundFxFlag} setFlag={settingStore.setSoundFxFlag}/>
-                <SwitchWithHeader header="Full screen mode" description="Turn on or off game fullscreen" flag={settingStore.fullScreenFlag} setFlag={settingStore.setFullScreenFlag}/>
-                <SwitchWithHeader header="HI resolution" description="Enable high resolution files" flag={settingStore.HiResolutionFlag} setFlag={settingStore.setHiResolutionFlag}/>
+    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,4 +1,5 @@
 import "rc-slider/assets/index.css";
+import "./volume.css";
 import React from "react";
 export declare const VolumeSettings: (() => React.JSX.Element) & {
     displayName: string;

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

@@ -1,4 +1,5 @@
 import "rc-slider/assets/index.css";
+import "./volume.css";
 import { observer } from "mobx-react-lite";
 import Slider from "rc-slider";
 import React from "react";
@@ -11,9 +12,9 @@ const onChange = (newVolumeLevel) => {
 export const VolumeSettings = observer(() => {
     const { settingStore } = useStores();
     const COLOR = settingStore.isSoundEnabled() ? "#2FC408" : "#FA5F27";
-    return (<div className="relative -right-10 top-2 flex h-full w-4/5 items-center">
-            <div className="relative -left-5 bottom-2 h-[30px] w-[30px] bg-[url('/assets/settings/sound-icon.png')] bg-contain bg-center bg-no-repeat"/>
-            <Slider className="relative bottom-2" step={1} min={0} max={100} value={settingStore.volumeLevel} handleStyle={{
+    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={{
             backgroundColor: COLOR,
             borderColor: COLOR,
             width: "7px",
@@ -27,7 +28,7 @@ export const VolumeSettings = observer(() => {
             height: "5px",
             borderRadius: "1px",
         }} onChange={onChange}/>
-            <p className="text-md relative bottom-2 left-4 w-9 pl-2 font-bold" style={{
+            <p className="volume-control__text" style={{
             color: COLOR,
         }}>
                 {settingStore.volumeLevel}

package/dist/SettingsUI/components/VolumeSettings/volume.css

@@ -0,0 +1,54 @@
+.volume-modal {
+    width: 40vh;
+    height: 50px;
+    left: 1vw;
+    bottom: 5vh;
+}
+
+.volume-control {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    position: relative;
+    align-items: center;
+    top: 6px;
+    right: -30px;
+    width: 80%;
+}
+
+.volume-control__text {
+    margin: 0px 0px 10px 0px;
+    padding: 10px 0px;
+    position: relative;
+    font-size: 20px;
+    left: 10px;
+    width: 32px;
+}
+
+.volume-control__slider {
+    position: relative;
+    bottom: 5px;
+}
+
+.volume-control__volume-icon {
+    position: relative;
+    left: -20px;
+    bottom: 5px;
+    width: 30px;
+    height: 30px;
+    background-image: url("/assets/settings/sound-icon.png");
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+.volume-control__volume-icon:after {
+    content: "";
+    display: block;
+    width: 2px;
+    height: 25px;
+    position: relative;
+    top: 2px;
+    left: 30px;
+    background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
+}

package/dist/SettingsUI/hooks/index.d.ts

@@ -1,4 +1,3 @@
 export * from "./useBuyFreeSpins";
-export * from "./useClickOutside";
 export * from "./useDeviceOrientations";
 export * from "./useStore";

package/dist/SettingsUI/hooks/index.js

@@ -1,4 +1,3 @@
 export * from "./useBuyFreeSpins";
-export * from "./useClickOutside";
 export * from "./useDeviceOrientations";
 export * from "./useStore";

package/dist/SettingsUI/index.css

@@ -1,7 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 html {
     height: 100vh;
 }
@@ -84,6 +80,32 @@ body {
     display: none;
 }
 
+.modal-style {
+    display: flex;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.85);
+    border-radius: 20px;
+    border: 2px #423f42;
+    border-style: solid;
+    box-shadow: 0px 0px 6px 1px white;
+}
+
+.modal {
+    width: 80vw;
+    height: 80vh;
+    top: 5vh;
+    left: 10vw;
+    align-items: center;
+    justify-content: center;
+}
+
+.flex-containers-stretched {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
 @keyframes iosAnimMove {
     0% {
         background-position-y: 75%;
@@ -130,45 +152,3 @@ html.is-locked .ios-scroller-animation {
     opacity: 0;
     z-index: -9999;
 }
-
-.arrow-on-left {
-    transform: translate(75px, -50%);
-}
-
-.arrow-on-right {
-    transform: translate(calc(-100% - 75px), -50%);
-}
-
-.arrow-on-left::after {
-    content: "";
-    position: absolute;
-    display: block;
-    background: url("/assets/settings/symbol-pointer.png");
-    top: 50%;
-    right: 100%;
-    height: 25px;
-    width: 25px;
-    transform: translateY(-50%);
-}
-
-.arrow-on-right::after {
-    content: "";
-    position: absolute;
-    display: block;
-    background: url("/assets/settings/symbol-pointer.png");
-    top: 50%;
-    left: 100%;
-    height: 25px;
-    width: 25px;
-    transform: translate(0, -50%) rotate(180deg);
-}
-
-@media only screen and (max-width: 900px) {
-    .arrow-on-left {
-        transform: translate(50px, -50%);
-    }
-
-    .arrow-on-right {
-        transform: translate(calc(-100% - 50px), -50%);
-    }
-}

package/dist/SettingsUI/index.d.ts

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

package/dist/SettingsUI/index.jsx

@@ -1,34 +1,33 @@
-import "./packedStyles.css";
+import "./index.css";
 import React from "react";
 import { UI_ITEMS } from "../utils";
 import { AutoplaySettings, BetSettings, BuyFreeSpinModal, GameRules, SpeedSettingsPopup, SymbolMultiplierPopup, VolumeSettings, } from "./components";
-import { Modal } from "./components/Modal";
 import { SystemSettingsComponent } from "./SystemSettings/SystemSettingsComponent";
 export const SettingsUI = () => {
     return (<>
-            <Modal layerId={UI_ITEMS.settings}>
+            <div id={UI_ITEMS.settings} className="modal modal-style">
                 <SystemSettingsComponent />
-            </Modal>
-            <Modal layerId={UI_ITEMS.gameRules}>
+            </div>
+            <div id={UI_ITEMS.gameRules} className="modal modal-style">
                 <GameRules />
-            </Modal>
-            <div id={UI_ITEMS.volume} className="absolute bottom-[5vh] left-[1vw] h-[50px] w-[40vh] rounded-xl bg-zinc-900 shadow shadow-primary-500/30">
+            </div>
+            <div id={UI_ITEMS.volume} className="volume-modal modal-style">
                 <VolumeSettings />
             </div>
-            <Modal layerId={UI_ITEMS.autoplay}>
+            <div id={UI_ITEMS.autoplay} className="modal modal-style">
                 <AutoplaySettings />
-            </Modal>
-            <Modal layerId={UI_ITEMS.speedSettings} className="absolute flex h-fit items-center justify-center rounded-xl bg-zinc-900 p-4 shadow-primary-500/30 sm:left-auto sm:top-auto portrait:left-auto portrait:top-auto portrait:items-center">
+            </div>
+            <div id={UI_ITEMS.speedSettings} className="speed-settings-modal modal-style">
                 <SpeedSettingsPopup />
-            </Modal>
+            </div>
             <div id={UI_ITEMS.symbolPayTable}>
                 <SymbolMultiplierPopup />
             </div>
-            <Modal layerId={UI_ITEMS.freeSpin}>
+            <div id={UI_ITEMS.freeSpin} className="modal modal-style">
                 <BuyFreeSpinModal />
-            </Modal>
-            <Modal layerId={UI_ITEMS.bet}>
+            </div>
+            <div id={UI_ITEMS.bet} className="modal modal-style">
                 <BetSettings />
-            </Modal>
+            </div>
         </>);
 };

package/dist/components/AbstractMainContainer/AbstractMainContainer.js

@@ -39,9 +39,6 @@ export class AbstractMainContainer extends Container {
     }
     triggerStoreInitState(...containersWithSpines) {
         RainMan.settingsStore.containersWithSpines.push(...containersWithSpines);
-        RainMan.settingsStore.containersWithSpines.forEach((spine) => {
-            spine.setAnimationTimescale(RainMan.settingsStore.batterySaverFlag);
-        });
         RainMan.settingsStore.refreshBatterySaver();
     }
     get freeSpinPlate() {

package/dist/components/symbols/AbstractSymbolsColumn.js

@@ -306,15 +306,15 @@ export class AbstractSymbolsColumn extends Container {
         this.swapSymbolFace(symbol);
     }
     shouldPlaySpecialRollStopSound() {
-        for (let i = 0; i <= RainMan.config.numberOfColumns; i++) {
-            const currentColumn = this.columnsContainer.getColumnAtPosition(i);
-            if (currentColumn !== this)
-                continue;
-            return !!currentColumn.symbols
-                .slice(0, RainMan.config.numberOfRows)
-                .find((symbol) => symbol.id === this.bonusSymbol);
-        }
-        return false;
+        return (Array.from({ length: RainMan.config.numberOfColumns }, (_, i) => i)
+            .map((i) => {
+            const column = this.columnsContainer.getColumnAtPosition(i);
+            if (column !== this)
+                return null;
+            return column.symbols.slice(0, RainMan.config.numberOfRows);
+        })
+            .flat()
+            .filter((symbol) => symbol && symbol.id === this.bonusSymbol).length >= 1);
     }
     handleStopping() {
         if (!this.topMostSymbol || this.phase === Phase.END)

package/dist/connectivity/ConnectionWrapper.js

@@ -1,3 +1,4 @@
+import i18next from "i18next";
 import { Currencies } from "ts-money";
 import { ApiConfig } from "../application";
 import { SpinData, } from "../connectivity";
@@ -69,6 +70,7 @@ export class ConnectionWrapper {
                 landscape: true,
                 matched_ratio: "16:9",
             },
+            locale: i18next.language,
             vendor_id: RainMan.config.gameInitVendorId,
         }));
         RainMan.globals.currency = Currencies[this._initData.currency];

package/dist/connectivity/serverConnection.d.ts

@@ -26,6 +26,7 @@ export type InitServerRequest = BaseServerRequest & {
         landscape: boolean;
         matched_ratio: string;
     };
+    locale: string;
 };
 export type SpinServerRequest = BaseServerRequest & {
     action: "spin";

package/dist/utils/common/functions.js

@@ -60,11 +60,11 @@ export const waitForAnimationToEnd = async (spine, animationName, loopAnimationN
 };
 export const setTimeScale = (spine, flag) => {
     spine.state.originalTimeScale ||= spine.state.timeScale;
-    if (flag)
+    if (flag) {
         spine.state.timeScale = spine.state.originalTimeScale;
+    }
     else {
         spine.state.originalTimeScale = spine.state.timeScale;
-        spine.state.timeScale = 0;
     }
 };
 export const changeResolution = (high) => {