pixi-rainman-game-engine 0.1.23 → 0.1.25

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

@@ -59,18 +59,17 @@
 
 .autoplay-settings__stop-limits {
     display: flex;
-    flex-direction: row;
+    justify-content: center;
     width: 100%;
     height: 50px;
-    justify-content: center;
 }
 
 .autoplay-settings__limit {
-    width: 40px;
-    border: solid 2px white;
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 40px;
+    border: solid 2px white;
     font-size: 20px;
     font-weight: bolder;
     margin: 0px 5px;
@@ -95,10 +94,14 @@
 }
 
 .left {
+    background-color: #00000000;
+    text-align: center;
     border-radius: 34px 0px 0px 34px;
 }
 
 .right {
+    background-color: #00000000;
+    text-align: center;
     border-radius: 0px 34px 34px 0px;
 }
 
@@ -109,6 +112,7 @@
 }
 
 .circle {
+    background-color: #00000000;
     border-radius: 34px;
     font-size: 40px;
 }
@@ -164,10 +168,6 @@
         width: 90%;
     }
 
-    .autoplay-settings__column {
-        flex-direction: column-reverse;
-    }
-
     .autoplay-settings__switches {
         width: 100%;
         flex-direction: column;
@@ -179,46 +179,66 @@
         margin: 5px 0px;
     }
 
