pixi-rainman-game-engine 0.1.20 → 0.1.21

package/dist/SettingsUI/SystemSettings/SystemSettingsComponent.jsx

@@ -2,7 +2,9 @@ import i18next from "i18next";
 import React from "react";
 import { UI_ITEMS } from "../../utils";
 import { BetSettings, CloseModalButton, UXSettings } from "../components";
+import { useDeviceOrientations } from "../hooks";
 export const SystemSettingsComponent = () => {
+    const deviceOrientation = useDeviceOrientations();
     return (<div className="flex w-full max-w-lg flex-col justify-center gap-2 p-4">
             <div className="flex w-full justify-center">
                 <h2 className="text-2xl font-bold uppercase text-primary-500">{i18next.t("systemSettings")}</h2>
@@ -10,7 +12,7 @@ export const SystemSettingsComponent = () => {
             <CloseModalButton layerId={UI_ITEMS.settings}/>
             <div className="flex w-full flex-col justify-center">
                 <UXSettings />
-                <BetSettings className="hidden w-full justify-center sm:flex"/>
+                {!deviceOrientation.includes("mobile") ? <BetSettings className="flex w-full justify-center"/> : null}
             </div>
         </div>);
 };

package/dist/SettingsUI/components/Bet/BetControls.jsx

@@ -5,7 +5,7 @@ import { useStores } from "../../hooks";
 import { Button } from "../Button";
 export const BetControls = observer(() => {
     const { settingStore } = useStores();
-    return (<div className="my-7 flex w-full flex-col items-center justify-center gap-2">
+    return (<div className="flex w-full flex-col items-center justify-center gap-2 p-4">
             <h2 className="font-bold uppercase text-primary-500 sm:text-2xl">{i18next.t("totalBet")}</h2>
             <div className="flex w-full items-center justify-center gap-4">
                 <Button className="flex h-10 w-8 items-center justify-center rounded-lg bg-primary-400 p-4 font-bold text-black shadow-md transition duration-300 hover:bg-primary-300" name="bet-minus">

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

@@ -22,15 +22,17 @@ export const GameRules = observer(() => {
         }
         setPageNumber(pageNumber + incrementor);
     };
-    return (<div className="flex h-full max-h-[90vh] w-[90%] flex-col items-center gap-4 p-5">
-            <h2 className="text-pr text-center text-3xl font-bold text-primary-500">{i18next.t("gameRules")}</h2>
+    return (<div className="max-w-5/6 flex h-fit max-h-[80vh] flex-col items-center gap-4 p-5">
+            <h2 className="text-center text-3xl font-bold text-primary-500">{i18next.t("gameRules")}</h2>
             <CloseModalButton layerId={UI_ITEMS.gameRules}/>
-            <div className="custom-scroll mb-5 h-full min-h-[60vh]">
-                <CustomScroll className="h-[70%]" allowOuterScroll={true}>
-                    <div className="text-md h-full w-[90%] text-justify">{gameRulesContent.pages[pageNumber]}</div>
+            <div className="custom-scroll max-w-5/6 h-full min-h-[60vh]">
+                <CustomScroll className="h-full w-full overflow-y-auto portrait:max-h-[60vh]" allowOuterScroll={true}>
+                    <div className="text-md max-w-5/6 w-full overflow-y-auto landscape:max-h-[30vh]">
+                        {gameRulesContent.pages[pageNumber]}
+                    </div>
                 </CustomScroll>
             </div>
-            <div className="relative bottom-5 left-5 flex h-[50px] items-center justify-center gap-2">
+            <div className="flex h-[50px] items-center justify-center gap-2">
                 <div className="flex h-[24px] w-6 items-center bg-[url('/assets/settings/gameRules/left.png')] bg-contain bg-right bg-no-repeat hover:opacity-50" onClick={() => changePage(-1)}/>
                 <div className="flex h-[24px] w-6 items-center bg-[url('/assets/settings/gameRules/cross.png')] bg-contain bg-no-repeat hover:opacity-50" onClick={() => settingStore.handleModalInvocation?.(UI_ITEMS.gameRules)}/>
                 <div className="flex h-[24px] w-6 items-center bg-[url('/assets/settings/gameRules/right.png')] bg-contain bg-no-repeat hover:opacity-50" onClick={() => changePage(1)}/>

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

@@ -15,7 +15,7 @@ export const Modal = observer(({ layerId, children, className }) => {
             <div onClick={() => setOpen(!open)} className="fixed inset-0 bg-zinc-800 bg-opacity-75 transition-opacity"/>
             <div className="fixed inset-0 z-10 w-screen overflow-y-auto p-6">
                 <div className="flex min-h-full w-full items-center justify-center rounded-lg shadow">
-                    <div ref={ref} className={cn("min-w-3/4 relative flex h-5/6 w-full transform flex-col items-center overflow-hidden rounded-lg bg-zinc-900 p-2 text-left shadow-xl transition-all", className)}>
+                    <div ref={ref} className={cn("relative flex h-5/6 transform flex-col items-center overflow-hidden rounded-lg bg-zinc-900 p-2 text-left shadow-xl transition-all", className)}>
                         {children}
                     </div>
                 </div>

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

@@ -15,10 +15,10 @@ export const SpeedSettingsPopup = observer(() => {
         fast: SPEED_LEVELS.fast,
     };
     const { settingStore } = useStores();
-    return (<div className="flex h-full w-[90%] flex-col items-center justify-between gap-2 p-4">
+    return (<div className="flex h-full w-fit flex-col items-center justify-between gap-2 p-4 portrait:max-w-72">
             <CloseModalButton layerId={UI_ITEMS.speedSettings}/>
             <h1 className="mt-3 font-bold uppercase text-white sm:text-xl">{i18next.t("howDoYouWantToPlay")}</h1>
-            <div className="flex h-fit w-full flex-wrap justify-between gap-2">
+            <div className="flex h-fit w-full flex-wrap justify-between gap-2 portrait:items-center portrait:justify-center">
                 {Object.keys(speedLevelMapper).map((speedLevelKey) => (<div id={`${SPEED_PREFIX}${speedLevelKey}`} key={`${SPEED_PREFIX}${speedLevelKey}`} className={cn("flex h-fit w-[145px] items-center justify-center border-2 border-zinc-400 bg-zinc-800 bg-contain bg-no-repeat p-4", speedLevelKey === settingStore.currentSpeed ? "h-fit border-2 border-primary-500" : "")}>
                         <img className="h-12 w-fit" src={`../../../assets/settings/speedPopup/speed-${speedLevelMapper[speedLevelKey]}.png`}/>
                     </div>))}

package/dist/SettingsUI/index.jsx

@@ -18,7 +18,7 @@ export const SettingsUI = () => {
             <Modal layerId={UI_ITEMS.autoplay}>
                 <AutoplaySettings />
             </Modal>
-            <Modal layerId={UI_ITEMS.speedSettings} className="absolute left-[25wv] top-[40vh] flex h-fit w-fit items-center justify-center rounded-xl bg-zinc-900 p-4 shadow-primary-500/30 landscape:top-[20vh]">
+            <Modal layerId={UI_ITEMS.speedSettings} className="absolute flex h-fit items-center justify-center rounded-xl bg-zinc-900 p-4 shadow-primary-500/30 sm:left-auto sm:top-auto portrait:left-auto portrait:top-auto portrait:items-center">
                 <SpeedSettingsPopup />
             </Modal>
             <div id={UI_ITEMS.symbolPayTable}>

package/dist/SettingsUI/packedStyles.css

@@ -628,10 +628,6 @@ video {
   bottom: 0.5rem;
 }
 
-.bottom-5 {
-  bottom: 1.25rem;
-}
-
 .bottom-\[5vh\] {
   bottom: 5vh;
 }
@@ -648,10 +644,6 @@ video {
   left: 1rem;
 }
 
-.left-5 {
-  left: 1.25rem;
-}
-
 .left-9 {
   left: 2.25rem;
 }
@@ -660,10 +652,6 @@ video {
   left: 1vw;
 }
 
-.left-\[25wv\] {
-  left: 25wv;
-}
-
 .right-0 {
   right: 0px;
 }
@@ -680,23 +668,10 @@ video {
   top: 0.5rem;
 }
 
-.top-\[40vh\] {
-  top: 40vh;
-}
-
 .z-10 {
   z-index: 10;
 }
 
-.my-7 {
-  margin-top: 1.75rem;
-  margin-bottom: 1.75rem;
-}
-
-.mb-5 {
-  margin-bottom: 1.25rem;
-}
-
 .ml-4 {
   margin-left: 1rem;
 }
@@ -725,10 +700,6 @@ video {
   display: table;
 }
 
-.hidden {
-  display: none;
-}
-
 .h-10 {
   height: 2.5rem;
 }
@@ -765,10 +736,6 @@ video {
   height: 50px;
 }
 
-.h-\[70\%\] {
-  height: 70%;
-}
-
 .h-\[90\%\] {
   height: 90%;
 }
@@ -782,8 +749,8 @@ video {
   height: 100%;
 }
 
-.max-h-\[90vh\] {
-  max-height: 90vh;
+.max-h-\[80vh\] {
+  max-height: 80vh;
 }
 
 .min-h-\[60vh\] {
@@ -1141,10 +1108,6 @@ video {
   text-align: center;
 }
 
-.text-justify {
-  text-align: justify;
-}
-
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1557,6 +1520,10 @@ html.is-locked .ios-scroller-animation {
 }
 
 @media (min-width: 640px) {
+  .sm\:left-auto {
+    left: auto;
+  }
+
   .sm\:right-8 {
     right: 2rem;
   }
@@ -1565,6 +1532,10 @@ html.is-locked .ios-scroller-animation {
     top: 1rem;
   }
 
+  .sm\:top-auto {
+    top: auto;
+  }
+
   .sm\:ml-5 {
     margin-left: 1.25rem;
   }
@@ -1573,10 +1544,6 @@ html.is-locked .ios-scroller-animation {
     margin-top: 1.25rem;
   }
 
-  .sm\:flex {
-    display: flex;
-  }
-
   .sm\:w-full {
     width: 100%;
   }
@@ -1617,8 +1584,34 @@ html.is-locked .ios-scroller-animation {
   }
 }
 
+@media (orientation: portrait) {
+  .portrait\:left-auto {
+    left: auto;
+  }
+
+  .portrait\:top-auto {
+    top: auto;
+  }
+
+  .portrait\:max-h-\[60vh\] {
+    max-height: 60vh;
+  }
+
+  .portrait\:max-w-72 {
+    max-width: 18rem;
+  }
+
+  .portrait\:items-center {
+    align-items: center;
+  }
+
+  .portrait\:justify-center {
+    justify-content: center;
+  }
+}
+
 @media (orientation: landscape) {
-  .landscape\:top-\[20vh\] {
-    top: 20vh;
+  .landscape\:max-h-\[30vh\] {
+    max-height: 30vh;
   }
 }

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;
     }

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixi-rainman-game-engine",
-    "version": "0.1.20",
+    "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",