pixi-rainman-game-engine 0.3.28 → 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/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/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/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.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);

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