pixi-rainman-game-engine 0.3.31 → 0.3.33-beta.0

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

@@ -2,87 +2,30 @@ 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 React from "react";
 import { COMPONENTS } from "../../../components";
 import { UI_ITEMS } from "../../../utils";
 import { useStores } from "../../hooks";
 import { CloseModalButton } from "../CloseModalButton";
 import { RichLimitingSlider } from "../RichLimitingSlider";
 import { SpeedButtonWithHeader, SwitchWithHeader } from "../SwitchWithHeader";
+const initialAutoSpinCount = 10;
+const availableAutoSpinLimits = [10, 20, 50, 70, 100];
 export const AutoplaySettings = observer(() => {
-    const [limitNumbers, 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;
+    const { singleWinExceeds, balancedIncreased, balancedDecreased, howManyAutoSpinsLeft, infinitySpinsEnabled, setSingleWinExceeds, setBalancedIncreased, setBalancedDecreased, setAutoSpinsCount, 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">
-                <button 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>
-                </button>
-                {limitNumbers.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))}>
+                {availableAutoSpinLimits.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) {
-                indexOfSelectedSpinsLimit = 0;
-            }
-            const newAutoSpinsLimitNumber = availableAutoSpinLimits[indexOfSelectedSpinsLimit];
-            updateLimitsBounds(newAutoSpinsLimitNumber);
-        }}>
-                    <p>+</p>
-                </button>
-                <button className={`autoplay-settings__limit circle ${infinitySpinsEnabled ? "autoplay-settings__limit--active" : ""}`} onClick={() => flipInfinitySpinsFlag()}>
-                    <p>∞</p>
-                </button>
             </div>
             <div className="separator"/>
             <div className="autoplay-settings__title">

package/dist/application/SoundManager/SoundManager.d.ts

@@ -64,6 +64,12 @@ export declare class SoundManagerInstance implements SpeedAdapterInterface<Sound
      * @returns {void}
      */
     resumeAll(): void;
+    /**
+     * Restores currently active ambient loop if browser dropped it while page was inactive.
+     * @public
+     * @returns {void}
+     */
+    restoreAmbientPlayback(): void;
     /**
      * Function for pausing all sounds in game
      * If sound is not playing, it will be skipped
@@ -112,5 +118,11 @@ export declare class SoundManagerInstance implements SpeedAdapterInterface<Sound
      * @returns {void}
      */
     resumeOnFocus(): Promise<void>;
+    /**
+     * Returns information if audio context is ready to play sounds.
+     * @public
+     * @returns {boolean} True when audio context is in running state.
+     */
+    isAudioContextRunning(): boolean;
 }
 export declare const SoundManager: SoundManagerInstance;

package/dist/application/SoundManager/SoundManager.js

@@ -170,6 +170,28 @@ export class SoundManagerInstance {
             }
         });
     }
+    /**
+     * Restores currently active ambient loop if browser dropped it while page was inactive.
+     * @public
+     * @returns {void}
+     */
+    restoreAmbientPlayback() {
+        if (!RainMan.settingsStore.shouldPlayAmbientMusic) {
+            return;
+        }
+        const ambientTrack = RainMan.settingsStore.isFreeSpinsPlayEnabled
+            ? SoundTracks.freeSpinsMusic
+            : SoundTracks.music;
+        const ambientMusic = this.musicCatalogue.get(ambientTrack);
+        if (!ambientMusic || ambientMusic.isPlaying) {
+            return;
+        }
+        if (ambientMusic.paused) {
+            ambientMusic.resume();
+            return;
+        }
+        this.play(ambientTrack);
+    }
     /**
      * Function for pausing all sounds in game
      * If sound is not playing, it will be skipped
@@ -240,13 +262,16 @@ export class SoundManagerInstance {
             catch (error) {
                 console.error("Could not resume audio");
             }
-            const ambientMusic = this.musicCatalogue.get(RainMan.settingsStore.isFreeSpinsPlayEnabled ? "freeSpinsMusic" : "music");
-            if (ambientMusic !== undefined &&
-                ambientMusic.isPlaying !== true &&
-                RainMan.settingsStore.shouldPlayAmbientMusic) {
-                ambientMusic.resume();
-            }
         }
+        this.restoreAmbientPlayback();
+    }
+    /**
+     * Returns information if audio context is ready to play sounds.
+     * @public
+     * @returns {boolean} True when audio context is in running state.
+     */
+    isAudioContextRunning() {
+        return sound.context.audioContext.state === "running";
     }
 }
 export const SoundManager = SoundManagerInstance.getInstance();

package/dist/components/frame/AbstractColumnsContainer.js

