pixi-rainman-game-engine 0.1.9 → 0.1.11

package/dist/ComponentRegistry/types.d.ts

@@ -1,4 +1,4 @@
-import { AbstractColumnsContainer, AbstractFrame, AbstractInnerFrame, AutoplayButton, Background, BaseButton, BUTTONS, COMPONENTS, FreeSpinBox, InfoButton, MessageBox, MoreButton, NegButton, PlusButton, RefreshButton, SpeedControlButton, StylefulUpdatableText, UpdatableTextComponent, UpdatableValueComponent, VolumeButton } from "../components";
+import { AbstractColumnsContainer, AbstractFrame, AbstractInnerFrame, AutoplayButton, Background, BaseButton, BUTTONS, COMPONENTS, FreeSpinButton, InfoButton, MessageBox, MoreButton, NegButton, PlusButton, RefreshButton, SpeedControlButton, StylefulUpdatableText, UpdatableTextComponent, UpdatableValueComponent, VolumeButton } from "../components";
 export interface RegistryMap {
     [MessageBox.autoSpinTextRegistryName]: UpdatableValueComponent;
     [MessageBox.currentWinTextRegistryName]: UpdatableTextComponent;
@@ -8,7 +8,7 @@ export interface RegistryMap {
     [Background.registryName]: Background;
     [VolumeButton.registryName]: VolumeButton;
     [AutoplayButton.registryName]: AutoplayButton;
-    [FreeSpinBox.registryName]?: FreeSpinBox;
+    [FreeSpinButton.registryName]?: FreeSpinButton;
     [AbstractFrame.registryName]: AbstractFrame;
     [AbstractInnerFrame.registryName]: AbstractInnerFrame;
     [AbstractColumnsContainer.registryName]: AbstractColumnsContainer;

package/dist/ComponentRegistry/types.js

@@ -1 +1 @@
-import { AbstractColumnsContainer, AbstractFrame, AbstractInnerFrame, AutoplayButton, Background, BUTTONS, COMPONENTS, FreeSpinBox, InfoButton, MessageBox, MoreButton, NegButton, PlusButton, RefreshButton, SpeedControlButton, VolumeButton, } from "../components";
+import { AbstractColumnsContainer, AbstractFrame, AbstractInnerFrame, AutoplayButton, Background, BUTTONS, COMPONENTS, FreeSpinButton, InfoButton, MessageBox, MoreButton, NegButton, PlusButton, RefreshButton, SpeedControlButton, VolumeButton, } from "../components";

package/dist/DescribedPlayableAction/DescribedPlayableAction.d.ts

@@ -3,6 +3,7 @@ export declare class DescribedPlayableAction<T> {
     readonly type: T;
     action: PlayableAction;
     winAmount: Nullable<number>;
+    skipLooping: boolean;
     isFirstStreak: boolean;
-    constructor(type: T, action: PlayableAction, winAmount?: Nullable<number>);
+    constructor(type: T, action: PlayableAction, winAmount?: Nullable<number>, skipLooping?: boolean);
 }

package/dist/DescribedPlayableAction/DescribedPlayableAction.js

@@ -2,10 +2,12 @@ export class DescribedPlayableAction {
     type;
     action;
     winAmount;
+    skipLooping;
     isFirstStreak = false;
-    constructor(type, action, winAmount = null) {
+    constructor(type, action, winAmount = null, skipLooping = false) {
         this.type = type;
         this.action = action;
         this.winAmount = winAmount;
+        this.skipLooping = skipLooping;
     }
 }

package/dist/Rainman/Rainman.d.ts

@@ -1,6 +1,6 @@
 import "../components/dictionary/i18n";
 import { Application } from "pixi.js";
-import { SpinLogicFactory, SymbolIds, WinTypeIds } from "../application";
+import { SymbolIds, WinTypeIds } from "../application";
 import { ComponentRegistry } from "../ComponentRegistry";
 import { SettingsStore } from "../stores";
 import { AppConfig, Globals, OptionalAppConfig, RequiredAppConfig } from "./types";
@@ -11,7 +11,6 @@ export declare class RainMan {
     static winTypeIds: WinTypeIds;
     static settingsStore: SettingsStore;
     static componentRegistry: ComponentRegistry;
-    static spinLogicFactory: SpinLogicFactory;
     static globals: Globals;
-    constructor(app: Application, config: AppConfig, symbolIds: SymbolIds, winTypeIds: WinTypeIds, spinLogicFactory: SpinLogicFactory);
+    constructor(app: Application, config: AppConfig, symbolIds: SymbolIds, winTypeIds: WinTypeIds);
 }

package/dist/Rainman/Rainman.js

@@ -11,16 +11,14 @@ export class RainMan {
     static winTypeIds;
     static settingsStore;
     static componentRegistry;
-    static spinLogicFactory;
     static globals;
-    constructor(app, config, symbolIds, winTypeIds, spinLogicFactory) {
+    constructor(app, config, symbolIds, winTypeIds) {
         RainMan.app = app;
         RainMan.config = merge(defaultAppConfig, config);
         RainMan.symbolIds = symbolIds;
         RainMan.winTypeIds = winTypeIds;
         RainMan.settingsStore = settingStore;
         RainMan.componentRegistry = new ComponentRegistry(app);
-        RainMan.spinLogicFactory = spinLogicFactory;
         RainMan.globals = {
             currency: Currencies["USD"],
         };

package/dist/Rainman/appConfig.js

@@ -13,6 +13,7 @@ export const defaultAppConfig = {
     mobileFontSize: 45,
     updatableSpineContainerFontSize: 50,
     updatableTextValueColor: new Color(0xffffff).toHex(),
+    autoplayGlowColor: new Color(0xff3000).toNumber(),
     fontFace: ["HelveticaNeueLTStd"],
     winLineIndicatorSymbolScale: 0.75,
     durationOfActions: {
@@ -21,7 +22,7 @@ export const defaultAppConfig = {
         timeToSpeedUp: 200,
         timeToSlowDown: 10,
         symbolDropDownTime: 500,
-        wiggleTweenDuration: 400,
+        wiggleTweenDuration: 1000,
         balloonFlyUpTime: 500,
         timeToSetResults: 10,
         bigWinDuration: 2000,
@@ -43,5 +44,6 @@ export const defaultAppConfig = {
     },
     constants: {
         bigWinMultiplier: 30,
+        bigWinTextOffset: 0,
     },
 };

package/dist/Rainman/types.d.ts

@@ -8,7 +8,6 @@ export type RequiredAppConfig = {
     numberOfColumns: number;
     numberOfRows: number;
     fontColor: string;
-    autoplayGlowColor: number;
 };
 export type OptionalAppConfig = {
     gameWidth: number;
@@ -21,6 +20,7 @@ export type OptionalAppConfig = {
     updatableTextValueColor: string;
     fontFace: string[];
     mobileFontFace?: string[];
+    autoplayGlowColor: number;
     winLineIndicatorSymbolScale: number;
     durationOfActions: {
         eachColumnsSpinDelay: number[];
@@ -50,9 +50,11 @@ export type OptionalAppConfig = {
     };
     constants: {
         bigWinMultiplier: number;
+        bigWinTextOffset: number;
     };
 };
 export type AppConfig = RequiredAppConfig & DeepPartial<OptionalAppConfig>;
 export interface Globals {
     currency: Currency;
+    throttledSpin?: () => void;
 }

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

@@ -1,6 +1,7 @@
 import i18next from "i18next";
 import { upperFirst } from "lodash";
 import React from "react";
+import { RainMan } from "../../../Rainman";
 import { UI_ITEMS } from "../../../utils";
 import { useStores } from "../../hooks";
 import { closeModal } from "../CloseModalButton";
@@ -22,6 +23,7 @@ export const OptionButton = ({ option, currency, setMessage }) => {
             settingStore.setIsFreeSpinBought(true, data);
             settingStore.setRoundNumber(data.getRawData().round_number);
             settingStore.setFreeSpinNumberBought(option.amount);
+            RainMan.globals.throttledSpin?.();
             closeModal(UI_ITEMS.freeSpin);
         }
         catch (err) {

package/dist/application/ApiConfig/ApiConfig.js

@@ -47,10 +47,11 @@ export class ApiConfig {
         return {
             action: spinLogicResponse.action,
             balance: spinLogicResponse.balance,
-            availableFreeSpins: spinLogicResponse.available_free_spins,
+            availableFreeSpins: spinLogicResponse.available_free_spins || 0,
             symbolsOnReels: blindsConfiguredByResponse,
             finalBlindsConfiguration: finalSpinPositionOnReels,
             winAmountTotal: spinLogicResponse.win_amount_total,
+            extraData: spinLogicResponse.extra_data || {},
         };
     }
     /**
@@ -61,7 +62,7 @@ export class ApiConfig {
      * @param defaultNumber
      * @returns {string | number}
      */
-    getWinLineNumber(winLineAnimationName, defaultNumber = "unknown") {
+    getWinLineNumber(winLineAnimationName, defaultNumber = "") {
         return this.streakMap.get(winLineAnimationName) ?? defaultNumber;
     }
     /**

package/dist/application/ButtonsEventManager/ButtonsEventManager.js

@@ -1,6 +1,6 @@
 import i18n from "i18next";
 import { sample } from "lodash";
-import { AutoplayButton, Background, BUTTONS, COMPONENTS, FreeSpinBox, MessageBox, SpeedControlButton, VolumeButton, } from "../../components";
+import { AutoplayButton, Background, BUTTONS, COMPONENTS, FreeSpinButton, MessageBox, SpeedControlButton, VolumeButton, } from "../../components";
 import { RainMan } from "../../Rainman";
 import { allUiItems, hideLayerIfPresent, UI_ITEMS } from "../../utils";
 import { SPEED_LEVELS } from "../SpeedState";
@@ -141,7 +141,7 @@ export class ButtonsEventManager {
      */
     initFreeSpinModal() {
         RainMan.componentRegistry
-            .getIfExists(FreeSpinBox.registryName)
+            .getIfExists(FreeSpinButton.registryName)
             ?.setOnClick(() => this.handleModalInvocation(UI_ITEMS.freeSpin));
     }
     /**

package/dist/application/SpinLogic/SpinLogic.d.ts

@@ -1,4 +1,4 @@
-import { SymbolReels, TransformationDetails } from "../../connectivity";
+import { ExtraData, SymbolReels, TransformationDetails } from "../../connectivity";
 import { ApiConfig } from "../ApiConfig";
 import { AdaptedSpinResponse } from "./types";
 import { WinScenarios } from "./WinScenarios";
@@ -18,6 +18,7 @@ export declare class SpinLogic {
     private readonly _hasMysteryWin;
     private readonly _winScenarios;
     private readonly _standaloneTransformations;
+    private readonly _extraData;
     constructor(spinConfig: AdaptedSpinResponse, gameConfig: ApiConfig);
     get postSpinBalance(): number;
     get winTotalAmount(): number;
@@ -28,4 +29,5 @@ export declare class SpinLogic {
     get hasMysteryWin(): boolean;
     get winScenarios(): WinScenarios[];
     get standaloneTransformations(): TransformationDetails[][];
+    get extraData(): ExtraData;
 }

package/dist/application/SpinLogic/SpinLogic.js

@@ -17,6 +17,7 @@ export class SpinLogic {
     _hasMysteryWin;
     _winScenarios;
     _standaloneTransformations;
+    _extraData;
     constructor(spinConfig, gameConfig) {
         const spinLogicReader = new SpinLogicDTO(spinConfig, gameConfig);
         this._postSpinBalance = spinLogicReader.updatedBalance;
@@ -27,6 +28,7 @@ export class SpinLogic {
         this._hasMysteryWin = spinLogicReader.hasMysteryWin;
         this._winScenarios = spinLogicReader.winScenarios;
         this._standaloneTransformations = spinLogicReader.standaloneTransformations;
+        this._extraData = spinLogicReader.extraData;
         logInfo("Spin logic", JSON.parse(JSON.stringify(this)));
     }
     get postSpinBalance() {
@@ -57,4 +59,7 @@ export class SpinLogic {
     get standaloneTransformations() {
         return this._standaloneTransformations;
     }
+    get extraData() {
+        return this._extraData;
+    }
 }

package/dist/application/SpinLogic/SpinLogicDTO.d.ts

@@ -11,6 +11,7 @@ export declare class SpinLogicDTO {
     get totalWonAmount(): number;
     get finalBlindsConfiguration(): SymbolReels;
     get onStopBlindsConfiguration(): SymbolReels;
+    get extraData(): import("../../connectivity").ExtraData;
     get winScenarios(): WinScenarios[];
     get standaloneTransformations(): TransformationDetails[][];
     get hasMysteryWin(): boolean;

package/dist/application/SpinLogic/SpinLogicDTO.js

@@ -38,6 +38,9 @@ export class SpinLogicDTO {
     get onStopBlindsConfiguration() {
         return this.rawData.symbolsOnReels.map((reel) => reel.map((symbol) => this.stringToSymbolId(symbol)));
     }
+    get extraData() {
+        return this.rawData.extraData;
+    }
     get winScenarios() {
         const { results, availableFreeSpins } = this.rawData;
         if (results === undefined)

package/dist/application/SpinLogic/types.d.ts

@@ -1,6 +1,4 @@
-import { SpinDataInterface, SymbolReels, TransformationDetails, WinWithTransformation } from "../../connectivity";
-import { ApiConfig } from "../ApiConfig";
-import { SpinLogic } from "./SpinLogic";
+import { ExtraData, SymbolReels, TransformationDetails, WinWithTransformation } from "../../connectivity";
 export type AdaptedSpinResponse = {
     action: string;
     balance: number;
@@ -10,5 +8,5 @@ export type AdaptedSpinResponse = {
     winAmountTotal: number;
     results: WinWithTransformation[];
     standaloneTransformations: TransformationDetails[][];
+    extraData: ExtraData;
 };
-export type SpinLogicFactory = (spinLogicResponse: SpinDataInterface, gameConfig: ApiConfig) => SpinLogic;

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

@@ -1,11 +1,12 @@
 import { Container, Graphics, Sprite } from "pixi.js";
 import { ButtonsEventManager } from "../../application";
 import { AbstractController } from "../../controllers";
+import { RainMan } from "../../Rainman";
 import { Nullable } from "../../utils";
 import { UpdatableSpineContainer } from "../../winComponents";
 import { AbstractFreeSpinContainer } from "../AbstractFreeSpinContainer";
 import { LeftButtons, LeftButtonsLandscape, LeftButtonsMobile, MiddleButtons, RightButtons, RightButtonsLandscape, RightButtonsMobile } from "../buttons";
-import { FreeSpinBox, Logo, ResponsiveContainer } from "../common";
+import { FreeSpinButton, Logo, ResponsiveContainer } from "../common";
 import { IResizableContainer } from "../common/IResizableContainer";
 import { AbstractFrame } from "../frame";
 import { MessageBox } from "../messageBox";
@@ -19,13 +20,15 @@ export declare abstract class AbstractMainContainer extends Container {
     protected logo: Nullable<Logo>;
     protected abstract background: IResizableContainer;
     protected animatedFront: Nullable<IResizableContainer>;
-    protected freeSpinBox: Nullable<FreeSpinBox>;
+    protected freeSpinButton: Nullable<FreeSpinButton>;
     protected underFramePanel: Nullable<Graphics | Sprite>;
     protected portraitPlayButtons: Nullable<MiddleButtons>;
     protected landscapePlayButtons: Nullable<MiddleButtons>;
     protected abstract leftButtons: ResponsiveContainer;
     protected abstract rightButtons: ResponsiveContainer;
     protected bottomPanel: Nullable<Sprite>;
+    private gambleGame;
+    protected gambleGameSpineName: Nullable<string>;
     protected _freeSpinPlate: Nullable<AbstractFreeSpinContainer>;
     protected _freeSpinSummary: Nullable<AbstractFreeSpinContainer>;
     private _bigWinInvokedAt;
@@ -33,12 +36,12 @@ export declare abstract class AbstractMainContainer extends Container {
     protected abstract _frame: AbstractFrame;
     protected _controller: Nullable<AbstractController<unknown>>;
     protected constructor();
-    protected abstract triggerStoreInitState(): void;
+    protected triggerStoreInitState(...containersWithSpines: typeof RainMan.settingsStore.containersWithSpines): void;
     get freeSpinPlate(): Nullable<AbstractFreeSpinContainer>;
     get freeSpinSummary(): Nullable<AbstractFreeSpinContainer>;
-    protected abstract createFreeSpinPlate(resolver: () => void, freeSpinCount: number, isAdditionalFreeSpin: boolean): AbstractFreeSpinContainer;
+    protected createFreeSpinPlate(_resolver: () => void, _freeSpinCount: number, _isAdditionalFreeSpin: boolean): AbstractFreeSpinContainer | null;
     invokeFreeSpinPlate(freeSpinCount: number, isAdditionalFreeSpin?: boolean): Promise<void>;
-    protected abstract createFreeSpinSummary(resolver: () => void, freeSpinCount: number, winAmount: number): AbstractFreeSpinContainer;
+    protected createFreeSpinSummary(_resolver: () => void, _freeSpinCount: number, _winAmount: number): AbstractFreeSpinContainer | null;
     invokeFreeSpinSummary(freeSpinCount: number, winAmount: number): Promise<void>;
     hideFreeSpinSummary(): void;
     private showOverlay;
@@ -51,7 +54,7 @@ export declare abstract class AbstractMainContainer extends Container {
     invokeMysteryWin(): void;
     destroyBigWin(): void;
     destroyMysteryWin(): void;
-    invokeGambleGame(): void;
+    invokeGambleGame(): Promise<void>;
     protected createUnderFramePanel(): Graphics | Sprite;
     enableForMobile(): void;
     enableForLandscape(): void;

package/dist/components/AbstractMainContainer/AbstractMainContainer.js

@@ -5,6 +5,7 @@ import { RainMan } from "../../Rainman";
 import { settingStore } from "../../SettingsUI/hooks";
 import { getDeviceOrientation, globalMinRatio } from "../../utils";
 import { BUTTONS, LeftButtons, LeftButtonsLandscape, LeftButtonsMobile, MiddleButtons, RefreshButton, RightButtons, RightButtonsLandscape, RightButtonsMobile, } from "../buttons";
+import { GambleGame } from "../GambleGame";
 import { MessageBox } from "../messageBox";
 export class AbstractMainContainer extends Container {
     static registryName = "mainContainer";
@@ -15,11 +16,13 @@ export class AbstractMainContainer extends Container {
     buttonsEventManager;
     logo = null;
     animatedFront = null;
-    freeSpinBox = null;
+    freeSpinButton = null;
     underFramePanel = null;
     portraitPlayButtons = null;
     landscapePlayButtons = null;
     bottomPanel = null;
+    gambleGame = null;
+    gambleGameSpineName = null;
     _freeSpinPlate = null;
     _freeSpinSummary = null;
     _bigWinInvokedAt = null;
@@ -34,17 +37,29 @@ export class AbstractMainContainer extends Container {
             SoundManager.play(SoundTracks.music);
         RainMan.app.renderer.on("resize", () => this.resize());
     }
+    triggerStoreInitState(...containersWithSpines) {
+        RainMan.settingsStore.containersWithSpines.push(...containersWithSpines);
+        RainMan.settingsStore.containersWithSpines.forEach((spine) => {
+            spine.setAnimationTimescale(RainMan.settingsStore.batterySaverFlag);
+        });
+        RainMan.settingsStore.refreshBatterySaver();
+    }
     get freeSpinPlate() {
         return this._freeSpinPlate;
     }
     get freeSpinSummary() {
         return this._freeSpinSummary;
     }
+    createFreeSpinPlate(_resolver, _freeSpinCount, _isAdditionalFreeSpin) {
+        return null;
+    }
     async invokeFreeSpinPlate(freeSpinCount, isAdditionalFreeSpin = false) {
         const refreshButton = RainMan.componentRegistry.get(RefreshButton.registryName);
         refreshButton.flipDisabledFlag(true);
         await new Promise(async (resolve) => {
             this._freeSpinPlate = this.createFreeSpinPlate(resolve, freeSpinCount, isAdditionalFreeSpin);
+            if (this._freeSpinPlate === null)
+                return resolve();
             this._freeSpinPlate.resize();
             this.showOverlay();
             this.addChild(this._freeSpinPlate);
@@ -57,11 +72,16 @@ export class AbstractMainContainer extends Container {
         this.hideOverlay();
         refreshButton.flipDisabledFlag(false);
     }
+    createFreeSpinSummary(_resolver, _freeSpinCount, _winAmount) {
+        return null;
+    }
     async invokeFreeSpinSummary(freeSpinCount, winAmount) {
         const refreshButton = RainMan.componentRegistry.get(BUTTONS.refresh);
         refreshButton.flipDisabledFlag(true);
         await new Promise((resolve) => {
             this._freeSpinSummary = this.createFreeSpinSummary(resolve, freeSpinCount, winAmount);
+            if (this._freeSpinSummary === null)
+                return resolve();
             this._freeSpinSummary.resize();
             this.showOverlay();
             this.addChild(this._freeSpinSummary);
@@ -152,7 +172,21 @@ export class AbstractMainContainer extends Container {
         this.mysteryWinContainer = null;
         this._mysteryWinInvokedAt = null;
     }
-    invokeGambleGame() { }
+    async invokeGambleGame() {
+        if (!this.gambleGameSpineName)
+            return;
+        const newBalance = await new Promise((resolve) => {
+            this.gambleGame = new GambleGame(this.gambleGameSpineName, resolve, this._controller.lastWinAmount, this._controller.balance);
+            this.showOverlay();
+            this.addChild(this.gambleGame);
+        });
+        if (this.gambleGame) {
+            this.removeChild(this.gambleGame);
+            this.gambleGame = null;
+        }
+        this._controller.balance = newBalance;
+        this.hideOverlay();
+    }
     createUnderFramePanel() {
         const underFramePanel = new Graphics();
         underFramePanel.beginFill(0x0, 0.5);
@@ -203,8 +237,8 @@ export class AbstractMainContainer extends Container {
         }
         this.background.resize();
         this.animatedFront?.resize();
-        if (this.freeSpinBox)
-            this.freeSpinBox.resize();
+        if (this.freeSpinButton)
+            this.freeSpinButton.resize();
         this.addChild(this._frame);
         this._frame.resize();
         this.initComponentsForScreenRatio();
@@ -299,6 +333,9 @@ export class AbstractMainContainer extends Container {
             this.addChild(this.mysteryWinContainer);
             this.mysteryWinContainer.resize();
         }
+        if (this.gambleGame) {
+            this.gambleGame.resize();
+        }
         if (this.bottomPanel) {
             this.bottomPanel.scale.set(resizingHelper);
             this.bottomPanel.width = RainMan.app.screen.width;

package/dist/components/GambleGame/GambleGame.js

@@ -39,25 +39,26 @@ export class GambleGame extends Container {
         this.resolver = resolver;
         this.bet = bet;
         this.balanceValue = balanceValue;
-        this.interactive = true;
+        this.eventMode = "static";
         this.background = new Sprite(Texture.from("black-bg.png"));
         this.frame = new Sprite(Texture.from("frame-v2.png"));
-        this.previousGamblesText = new Text(i18next.t("previousCards"), gamblesTextStyle);
+        this.previousGamblesText = new Text(i18next.t("previousCards"), gamblesTextStyle());
         this.previousGamblesContainer = new Container();
         this.collectButton = new CollectButton();
         this.redButton = new RedButton();
         this.blackButton = new BlackButton();
         this.collectButton.pivot.x = this.collectButton.width / 2;
-        this.collectText = new Text(i18next.t("collect"), gamblesTextStyle);
+        this.collectText = new Text(i18next.t("collect"), gamblesTextStyle());
         this.collectText.pivot.x = this.collectText.width / 2;
         this.collectText.pivot.y = this.collectText.height / 2;
         this.card = new Spine(getSpineData(cardSpineName));
         this.card.state.addAnimation(0, "idle", true, 0);
         this.currentWin = new GambleUpdatableText(GambleGame.gambleCurrentWinRegistryName, i18next.t("currentWinGamble"), this.bet, 1);
-        this.gambleWin = new GambleUpdatableText(GambleGame.gambleWinRegistryName, i18next.t("currentWinGamble"), this.bet * 2, 2);
+        this.gambleWin = new GambleUpdatableText(GambleGame.gambleWinRegistryName, i18next.t("gambleToWin"), this.bet * 2, 2);
         this.redButton.setOnClick(() => this.handleGamblePlay("red"));
         this.blackButton.setOnClick(() => this.handleGamblePlay("black"));
         this.collectButton.setOnClick(() => this.resolver(this.balanceValue));
+        this.resize();
     }
     showPreviousGambles(previousGambles) {
         const { width } = RainMan.app.screen;
@@ -138,8 +139,8 @@ export class GambleGame extends Container {
         this.collectButton.scale.set(globalMinRatio() * 0.8);
         this.collectButton.x = CENTER;
         this.collectButton.y = this.collectText.y - this.collectButton.height - 30;
-        const COLOR_BUTTONS_Y = this.card.y - this.redButton.height / 2;
         this.redButton.scale.set(globalMinRatio() * COLOR_BUTTONS_SCALE_X);
+        const COLOR_BUTTONS_Y = this.card.y - this.redButton.height / 2;
         this.redButton.x = CENTER - COLOR_BUTTONS_CENTER_OFFSET - this.redButton.width;
         this.redButton.y = COLOR_BUTTONS_Y;
         this.blackButton.scale.set(globalMinRatio() * COLOR_BUTTONS_SCALE_X);

package/dist/components/buttons/buttonGroups/LeftButtons.d.ts

@@ -7,7 +7,7 @@ export declare class LeftButtons extends ResponsiveContainer {
     protected readonly infoButton: InfoButton;
     protected readonly credit: UpdatableTextComponent;
     protected readonly bet: UpdatableTextComponent;
-    constructor();
+    constructor(scaleMultiplier?: number);
     removeChildrenFromRegistry(): void;
     protected reposition(): void;
 }

package/dist/components/buttons/buttonGroups/LeftButtons.js

@@ -11,8 +11,8 @@ export class LeftButtons extends ResponsiveContainer {
     infoButton = new InfoButton();
     credit = new UpdatableTextComponent(COMPONENTS.creditText, i18next.t("credit"), UPDATABLE_MODES.money);
     bet = new UpdatableTextComponent(COMPONENTS.betText, i18next.t("bet"), UPDATABLE_MODES.money);
-    constructor() {
-        super();
+    constructor(scaleMultiplier) {
+        super(scaleMultiplier);
         this.name = REGISTRY.leftButtons;
         this.parentLayer = UXLayer;
         this.volumeButton.anchor.set(0, 0);

package/dist/components/common/AnimatedBackground.js

@@ -1,4 +1,5 @@
 import { Spine } from "pixi-spine";
+import { BackgroundLayer } from "../../layers";
 import { RainMan } from "../../Rainman";
 import { getDeviceOrientation, getSpineData } from "../../utils";
 import { ResumableContainer } from "./ResumableContainers";
@@ -23,6 +24,7 @@ export class AnimatedBackground extends ResumableContainer {
         this.animationName = animationName;
         this.mobileSpineName = mobileSpineName;
         this.name = AnimatedBackground.registryName;
+        this.parentLayer = BackgroundLayer;
     }
     resize() {
         this.changeSpineForOrientation();

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

@@ -0,0 +1,12 @@
+import { Container } from "pixi.js";
+export declare class AnimatedNumber extends Container {
+    private spineName;
+    private number;
+    private digits;
+    constructor(spineName: string, number: number);
+    private setDigits;
+    private removeDigits;
+    get value(): number;
+    set value(value: number);
+    play(): void;
+}

package/dist/components/common/AnimatedNumber.js

@@ -0,0 +1,44 @@
+import { Container } from "pixi.js";
+import { Spine } from "pixi-spine";
+import { getSpineData } from "../../utils";
+export class AnimatedNumber extends Container {
+    spineName;
+    number;
+    digits = [];
+    constructor(spineName, number) {
+        super();
+        this.spineName = spineName;
+        this.number = number;
+        this.setDigits();
+    }
+    setDigits() {
+        this.removeDigits();
+        Array.from(this.number.toString()).forEach((digit) => {
+            const digitSpine = new Spine(getSpineData(this.spineName));
+            digitSpine.state.setAnimation(0, digit, true);
+            digitSpine.x = (this.digits.at(-1)?.x || 0) + digitSpine.width;
+            if (digit === "." || digit === ",") {
+                digitSpine.x += 10;
+                digitSpine.y += 20;
+            }
+            digitSpine.state.timeScale = 0;
+            this.addChild(digitSpine);
+            this.digits.push(digitSpine);
+        });
+        this.pivot.set(this.width / 2, this.height / 2);
+    }
+    removeDigits() {
+        this.digits.forEach((digit) => this.removeChild(digit));
+        this.digits = [];
+    }
+    get value() {
+        return this.number;
+    }
+    set value(value) {
+        this.number = value;
+        this.setDigits();
+    }
+    play() {
+        this.digits.forEach((digit) => (digit.state.timeScale = 1));
+    }
+}

package/dist/components/common/{FreeSpinBox.d.ts → FreeSpinButton.d.ts}

@@ -3,15 +3,15 @@ import { ResumableContainer } from "./ResumableContainers";
  * This class represents button/box with ability to buy free games
  *
  * @export
- * @class FreeSpinBox
- * @typedef {FreeSpinBox}
+ * @class FreeSpinButton
+ * @typedef {FreeSpinButton}
  * @extends {ResumableContainer}
  */
-export declare class FreeSpinBox extends ResumableContainer {
+export declare class FreeSpinButton extends ResumableContainer {
     private spineName;
     private animationName;
     private mobileSpineName;
-    static readonly registryName = "freeSpinBox";
+    static readonly registryName = "freeSpinButton";
     private spine;
     private lastDeviceOrientation?;
     constructor(spineName: string, animationName: string, mobileSpineName?: string);

package/dist/components/common/{FreeSpinBox.js → FreeSpinButton.js}

@@ -9,15 +9,15 @@ import { ResumableContainer } from "./ResumableContainers";
  * This class represents button/box with ability to buy free games
  *
  * @export
- * @class FreeSpinBox
- * @typedef {FreeSpinBox}
+ * @class FreeSpinButton
+ * @typedef {FreeSpinButton}
  * @extends {ResumableContainer}
  */
-export class FreeSpinBox extends ResumableContainer {
+export class FreeSpinButton extends ResumableContainer {
     spineName;
     animationName;
     mobileSpineName;
-    static registryName = "freeSpinBox";
+    static registryName = "freeSpinButton";
     spine;
     lastDeviceOrientation;
     constructor(spineName, animationName, mobileSpineName = spineName) {
@@ -25,7 +25,7 @@ export class FreeSpinBox extends ResumableContainer {
         this.spineName = spineName;
         this.animationName = animationName;
         this.mobileSpineName = mobileSpineName;
-        this.name = FreeSpinBox.registryName;
+        this.name = FreeSpinButton.registryName;
         this.allSpines.push(this.spine);
         this.visible = true;
         this.parentLayer = UXLayer;

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

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

package/dist/components/common/index.js

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