pixi-rainman-game-engine 0.3.27 → 0.3.29

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,181 @@
+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();
+            RainMan.settingsStore.handleModalInvocation?.("freeSpin");
+            RainMan.settingsStore.handleInvokeFreeSpinPlate?.(option.amount, false);
+            RainMan.settingsStore.disableKeyboardShortcuts = false;
+        }
+        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

@@ -1,11 +1,17 @@
 import { Container, Sprite, Text, TextStyle, Texture } from "pixi.js";
-import { Logo } from "../common";
+import { IntroLogo } from "../common";
 import { IntroContinueButton } from "./IntroContinueButton";
 import { IntroDotButton } from "./IntroDotButton";
 import { IntroPageData } from "./IntroPageData";
 /**
  * Abstract intro screen shown between loading and gameplay.
  * Each game subclasses this and provides assets + page definitions as properties.
+ * Properly named assets:
+ * - bg - `bg.png` and `bg-mobile.png`
+ * - introFrame - `intro-frame.png` and `intro-frame-mobile.png`
+ * - interactable - 'intro-continue-n.png`, `intro-continue-h.png`, `intro-continue-c.png' for continue button, "dot-off" states, "dot-on", "check-box", "checkbox-tick" and `dot-shadow.png` for dot shadow (optional)
+ * - logo - `intro-logo.png` and `intro-logo-mobile.png`
+ * - screens-mobile and screens-desktop - defined in pages property of the class extending AbstractIntroScreen
  * @abstract
  * @class AbstractIntroScreen
  * @typedef {AbstractIntroScreen}
@@ -21,7 +27,7 @@ export declare abstract class AbstractIntroScreen extends Container {
         frame: Texture;
         tick: Texture;
     };
-    protected abstract logo: Logo;
+    protected abstract logo: IntroLogo;
     protected abstract pages: IntroPageData[];
     protected abstract pageTextStyle: TextStyle;
     protected checkboxLabel: Text;
@@ -29,6 +35,7 @@ export declare abstract class AbstractIntroScreen extends Container {
     protected checkboxTick: Sprite;
     protected continueButton: IntroContinueButton;
     protected dots: IntroDotButton[];
+    protected dotShadow?: Sprite;
     protected frameImage: Sprite;
     protected pageImage: Sprite;
     protected pageText: Text;
@@ -55,6 +62,12 @@ export declare abstract class AbstractIntroScreen extends Container {
     protected showPage(index: number): void;
     private updateFade;
     private cleanup;
+    /**
+     * Resizes dot shadow width to match all dots and centers it on them.
+     * Call this in positionDots() after positioning the dots.
+     */
+    protected positionDotShadow(): void;
+    private createDotShadow;
     private createDots;
     private navigatePage;
     private handleContinue;

package/dist/components/AbstractIntroScreen/AbstractIntroScreen.js

@@ -3,12 +3,18 @@ import { Container, Sprite, Text, Texture, Ticker } from "pixi.js";
 import { UXLayer } from "../../layers";
 import { getFromLocalStorage, LOCAL_STORAGE, setToLocalStorage } from "../../localStorage";
 import { RainMan } from "../../Rainman";
