pixi-rainman-game-engine 0.3.28 → 0.3.30

package/dist/Rainman/types.d.ts

@@ -81,6 +81,7 @@ export interface Globals {
     disableSpeedPopup?: (value: boolean) => void;
     handleDisablingButtons?: (value?: boolean) => void;
     throttledSpin?: () => void;
+    prepareBoughtFreeSpins?: () => void;
     updateFreeSpinShown?: (value: number) => void;
     backendSymbolMap?: Map<number, never>;
     betTable?: number[];

package/dist/application/ButtonsEventManager/ButtonsEventManager.js

@@ -209,7 +209,7 @@ export class ButtonsEventManager {
     initFreeSpinModal() {
         RainMan.componentRegistry
             .getIfExists(FreeSpinButton.registryName)
-            ?.setOnClick(() => this.handleModalInvocation(UI_ITEMS.freeSpin));
+            ?.setOnClick(() => RainMan.settingsStore.handleBuyFreeSpinPopupActivation?.());
     }
     /**
      * Method for initializing volume button

package/dist/components/AbstractBuyFreeSpins/AbstractBuyFreeSpinsPlate.d.ts

@@ -0,0 +1,44 @@
+import { Container, Sprite } from "pixi.js";
+import { BuyFreeSpinOption } from "SettingsUI/hooks";
+import { AcceptDeclineButton } from "./AcceptDeclineButton";
+export type BuyFreeSpinConfig = {
+    options: BuyFreeSpinOption[];
+};
+export type BuyFreeSpinState = "selection" | "confirmation";
+export declare abstract class AbstractBuyFreeSpinsPlate extends Container {
+    private state;
+    protected selectedOption?: BuyFreeSpinOption;
+    protected readonly config: BuyFreeSpinConfig;
+    protected selectionPlate?: Sprite;
+    protected closeButton?: AcceptDeclineButton;
+    protected confirmationPlate?: Sprite;
+    protected acceptButton?: AcceptDeclineButton;
+    protected declineButton?: AcceptDeclineButton;
+    protected selectionPlateTexture: string;
+    protected confirmationPlateTexture: string;
+    private readonly onContinueCallback;
+    private readonly resizeHandler;
+    private handleClose;
+    protected constructor(onContinue: () => void, config: BuyFreeSpinConfig);
+    init(): void;
+    private createElements;
+    resize(): void;
+    private showSelectionScreen;
+    private showConfirmationScreen;
+    protected abstract getPlateScale(): {
+        vertical: number;
+        horizontal: number;
+    };
+    protected abstract createSelectionContent(): void;
+    protected abstract createConfirmationContent(): void;
+    protected abstract showSelectionContent(): void;
+    protected abstract showConfirmationContent(option: BuyFreeSpinOption): void;
+    protected abstract positionSelectionScreen(): void;
+    protected abstract positionConfirmationScreen(): void;
+    protected onCleanup(): void;
+    protected onBuyButtonClick(option: BuyFreeSpinOption): void;
+    private onAcceptClick;
+    private renderState;
+    private onDeclineClick;
+    private cleanup;
+}

package/dist/components/AbstractBuyFreeSpins/AbstractBuyFreeSpinsPlate.js

@@ -0,0 +1,184 @@
+import { Container, Sprite, Texture } from "pixi.js";
+import { UXLayer } from "../../layers";
+import { RainMan } from "../../Rainman";
+import { scaleToParent } from "../../utils";
+import { AcceptDeclineButton } from "./AcceptDeclineButton";
+export class AbstractBuyFreeSpinsPlate extends Container {
+    state = "selection";
+    selectedOption;
+    config;
+    selectionPlate;
+    closeButton;
+    confirmationPlate;
+    acceptButton;
+    declineButton;
+    selectionPlateTexture = "selection-freespin-frame";
+    confirmationPlateTexture = "confirmation-freespin-frame";
+    onContinueCallback;
+    resizeHandler = () => this.resize();
+    handleClose = () => {
+        this.cleanup();
+        this.onContinueCallback();
+        RainMan.settingsStore.disableKeyboardShortcuts = false;
+    };
+    constructor(onContinue, config) {
+        super();
+        RainMan.settingsStore.disableKeyboardShortcuts = true;
+        this.onContinueCallback = onContinue;
+        this.config = config;
+        this.parentLayer = UXLayer;
+        this.eventMode = "static";
+        if (config.options.length === 1) {
+            this.state = "confirmation";
+            this.selectedOption = config.options[0];
+        }
+    }
+    init() {
+        this.createElements();
+        this.renderState();
+        RainMan.app.renderer.on("resize", this.resizeHandler);
+        this.resize();
+    }
+    createElements() {
+        const numOptions = this.config.options.length;
+        this.selectionPlate = new Sprite(Texture.from(this.selectionPlateTexture));
+        this.selectionPlate.anchor.set(0.5);
+        if (numOptions > 1) {
+            this.closeButton = new AcceptDeclineButton(false);
+            this.closeButton.setOnClick(() => this.handleClose());
+            this.closeButton.anchor.set(0.5);
+        }
+        this.confirmationPlate = new Sprite(Texture.from(this.confirmationPlateTexture));
+        this.confirmationPlate.anchor.set(0.5);
+        this.acceptButton = new AcceptDeclineButton(true);
+        this.acceptButton.setOnClick(() => this.onAcceptClick(this.selectedOption));
+        this.acceptButton.anchor.set(0.5);
+        this.declineButton = new AcceptDeclineButton(false);
+        this.declineButton.setOnClick(() => this.onDeclineClick());
+        this.declineButton.anchor.set(0.5);
+        this.createSelectionContent();
+        this.createConfirmationContent();
+    }
+    resize() {
+        const { width, height } = RainMan.app.screen;
+        if (this.state === "selection") {
+            if (!this.selectionPlate)
+                return;
+            const plateScale = this.getPlateScale();
+            const texW = this.selectionPlate.texture.width;
+            const texH = this.selectionPlate.texture.height;
+            const targetW = width * plateScale.horizontal;
+            const targetH = height * plateScale.vertical;
+            const dims = scaleToParent(texW, texH, targetW, targetH);
+            const scaleX = dims.width / texW;
+            const scaleY = dims.height / texH;
+            const scale = Math.min(scaleX, scaleY);
+            this.scale.set(scale);
+            this.position.set(width / 2, height / 2);
+            this.positionSelectionScreen();
+            return;
+        }
+        if (this.state === "confirmation") {
+            if (!this.confirmationPlate)
+                return;
+            const plateScale = this.getPlateScale();
+            const texW = this.confirmationPlate.texture.width;
+            const texH = this.confirmationPlate.texture.height;
+            const targetW = RainMan.app.screen.width * plateScale.horizontal;
+            const targetH = RainMan.app.screen.height * plateScale.vertical;
+            const dims = scaleToParent(texW, texH, targetW, targetH);
+            const scaleX = dims.width / texW;
+            const scaleY = dims.height / texH;
+            const scale = Math.min(scaleX, scaleY);
+            this.scale.set(scale);
+            this.position.set(width / 2, height / 2);
+            this.positionConfirmationScreen();
+        }
+        this.parentLayer = UXLayer;
+    }
+    showSelectionScreen() {
+        if (!this.selectionPlate)
+            return;
+        this.selectionPlate.visible = true;
+        this.selectionPlate.alpha = 1;
+        this.addChild(this.selectionPlate);
+        this.showSelectionContent();
+        if (this.closeButton) {
+            this.addChild(this.closeButton);
+        }
+        this.positionSelectionScreen();
+    }
+    showConfirmationScreen() {
+        if (!this.confirmationPlate)
+            return;
+        if (!this.selectedOption) {
+            this.selectedOption = this.config.options[0];
+        }
+        this.addChild(this.confirmationPlate);
+        this.showConfirmationContent(this.selectedOption);
+        if (this.acceptButton) {
+            this.addChild(this.acceptButton);
+        }
+        if (this.declineButton) {
+            this.addChild(this.declineButton);
+        }
+        this.positionConfirmationScreen();
+    }
+    onCleanup() { }
+    onBuyButtonClick(option) {
+        this.selectedOption = option;
+        this.state = "confirmation";
+        this.renderState();
+        this.resize();
+    }
+    async onAcceptClick(option) {
+        const roundNumber = RainMan.settingsStore.roundNumber + 1;
+        try {
+            const data = await window.connectionWrapper.fetchFreeSpinData(roundNumber, option.amount, option.price);
+            const code = data.getRawData()?.status?.code;
+            if (code === 400 || code === 406) {
+                return;
+            }
+            RainMan.settingsStore.setIsFreeSpinBought(true, data);
+            RainMan.settingsStore.setFreeSpinNumberBought(option.amount);
+            RainMan.globals.updateFreeSpinShown?.(option.amount);
+            RainMan.settingsStore.setRoundNumber(roundNumber);
+            this.cleanup();
+            this.onContinueCallback();
+            await RainMan.settingsStore.handleInvokeFreeSpinPlate?.(option.amount, false);
+            RainMan.settingsStore.disableKeyboardShortcuts = false;
+            RainMan.globals.prepareBoughtFreeSpins?.();
+            setTimeout(() => {
+                RainMan.globals.throttledSpin?.();
+            }, 500);
+        }
+        catch (err) {
+            console.error(err);
+            RainMan.settingsStore.setIsFreeSpinBought(false);
+            RainMan.settingsStore.disableKeyboardShortcuts = false;
+        }
+    }
+    renderState() {
+        this.removeChildren();
+        if (this.state === "selection") {
+            this.showSelectionScreen();
+            return;
+        }
+        this.showConfirmationScreen();
+    }
+    onDeclineClick() {
+        if (this.config.options.length === 1) {
+            this.handleClose();
+            return;
+        }
+        this.state = "selection";
+        this.selectedOption = undefined;
+        this.renderState();
+        this.resize();
+    }
+    cleanup() {
+        RainMan.app.renderer.off("resize", this.resizeHandler);
+        this.onCleanup();
+        this.destroy({ children: true });
+    }
+}

package/dist/components/AbstractBuyFreeSpins/AcceptDeclineButton.d.ts

@@ -0,0 +1,14 @@
+import { BaseButton } from "../buttons/BaseButton";
+/**
+ * Button for accepting or declining number of free spins to buy.
+ * It needs following textures:
+ * - normal - `v-n.png` for accept, `x-n.png` for decline
+ * - hover - `v-h.png` for accept, `x-h.png` for decline
+ * - clicked - `v-c.png` for accept, `x-c.png` for decline
+ * @param {boolean} isAcceptButton desides which texture to use
+ * @augments {BaseButton}
+ */
+export declare class AcceptDeclineButton extends BaseButton {
+    static registryName: string;
+    constructor(isAcceptButton?: boolean);
+}

package/dist/components/AbstractBuyFreeSpins/AcceptDeclineButton.js

@@ -0,0 +1,28 @@
+import { getTexture } from "../../utils";
+import { BaseButton, ButtonStates } from "../buttons/BaseButton";
+/**
+ * Button for accepting or declining number of free spins to buy.
+ * It needs following textures:
+ * - normal - `v-n.png` for accept, `x-n.png` for decline
+ * - hover - `v-h.png` for accept, `x-h.png` for decline
+ * - clicked - `v-c.png` for accept, `x-c.png` for decline
+ * @param {boolean} isAcceptButton desides which texture to use
+ * @augments {BaseButton}
+ */
+export class AcceptDeclineButton extends BaseButton {
+    static registryName = "acceptDeclineButton";
+    constructor(isAcceptButton) {
+        const textureMap = isAcceptButton
+            ? {
+                [ButtonStates.NORMAL]: getTexture("v-n.png"),
+                [ButtonStates.OVER]: getTexture("v-h.png"),
+                [ButtonStates.CLICKED]: getTexture("v-c.png")
+            }
+            : {
+                [ButtonStates.NORMAL]: getTexture("x-n.png"),
+                [ButtonStates.OVER]: getTexture("x-h.png"),
+                [ButtonStates.CLICKED]: getTexture("x-c.png")
+            };
+        super(AcceptDeclineButton.registryName, textureMap);
+    }
+}

package/dist/components/AbstractBuyFreeSpins/BuyFreeSpinButton.d.ts

@@ -0,0 +1,14 @@
+import { BaseButton } from "../buttons/BaseButton";
+/**
+ * Button for selecting number of freespins to buy
+ * It needs following textures:
+ * - normal - `buttonTextureName-n.png`
+ * - hover - `buttonTextureName-h.png`
+ * - clicked - `buttonTextureName-c.png`
+ * @param {string} buttonTextureName name of a texture to use
+ * @augments {BaseButton}
+ */
+export declare class BuyFreeSpinButton extends BaseButton {
+    static registryName: string;
+    constructor(buttonTextureName: string);
+}

package/dist/components/AbstractBuyFreeSpins/BuyFreeSpinButton.js

@@ -0,0 +1,22 @@
+import { getTexture } from "../../utils";
+import { BaseButton, ButtonStates } from "../buttons/BaseButton";
+/**
+ * Button for selecting number of freespins to buy
+ * It needs following textures:
+ * - normal - `buttonTextureName-n.png`
+ * - hover - `buttonTextureName-h.png`
+ * - clicked - `buttonTextureName-c.png`
+ * @param {string} buttonTextureName name of a texture to use
+ * @augments {BaseButton}
+ */
+export class BuyFreeSpinButton extends BaseButton {
+    static registryName = "buyFreeSpinButton";
+    constructor(buttonTextureName) {
+        const textureMap = {
+            [ButtonStates.NORMAL]: getTexture(`${buttonTextureName}-n.png`),
+            [ButtonStates.OVER]: getTexture(`${buttonTextureName}-h.png`),
+            [ButtonStates.CLICKED]: getTexture(`${buttonTextureName}-c.png`)
+        };
+        super(BuyFreeSpinButton.registryName, textureMap);
+    }
+}

package/dist/components/AbstractBuyFreeSpins/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./AbstractBuyFreeSpinsPlate";
+export * from "./AcceptDeclineButton";
+export * from "./BuyFreeSpinButton";

package/dist/components/AbstractBuyFreeSpins/index.js

@@ -0,0 +1,3 @@
+export * from "./AbstractBuyFreeSpinsPlate";
+export * from "./AcceptDeclineButton";
+export * from "./BuyFreeSpinButton";

package/dist/components/AbstractIntroScreen/AbstractIntroScreen.d.ts

@@ -2,7 +2,7 @@ import { Container, Sprite, Text, TextStyle, Texture } from "pixi.js";
 import { IntroLogo } from "../common";
 import { IntroContinueButton } from "./IntroContinueButton";
 import { IntroDotButton } from "./IntroDotButton";
-import { IntroPageData } from "./IntroPageData";
+import { IntroPageData, IntroPageInnerTextBlock } from "./IntroPageData";
 /**
  * Abstract intro screen shown between loading and gameplay.
  * Each game subclasses this and provides assets + page definitions as properties.
@@ -38,6 +38,7 @@ export declare abstract class AbstractIntroScreen extends Container {
     protected dotShadow?: Sprite;
     protected frameImage: Sprite;
     protected pageImage: Sprite;
+    protected pageInnerTextBlocks: Text[];
     protected pageText: Text;
     private currentPage;
     private isChecked;
@@ -54,14 +55,19 @@ export declare abstract class AbstractIntroScreen extends Container {
     protected abstract positionText(): void;
     protected abstract positionCheckbox(): void;
     protected abstract positionLogo(): void;
+    protected positionPageInnerText(): void;
     protected abstract getPageImageScale(): {
         vertical: number;
         horizontal: number;
     };
     protected abstract positionPageImage(): void;
+    protected createPageInnerTextBlocks(blocks: IntroPageInnerTextBlock[]): Text[];
     protected showPage(index: number): void;
     private updateFade;
     private cleanup;
+    private refreshPageInnerText;
+    private setInnerTextAlpha;
+    private setPageContentAlpha;
     /**
      * Resizes dot shadow width to match all dots and centers it on them.
      * Call this in positionDots() after positioning the dots.

package/dist/components/AbstractIntroScreen/AbstractIntroScreen.js

@@ -32,6 +32,7 @@ export class AbstractIntroScreen extends Container {
     dotShadow;
     frameImage;
     pageImage;
+    pageInnerTextBlocks = [];
     pageText;
     currentPage = 0;
     isChecked = false;
@@ -91,8 +92,7 @@ export class AbstractIntroScreen extends Container {
         this.addChild(bg);
         this.frameImage.texture = getTexture(isPortrait ? "intro-frame-mobile.png" : "intro-frame.png");
         this.showPage(this.currentPage);
-        this.pageImage.alpha = 1;
-        this.pageText.alpha = 1;
+        this.setPageContentAlpha(1);
         const pageImageScale = this.getPageImageScale();
         const dimensions = scaleToParent(this.pageImage.texture.width, this.pageImage.texture.height, RainMan.app.screen.width * pageImageScale.horizontal, RainMan.app.screen.height * pageImageScale.vertical);
         this.pageImage.width = dimensions.width;
@@ -109,6 +109,7 @@ export class AbstractIntroScreen extends Container {
         this.addChild(this.frameImage);
         this.addChild(this.frameImage);
         this.addChild(this.pageImage);
+        this.pageInnerTextBlocks.forEach((block) => this.addChild(block));
         this.addChild(this.pageText);
         this.addChild(this.continueButton);
         this.addChild(this.checkboxSprite);
@@ -123,6 +124,7 @@ export class AbstractIntroScreen extends Container {
         this.positionCheckbox();
         this.positionContinueButton();
         this.positionText();
+        this.positionPageInnerText();
         this.positionDotShadow();
         this.frameImage.x = this.pageImage.x;
         this.frameImage.y = this.pageImage.y;
@@ -133,6 +135,10 @@ export class AbstractIntroScreen extends Container {
         this.frameImage.width = this.pageImage.width;
         this.frameImage.height = this.pageImage.height;
     }
+    positionPageInnerText() { }
+    createPageInnerTextBlocks(blocks) {
+        return blocks.map((block) => new Text(block.text));
+    }
     showPage(index) {
         if (index < 0 || index >= this.pages.length)
             return;
@@ -141,6 +147,8 @@ export class AbstractIntroScreen extends Container {
         const isPortrait = getDeviceOrientation() === "mobile-portrait";
         this.pageImage.texture = Texture.from(isPortrait ? page.imageMobile : page.imageDesktop);
         this.pageText.text = page.text;
+        this.refreshPageInnerText(page);
+        this.setInnerTextAlpha(this.pageImage.alpha);
         for (let i = 0; i < this.dots.length; i++) {
             this.dots[i].setActive(i === index);
         }
@@ -153,6 +161,28 @@ export class AbstractIntroScreen extends Container {
         RainMan.app.renderer.off("resize", this.resizeHandler);
         this.destroy({ children: true });
     }
+    refreshPageInnerText(page) {
+        this.pageInnerTextBlocks.forEach((block) => {
+            this.removeChild(block);
+            block.destroy();
+        });
+        this.pageInnerTextBlocks = [];
+        if (!page.pageInnerText?.length)
+            return;
+        this.pageInnerTextBlocks = this.createPageInnerTextBlocks(page.pageInnerText);
+        this.pageInnerTextBlocks.forEach((block) => this.addChild(block));
+        this.positionPageInnerText();
+    }
+    setInnerTextAlpha(alpha) {
+        this.pageInnerTextBlocks.forEach((block) => {
+            block.alpha = alpha;
+        });
+    }
+    setPageContentAlpha(alpha) {
+        this.pageImage.alpha = alpha;
+        this.pageText.alpha = alpha;
+        this.setInnerTextAlpha(alpha);
+    }
     /**
      * Resizes dot shadow width to match all dots and centers it on them.
      * Call this in positionDots() after positioning the dots.
@@ -195,16 +225,14 @@ export class AbstractIntroScreen extends Container {
         this.fadeTween = new TWEEN.Tween({ alpha: this.pageImage.alpha })
             .to({ alpha: 0 }, this.FADE_DURATION)
             .onUpdate((obj) => {
-            this.pageImage.alpha = obj.alpha;
-            this.pageText.alpha = obj.alpha;
+            this.setPageContentAlpha(obj.alpha);
         })
             .onComplete(() => {
             this.showPage(index);
             this.fadeTween = new TWEEN.Tween({ alpha: 0 })
                 .to({ alpha: 1 }, this.FADE_DURATION)
                 .onUpdate((obj) => {
-                this.pageImage.alpha = obj.alpha;
-                this.pageText.alpha = obj.alpha;
+                this.setPageContentAlpha(obj.alpha);
             })
                 .onComplete(() => {
                 this.isAnimating = false;

package/dist/components/AbstractIntroScreen/IntroPageData.d.ts

@@ -1,3 +1,10 @@
+/**
+ * Data for a single inner text block rendered inside an intro page image.
+ */
+export type IntroPageInnerTextBlock = {
+    id?: string;
+    text: string;
+};
 /**
  * Data for a single page in the intro screen.
  */
@@ -5,4 +12,5 @@ export type IntroPageData = {
     imageDesktop: string;
     imageMobile: string;
     text: string;
+    pageInnerText?: IntroPageInnerTextBlock[];
 };

package/dist/components/AbstractMainContainer/AbstractMainContainer.d.ts

@@ -1,3 +1,4 @@
+import { AbstractBuyFreeSpinsPlate } from "components/AbstractBuyFreeSpins/AbstractBuyFreeSpinsPlate";
 import { Container, Graphics, Sprite } from "pixi.js";
 import { ButtonsEventManager, WinTypeId } from "../../application";
 import { AbstractController } from "../../controllers";
@@ -54,6 +55,7 @@ export declare abstract class AbstractMainContainer extends Container {
     protected mysteryBonusContainer: Nullable<UpdatableSpineContainer>;
     protected resolveMysteryBonusContainer?: PromiseResolverType;
     protected _freeSpinPlate: Nullable<AbstractFreeSpinContainer>;
+    protected _buyFreeSpinsPlate: Nullable<AbstractBuyFreeSpinsPlate>;
     protected _freeSpinSummary: Nullable<AbstractFreeSpinContainer>;
     private _bigWinInvokedAt;
     private _mysteryWinInvokedAt;
@@ -173,6 +175,9 @@ export declare abstract class AbstractMainContainer extends Container {
      * @returns {Promise<void>}
      */
     invokeFreeSpinPlate(freeSpinCount: number, isAdditionalFreeSpin?: boolean, isMoneyReward?: boolean): Promise<void>;
+    invokeBuyFreeSpinPlate(): void;
+    protected closeBuyFreeSpinPlate(): void;
+    protected createBuyFreeSpinPlate(): AbstractBuyFreeSpinsPlate | null;
     /**
      * Function for creating free spin summary
      * @protected

package/dist/components/AbstractMainContainer/AbstractMainContainer.js

@@ -47,6 +47,7 @@ export class AbstractMainContainer extends Container {
     mysteryBonusContainer = null;
     resolveMysteryBonusContainer = undefined;
     _freeSpinPlate = null;
+    _buyFreeSpinsPlate = null;
     _freeSpinSummary = null;
     _bigWinInvokedAt = null;
     _mysteryWinInvokedAt = null;
@@ -60,6 +61,7 @@ export class AbstractMainContainer extends Container {
         this.messageBox = new MessageBox();
         SoundManager.setPlayStatus(SoundTracks.music, RainMan.settingsStore.shouldPlayAmbientMusic);
         RainMan.settingsStore.setHandleInvokeFreeSpinPlate(this.invokeFreeSpinPlate.bind(this));
+        RainMan.settingsStore.setHandleBuyFreeSpinPopupActivatio(this.invokeBuyFreeSpinPlate.bind(this));
         RainMan.app.renderer.on("resize", () => this.resize());
     }
     /**
@@ -236,6 +238,30 @@ export class AbstractMainContainer extends Container {
         this.hideOverlay();
         refreshButton.flipDisabledFlag(false);
     }
+    invokeBuyFreeSpinPlate() {
+        const refreshButton = RainMan.componentRegistry.get(RefreshButton.registryName);
+        refreshButton.flipDisabledFlag(true);
+        this._buyFreeSpinsPlate = this.createBuyFreeSpinPlate();
+        if (!this._buyFreeSpinsPlate) {
+            refreshButton.flipDisabledFlag(false);
+            return;
+        }
+        this._buyFreeSpinsPlate.init();
+        this._buyFreeSpinsPlate.resize();
+        this.showOverlay();
+        this.addChild(this._buyFreeSpinsPlate);
+    }
+    closeBuyFreeSpinPlate() {
+        this.removeChild(this._buyFreeSpinsPlate);
+        this._buyFreeSpinsPlate.destroy({ children: true });
+        this._buyFreeSpinsPlate = null;
+        this.hideOverlay();
+        const refreshButton = RainMan.componentRegistry.get(RefreshButton.registryName);
+        refreshButton.flipDisabledFlag(false);
+    }
+    createBuyFreeSpinPlate() {
+        return null;
+    }
     /**
      * Function for creating free spin summary
      * @protected
@@ -523,7 +549,7 @@ export class AbstractMainContainer extends Container {
     async invokeGambleGame() {
         if (!this.gambleGameSpineName)
             return;
-        const newBalance = await new Promise((resolve) => {
+        await new Promise((resolve) => {
             this.gambleGame = new GambleGame(this.gambleGameSpineName, resolve, this._controller.lastWinAmount, this._controller.balance);
             RainMan.settingsStore.isGambleGameActive = true;
             this.showOverlay();
@@ -535,7 +561,7 @@ export class AbstractMainContainer extends Container {
             this._controller.updateGambleValues(RainMan.settingsStore.gambleGameWin);
             this.gambleGame = null;
         }
-        this._controller.balance = newBalance;
+        this._controller?.updateBalance();
         this.hideOverlay();
     }
     /**
@@ -884,6 +910,11 @@ export class AbstractMainContainer extends Container {
             this.addChild(this.freeSpinSummary);
             this.freeSpinSummary.resize();
         }
+        if (this._buyFreeSpinsPlate) {
+            this.removeChild(this._buyFreeSpinsPlate);
+            this.addChild(this._buyFreeSpinsPlate);
+            this._buyFreeSpinsPlate.resize();
+        }
         RainMan.settingsStore.popupPaytableRepositionCallback?.();
     }
     /**

package/dist/components/GambleGame/GambleGame.js

@@ -126,6 +126,7 @@ export class GambleGame extends Container {
         this.card.state.addAnimation(0, "wait", true, 0);
         const gambleData = await window.connectionWrapper.fetchGambleData(RainMan.settingsStore.roundNumber, this.lastWinAmount, choice);
         this.balanceValue = gambleData.balance + gambleData.win_amount;
+        this.balanceValue = gambleData.balanceAfterSpin;
         await new Promise((resolve) => {
             this.card.state.clearTracks();
             this.card.state.clearListeners();

package/dist/components/dictionary/locales/en.json

@@ -60,6 +60,9 @@
         "doubleTo": "DOUBLE TO",
         "collect": "COLLECT",
         "totalBet": "Bet",
+        "buyFreeSpinTitle": "BUY",
+        "freeSpinsAmount": "{{amount}}",
+        "freeSpinText": "FREE SPINS",
         "buyFreeSpins": "Buy Free Spins",
         "possibleWin": "POSSIBLE WIN: ",
         "gamePaysText": "GAME PAYS: "

package/dist/components/frame/AbstractColumnsContainer.d.ts

@@ -18,6 +18,9 @@ export declare abstract class AbstractColumnsContainer extends Container impleme
     protected allColumns: AbstractSymbolsColumn[];
     private velocityMultiplier;
     private skipScatterDelay;
+    private mysteryDelayTimeout;
+    private mysteryFxGeneration;
+    private skipRemainingMysteryFxs;
     currentColumn: Nullable<AbstractSymbolsColumn>;
     private playedSounds;
     quickReelsStop: boolean;
@@ -92,6 +95,28 @@ export declare abstract class AbstractColumnsContainer extends Container impleme
      * @returns {Promise<void>}
      */
     configBlindSpin(finalSymbolReels: SymbolReels, afterSpinResolver: (value: void | PromiseLike<void>) => void, indexesOfReelsToExtendSpinningTime: number[]): Promise<void>;
+    /**
+     * This cancels the timeout, removes the stored delayed action and invalidates
+     * any older timeout callback that might still try to execute later.
+     * @private
+     * @returns {void}
+     */
+    private clearPendingMysteryDelay;
+    /**
+     * Runs the pending mysteryFx immediately and clears its timeout.
+     * @private
+     * @returns {void}
+     */
+    private executePendingMysteryFx;
+    /**
+     * The callback is bound to the current generation so an old timeout from
+     * a previous spin cannot execute after a newer mystery delay was scheduled.
+     * @private
+     * @param {PlayableAction} action delayed reel configuration action
+     * @param {number} delay time in milliseconds before the action should run
+     * @returns {void}
+     */
+    private scheduleMysteryDelay;
     /**
      * Function for playing all streaks
      * @public

package/dist/components/frame/AbstractColumnsContainer.js

@@ -20,6 +20,9 @@ export class AbstractColumnsContainer extends Container {
     allColumns = [];
     velocityMultiplier = defaultSpeedConfig.symbolsColumnsSpeed;
     skipScatterDelay = null;
+    mysteryDelayTimeout = null;
+    mysteryFxGeneration = 0;
+    skipRemainingMysteryFxs = false;
     currentColumn = null;
     playedSounds = [];
     quickReelsStop = false;
@@ -93,12 +96,12 @@ export class AbstractColumnsContainer extends Container {
      */
     enableQuickReelsStop() {
         this.quickReelsStop = true;
+        this.skipRemainingMysteryFxs = true;
         RainMan.settingsStore.isQuickSpinsActive = true;
         RainMan.settingsStore.setIsTemporarySpeed(true);
         RainMan.componentRegistry.setTemporarySpeedLevel(SPEED_LEVELS.fast);
-        this.skipScatterDelay?.();
+        this.executePendingMysteryFx();
         this.resolveMysterySpeedUp();
-        this.skipScatterDelay = null;
         if (this.currentColumn) {
             this.currentColumn.skipHidingMysteryFx = true;
         }
@@ -133,10 +136,15 @@ export class AbstractColumnsContainer extends Container {
         // spin
         return new Promise(async (resolve) => {
             let index = 0;
+            this.clearPendingMysteryDelay();
+            this.mysteryFxGeneration = 0;
+            this.skipRemainingMysteryFxs = false;
             const configuredBlindSpinsActions = this.prepareConfiguringReelsEnd(finalSymbolReels);
             const frame = RainMan.componentRegistry.get(AbstractFrame.registryName);
             while (configuredBlindSpinsActions.length !== 0) {
-                if (this.quickReelsStop || RainMan.settingsStore.currentSpeed === SPEED_LEVELS.fast) {
+                if (this.quickReelsStop ||
+                    this.skipRemainingMysteryFxs ||
+                    RainMan.settingsStore.currentSpeed === SPEED_LEVELS.fast) {
                     await Promise.all(configuredBlindSpinsActions.map(async (action) => await action()));
                     configuredBlindSpinsActions.length = 0;
                     SoundManager.play(SoundTracks.allRollStops);
@@ -150,16 +158,16 @@ export class AbstractColumnsContainer extends Container {
                         frame.invokeMysteryFx(this.currentColumn.x, this.currentColumn.y);
                         this.skipScatterDelay = configureSpinAction;
                         await this.currentColumn.speedUpForMysterySpin(100, 1500);
-                        if (!this.quickReelsStop) {
+                        if (this.quickReelsStop || this.skipRemainingMysteryFxs) {
+                            await this.currentColumn.changeVelocity(Speed.STOP, 0, frame);
+                        }
+                        else {
                             if (!RainMan.settingsStore.isAutoplayEnabled ||
                                 (RainMan.settingsStore.isAutoplayEnabled && !this.quickReelsStop)) {
-                                setTimeout(() => {
-                                    this.skipScatterDelay?.();
-                                    this.skipScatterDelay = null;
-                                }, RainMan.config.durationOfActions.scatterDelayerTime);
+                                this.scheduleMysteryDelay(configureSpinAction, RainMan.config.durationOfActions.scatterDelayerTime);
                             }
+                            await this.currentColumn.changeVelocity(Speed.STOP, RainMan.config.durationOfActions.scatterSpinningTime, frame);
                         }
-                        await this.currentColumn.changeVelocity(Speed.STOP, RainMan.config.durationOfActions.scatterSpinningTime, frame);
                         frame.destroyMysteryFx();
                     }
                     if (!indexesOfReelsToExtendSpinningTime.includes(index)) {
@@ -170,10 +178,60 @@ export class AbstractColumnsContainer extends Container {
                 this.currentColumn = null;
             }
             await Promise.all(this.allColumns.map((column) => column.getStopPromise()));
+            this.clearPendingMysteryDelay();
+            this.mysteryFxGeneration = 0;
+            this.skipRemainingMysteryFxs = false;
             afterSpinResolver();
             resolve();
         });
     }
+    /**
+     * This cancels the timeout, removes the stored delayed action and invalidates
+     * any older timeout callback that might still try to execute later.
+     * @private
+     * @returns {void}
+     */
+    clearPendingMysteryDelay() {
+        this.mysteryFxGeneration += 1;
+        if (this.mysteryDelayTimeout !== null) {
+            clearTimeout(this.mysteryDelayTimeout);
+            this.mysteryDelayTimeout = null;
+        }
+        this.skipScatterDelay = null;
+    }
+    /**
+     * Runs the pending mysteryFx immediately and clears its timeout.
+     * @private
+     * @returns {void}
+     */
+    executePendingMysteryFx() {
+        const pendingMysteryDelay = this.skipScatterDelay;
+        this.clearPendingMysteryDelay();
+        pendingMysteryDelay?.();
+    }
+    /**
+     * The callback is bound to the current generation so an old timeout from
+     * a previous spin cannot execute after a newer mystery delay was scheduled.
+     * @private
+     * @param {PlayableAction} action delayed reel configuration action
+     * @param {number} delay time in milliseconds before the action should run
+     * @returns {void}
+     */
+    scheduleMysteryDelay(action, delay) {
+        this.clearPendingMysteryDelay();
+        // Store new mysteryFx action to be available in executePendingMysteryFx
+        this.skipScatterDelay = action;
+        const mysteryFxGeneration = this.mysteryFxGeneration;
+        this.mysteryDelayTimeout = setTimeout(() => {
+            if (mysteryFxGeneration !== this.mysteryFxGeneration) {
+                return;
+            }
+            this.mysteryDelayTimeout = null;
+            this.skipScatterDelay = null;
+            this.mysteryFxGeneration += 1;
+            action();
+        }, delay);
+    }
     /**
      * Function for playing all streaks
      * @public

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./AbstractBuyFreeSpins";
 export * from "./AbstractFreeSpinContainer";
 export * from "./AbstractIntroScreen";
 export * from "./AbstractMainContainer";

package/dist/components/index.js

@@ -1,3 +1,4 @@
+export * from "./AbstractBuyFreeSpins";
 export * from "./AbstractFreeSpinContainer";
 export * from "./AbstractIntroScreen";
 export * from "./AbstractMainContainer";

package/dist/controllers/AbstractController.d.ts

@@ -64,6 +64,7 @@ export declare abstract class AbstractController<T> {
     protected resolveSuperBonusWin?: () => void;
     clearMobileSpinTimeout: (() => void) | undefined;
     protected initData: InitDataInterface;
+    protected shouldPlayNextSpin: boolean;
     protected _lastWinAmount: number;
     protected constructor(buttonsEventManager: ButtonsEventManager, mainContainer: AbstractMainContainer, connection: SubscribableConnectionWrapper);
     /**
@@ -262,6 +263,7 @@ export declare abstract class AbstractController<T> {
      * @returns {void}
      */
     protected throttledSpin(): void;
+    protected prepareBoughtFreeSpins(): void;
     /**
      * This function is responsible for getting the number of free spins bought
      * @private
@@ -366,7 +368,7 @@ export declare abstract class AbstractController<T> {
      * @param {number} winAmount amount from gamble game
      * @returns {void}
      */
-    protected gambleGameEnabler(winAmount: number): void;
+    gambleGameEnabler(winAmount: number): void;
     /**
      * Function for spin logic of the game
      * This function is responsible for:

package/dist/controllers/AbstractController.js

@@ -64,6 +64,7 @@ export class AbstractController {
     resolveSuperBonusWin;
     clearMobileSpinTimeout;
     initData;
+    shouldPlayNextSpin = false;
     _lastWinAmount = 0;
     constructor(buttonsEventManager, mainContainer, connection) {
         this.buttonsEventManager = buttonsEventManager;
@@ -102,6 +103,7 @@ export class AbstractController {
         RainMan.settingsStore.setRoundNumber(this.roundNumber);
         RainMan.settingsStore.initPaytableMap(initData);
         RainMan.globals.throttledSpin = this.throttledSpin.bind(this);
+        RainMan.globals.prepareBoughtFreeSpins = this.prepareBoughtFreeSpins.bind(this);
         RainMan.settingsStore.useTakeAction = this.useTakeAction.bind(this);
         this.connection.subscribeForConfigChanges(this.reinitializeUserBalanceData.bind(this));
         this.uiController.updateBet("first");
@@ -429,12 +431,19 @@ export class AbstractController {
         const refreshButton = RainMan.componentRegistry.get(RefreshButton.registryName);
         this.clearMobileSpinTimeout = () => {
             this.buttonHeldSince = 0;
-            this.columnsContainer.clearQuickReelsStop();
+            const isSpinning = this.gamePhase === gamePhases.SPINNING ||
+                this.gamePhase === gamePhases.CONFIGURING_SPIN ||
+                this.gamePhase === gamePhases.DATA_FETCH;
+            if (!isSpinning) {
+                this.columnsContainer.clearQuickReelsStop();
+            }
             if (this.mobileSpinTimeout) {
                 clearInterval(this.mobileSpinTimeout);
                 this.quickStopController.setQuickStopCounterLock(false);
                 this.mobileSpinTimeout = null;
-                this.columnsContainer.clearQuickReelsStop();
+                if (!isSpinning) {
+                    this.columnsContainer.clearQuickReelsStop();
+                }
             }
             if (this.mobileSpinDelay) {
                 clearTimeout(this.mobileSpinDelay);
@@ -720,6 +729,9 @@ export class AbstractController {
             this.mainContainer.freeSpinSummary.emit("pointerdown", new PIXI.FederatedPointerEvent("pointerdown"));
             return;
         }
+        if (this.gamePhase === gamePhases.HANDLING_ACTIONS) {
+            this.shouldPlayNextSpin = true;
+        }
         if (this.mainContainer.mysteryWinVisibleFor) {
             RainMan.componentRegistry.get(COMPONENTS.mysteryWin).stopUpdate();
         }
@@ -779,12 +791,7 @@ export class AbstractController {
             this.quickStopController.handleInvokingSpeedPopup();
             return;
         }
-        if (RainMan.settingsStore.isFreeSpinsBought) {
-            this.uiController.totalNumberOfFreeSpins += this.getBoughtNumberOfFreeSpins();
-            RainMan.componentRegistry.getIfExists(FreeSpinButton.registryName)?.setInteractivity(false);
-            RainMan.settingsStore.setIsFreeSpinBought(false);
-            return;
-        }
+        this.prepareBoughtFreeSpins();
         if (RainMan.settingsStore.isAutoplayEnabled && !this.spinning) {
             this.changeGamePhase(gamePhases.IDLE);
             this.spin();
@@ -799,6 +806,14 @@ export class AbstractController {
         }
         this.spinThrottlerTimeout = setTimeout(() => (this.spinThrottlerTimeout = null), 100);
     }
+    prepareBoughtFreeSpins() {
+        if (!RainMan.settingsStore.isFreeSpinsBought) {
+            return;
+        }
+        this.uiController.totalNumberOfFreeSpins += this.getBoughtNumberOfFreeSpins();
+        RainMan.componentRegistry.getIfExists(FreeSpinButton.registryName)?.setInteractivity(false);
+        RainMan.settingsStore.setIsFreeSpinBought(false);
+    }
     /**
      * This function is responsible for getting the number of free spins bought
      * @private
@@ -859,6 +874,12 @@ export class AbstractController {
             logInfo("Take action can't be performed");
             return;
         }
+        if (this.currentlyPlayedAction !== undefined) {
+            this.changeGamePhase(gamePhases.STOPPING_HANDLING_ACTIONS);
+            this.stopPlayingSymbolsStreak();
+            await this.currentlyPlayedAction;
+        }
+        await Promise.all(this.uiController.promisesToSetBalances);
         const takeData = await window.connectionWrapper.sendTakeAction(RainMan.settingsStore.roundNumber);
         if (takeData.status.code === 200) {
             RainMan.settingsStore.isTakeActionAvailable = false;
@@ -974,14 +995,10 @@ export class AbstractController {
      */
     gambleGameEnabler(winAmount) {
         if (RainMan.componentRegistry.has(BUTTONS.gamble) && RainMan.settingsStore.isGambleGameAvailable) {
-            RainMan.componentRegistry
-                .get(BUTTONS.gamble)
-                .flipDisabledFlag(RainMan.settingsStore.isFreeSpinsPlayEnabled || winAmount === 0);
+            RainMan.componentRegistry.get(BUTTONS.gamble).flipDisabledFlag(winAmount === 0);
         }
         if (RainMan.componentRegistry.has(BUTTONS.take) && RainMan.settingsStore.isTakeActionAvailable) {
-            RainMan.componentRegistry
-                .get(BUTTONS.take)
-                .flipDisabledFlag(RainMan.settingsStore.isFreeSpinsPlayEnabled || winAmount === 0);
+            RainMan.componentRegistry.get(BUTTONS.take).flipDisabledFlag(winAmount === 0);
         }
     }
     /**
@@ -1060,7 +1077,7 @@ export class AbstractController {
         const availableFreeSpins = spinLogic.availableFreeSpins;
         const availableFreeSpinsIncreased = availableFreeSpins > RainMan.settingsStore.howManyFreeSpinsLeft;
         this.hideFreeSpinsMessageBox = availableFreeSpinsIncreased;
-        if (this._lastWinAmount !== 0) {
+        if (this._lastWinAmount !== 0 && !(availableFreeSpins > 0)) {
             RainMan.settingsStore.isTakeActionAvailable = true;
             RainMan.settingsStore.isGambleGameAvailable = true;
         }
@@ -1199,6 +1216,24 @@ export class AbstractController {
         }
         RainMan.settingsStore.setIsPlayingAnyAction(false);
         this.columnsContainer.setInteractivityForSymbols(true);
+        const shouldStartNextSpin = this.shouldPlayNextSpin &&
+            !RainMan.settingsStore.isAutoplayEnabled &&
+            !RainMan.settingsStore.isFreeSpinsPlayEnabled &&
+            !this.invokeFreeSpinPlateAfterWin &&
+            !this.invokeFreeSpinSummaryPlateAfterWin &&
+            !RainMan.globals.isSuperBonusGameEnabled;
+        this.shouldPlayNextSpin = false;
+        if (shouldStartNextSpin) {
+            setTimeout(() => {
+                if (!this.spinning &&
+                    this.gamePhase !== gamePhases.SPINNING &&
+                    this.gamePhase !== gamePhases.DATA_FETCH &&
+                    this.gamePhase !== gamePhases.CONFIGURING_SPIN &&
+                    !RainMan.settingsStore.isPlayingAnyAction) {
+                    this.throttledSpin();
+                }
+            }, 0);
+        }
     }
     /**
      *  Function for invoking free spin plate, invoked in mainContainer
@@ -1227,7 +1262,6 @@ export class AbstractController {
      */
     async handleFreeSpinSummaryPlateInvocation() {
         await this.buttonsEventManager.disableButtonsForAction(async () => {
-            this.uiController.updateDisplayedBalance(this.uiController.totalFreeSpinWinAmount);
             this.uiController.messageBox.hideFreeSpinText();
             this.uiController.messageBox.hideCurrentWinText();
             await this.mainContainer.invokeFreeSpinSummary(this.uiController.totalNumberOfFreeSpins, this.uiController.totalFreeSpinWinAmount);
@@ -1235,7 +1269,6 @@ export class AbstractController {
             this.uiController.resetTotalFreeSpinWinAmount();
             this.changeGamePhase(gamePhases.IDLE);
         });
-        this.uiController.currentBalance = RainMan.settingsStore.balanceAfterSpin;
         RainMan.settingsStore.resetTotalNumberOfFreeSpins();
         RainMan.settingsStore.resetFreeSpinNumberBought();
         this.changeGamePhase(gamePhases.IDLE);

package/dist/stores/SettingsStore.d.ts

@@ -62,6 +62,7 @@ export declare class SettingsStore {
     closeOtherModals?: (layerId: string) => void;
     closeCurrentlyOpenModal?: () => void;
     handleInvokeFreeSpinPlate?: (freeSpinAmount: number, isAdditionalFreeSpin: boolean) => Promise<void>;
+    handleBuyFreeSpinPopupActivation?: () => void;
     increaseBet?: () => void;
     decreaseBet?: () => void;
     enableButtons?: () => void;
@@ -387,6 +388,13 @@ export declare class SettingsStore {
      * @returns {void}
      */
     setHandleInvokeFreeSpinPlate(handleInvokeFreeSpinPlate: (freeSpinAmount: number, isAdditionalFreeSpin: boolean) => Promise<void>): void;
+    /**
+     * Set the callback for invoking the free spin plate
+     * @param handleBuyFreeSpinPopupActivation
+     * @public
+     * @returns {void}
+     */
+    setHandleBuyFreeSpinPopupActivatio(handleBuyFreeSpinPopupActivation: () => void): void;
     /**
      * Reset the number of free spins bought
      * @public

package/dist/stores/SettingsStore.js

@@ -66,6 +66,7 @@ export class SettingsStore {
     closeOtherModals;
     closeCurrentlyOpenModal;
     handleInvokeFreeSpinPlate;
+    handleBuyFreeSpinPopupActivation;
     increaseBet;
     decreaseBet;
     enableButtons;
@@ -641,6 +642,15 @@ export class SettingsStore {
     setHandleInvokeFreeSpinPlate(handleInvokeFreeSpinPlate) {
         this.handleInvokeFreeSpinPlate = handleInvokeFreeSpinPlate;
     }
+    /**
+     * Set the callback for invoking the free spin plate
+     * @param handleBuyFreeSpinPopupActivation
+     * @public
+     * @returns {void}
+     */
+    setHandleBuyFreeSpinPopupActivatio(handleBuyFreeSpinPopupActivation) {
+        this.handleBuyFreeSpinPopupActivation = handleBuyFreeSpinPopupActivation;
+    }
     /**
      * Reset the number of free spins bought
      * @public

package/package.json

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