pixi-rainman-game-engine 0.1.19 → 0.1.21

package/dist/SettingsUI/utils/tw.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from "clsx";
+export declare const cn: (...classes: ClassValue[]) => string;

package/dist/SettingsUI/utils/tw.js

@@ -0,0 +1,3 @@
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+export const cn = (...classes) => twMerge(clsx(classes));

package/dist/application/ApiConfig/ApiConfig.d.ts

@@ -19,7 +19,7 @@ export declare class ApiConfig {
     private transformationMap;
     extraData: InitExtraData;
     /**
-     * Create instance of ApiConfig, requires InitDataInterfac
+     * Create instance of ApiConfig, requires InitDataInterface
      *
      * @param {InitDataInterface} data
      */

package/dist/application/ApiConfig/ApiConfig.js

@@ -17,7 +17,7 @@ export class ApiConfig {
     transformationMap = new Map();
     extraData;
     /**
-     * Create instance of ApiConfig, requires InitDataInterfac
+     * Create instance of ApiConfig, requires InitDataInterface
      *
      * @param {InitDataInterface} data
      */
@@ -27,7 +27,7 @@ export class ApiConfig {
         }
         this.token = data.token;
         this.bets = data.bets;
-        this.extraData = data.extra_data;
+        this.extraData = { ...data.extra_data, jackpotWins: data.jackpot_wins };
         this.initSymbolMap(data);
         this.initWinMap(data);
         this.initStreakMap(data);

package/dist/application/setup.js

@@ -13,7 +13,6 @@ export const setup = () => {
     changeResolution(RainMan.settingsStore.HiResolutionFlag);
     resizeCanvas();
     setupFullscreenForIOS();
-    disableMagnifyingGlassOnIOS();
     const gameRoot = document.createElement("div");
     gameRoot.setAttribute("class", "game-container");
     document.body.appendChild(gameRoot);
@@ -27,5 +26,6 @@ export const setup = () => {
     reactRoot.render(SettingsUI());
     // append canvas
     gameRoot.appendChild(RainMan.app.view);
+    disableMagnifyingGlassOnIOS();
     return reactLayer;
 };

package/dist/components/AbstractMainContainer/AbstractMainContainer.js

@@ -189,7 +189,7 @@ export class AbstractMainContainer extends Container {
     }
     createUnderFramePanel() {
         const underFramePanel = new Graphics();
-        underFramePanel.beginFill(0x0, 0.5);
+        underFramePanel.beginFill(0x0, 0.75);
         underFramePanel.drawRect(0, 0, 800, 100);
         return underFramePanel;
     }
@@ -235,6 +235,7 @@ export class AbstractMainContainer extends Container {
         if (this.bigWinContainer) {
             this.removeChild(this.bigWinContainer);
         }
+        this.messageBox.resize();
         this.background.resize();
         this.animatedFront?.resize();
         if (this.freeSpinButton)
@@ -312,6 +313,7 @@ export class AbstractMainContainer extends Container {
         this.logo?.resize();
         this.leftButtons.resize();
         this.rightButtons.resize();
+        this.messageBox.resize();
         if (this.landscapePlayButtons !== null)
             this.landscapePlayButtons.resize();
         if (this.portraitPlayButtons !== null)
@@ -351,7 +353,6 @@ export class AbstractMainContainer extends Container {
             this.freeSpinSummary.resize();
         }
         RainMan.settingsStore.popupPaytableRepositionCallback?.();
-        this.messageBox.resize();
     }
     refreshLayers() {
         this.removeChild(BackgroundLayer);

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

@@ -59,6 +59,7 @@
         "gambleToWin": "GAMBLE TO WIN",
         "doubleTo": "DOUBLE TO",
         "collect": "COLLECT",
-        "totalBet": "Total bet"
+        "totalBet": "Bet",
+        "buyFreeSpins": "Buy Free Spins"
     }
 }

package/dist/components/messageBox/MessageBox.js

@@ -32,17 +32,17 @@ export class MessageBox extends Container {
     constructor() {
         super();
         this.name = MessageBox.registryName;
+        const fontSize = getDeviceOrientation().includes("mobile")
+            ? RainMan.config.mobileFontSize
+            : RainMan.config.fontSize;
         this.positioningFrame = new Graphics();
         this.positioningFrame.beginFill(0xff0000, 0.0);
         this.positioningFrame.drawRect(0, 0, 800, 100);
         this.addChild(this.positioningFrame);
         this.parentLayer = UXLayer;
-        this.freeSpinText = new UpdatableTextComponent(MessageBox.freeSpinTextRegistryName, i18n.t("currentFreeSpins"), UPDATABLE_MODES.int, undefined, new Color(0xffffff).toHex(), () => this.centerTextOnX(this.freeSpinText));
-        this.autoSpinText = new UpdatableTextComponent(MessageBox.autoSpinTextRegistryName, i18n.t("autoSpinsLeft"), UPDATABLE_MODES.int, undefined, new Color(0xffffff).toHex(), () => this.centerTextOnX(this.autoSpinText));
-        this.currentWinText = new UpdatableTextComponent(MessageBox.currentWinTextRegistryName, i18n.t("currentWin"), UPDATABLE_MODES.money, undefined, undefined, () => this.centerTextOnX(this.currentWinText));
-        const fontSize = getDeviceOrientation().includes("mobile")
-            ? RainMan.config.mobileFontSize
-            : RainMan.config.fontSize;
+        this.freeSpinText = new UpdatableTextComponent(MessageBox.freeSpinTextRegistryName, i18n.t("currentFreeSpins"), UPDATABLE_MODES.int, fontSize, new Color(0xffffff).toHex(), () => this.centerTextOnX(this.freeSpinText));
+        this.autoSpinText = new UpdatableTextComponent(MessageBox.autoSpinTextRegistryName, i18n.t("autoSpinsLeft"), UPDATABLE_MODES.int, fontSize, new Color(0xffffff).toHex(), () => this.centerTextOnX(this.autoSpinText));
+        this.currentWinText = new UpdatableTextComponent(MessageBox.currentWinTextRegistryName, i18n.t("currentWin"), UPDATABLE_MODES.money, fontSize, undefined, () => this.centerTextOnX(this.currentWinText));
         this.incentiveText = new Text(sample(i18n.t("idleMessages", { returnObjects: true })[RainMan.componentRegistry.getSpeedLevel()]), {
             fontFamily: RainMan.config.fontFace,
             fontSize,
@@ -94,6 +94,10 @@ export class MessageBox extends Container {
     }
     resize() {
         this.scale.set(globalMinRatio());
+        if (getDeviceOrientation().includes("mobile") && this.winLineIndicatorShown && this.winLineIndicator) {
+            this.removeChild(this.winLineIndicator);
+            this.addChild(this.winLineIndicator);
+        }
     }
     showCurrentWinText() {
         this.hideIncentiveText();

package/dist/components/symbols/AbstractSymbolsColumn.js

@@ -308,13 +308,11 @@ export class AbstractSymbolsColumn extends Container {
     shouldPlaySpecialRollStopSound() {
         for (let i = 0; i <= RainMan.config.numberOfColumns; i++) {
             const currentColumn = this.columnsContainer.getColumnAtPosition(i);
-            const hasBonus = !!currentColumn.symbols
+            if (currentColumn !== this)
+                continue;
+            return !!currentColumn.symbols
                 .slice(0, RainMan.config.numberOfRows)
                 .find((symbol) => symbol.id === this.bonusSymbol);
-            if (hasBonus && currentColumn === this)
-                return true;
-            if (!hasBonus)
-                return false;
         }
         return false;
     }

package/dist/connectivity/serverData.d.ts

@@ -15,8 +15,28 @@ export interface InitDataInterface {
     transformations_types: Array<number>;
     paytable: PayTableInterface;
     extra_data: InitExtraData;
+    jackpot_wins?: JackpotWins;
 }
+export type JackpotType = "jackpot-mini" | "jackpot-minor" | "jackpot-major" | "jackpot-grand";
+export type JackpotWins = {
+    "jackpot-grand": {
+        max: number;
+    };
+    "jackpot-major": {
+        max: number;
+        min: number;
+    };
+    "jackpot-minor": {
+        max: number;
+        min: number;
+    };
+    "jackpot-mini": {
+        max: number;
+        min: number;
+    };
+};
 export interface InitExtraData {
+    jackpotWins?: JackpotWins;
 }
 type FixedQuantityValue = Record<string, {
     value: number | number[];

package/dist/controllers/AbstractController.d.ts

@@ -59,6 +59,7 @@ export declare abstract class AbstractController<T> {
     private setRefreshButtonBasedOnPhase;
     private setMessageBoxBasedOnPhase;
     protected getReelIndexesToShowMysteryFx(spinLogic: SpinLogic): number[];
+    protected showSuperBonusWin(removeBonusWin: Promise<void>): void;
     protected handleSpinLogic(): void;
     protected throttledSpin(): void;
     private getBoughtNumberOfFreeSpins;

package/dist/controllers/AbstractController.js

@@ -46,6 +46,7 @@ export class AbstractController {
         this.uiController = new UiController(this.config);
         this.componentRegistry = RainMan.componentRegistry;
         this.setupSpaceOrEnterListener();
+        RainMan.settingsStore.showSuperBonusWin = this.showSuperBonusWin.bind(this);
     }
     init() {
         const initData = this.connection.initData();
@@ -259,6 +260,17 @@ export class AbstractController {
         }
         return reelsIndexesWithScatter;
     }
+    showSuperBonusWin(removeBonusWin) {
+        this.changeGamePhase(gamePhases.BIG_WIN_INVOKED);
+        const winAmount = RainMan.settingsStore.cumulativeWinAmount > 0
+            ? RainMan.settingsStore.cumulativeWinAmount
+            : this.uiController.recentWin;
+        this.countWinBigWin(winAmount).then(async () => {
+            await removeBonusWin;
+            this.changeGamePhase(gamePhases.IDLE);
+        });
+        RainMan.settingsStore.resetCumulativeWinAmount();
+    }
     handleSpinLogic() {
         if (this.mainContainer.freeSpinPlate) {
             if (this.mainContainer.freeSpinPlate.shownAt === null ||

package/dist/stores/SettingsStore.d.ts

@@ -28,6 +28,7 @@ export declare class SettingsStore {
     HiResolutionFlag: boolean;
     batterySaverFlag: boolean;
     containersWithSpines: (ResumableContainer | SpineWithResumableContainer | SpriteWithResumableContainer)[];
+    cumulativeWinAmount: number;
     progress: number;
     singleWinExceeds: number;
     balancedIncreased: number;
@@ -41,6 +42,7 @@ export declare class SettingsStore {
     popupPaytableRepositionCallback?: () => void;
     updateVolumeButtonTexture?: () => void;
     handleModalInvocation?: (layerId: string) => void;
+    showSuperBonusWin?: (callback: Promise<void>) => void;
     private readonly initialAutoplaySettingsState;
     private modalsAvailable;
     private paytableMap;
@@ -48,6 +50,8 @@ export declare class SettingsStore {
     updateBetText(newText: string): void;
     get indexOfSpeedLevel(): number;
     get isFreeSpinsPlayEnabled(): boolean;
+    addCumulativeWinAmount(amount: number): void;
+    resetCumulativeWinAmount(): void;
     updateBet(newBet: number): void;
     setBatteryFlag(flag: boolean): void;
     refreshBatterySaver(): void;
@@ -65,6 +69,7 @@ export declare class SettingsStore {
     setBalancedDecreased(newValue: number): void;
     getMinimumPaytableValue(multipliers: RangeQuantityValue[keyof RangeQuantityValue]): number;
     getMaximumPaytableValue(multipliers: RangeQuantityValue[keyof RangeQuantityValue]): number;
+    forceSuperBigWin(removeBonusWin: Promise<void>): void;
     setDataForSymbolPaytablePopup(symbolId: SymbolId, repositionCallback: () => void): void;
     resetDataForSymbolPaytablePopup(): void;
     setUpdateVolumeButtonTexture(fn: () => void): void;

package/dist/stores/SettingsStore.js

@@ -34,6 +34,7 @@ export class SettingsStore {
     HiResolutionFlag = getFromLocalStorage(LOCAL_STORAGE.hiResolution, true);
     batterySaverFlag = getFromLocalStorage(LOCAL_STORAGE.batterySaver, false);
     containersWithSpines = [];
+    cumulativeWinAmount = 0;
     progress = 0;
     singleWinExceeds = 0;
     balancedIncreased = 0;
@@ -47,6 +48,7 @@ export class SettingsStore {
     popupPaytableRepositionCallback;
     updateVolumeButtonTexture;
     handleModalInvocation;
+    showSuperBonusWin;
     initialAutoplaySettingsState = {
         infinitySpinsEnabled: false,
         onAnyWin: false,
@@ -105,6 +107,12 @@ export class SettingsStore {
     get isFreeSpinsPlayEnabled() {
         return this.howManyFreeSpinsLeft > 0 || this.isLastFreeSpin;
     }
+    addCumulativeWinAmount(amount) {
+        this.cumulativeWinAmount = this.cumulativeWinAmount + amount;
+    }
+    resetCumulativeWinAmount() {
+        this.cumulativeWinAmount = 0;
+    }
     updateBet(newBet) {
         this.bet = newBet;
     }
@@ -205,6 +213,9 @@ export class SettingsStore {
             return last(multipliers) || 0;
         return 0;
     }
+    forceSuperBigWin(removeBonusWin) {
+        this.showSuperBonusWin?.(removeBonusWin);
+    }
     setDataForSymbolPaytablePopup(symbolId, repositionCallback) {
         this.popupPaytableRepositionCallback = repositionCallback;
         this.popupPaytableRepositionCallback();

package/dist/utils/common/screenHelpers.js

@@ -60,7 +60,7 @@ export const setupFullscreenForIOS = () => {
     });
 };
 export const disableMagnifyingGlassOnIOS = () => {
-    document.body.addEventListener("touchend", (e) => e.preventDefault(), { passive: false });
+    document.querySelector("canvas")?.addEventListener("touchend", (e) => e.preventDefault(), { passive: false });
 };
 export const resizeCanvas = () => {
     const resize = () => {

package/package.json

@@ -1,16 +1,15 @@
 {
     "name": "pixi-rainman-game-engine",
-    "version": "0.1.19",
+    "version": "0.1.21",
     "description": "This repository contains all of the mechanics that used in rainman games.",
     "main": "./dist/index.js",
     "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "scripts": {
-        "copyCss": "copyfiles -u 1 \"src/**/*.css\" dist/",
+        "copyCss": "yarn build:tailwind && copyfiles -u 1 \"src/**/*.css\" dist/",
+        "build:tailwind": "tailwindcss -i ./src/SettingsUI/index.css -o ./src/SettingsUI/packedStyles.css",
         "build": "rimraf dist/ && tsc && yarn copyCss",
         "dev:build": "tsc-watch --onSuccess \"yarn copyCss\"",
-        "dev:link": "npm link && cd test-environment && npm link pixi-rainman-game-engine",
-        "dev:server": "cd test-environment && yarn dev",
         "lint": "eslint src/** --fix",
         "prepublishOnly": "husky && yarn build",
         "prepare": "husky"
@@ -25,6 +24,7 @@
         "@pixi/sound": "^5.2.2",
         "@tweenjs/tween.js": "18.6.4",
         "adaptive-scale": "^1.0.0",
+        "clsx": "^2.1.1",
         "i18next": "^23.10.1",
         "lodash": "^4.17.21",
         "mobx": "^6.12.0",
@@ -36,6 +36,7 @@
         "react-custom-scroll": "^5.0.0",
         "react-dom": "^18.2.0",
         "stats.js": "^0.17.0",
+        "tailwind-merge": "^2.3.0",
         "ts-money": "^0.4.8",
         "zod": "^3.22.4"
     },
@@ -48,6 +49,7 @@
         "@types/stats.js": "^0.17.3",
         "@typescript-eslint/eslint-plugin": "^7.0.2",
         "@typescript-eslint/parser": "^7.0.2",
+        "autoprefixer": "^10.4.19",
         "copyfiles": "^2.4.1",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
@@ -55,9 +57,12 @@
         "eslint-plugin-sort-class-members": "^1.20.0",
         "eslint-prettier-config": "^1.0.1",
         "husky": "^9.0.11",
+        "postcss": "^8.4.38",
         "prettier": "^3.2.5",
+        "prettier-plugin-tailwindcss": "^0.6.1",
         "pretty-quick": "^4.0.0",
         "rimraf": "^5.0.5",
+        "tailwindcss": "^3.4.4",
         "tsc": "^2.0.4",
         "tsc-watch": "^6.0.4",
         "typescript": "^5.3.3"

package/dist/SettingsUI/SystemSettings/systemSettings.css

@@ -1,41 +0,0 @@
-.settings__title {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-}
-
-.settings {
-    display: flex;
-    flex-direction: column;
-    height: 90%;
-    align-items: center;
-    width: 90%;
-}
-
-.settings__title h2 {
-    color: #ec5e27;
-    margin: 0px;
-    text-decoration: underline;
-    text-transform: uppercase;
-}
-
-.settings__column {
-    display: flex;
-    flex-direction: row;
-    overflow: auto;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-}
-
-@media only screen and (max-width: 900px) {
-    .settings__column {
-        flex-direction: column-reverse;
-    }
-}
-
-@media only screen and (max-width: 900px) {
-    .bet-desktop__container {
-        display: none;
-    }
-}

package/dist/SettingsUI/components/AutoplaySettings/autoplaySettings.css

@@ -1,267 +0,0 @@
-.autoplay-settings {
-    display: flex;
-    flex-direction: column;
-    height: 90%;
-    align-items: center;
-    width: 70%;
-    max-width: 800px;
-    justify-content: space-between;
-}
-
-.autoplay-settings__title {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-}
-
-.autoplay-settings__exit {
-    font-size: 30px;
-    color: white;
-    position: absolute;
-    right: 30px;
-    top: 15px;
-    background-color: #00000000;
-    border-style: none;
-}
-
-.autoplay-settings__title h2 {
-    color: #ec5e27;
-    margin: 0px;
-    text-decoration: underline;
-    text-transform: uppercase;
-}
-
-.autoplay-settings__sliders {
-    width: 100%;
-}
-
-.autoplay-settings__switch {
-    width: 300px;
-}
-
-.autoplay-settings__column {
-    display: flex;
-    flex-direction: row;
-    overflow: auto;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-}
-
-.autoplay-settings__switches {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    margin: 10px 0px;
-}
-
-.autoplay-settings__stop-limits {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    height: 50px;
-    justify-content: center;
-}
-
-.autoplay-settings__limit {
-    width: 40px;
-    border: solid 2px white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
-    font-weight: bolder;
-    margin: 0px 5px;
-    color: white;
-}
-
-.autoplay-settings__limit:hover {
-    background-color: #fdf42525;
-    border: 2px solid #fdf425;
-    color: #fdf425;
-}
-
-.autoplay-settings__limit--active {
-    background-color: #fdf42550;
-    border: 2px solid #fdf425;
-    color: #fdf425;
-}
-
-.autoplay-settings__limit--infinity {
-    border: 2px solid #5a5a5aad;
-    color: #5a5a5aad;
-}
-
-.left {
-    border-radius: 34px 0px 0px 34px;
-}
-
-.right {
-    border-radius: 0px 34px 34px 0px;
-}
-
-.middle {
-    width: 60px;
-    border-radius: 0px 0px 0px 0px;
-    background-color: #00000000;
-}
-
-.circle {
-    border-radius: 34px;
-    font-size: 40px;
-}
-
-.autoplay-settings__limit.circle p {
-    position: relative;
-    top: -4px;
-}
-
-.autoplay-settings__limit.left p {
-    position: relative;
-    top: -2px;
-}
-
-.autoplay-settings__limit.right p {
-    position: relative;
-    top: -2px;
-}
-
-.autoplay-settings__confirmation {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    margin-top: 20px;
-}
-
-.autoplay-settings__confirmation-button {
-    margin: 10px 0px 10px 10px;
-    width: 100px;
-    height: 40px;
-    border: solid white 2px;
-    background-color: black;
-    border-radius: 34px;
-    font-size: large;
-    font-weight: bold;
-    color: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0px 10px;
-}
-
-.autoplay-settings__confirmation-button:hover {
-    background-color: #fdf42550;
-    border: 2px solid #fdf425;
-    color: #fdf425;
-}
-
-@media only screen and (max-width: 900px) {
-    .autoplay-settings {
-        width: 90%;
-    }
-
-    .autoplay-settings__column {
-        flex-direction: column-reverse;
-    }
-
-    .autoplay-settings__switches {
-        width: 100%;
-        flex-direction: column;
-    }
-
-    .autoplay-settings__switch {
-        width: 250px;
-        flex-direction: column;
-        margin: 5px 0px;
-    }
-
-    .left {
-        width: 40px;
-        border-radius: 34px 0px 0px 34px;
-    }
-
-    .right {
-        width: 40px;
-        border-radius: 0px 34px 34px 0px;
-    }
-
-    .middle {
-        width: 70px;
-        font-size: 12px;
-        border-radius: 0px 0px 0px 0px;
-    }
-
-    .circle {
-        border-radius: 34px;
-        font-size: 40px;
-        width: 30px;
-    }
-
-    .autoplay-settings__stop-limits {
-        height: 35px;
-    }
-
-    .autoplay-settings__limit.circle p {
-        position: relative;
-        top: -4px;
-        font-size: 20px;
-    }
-
-    .autoplay-settings__limit.left p {
-        position: relative;
-        top: -2px;
-    }
-
-    .autoplay-settings__limit.right p {
-        position: relative;
-        top: -2px;
-    }
-
-    .autoplay-settings__confirmation {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        margin-top: 0px;
-    }
-
-    .left {
-        border-radius: 34px 0px 0px 34px;
-    }
-
-    .right {
-        border-radius: 0px 34px 34px 0px;
-    }
-
-    .middle {
-        width: 60px;
-        border-radius: 0px 0px 0px 0px;
-    }
-
-    .circle {
-        border-radius: 34px;
-        font-size: 40px;
-    }
-
-    .autoplay-settings__limit.circle p {
-        top: -2px;
-    }
-
-    .autoplay-settings__limit.left p {
-        top: -2px;
-    }
-
-    .autoplay-settings__limit.right p {
-        top: -2px;
-    }
-
-    .autoplay-settings__exit {
-        right: -10px;
-        top: 10px;
-    }
-}