-import { getDeviceOrientation, getTexture, scaleToParent } from "../../utils";
+import { getDeviceOrientation, getTexture, getTextureSafely, scaleToParent } from "../../utils";
 import { IntroContinueButton } from "./IntroContinueButton";
 import { IntroDotButton } from "./IntroDotButton";
 /**
  * Abstract intro screen shown between loading and gameplay.
  * Each game subclasses this and provides assets + page definitions as properties.
+ * Properly named assets:
+ * - bg - `bg.png` and `bg-mobile.png`
+ * - introFrame - `intro-frame.png` and `intro-frame-mobile.png`
+ * - interactable - 'intro-continue-n.png`, `intro-continue-h.png`, `intro-continue-c.png' for continue button, "dot-off" states, "dot-on", "check-box", "checkbox-tick" and `dot-shadow.png` for dot shadow (optional)
+ * - logo - `intro-logo.png` and `intro-logo-mobile.png`
+ * - screens-mobile and screens-desktop - defined in pages property of the class extending AbstractIntroScreen
  * @abstract
  * @class AbstractIntroScreen
  * @typedef {AbstractIntroScreen}
@@ -23,6 +29,7 @@ export class AbstractIntroScreen extends Container {
     checkboxTick;
     continueButton;
     dots = [];
+    dotShadow;
     frameImage;
     pageImage;
     pageText;
@@ -49,6 +56,7 @@ export class AbstractIntroScreen extends Container {
             this.handleContinue();
         });
         this.createDots();
+        this.createDotShadow();
         this.checkboxSprite = new Sprite(this.checkboxTextures.frame);
         this.checkboxSprite.eventMode = "static";
         this.checkboxSprite.cursor = "pointer";
@@ -106,6 +114,8 @@ export class AbstractIntroScreen extends Container {
         this.addChild(this.checkboxSprite);
         this.addChild(this.checkboxTick);
         this.addChild(this.checkboxLabel);
+        if (this.dotShadow)
+            this.addChild(this.dotShadow);
         this.dots.forEach((dot) => this.addChild(dot));
         this.positionPageImage();
         this.positionLogo();
@@ -113,6 +123,7 @@ export class AbstractIntroScreen extends Container {
         this.positionCheckbox();
         this.positionContinueButton();
         this.positionText();
+        this.positionDotShadow();
         this.frameImage.x = this.pageImage.x;
         this.frameImage.y = this.pageImage.y;
         this.frameImage.width = this.pageImage.width;
@@ -138,11 +149,35 @@ export class AbstractIntroScreen extends Container {
         this.fadeTween?.update();
     }
     cleanup() {
-        Ticker.shared.remove(this.updateFade, this);
         Ticker.shared.remove(this.updateFade, this);
         RainMan.app.renderer.off("resize", this.resizeHandler);
         this.destroy({ children: true });
     }
+    /**
+     * Resizes dot shadow width to match all dots and centers it on them.
+     * Call this in positionDots() after positioning the dots.
+     */
+    positionDotShadow() {
+        if (!this.dotShadow || this.dots.length === 0)
+            return;
+        const firstDot = this.dots[0];
+        const lastDot = this.dots[this.dots.length - 1];
+        const dotsSpan = lastDot.x - firstDot.x;
+        this.dotShadow.scale.set(firstDot.scale.x);
+        this.dotShadow.width = dotsSpan + firstDot.width;
+        if (getDeviceOrientation().includes("mobile")) {
+            this.dotShadow.width = dotsSpan;
+        }
+        this.dotShadow.x = (firstDot.x + lastDot.x) / 2;
+        this.dotShadow.y = firstDot.y;
+    }
+    createDotShadow() {
+        const texture = getTextureSafely("dot-shadow.png");
+        if (!texture)
+            return;
+        this.dotShadow = new Sprite(texture);
+        this.dotShadow.anchor.set(0.5);
+    }
     createDots() {
         this.dots = [];
         for (let i = 0; i < this.pages.length; i++) {

package/dist/components/AbstractIntroScreen/IntroContinueButton.js

@@ -17,5 +17,6 @@ export class IntroContinueButton extends BaseButton {
             [ButtonStates.CLICKED]: getTexture("intro-continue-c.png")
         };
         super(IntroContinueButton.registryName, textureMap);
+        this.cursor = "pointer";
     }
 }

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
@@ -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/common/IntroLogo.d.ts

@@ -0,0 +1,16 @@
+import { Container } from "pixi.js";
+/**
+ * Static intro logo that switches between desktop and mobile sprites based on orientation.
+ * Uses "intro-logo" for PC/landscape and "intro-logo-mobile" for portrait.
+ * @class IntroLogo
+ * @augments {Container}
+ */
+export declare class IntroLogo extends Container {
+    private desktopTextureName;
+    private mobileTextureName;
+    private maxScale;
+    private desktopSprite;
+    private mobileSprite;
+    constructor(desktopTextureName: string, mobileTextureName: string, maxScale?: number);
+    resize(): void;
+}

package/dist/components/common/IntroLogo.js

@@ -0,0 +1,35 @@
+import { Container, Sprite } from "pixi.js";
+import { RainMan } from "../../Rainman";
+import { getDeviceOrientation, getTexture, globalMinRatio } from "../../utils";
+/**
+ * Static intro logo that switches between desktop and mobile sprites based on orientation.
+ * Uses "intro-logo" for PC/landscape and "intro-logo-mobile" for portrait.
+ * @class IntroLogo
+ * @augments {Container}
+ */
+export class IntroLogo extends Container {
+    desktopTextureName;
+    mobileTextureName;
+    maxScale;
+    desktopSprite;
+    mobileSprite;
+    constructor(desktopTextureName, mobileTextureName, maxScale = 1.5) {
+        super();
+        this.desktopTextureName = desktopTextureName;
+        this.mobileTextureName = mobileTextureName;
+        this.maxScale = maxScale;
+        this.desktopSprite = new Sprite(getTexture(this.desktopTextureName));
+        this.desktopSprite.anchor.set(0.5);
+        this.mobileSprite = new Sprite(getTexture(this.mobileTextureName));
+        this.mobileSprite.anchor.set(0.5);
+        this.addChild(this.desktopSprite, this.mobileSprite);
+        this.resize();
+    }
+    resize() {
+        const isPortrait = getDeviceOrientation() === "mobile-portrait";
+        this.desktopSprite.visible = !isPortrait;
+        this.mobileSprite.visible = isPortrait;
+        this.scale.set(Math.min(this.maxScale, globalMinRatio()));
+        this.x = RainMan.app.screen.width / 2;
+    }
+}

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

@@ -2,6 +2,7 @@ export * from "./AnimatedBackground";
 export * from "./AnimatedNumber";
 export * from "./Background";
 export * from "./FreeSpinButton";
+export * from "./IntroLogo";
 export * from "./Logo";
 export * from "./LogoStatic";
 export * from "./ResponsiveComponent";

package/dist/components/common/index.js

