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

package/dist/components/frame/AbstractColumnsContainer.js

@@ -258,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);
     }
     /**
@@ -343,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.js

@@ -1639,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;

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;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixi-rainman-game-engine",
-    "version": "0.3.32",
+    "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",