@@ -154,20 +154,21 @@ export class AbstractColumnsContainer extends Container {
                 const configureSpinAction = configuredBlindSpinsActions.shift();
                 if (configureSpinAction !== undefined) {
                     if (indexesOfReelsToExtendSpinningTime.includes(index)) {
-                        this.currentColumn = this.allColumns[index];
-                        this.currentColumn.adaptToSpeed(RainMan.settingsStore.currentSpeed);
-                        frame.invokeMysteryFx(this.currentColumn.x, this.currentColumn.y);
+                        const mysteryColumn = this.allColumns[index];
+                        this.currentColumn = mysteryColumn;
+                        mysteryColumn.adaptToSpeed(RainMan.settingsStore.currentSpeed);
+                        frame.invokeMysteryFx(mysteryColumn.x, mysteryColumn.y);
                         this.skipScatterDelay = configureSpinAction;
-                        await this.currentColumn.speedUpForMysterySpin(100, 1500);
+                        await mysteryColumn.speedUpForMysterySpin(100, 1500);
                         if (this.quickReelsStop || this.skipRemainingMysteryFxs) {
-                            await this.currentColumn.changeVelocity(Speed.STOP, 0, frame);
+                            await mysteryColumn.changeVelocity(Speed.STOP, 0, frame);
                         }
                         else {
                             if (!RainMan.settingsStore.isAutoplayEnabled ||
                                 (RainMan.settingsStore.isAutoplayEnabled && !this.quickReelsStop)) {
                                 this.scheduleMysteryDelay(configureSpinAction, RainMan.config.durationOfActions.scatterDelayerTime);
                             }
-                            await this.currentColumn.changeVelocity(Speed.STOP, RainMan.config.durationOfActions.scatterSpinningTime, frame);
+                            await mysteryColumn.changeVelocity(Speed.STOP, RainMan.config.durationOfActions.scatterSpinningTime, frame);
                         }
                         frame.destroyMysteryFx();
                     }
@@ -257,7 +258,8 @@ export class AbstractColumnsContainer extends Container {
         columnsToPlay.forEach((column, index) => {
             column.forEach((symbolIndex) => promises.push(this.getColumnAtPosition(index).playSymbolAtPosition(symbolIndex, true)));
         });
-        this.playSoundDependingOnAmount(amount, allSymbols);
+        if (!RainMan.settingsStore.isLoopingWinActionQueue)
+            this.playSoundDependingOnAmount(amount, allSymbols);
         await Promise.allSettled(promises);
     }
     /**
@@ -342,7 +344,8 @@ export class AbstractColumnsContainer extends Container {
             }
             reelIndex++;
         }
-        this.playStreakSound(streakSymbols);
+        if (!RainMan.settingsStore.isLoopingWinActionQueue)
+            this.playStreakSound(streakSymbols);
         await Promise.allSettled(promises);
     }
     /**

package/dist/controllers/AbstractController.d.ts

@@ -58,6 +58,7 @@ export declare abstract class AbstractController<T> {
     protected buttonHeldSince: number;
     shouldStopMobileSpin: boolean;
     disableMessageBoxChange: boolean;
+    shouldClearQuickReelsStopAfterSpin: boolean;
     protected resolveBigWin?: () => void;
     protected resolveMysteryWin?: () => void;
     protected resolveBonusWin?: () => void;
@@ -384,6 +385,7 @@ export declare abstract class AbstractController<T> {
      * @returns {Promise<void>}
      */
     private spin;
+    private cleanupDeferredQuickStop;
     /**
      *  Function for invoking free spin plate, invoked in mainContainer
      *  ```ts

package/dist/controllers/AbstractController.js

@@ -58,6 +58,7 @@ export class AbstractController {
     buttonHeldSince = 0;
     shouldStopMobileSpin = false;
     disableMessageBoxChange = false;
+    shouldClearQuickReelsStopAfterSpin = false;
     resolveBigWin;
     resolveMysteryWin;
     resolveBonusWin;
@@ -191,6 +192,10 @@ export class AbstractController {
                 keyboardEvent.preventDefault();
                 this.buttonHeldSince = 0;
                 this.columnsContainer.clearQuickReelsStop();
+                if (this.gamePhase === gamePhases.HANDLING_ACTIONS ||
+                    this.gamePhase === gamePhases.STOPPING_HANDLING_ACTIONS) {
+                    this.shouldPlayNextSpin = false;
+                }
             }
         });
         window.addEventListener("blur", () => {
@@ -430,25 +435,26 @@ export class AbstractController {
     initSpinButton() {
         const refreshButton = RainMan.componentRegistry.get(RefreshButton.registryName);
         this.clearMobileSpinTimeout = () => {
-            this.buttonHeldSince = 0;
             const isSpinning = this.gamePhase === gamePhases.SPINNING ||
                 this.gamePhase === gamePhases.CONFIGURING_SPIN ||
                 this.gamePhase === gamePhases.DATA_FETCH;
-            if (!isSpinning) {
-                this.columnsContainer.clearQuickReelsStop();
-            }
+            this.buttonHeldSince = 0;
             if (this.mobileSpinTimeout) {
                 clearInterval(this.mobileSpinTimeout);
-                this.quickStopController.setQuickStopCounterLock(false);
                 this.mobileSpinTimeout = null;
-                if (!isSpinning) {
-                    this.columnsContainer.clearQuickReelsStop();
-                }
             }
             if (this.mobileSpinDelay) {
                 clearTimeout(this.mobileSpinDelay);
                 this.mobileSpinDelay = null;
             }
+            if (isSpinning) {
+                this.shouldClearQuickReelsStopAfterSpin = true;
+            }
+            else {
+                this.columnsContainer.clearQuickReelsStop();
+                this.quickStopController.setQuickStopCounterLock(false);
+                this.shouldClearQuickReelsStopAfterSpin = false;
+            }
         };
         refreshButton.setOnClick(() => {
             this.handleSpinLogic();
@@ -726,10 +732,10 @@ export class AbstractController {
         this.handleDisablingButtons(true);
         RainMan.globals.shouldShowModals = false;
         RainMan.settingsStore.closeCurrentlyOpenModal?.();
-        const realTime = Date.now() - this.buttonHeldSince;
-        if (realTime <= 500) {
-            this.columnsContainer.clearQuickReelsStop();
-        }
+        // const realTime = Date.now() - this.buttonHeldSince;
+        // if (realTime <= 500) {
+        //     this.columnsContainer.clearQuickReelsStop();
+        // }
         if (this.mainContainer.freeSpinPlate) {
             if (this.mainContainer.freeSpinPlate.shownAt === null ||
                 performance.now() - this.mainContainer.freeSpinPlate.shownAt <
@@ -810,6 +816,7 @@ export class AbstractController {
         }
         this.prepareBoughtFreeSpins();
         if (RainMan.settingsStore.isAutoplayEnabled && !this.spinning) {
+            this.cleanupDeferredQuickStop();
             this.changeGamePhase(gamePhases.IDLE);
             this.spin();
             return;
@@ -819,6 +826,7 @@ export class AbstractController {
             this.changeGamePhase(gamePhases.IDLE);
         }
         if (this.gamePhase === gamePhases.IDLE || this.gamePhase === gamePhases.HANDLING_ACTIONS) {
+            this.cleanupDeferredQuickStop();
             this.spin();
         }
         this.spinThrottlerTimeout = setTimeout(() => (this.spinThrottlerTimeout = null), 100);
@@ -1252,6 +1260,14 @@ export class AbstractController {
             }, 0);
         }
     }
+    cleanupDeferredQuickStop() {
+        if (!this.shouldClearQuickReelsStopAfterSpin) {
+            return;
+        }
+        this.columnsContainer.clearQuickReelsStop();
+        this.quickStopController.setQuickStopCounterLock(false);
+        this.shouldClearQuickReelsStopAfterSpin = false;
+    }
     /**
      *  Function for invoking free spin plate, invoked in mainContainer
      *  ```ts
@@ -1357,6 +1373,8 @@ export class AbstractController {
     stopPlayingSymbolsStreak() {
         this.columnsContainer.stopPlayingSymbolsInColumns();
         this.frame.stopPlayingWinLineAnimations();
+        this.frame.hideMysteryFx();
+        this.frame.destroyMysteryFx();
     }
     /**
      * Function for stopping playing symbols transformation
@@ -1621,8 +1639,10 @@ export class AbstractController {
             return;
         }
         this.isLoopingWinActionsQueue = true;
+        RainMan.settingsStore.isLoopingWinActionQueue = true;
         await this.loopWinActionsQueue();
         this.isLoopingWinActionsQueue = false;
+        RainMan.settingsStore.isLoopingWinActionQueue = false;
     }
     /**
      * Function for looping win actions queue, after initial play

package/dist/loading/AbstractLoadingContainer.d.ts

@@ -1,5 +1,6 @@
 import { Container } from "pixi.js";
-import { Background, Logo, LogoStatic } from "../components";
+import { Spine } from "pixi-spine";
+import { Logo, LogoStatic } from "../components";
 import { SpriteLoadingContainer } from "./SpriteLoadingContainer";
 /**
  * Class represents the container with loading logic inside
@@ -9,9 +10,15 @@ import { SpriteLoadingContainer } from "./SpriteLoadingContainer";
  * @augments {Container}
  */
 export declare abstract class AbstractLoadingContainer extends Container {
-    protected abstract background: Background;
     protected logo: Logo | LogoStatic | null;
     loaderContainer: SpriteLoadingContainer;
+    protected initAnimation: Spine | null;
+    protected initLogo: Spine | null;
+    private canUpdateProgress;
+    private pendingProgress;
+    private introAnimationFinished;
+    private readonly presentationFinishedPromise;
+    private resolvePresentationFinished;
     protected constructor();
     /**
      * Function for resizing loading container elements
@@ -32,4 +39,15 @@ export declare abstract class AbstractLoadingContainer extends Container {
      * @returns {void}
      */
     onUpdate(progress: number): void;
+    /**
+     * Runs the standardized loading intro sequence.
+     * The intro spine plays "start" once, while the logo spine starts with "start"
+     * and switches to looping "idle" after the intro completes.
+     * @protected
+     * @returns {void}
+     */
+    protected setupInitAnimations(): void;
+    waitForPresentationToFinish(): Promise<void>;
+    scaleInitSpineToScreenWidth(): void;
+    private tryResolvePresentationFinished;
 }

package/dist/loading/AbstractLoadingContainer.js

@@ -1,5 +1,6 @@
 import { Container } from "pixi.js";
 import { RainMan } from "../Rainman";
+import { getDeviceOrientation, globalMinRatio } from "../utils";
 import { SpriteLoadingContainer } from "./SpriteLoadingContainer";
 /**
  * Class represents the container with loading logic inside
@@ -11,17 +12,27 @@ import { SpriteLoadingContainer } from "./SpriteLoadingContainer";
 export class AbstractLoadingContainer extends Container {
     logo = null;
     loaderContainer;
+    initAnimation = null;
+    initLogo = null;
+    canUpdateProgress = true;
+    pendingProgress = 0;
+    introAnimationFinished = false;
+    presentationFinishedPromise;
+    resolvePresentationFinished = null;
     constructor() {
         super();
         this.name = "loadingContainer";
         this.x = 0;
         this.y = 0;
         this.loaderContainer = new SpriteLoadingContainer("./assets/images/materials/texture.png", {
-            fill: ["#FCD784", "#AE6119", "#FEE391"], // gradient
+            fill: ["#FCD784", "#AE6119", "#FEE391"],
             stroke: "#4a1850",
             dropShadowColor: "#000000"
         });
-        RainMan.app.renderer.on("resize", () => this.resize()); // arrow fn to pass this context to resize
+        this.presentationFinishedPromise = new Promise((resolve) => {
+            this.resolvePresentationFinished = resolve;
+        });
+        RainMan.app.renderer.on("resize", () => this.resize());
     }
     /**
      * Function for resizing loading container elements
@@ -29,9 +40,17 @@ export class AbstractLoadingContainer extends Container {
      * @returns {void}
      */
     resize() {
-        this.background.resize();
         this.logo?.resize();
         this.loaderContainer.resize();
+        const mobilePortraitModifier = getDeviceOrientation() === "mobile-portrait" ? 0.06 : 0.13;
+        if (this.initAnimation && this.initLogo) {
+            this.scaleInitSpineToScreenWidth();
+            this.initAnimation.x = RainMan.app.screen.width / 2;
+            this.initAnimation.y =
+                this.loaderContainer.progressBorder.y - RainMan.app.screen.height * mobilePortraitModifier;
+            this.initLogo.x = this.initAnimation.x;
+            this.initLogo.y = this.initAnimation.y;
+        }
     }
     /**
      * Function for removing loading container elements
@@ -39,6 +58,7 @@ export class AbstractLoadingContainer extends Container {
      * @returns {void}
      */
     remove() {
+        this.loaderContainer.remove();
         RainMan.app.renderer.removeAllListeners("resize");
     }
     /**
@@ -48,6 +68,60 @@ export class AbstractLoadingContainer extends Container {
      * @returns {void}
      */
     onUpdate(progress) {
-        this.loaderContainer.updateProgress(progress);
+        this.pendingProgress = progress;
+        if (this.canUpdateProgress) {
+            this.loaderContainer.updateProgress(progress);
+        }
+    }
+    /**
+     * Runs the standardized loading intro sequence.
+     * The intro spine plays "start" once, while the logo spine starts with "start"
+     * and switches to looping "idle" after the intro completes.
+     * @protected
+     * @returns {void}
+     */
+    setupInitAnimations() {
+        if (!this.initAnimation || !this.initLogo) {
+            return;
+        }
+        this.canUpdateProgress = false;
+        this.initAnimation.state.setAnimation(0, "start", false);
+        this.initLogo.state.setAnimation(0, "start", false);
+        this.initLogo.state.addAnimation(0, "idle", true, 0);
+        const initAnimationListener = {
+            complete: () => {
+                this.canUpdateProgress = true;
+                this.introAnimationFinished = true;
+                this.loaderContainer.updateProgress(this.pendingProgress);
+                this.tryResolvePresentationFinished();
+                this.initAnimation?.state.removeListener(initAnimationListener);
+            }
+        };
+        this.initAnimation.state.addListener(initAnimationListener);
+    }
+    waitForPresentationToFinish() {
+        return this.presentationFinishedPromise;
+    }
+    scaleInitSpineToScreenWidth() {
+        if (getDeviceOrientation() === "mobile-portrait") {
+            this.initAnimation?.scale.set(0.5 * globalMinRatio());
+            this.initLogo?.scale.set(0.5 * globalMinRatio());
+        }
+        else {
+            this.initAnimation?.scale.set(0.8 * globalMinRatio());
+            this.initLogo?.scale.set(0.8 * globalMinRatio());
+        }
+    }
+    tryResolvePresentationFinished() {
+        if (!this.introAnimationFinished || !this.resolvePresentationFinished) {
+            return;
+        }
+        void this.loaderContainer.waitForCompletion().then(() => {
+            if (!this.resolvePresentationFinished) {
+                return;
+            }
+            this.resolvePresentationFinished();
+            this.resolvePresentationFinished = null;
+        });
     }
 }

package/dist/loading/SpriteLoadingContainer.d.ts

@@ -1,4 +1,4 @@
-import { Container, ITextStyle } from "pixi.js";
+import { Container, ITextStyle, Sprite } from "pixi.js";
 import { ProgressiveLoader } from "./ProgressiveLoader";
 /**
  * This class contains the loading process to pixi application
@@ -8,16 +8,19 @@ import { ProgressiveLoader } from "./ProgressiveLoader";
  * @implements {ProgressiveLoader}
  */
 export declare class SpriteLoadingContainer extends Container implements ProgressiveLoader {
-    private sprite;
+    private progressBar;
+    private progressBarMask;
+    private progressBorderMask;
+    private progressBorderShadow;
     private text;
-    private rectangle;
-    private errorBackground;
+    progressBorder: Sprite;
+    private progress;
+    private targetProgress;
+    private completionPromiseResolver;
+    private completionPromise;
     private readonly loadingStatusContainerHeight;
-    private readonly loadingStatusContainerWidth;
-    private readonly errorBackgroundPaddingWidth;
-    private readonly errorBackgroundPaddingHeight;
-    private readonly loadingStatusWidth;
-    private readonly loadingStatusHeight;
+    private readonly progressBorderWidth;
+    private readonly minimumFullProgressDuration;
     /**
      * Constructor for SpriteLoadingContainer
      * @public
@@ -26,6 +29,7 @@ export declare class SpriteLoadingContainer extends Container implements Progres
      * @returns {void}
      */
     constructor(texture: string, textOptions: Partial<ITextStyle>);
+    waitForCompletion(): Promise<void>;
     /**
      * Function for updating loading progress
      * @public
@@ -41,11 +45,13 @@ export declare class SpriteLoadingContainer extends Container implements Progres
      */
     setError(errorMessage: string): void;
     removeProgressBar(): void;
+    remove(): void;
     /**
      * Function for resizing loading container elements
      * @public
      * @returns {void}
      */
+    protected recreateProgressBar(): void;
     resize(): void;
     /**
      * Function for repositioning loading container elements
@@ -53,4 +59,9 @@ export declare class SpriteLoadingContainer extends Container implements Progres
      * @returns {void}
      */
     reposition(): void;
+    private getLoadingStatusContainerWidth;
+    private updateProgressMask;
+    private animateProgress;
+    private isComplete;
+    private resolveCompletionIfReady;
 }

package/dist/loading/SpriteLoadingContainer.js

@@ -1,5 +1,6 @@
 import { Container, Graphics, Sprite, Text, TextStyle, Texture } from "pixi.js";
 import { RainMan } from "../Rainman";
+import { getDeviceOrientation } from "../utils/common/deviceOrientation";
 /**
  * This class contains the loading process to pixi application
  * @class SpriteLoadingContainer
@@ -8,16 +9,19 @@ import { RainMan } from "../Rainman";
  * @implements {ProgressiveLoader}
  */
 export class SpriteLoadingContainer extends Container {
-    sprite;
+    progressBar;
+    progressBarMask;
+    progressBorderMask;
+    progressBorderShadow;
     text;
-    rectangle;
-    errorBackground;
-    loadingStatusContainerHeight = 40;
-    loadingStatusContainerWidth = 150;
-    errorBackgroundPaddingWidth = 20;
-    errorBackgroundPaddingHeight = 10;
-    loadingStatusWidth = this.loadingStatusContainerWidth - 20;
-    loadingStatusHeight = this.loadingStatusContainerHeight - 10;
+    progressBorder;
+    progress = 0;
+    targetProgress = 0;
+    completionPromiseResolver = null;
+    completionPromise = null;
+    loadingStatusContainerHeight = 10;
+    progressBorderWidth = 2;
+    minimumFullProgressDuration = 250;
     /**
      * Constructor for SpriteLoadingContainer
      * @public
@@ -27,17 +31,23 @@ export class SpriteLoadingContainer extends Container {
      */
     constructor(texture, textOptions) {
         super();
-        this.rectangle = new Graphics();
-        this.errorBackground = null;
-        this.sprite = Sprite.from(Texture.from(texture));
-        this.rectangle.lineTextureStyle({ width: 5, texture: this.sprite.texture });
-        this.rectangle.beginFill(0x650a5a, 0.25);
-        this.rectangle.drawRoundedRect(0, 0, this.loadingStatusContainerWidth, this.loadingStatusContainerHeight, 8);
-        this.rectangle.endFill();
-        this.sprite.width = 0;
-        this.sprite.height = this.loadingStatusHeight;
-        this.sprite.tint = 0xfcd784;
-        this.addChild(this.rectangle);
+        this.progressBarMask = new Graphics();
+        this.progressBorderMask = new Graphics();
+        this.progressBar = Sprite.from(Texture.from(texture));
+        this.progressBorder = Sprite.from(this.progressBar.texture);
+        this.progressBorderShadow = Sprite.from(this.progressBorder.texture);
+        this.progressBorderShadow.tint = 0x000000;
+        this.progressBorderShadow.alpha = 0.1;
+        this.progressBorder.mask = this.progressBorderMask;
+        this.progressBorderMask.renderable = false;
+        this.recreateProgressBar();
+        this.progressBorderShadow.width = this.getLoadingStatusContainerWidth();
+        this.progressBorderShadow.height = this.loadingStatusContainerHeight;
+        this.progressBorder.width = this.getLoadingStatusContainerWidth();
+        this.progressBorder.height = this.loadingStatusContainerHeight;
+        this.progressBar.width = this.getLoadingStatusContainerWidth();
+        this.progressBar.height = this.loadingStatusContainerHeight;
+        this.progressBar.mask = this.progressBarMask;
         const loaderTextStyle = new TextStyle({
             fontFamily: RainMan.config.fontFace,
             fontSize: 24,
@@ -49,11 +59,27 @@ export class SpriteLoadingContainer extends Container {
             align: "center",
             ...textOptions
         });
-        this.text = new Text(`Loaded: ${0}%`, loaderTextStyle);
-        this.text.anchor.set(0, 0.5);
-        this.reposition();
-        this.addChild(this.sprite);
+        this.text = new Text("", loaderTextStyle);
+        this.text.anchor.set(0.5, 0.5);
+        this.addChild(this.progressBorderShadow);
+        this.addChild(this.progressBorderMask);
+        this.addChild(this.progressBorder);
+        this.addChild(this.progressBarMask);
+        this.addChild(this.progressBar);
         this.addChild(this.text);
+        this.reposition();
+        RainMan.app.ticker.add(this.animateProgress, this);
+    }
+    waitForCompletion() {
+        if (this.isComplete()) {
+            return Promise.resolve();
+        }
+        if (!this.completionPromise) {
+            this.completionPromise = new Promise((resolve) => {
+                this.completionPromiseResolver = resolve;
+            });
+        }
+        return this.completionPromise;
     }
     /**
      * Function for updating loading progress
@@ -62,8 +88,12 @@ export class SpriteLoadingContainer extends Container {
      * @returns {void}
      */
     updateProgress(progress) {
-        this.text.text = `Loaded: ${(progress * 100).toFixed(2)}%`;
-        this.sprite.width = this.loadingStatusWidth * progress;
+        const normalizedProgress = Math.max(0, Math.min(progress, 1));
+        if (normalizedProgress < this.progress) {
+            this.progress = normalizedProgress;
+        }
+        this.targetProgress = normalizedProgress;
+        this.updateProgressMask();
     }
     /**
      * Function for setting error text
@@ -72,27 +102,42 @@ export class SpriteLoadingContainer extends Container {
      * @returns {void}
      */
     setError(errorMessage) {
-        this.errorBackground = new Graphics();
         this.removeProgressBar();
         this.text.text = errorMessage[0].toUpperCase() + errorMessage.substring(1);
         this.text.style.fill = "0xffffff";
-        this.errorBackground.beginFill(0x000000, 0.8);
-        this.errorBackground.drawRoundedRect(0, 0, this.text.width + this.errorBackgroundPaddingWidth, this.text.height + this.errorBackgroundPaddingHeight, 8);
-        this.errorBackground.endFill();
-        this.addChild(this.errorBackground);
         this.addChild(this.text);
         this.reposition();
     }
     removeProgressBar() {
-        this.removeChild(this.rectangle);
-        this.removeChild(this.sprite);
+        this.removeChild(this.progressBorderShadow);
+        this.removeChild(this.progressBorderMask);
+        this.removeChild(this.progressBorder);
+        this.removeChild(this.progressBarMask);
+        this.removeChild(this.progressBar);
         this.removeChild(this.text);
     }
+    remove() {
+        RainMan.app.ticker.remove(this.animateProgress, this);
+    }
     /**
      * Function for resizing loading container elements
      * @public
      * @returns {void}
      */
+    recreateProgressBar() {
+        const loadingStatusContainerWidth = this.getLoadingStatusContainerWidth() + 1;
+        this.progressBorderShadow.width = loadingStatusContainerWidth;
+        this.progressBorderShadow.height = this.loadingStatusContainerHeight;
+        this.progressBorder.width = loadingStatusContainerWidth;
+        this.progressBorder.height = this.loadingStatusContainerHeight;
+        this.progressBorderMask.clear();
+        this.progressBorderMask.beginFill(0xffffff);
+        this.progressBorderMask.drawRoundedRect(0, 0, loadingStatusContainerWidth, this.loadingStatusContainerHeight, 8);
+        this.progressBorderMask.beginHole();
+        this.progressBorderMask.drawRoundedRect(this.progressBorderWidth / 2, this.progressBorderWidth / 2, loadingStatusContainerWidth - this.progressBorderWidth, this.loadingStatusContainerHeight - this.progressBorderWidth, 7);
+        this.progressBorderMask.endHole();
+        this.progressBorderMask.endFill();
+    }
     resize() {
         this.reposition();
     }
@@ -102,20 +147,68 @@ export class SpriteLoadingContainer extends Container {
      * @returns {void}
      */
     reposition() {
-        this.rectangle._accessibleActive;
-        this.rectangle.y = RainMan.app.screen.height / 2;
-        this.rectangle.x = RainMan.app.screen.width / 2 - this.width / 2 - 5;
-        if (this.errorBackground) {
-            this.errorBackground.y = RainMan.app.screen.height / 2;
-            this.errorBackground.x = RainMan.app.screen.width / 2 - this.errorBackground.width / 2;
-            this.text.x = this.errorBackground.x + this.errorBackgroundPaddingWidth / 2;
-            this.text.y = this.errorBackground.y + this.text.height / 2 + this.errorBackgroundPaddingHeight / 2;
+        const startY = getDeviceOrientation().includes("mobile")
+            ? RainMan.app.screen.height / 2 + this.progressBar.height * 3
+            : RainMan.app.screen.height / 2 + 100;
+        const loadingStatusContainerWidth = this.getLoadingStatusContainerWidth();
+        this.recreateProgressBar();
+        this.progressBorderShadow.width = loadingStatusContainerWidth + 2;
+        this.progressBorderShadow.height = this.loadingStatusContainerHeight;
+        this.progressBorder.width = loadingStatusContainerWidth + 2;
+        this.progressBorder.height = this.loadingStatusContainerHeight;
+        this.progressBar.width = loadingStatusContainerWidth;
+        this.progressBar.height = this.loadingStatusContainerHeight;
+        this.progressBorderShadow.x = RainMan.app.screen.width / 2 - loadingStatusContainerWidth / 2;
+        this.progressBorderShadow.y = startY + 1;
+        this.progressBorder.x = RainMan.app.screen.width / 2 - loadingStatusContainerWidth / 2;
+        this.progressBorder.y = startY;
+        this.progressBorderMask.x = this.progressBorder.x;
+        this.progressBorderMask.y = this.progressBorder.y;
+        if (this.text.text !== "") {
+            this.text.x = RainMan.app.screen.width / 2;
+            this.text.y = RainMan.app.screen.height / 2;
         }
         else {
-            this.sprite.y = this.rectangle.y + 5;
-            this.sprite.x = this.rectangle.x + 10;
-            this.text.x = RainMan.app.screen.width / 2 - this.text.width / 2 - 15;
-            this.text.y = RainMan.app.screen.height / 2 + 70;
+            this.progressBar.y = this.progressBorder.y;
+            this.progressBar.x = this.progressBorder.x;
+            this.progressBarMask.y = this.progressBar.y;
+            this.progressBarMask.x = this.progressBar.x;
+            this.text.x = RainMan.app.screen.width / 2;
+            this.text.y = startY + this.text.height;
+            this.updateProgressMask();
+        }
+    }
+    getLoadingStatusContainerWidth() {
+        return getDeviceOrientation() === "mobile-portrait"
+            ? RainMan.app.screen.width * 0.5
+            : RainMan.app.screen.width * 0.35;
+    }
+    updateProgressMask() {
+        const loadingStatusContainerWidth = this.getLoadingStatusContainerWidth();
+        this.progressBarMask.clear();
+        this.progressBarMask.beginFill(0xffffff);
+        this.progressBarMask.drawRoundedRect(0, 0, loadingStatusContainerWidth * this.progress, this.loadingStatusContainerHeight, 8);
+        this.progressBarMask.endFill();
+    }
+    animateProgress() {
+        if (this.progress >= this.targetProgress) {
+            this.resolveCompletionIfReady();
+            return;
+        }
+        const maxStep = RainMan.app.ticker.deltaMS / this.minimumFullProgressDuration;
+        this.progress = Math.min(this.progress + maxStep, this.targetProgress);
+        this.updateProgressMask();
+        this.resolveCompletionIfReady();
+    }
+    isComplete() {
+        return this.targetProgress === 1 && this.progress >= this.targetProgress;
+    }
+    resolveCompletionIfReady() {
+        if (!this.isComplete() || !this.completionPromiseResolver) {
+            return;
         }
+        this.completionPromiseResolver();
+        this.completionPromiseResolver = null;
+        this.completionPromise = null;
     }
 }

package/dist/stores/SettingsStore.d.ts

@@ -26,6 +26,7 @@ export declare class SettingsStore {
     isAutoplayEnabled: boolean;
     isLastFreeSpin: boolean;
     isTakeActionAvailable: boolean;
+    isLoopingWinActionQueue: boolean;
     infinitySpinsEnabled: boolean;
     roundNumber: number;
     reelSetId: number;
@@ -327,12 +328,6 @@ export declare class SettingsStore {
      * @returns {void}
      */
     setAutoSpinsCount(count: number): void;
-    /**
-     * Flip the infinity spins flag
-     * @public
-     * @returns {void}
-     */
-    flipInfinitySpinsFlag(): void;
     /**
      * Setter for the autoplay enabled flag
      * @public

package/dist/stores/SettingsStore.js

@@ -30,6 +30,7 @@ export class SettingsStore {
     isAutoplayEnabled = false;
     isLastFreeSpin = false;
     isTakeActionAvailable = true;
+    isLoopingWinActionQueue = false;
     infinitySpinsEnabled = false;
     roundNumber = 0;
     reelSetId = 0;
@@ -72,7 +73,6 @@ export class SettingsStore {
     enableButtons;
     useTakeAction;
     initialAutoplaySettingsState = {
-        infinitySpinsEnabled: false,
         onAnyWin: false,
         howManyAutoSpinsLeft: INITIAL_AUTO_SPIN_COUNT,
         singleWinExceeds: 0,
@@ -108,7 +108,6 @@ export class SettingsStore {
             resetDataForSymbolPaytablePopup: action.bound,
             decreaseAutoSpinsCount: action.bound,
             setAutoSpinsCount: action.bound,
-            flipInfinitySpinsFlag: action.bound,
             resetAutoplaySettings: action.bound,
             setAutoPlayEnabledFlag: action.bound,
             setNumberOfFreeSpin: action.bound,
@@ -541,7 +540,7 @@ export class SettingsStore {
      * @returns {void}
      */
     decreaseAutoSpinsCount() {
-        if (this.infinitySpinsEnabled || this.isFreeSpinsPlayEnabled) {
+        if (this.isFreeSpinsPlayEnabled) {
             return;
         }
         this.howManyAutoSpinsLeft -= 1;
@@ -553,20 +552,8 @@ export class SettingsStore {
      * @returns {void}
      */
     setAutoSpinsCount(count) {
-        if (this.infinitySpinsEnabled) {
-            this.setAutoSpinsCount(-1);
-            this.flipInfinitySpinsFlag();
-        }
         this.howManyAutoSpinsLeft = count;
     }
-    /**
-     * Flip the infinity spins flag
-     * @public
-     * @returns {void}
-     */
-    flipInfinitySpinsFlag() {
-        this.infinitySpinsEnabled = !this.infinitySpinsEnabled;
-    }
     /**
      * Setter for the autoplay enabled flag
      * @public
@@ -702,7 +689,6 @@ export class SettingsStore {
      * @returns {void}
      */
     resetAutoplaySettings() {
-        this.infinitySpinsEnabled = this.initialAutoplaySettingsState.infinitySpinsEnabled;
         this.onAnyWin = this.initialAutoplaySettingsState.onAnyWin;
         this.howManyAutoSpinsLeft = this.initialAutoplaySettingsState.howManyAutoSpinsLeft;
         this.singleWinExceeds = this.initialAutoplaySettingsState.singleWinExceeds;

package/dist/utils/common/sound.d.ts

@@ -1,6 +1,5 @@
 /**
- * This function is required for setting up the sound while changing the tab
- * This is using the visibilitychange event
+ * Sets up audio states for tab switches and iOS app interruptions.
  * @returns {void}
  */
 export declare const loadSoundsOnTabChange: () => void;

package/dist/utils/common/sound.js

@@ -1,26 +1,76 @@
 import { SoundManager } from "../../application";
 import { RainMan } from "../../Rainman";
+let shouldResumeAudioOnInterruption = false;
+const removeInterruptedAudioResumeListeners = () => {
+    window.removeEventListener("pointerdown", resumeAudioOnInterruption);
+    window.removeEventListener("touchend", resumeAudioOnInterruption);
+};
+const interruptedAudioResume = () => {
+    if (shouldResumeAudioOnInterruption) {
+        return;
+    }
+    shouldResumeAudioOnInterruption = true;
+    window.addEventListener("pointerdown", resumeAudioOnInterruption, { once: true });
+    window.addEventListener("touchend", resumeAudioOnInterruption, { once: true, passive: true });
+};
 /**
- * This function using the visibilitychange event to resume sounds
- * If any time the sounds was enable than this will be resumed
- * If the sounds was disabled than this will be not triggered
+ * Pauses audio when the page goes to the background.
  * @returns {void}
  */
-const resumeAudioContext = () => {
-    if (RainMan.settingsStore.isSoundEnabled() && document.hidden) {
-        SoundManager.stopAll();
+const pauseAudio = () => {
+    shouldResumeAudioOnInterruption = false;
+    removeInterruptedAudioResumeListeners();
+    if (RainMan.settingsStore.isSoundEnabled()) {
+        SoundManager.pauseAll();
+    }
+};
+/**
+ * Restores audio when the page becomes active again.
+ * @returns {Promise<void>}
+ */
+const resumeAudio = async () => {
+    if (document.hidden || !RainMan.settingsStore.isSoundEnabled()) {
         return;
     }
-    if (RainMan.settingsStore.isSoundEnabled() && !document.hidden) {
+    if (RainMan.settingsStore.isSoundEnabled()) {
+        await SoundManager.resumeOnFocus();
         SoundManager.resumeAll();
+    }
+    if (SoundManager.isAudioContextRunning()) {
+        shouldResumeAudioOnInterruption = false;
+        removeInterruptedAudioResumeListeners();
+        return;
+    }
+    interruptedAudioResume();
+};
+/**
+ * Restore audio on the next user action if browser blocked it earlier.
+ * @returns {void}
+ */
+function resumeAudioOnInterruption() {
+    shouldResumeAudioOnInterruption = false;
+    removeInterruptedAudioResumeListeners();
+    resumeAudio();
+}
+/**
+ * Check if visibility is changed to pause or restore audio.
+ * @returns {void}
+ */
+const handleVisibilityChange = () => {
+    if (document.hidden) {
+        pauseAudio();
         return;
     }
+    resumeAudio();
 };
 /**
- * This function is required for setting up the sound while changing the tab
- * This is using the visibilitychange event
+ * Sets up audio states for tab switches and iOS app interruptions.
  * @returns {void}
  */
 export const loadSoundsOnTabChange = () => {
-    document.addEventListener("visibilitychange", resumeAudioContext);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    window.addEventListener("pagehide", pauseAudio);
+    window.addEventListener("blur", pauseAudio);
+    window.addEventListener("pageshow", () => resumeAudio());
+    window.addEventListener("focus", () => resumeAudio());
 };

package/package.json

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