@@ -2,6 +2,7 @@ export * from "./AnimatedBackground";
 export * from "./AnimatedNumber";
 export * from "./Background";
 export * from "./FreeSpinButton";
+export * from "./IntroLogo";
 export * from "./Logo";
 export * from "./LogoStatic";
 export * from "./ResponsiveComponent";

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.js

@@ -150,14 +150,17 @@ export class AbstractColumnsContainer extends Container {
                         frame.invokeMysteryFx(this.currentColumn.x, this.currentColumn.y);
                         this.skipScatterDelay = configureSpinAction;
                         await this.currentColumn.speedUpForMysterySpin(100, 1500);
-                        if (!RainMan.settingsStore.isAutoplayEnabled ||
-                            (RainMan.settingsStore.isAutoplayEnabled && !this.quickReelsStop)) {
-                            setTimeout(() => {
-                                this.skipScatterDelay?.();
-                                this.skipScatterDelay = null;
-                            }, RainMan.config.durationOfActions.scatterDelayerTime);
+                        if (!this.quickReelsStop) {
+                            if (!RainMan.settingsStore.isAutoplayEnabled ||
+                                (RainMan.settingsStore.isAutoplayEnabled && !this.quickReelsStop)) {
+                                setTimeout(() => {
+                                    this.skipScatterDelay?.();
+                                    this.skipScatterDelay = null;
+                                }, RainMan.config.durationOfActions.scatterDelayerTime);
+                            }
                         }
                         await this.currentColumn.changeVelocity(Speed.STOP, RainMan.config.durationOfActions.scatterSpinningTime, frame);
+                        frame.destroyMysteryFx();
                     }
                     if (!indexesOfReelsToExtendSpinningTime.includes(index)) {
                         await configureSpinAction();

package/dist/components/frame/AbstractFrame.js

@@ -59,6 +59,8 @@ export class AbstractFrame extends ResumableContainer {
         if (this.mysteryFxHighlight) {
             SoundManager.pause(SoundTracks.mysteryFxLoop);
             this.removeChild(this.mysteryFxHighlight);
+            this.mysteryFxHighlight.destroy();
+            this.mysteryFxHighlight = null;
         }
         this.mysteryFxCoordinates = { x, y };
         const spineName = this.mysteryFxConfig.mobileSpineName && getDeviceOrientation() === "mobile-portrait"
@@ -71,8 +73,10 @@ export class AbstractFrame extends ResumableContainer {
         this.repositionMysteryFx(x, y);
         SoundManager.play(SoundTracks.mysteryFxLoop);
         this.mysteryFxHighlight.state.setAnimation(0, this.mysteryFxConfig.startAnimationName || this.mysteryFxConfig.loopAnimationName, false);
-        this.mysteryFxHighlight.state.addListener({
-            complete: () => this.mysteryFxHighlight?.state.setAnimation(0, this.mysteryFxConfig.loopAnimationName, true)
+        const spineInstance = this.mysteryFxHighlight;
+        const loopAnimationName = this.mysteryFxConfig.loopAnimationName;
+        spineInstance.state.addListener({
+            complete: () => spineInstance.state.setAnimation(0, loopAnimationName, true)
         });
         this.addChild(this.mysteryFxHighlight);
     }

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/components/symbols/AbstractSymbolsColumn.js

@@ -142,6 +142,10 @@ export class AbstractSymbolsColumn extends Container {
      * @returns {Promise<void>} promise that resolves when the speed change is complete
      */
     async changeVelocity(velocity, duration, frame) {
+        if (this.tween !== null) {
+            this.tween.stop();
+            this.tween = null;
+        }
         await new Promise((resolve) => {
             this.tween = new TWEEN.Tween({ velocity: velocity })
                 .onUpdate((value) => {
@@ -152,7 +156,7 @@ export class AbstractSymbolsColumn extends Container {
                 .start()
                 .onComplete(async () => {
                 this.tween = null;
-                if (frame) {
+                if (frame && !this.skipHidingMysteryFx) {
                     frame.hideMysteryFx();
                     frame.destroyMysteryFx();
                 }
@@ -161,7 +165,7 @@ export class AbstractSymbolsColumn extends Container {
             })
                 .onStop(async () => {
                 this.tween = null;
-                if (frame) {
+                if (frame && !this.skipHidingMysteryFx) {
                     frame.hideMysteryFx();
                     frame.destroyMysteryFx();
                 }

package/dist/controllers/AbstractController.js

@@ -429,12 +429,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);
@@ -773,6 +780,7 @@ export class AbstractController {
         if (this.gamePhase === gamePhases.DATA_FETCH ||
             this.gamePhase === gamePhases.SPINNING ||
             this.gamePhase === gamePhases.CONFIGURING_SPIN) {
+            this.columnsContainer.enableQuickReelsStop();
             this.isSpinThrottled = true;
             this.quickStopController.handleResetCounter(this.spinThrottlerTimeout !== null);
             this.quickStopController.handleInvokingSpeedPopup();

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.27",
+    "version": "0.3.29",
     "description": "This repository contains all of the mechanics that used in rainman games.",
     "main": "./dist/index.js",
     "module": "./dist/index.js",