-    .left {
-        width: 40px;
-        border-radius: 34px 0px 0px 34px;
+    .autoplay-settings__limit {
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        margin: 0px;
+        padding: 0px;
     }
 
     .right {
-        width: 40px;
+        width: 34px;
+        height: 34px;
+        font-size: 12px;
+        background-color: #00000000;
         border-radius: 0px 34px 34px 0px;
     }
 
     .middle {
-        width: 70px;
+        width: 34px;
+        height: 34px;
         font-size: 12px;
+        background-color: #00000000;
         border-radius: 0px 0px 0px 0px;
     }
 
+    .left {
+        width: 34px;
+        height: 34px;
+        background-color: #00000000;
+        font-size: 12px;
+        border-radius: 34px 0px 0px 34px;
+    }
+
     .circle {
         border-radius: 34px;
-        font-size: 40px;
-        width: 30px;
+        width: 34px;
+        height: 34px;
+        font-size: 20px;
+        background-color: #00000000;
     }
 
     .autoplay-settings__stop-limits {
-        height: 35px;
+        width: 100%;
+        flex-wrap: wrap;
+        height: fit-content;
+        overflow: hidden;
     }
 
     .autoplay-settings__limit.circle p {
         position: relative;
-        top: -4px;
-        font-size: 20px;
     }
 
     .autoplay-settings__limit.left p {
         position: relative;
-        top: -2px;
+        text-align: center;
     }
 
     .autoplay-settings__limit.right p {
         position: relative;
-        top: -2px;
+        text-align: center;
+        margin: 0px;
     }
 
     .autoplay-settings__confirmation {
@@ -230,36 +250,6 @@
         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.jsx

@@ -56,7 +56,7 @@ export const AutoplaySettings = observer(() => {
                 <h2>{i18next.t("autoPlay")}</h2>
             </div>
             <div className="autoplay-settings__stop-limits">
-                <div className={`autoplay-settings__limit left ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`} onClick={() => {
+                <button className={`autoplay-settings__limit left ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`} onClick={() => {
             let indexOfSelectedSpinsLimit = availableAutoSpinLimits.findIndex((limitCount) => limitCount === howManyAutoSpinsLeft);
             indexOfSelectedSpinsLimit -= 1;
             if (indexOfSelectedSpinsLimit === -1) {
@@ -65,13 +65,11 @@ export const AutoplaySettings = observer(() => {
             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={() => {
+                </button>
+                {limit_numbers.map((limiter, index) => (<button key={`${limiter}${index}`} value={limiter} className={`autoplay-settings__limit ${limiter === howManyAutoSpinsLeft ? "autoplay-settings__limit--active" : ""} middle ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`} disabled={settingStore.infinitySpinsEnabled} onClick={(event) => updateLimitsBounds(Number(event.currentTarget.value))}>
+                        <p>{limiter}</p>
+                    </button>))}
+                <button className={`autoplay-settings__limit right ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`} onClick={() => {
             let indexOfSelectedSpinsLimit = availableAutoSpinLimits.findIndex((limitCount) => limitCount === howManyAutoSpinsLeft);
             indexOfSelectedSpinsLimit += 1;
             if (indexOfSelectedSpinsLimit === availableAutoSpinLimits.length) {
@@ -81,12 +79,11 @@ export const AutoplaySettings = observer(() => {
             updateLimitsBounds(newAutoSpinsLimitNumber);
         }}>
                     <p>+</p>
-                </div>
-                <div className={`autoplay-settings__limit circle ${infinitySpinsEnabled ? "autoplay-settings__limit--active" : ""}`} onClick={() => flipInfinitySpinsFlag()}>
+                </button>
+                <button className={`autoplay-settings__limit circle ${infinitySpinsEnabled ? "autoplay-settings__limit--active" : ""}`} onClick={() => flipInfinitySpinsFlag()}>
                     <p>∞</p>
-                </div>
+                </button>
             </div>
-
             <div className="autoplay-settings__title">
                 <h2>{i18next.t("stopAutoPlay")}</h2>
             </div>
@@ -106,16 +103,16 @@ export const AutoplaySettings = observer(() => {
             </div>
 
             <div className="autoplay-settings__confirmation">
-                <div className="autoplay-settings__confirmation-button" onClick={() => {
+                <button className="autoplay-settings__confirmation-button" onClick={() => {
             resetAutoplaySettings();
             updateLimitsBounds(initialAutoSpinCount);
             settingStore.handleModalInvocation?.(UI_ITEMS.autoplay);
         }}>
                     <p>{i18next.t("cancel")}</p>
-                </div>
-                <div id={COMPONENTS.autoSpinConfirm} className="autoplay-settings__confirmation-button" onClick={() => settingStore.handleModalInvocation?.(UI_ITEMS.autoplay)}>
+                </button>
+                <button id={COMPONENTS.autoSpinConfirm} className="autoplay-settings__confirmation-button">
                     <p>{i18next.t("confirm")}</p>
-                </div>
+                </button>
             </div>
         </div>);
 });

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

@@ -5,16 +5,24 @@ import React from "react";
 import { useStores } from "../../hooks";
 export const BetControls = observer(() => {
     const { settingStore } = useStores();
+    const onClick = (type) => {
+        if (type === "increase") {
+            settingStore.increaseBet?.();
+        }
+        else {
+            settingStore.decreaseBet?.();
+        }
+    };
     return (<div className="bet-container">
             <h2>{i18next.t("totalBet")}</h2>
             <div className="bet-container__controls">
-                <button name="bet-minus" className="bet-container__button">
+                <button name="bet-minus" className="bet-container__button" onClick={() => onClick("decrease")}>
                     -
                 </button>
                 <div className="bet-container__value">
                     <p>{settingStore.betText}</p>
                 </div>
-                <button name="bet-plus" className="bet-container__button">
+                <button name="bet-plus" className="bet-container__button" onClick={() => onClick("increase")}>
                     +
                 </button>
             </div>

package/dist/SettingsUI/components/Bet/bet.css

@@ -47,7 +47,7 @@
     flex-direction: row;
 }
 
-.bet-container__button:hover {
+.bet-container__button:active {
     background-color: #fdf42550;
     color: #fdf425;
     border: 2px solid #fdf425;

package/dist/SettingsUI/components/CloseModalButton/closeModalButton.css

@@ -14,7 +14,8 @@
 
 @media only screen and (max-width: 900px) {
     .close-modal-button {
-        right: 20px;
-        top: 10px;
+        right: 10px;
+        top: -5px;
+        padding: 0;
     }
 }

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

@@ -1,10 +1,14 @@
 import "./closeModalButton.css";
 import React from "react";
+import { UI_ITEMS } from "../../../utils";
 import { useStores } from "../../hooks";
 export const CloseModalButton = ({ layerId, afterClose }) => {
     const { settingStore } = useStores();
     const onClose = () => {
         settingStore.handleModalInvocation?.(layerId);
+        if (layerId === UI_ITEMS.speedSettings) {
+            settingStore.setSpeedPopupVisibility?.("none");
+        }
         afterClose?.();
     };
     return (<button className="close-modal-button" onClick={onClose}>

package/dist/SettingsUI/index.css

@@ -131,6 +131,15 @@ body {
     background: rgba(173, 216, 230, 0.5);
 }
 
+.ios-nonInteractive {
+    pointer-events: none;
+    opacity: 0 !important;
+}
+.ios-interactive {
+    pointer-events: auto;
+    opacity: 1 !important;
+}
+
 .ios-scroller-animation {
     position: fixed;
     width: 100%;
@@ -152,3 +161,9 @@ html.is-locked .ios-scroller-animation {
     opacity: 0;
     z-index: -9999;
 }
+
+@media (orientation: landscape) {
+    .modal-style {
+        overflow-y: auto;
+    }
+}

package/dist/application/ButtonsEventManager/ButtonsEventManager.js

@@ -29,6 +29,7 @@ export class ButtonsEventManager {
     disableButtons = this.setButtonAvailability(true);
     constructor() {
         RainMan.settingsStore.handleModalInvocation = this.handleModalInvocation.bind(this);
+        RainMan.settingsStore.setSpeedPopupVisibility = this.setSpeedPopupVisibility.bind(this);
     }
     /**
      * Method for initializing events in Settings UI
@@ -245,6 +246,7 @@ export class ButtonsEventManager {
         const confirmAutoplayButton = window.document.getElementById(COMPONENTS.autoSpinConfirm);
         if (confirmAutoplayButton !== null) {
             confirmAutoplayButton.addEventListener("click", () => {
+                RainMan.settingsStore.handleModalInvocation?.(UI_ITEMS.autoplay);
                 confirmAutoplayButtonCallback();
             });
         }
@@ -284,23 +286,16 @@ export class ButtonsEventManager {
      * @param {string} layerName
      */
     handleModalInvocation(layerName) {
-        const alreadyInvokedLayer = this.getInvokedSettingItem();
-        if (alreadyInvokedLayer !== null) {
-            if (alreadyInvokedLayer.style.display === "flex") {
-                alreadyInvokedLayer.style.display = "none";
-                this.enableButtons();
-            }
-        }
-        else {
-            this.lastLayerInvoked = "";
-        }
         const layer = window.document.getElementById(layerName);
         if (layer !== null) {
-            if (layer.style.display !== "flex" && this.lastLayerInvoked !== layerName) {
-                this.lastLayerInvoked = layerName;
+            if (layer.style.display !== "flex") {
                 layer.style.display = "flex";
                 this.disableButtons();
             }
+            else {
+                layer.style.display = "none";
+                this.enableButtons();
+            }
         }
     }
 }

package/dist/components/common/AnimatedBackground.js

@@ -25,7 +25,6 @@ export class AnimatedBackground extends ResumableContainer {
         this.mobileSpineName = mobileSpineName;
         this.name = AnimatedBackground.registryName;
         this.parentLayer = BackgroundLayer;
-        RainMan.settingsStore.containersWithSpines.push(this);
     }
     resize() {
         this.changeSpineForOrientation();

package/dist/connectivity/ConnectionWrapper.js

@@ -70,7 +70,7 @@ export class ConnectionWrapper {
                 landscape: true,
                 matched_ratio: "16:9",
             },
-            locale: i18next.language,
+            language_code: i18next.language,
             vendor_id: RainMan.config.gameInitVendorId,
         }));
         RainMan.globals.currency = Currencies[this._initData.currency];

package/dist/connectivity/serverConnection.d.ts

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

package/dist/connectivity/serverData.d.ts

@@ -6,6 +6,7 @@ export interface InitDataInterface {
     token: string;
     bets: Array<number>;
     currency: string;
+    language: string;
     symbols_names: Array<string>;
     symbols: Array<number>;
     streaks: Array<Array<Point>>;

package/dist/connectivity/wins.d.ts

@@ -53,7 +53,10 @@ export type RouletteWin = BaseWin & {
 export type JackpotWin = BaseWin & {
     type: typeof PossibleWins.jackpotMini | typeof PossibleWins.jackpotMinor | typeof PossibleWins.jackpotMajor | typeof PossibleWins.jackpotGrand;
 };
-export type Win = StreakWin | FreeSpinWin | GambleWin | MysteryWin | EggWin | GoldWin | BigWin | BonusWin | SuperBonusWin | ScatterWin | RouletteWin | JackpotWin;
+export type CoinWin = BaseWin & {
+    type: typeof PossibleWins.coin;
+};
+export type Win = StreakWin | FreeSpinWin | GambleWin | MysteryWin | EggWin | GoldWin | BigWin | BonusWin | SuperBonusWin | ScatterWin | RouletteWin | JackpotWin | CoinWin;
 /**
  * Type represents data that come from backend
  *

package/dist/controllers/AbstractController.d.ts

@@ -36,6 +36,7 @@ export declare abstract class AbstractController<T> {
     protected mysteryFxSymbolMustFormWinningLine: boolean;
     protected mysteryWinSymbol: Nullable<SymbolId>;
     private componentRegistry;
+    protected skipFreeSpinSummary: boolean;
     protected _lastWinAmount: number;
     protected constructor(buttonsEventManager: ButtonsEventManager, mainContainer: AbstractMainContainer, connection: SubscribableConnectionWrapper);
     init(): void;

package/dist/controllers/AbstractController.js

@@ -35,6 +35,7 @@ export class AbstractController {
     mysteryFxSymbolMustFormWinningLine = false;
     mysteryWinSymbol = null;
     componentRegistry;
+    skipFreeSpinSummary = false;
     _lastWinAmount = 0;
     constructor(buttonsEventManager, mainContainer, connection) {
         this.buttonsEventManager = buttonsEventManager;
@@ -47,6 +48,8 @@ export class AbstractController {
         this.componentRegistry = RainMan.componentRegistry;
         this.setupSpaceOrEnterListener();
         RainMan.settingsStore.showSuperBonusWin = this.showSuperBonusWin.bind(this);
+        RainMan.settingsStore.increaseBet = () => this.uiController.updateBet("increase");
+        RainMan.settingsStore.decreaseBet = () => this.uiController.updateBet("decrease");
     }
     init() {
         const initData = this.connection.initData();
@@ -520,7 +523,7 @@ export class AbstractController {
             this.uiController.updateShownFreeSpinAmount(freeSpinAward, isAdditionalFreeSpins);
             this.uiController.messageBox.showFreeSpinText();
         }
-        if (this.invokeFreeSpinSummaryPlateAfterWin) {
+        if (this.invokeFreeSpinSummaryPlateAfterWin && !this.skipFreeSpinSummary) {
             await this.handleFreeSpinSummaryPlateInvocation();
         }
         if (RainMan.settingsStore.isAutoplayEnabled) {

package/dist/stores/SettingsStore.d.ts

@@ -36,6 +36,7 @@ export declare class SettingsStore {
     howManyFreeSpinsLeft: number;
     howManyAutoSpinsLeft: number;
     volumeLevel: number;
+    setSpeedPopupVisibility?: (visibility: "flex" | "none") => void;
     popupPaytablePosition?: Point;
     popupPaytableData?: PaytableData[];
     currentSpeed: SpeedLevel;
@@ -43,6 +44,8 @@ export declare class SettingsStore {
     updateVolumeButtonTexture?: () => void;
     handleModalInvocation?: (layerId: string) => void;
     showSuperBonusWin?: (callback: Promise<void>) => void;
+    increaseBet?: () => void;
+    decreaseBet?: () => void;
     private readonly initialAutoplaySettingsState;
     private modalsAvailable;
     private paytableMap;
@@ -51,6 +54,7 @@ export declare class SettingsStore {
     get indexOfSpeedLevel(): number;
     get isFreeSpinsPlayEnabled(): boolean;
     addCumulativeWinAmount(amount: number): void;
+    isIosScrollerInteractive(flag: boolean): void;
     resetCumulativeWinAmount(): void;
     updateBet(newBet: number): void;
     setBatteryFlag(flag: boolean): void;

package/dist/stores/SettingsStore.js

@@ -42,6 +42,7 @@ export class SettingsStore {
     howManyFreeSpinsLeft = 0;
     howManyAutoSpinsLeft = INITIAL_AUTO_SPIN_COUNT;
     volumeLevel = getFromLocalStorage(LOCAL_STORAGE.volumeLevel, 100);
+    setSpeedPopupVisibility;
     popupPaytablePosition;
     popupPaytableData;
     currentSpeed = "slow";
@@ -49,6 +50,8 @@ export class SettingsStore {
     updateVolumeButtonTexture;
     handleModalInvocation;
     showSuperBonusWin;
+    increaseBet;
+    decreaseBet;
     initialAutoplaySettingsState = {
         infinitySpinsEnabled: false,
         onAnyWin: false,
@@ -110,6 +113,14 @@ export class SettingsStore {
     addCumulativeWinAmount(amount) {
         this.cumulativeWinAmount = this.cumulativeWinAmount + amount;
     }
+    isIosScrollerInteractive(flag) {
+        const scroller = document.querySelector(".ios-scroller");
+        const animation = document.querySelector(".ios-scroller-animation");
+        scroller?.classList.add(flag ? "ios-interactive" : "ios-nonInteractive");
+        animation?.classList.add(flag ? "ios-interactive" : "ios-nonInteractive");
+        scroller?.classList.remove(flag ? "ios-nonInteractive" : "ios-interactive");
+        animation?.classList.remove(flag ? "ios-nonInteractive" : "ios-interactive");
+    }
     resetCumulativeWinAmount() {
         this.cumulativeWinAmount = 0;
     }

package/dist/utils/common/functions.js

@@ -64,7 +64,7 @@ export const setTimeScale = (spine, flag) => {
         spine.state.timeScale = spine.state.originalTimeScale;
     }
     else {
-        spine.state.originalTimeScale = spine.state.timeScale;
+        spine.state.timeScale = 0;
     }
 };
 export const changeResolution = (high) => {

package/package.json

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