pixi-rainman-game-engine 0.3.20 → 0.3.22

package/dist/ComponentRegistry/types.d.ts

@@ -8,6 +8,7 @@ export interface RegistryMap {
     [MessageBox.currentWinTextRegistryName]: UpdatableTextComponent;
     [MessageBox.freeSpinTextRegistryName]: UpdatableTextComponent;
     [MessageBox.possibleWinTextRegistryName]: UpdatableTextComponent;
+    [MessageBox.gamePaysTextRegistryName]: UpdatableTextComponent;
     [MessageBox.registryName]: MessageBox;
     [SpeedControlButton.registryName]: SpeedControlButton;
     [Background.registryName]: Background;

package/dist/SettingsUI/SystemSettings/SystemSettingsComponent.jsx

@@ -11,6 +11,7 @@ export const SystemSettingsComponent = () => {
             <CloseModalButton layerId={UI_ITEMS.settings}/>
             <div className="settings__column">
                 <BetSettings className="bet-desktop__container"/>
+                <div className="separator-vertical "/>
                 <UXSettings />
             </div>
         </div>);

package/dist/SettingsUI/SystemSettings/systemSettings.css

@@ -15,8 +15,23 @@
 .settings__title h2 {
     color: #ec5e27;
     margin: 0px;
-    text-decoration: underline;
     text-transform: uppercase;
+    font-weight: bold;
+    font-size: 32px;
+    @media only screen and (max-width: 600px) {
+        font-size: 24px;
+    }
+}
+
+.separator-vertical {
+    width: 1px;
+    min-width: 1px;
+    height: 100%;
+    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.7), transparent);
+    display: block;
+    @media only screen and (orientation: landscape), only screen and (orientation: portrait) {
+        display: none;
+    }
 }
 
 .settings__column {
@@ -28,14 +43,13 @@
     width: 100%;
 }
 
-@media only screen and (max-width: 900px) {
+@media only screen and (orientation: landscape), only screen and (orientation: portrait) {
     .settings__column {
         flex-direction: column-reverse;
         overflow-x: hidden;
     }
 }
-
-@media only screen and (max-width: 900px) {
+@media only screen and (orientation: landscape), only screen and (orientation: portrait) {
     .bet-desktop__container {
         display: none;
     }

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

@@ -19,13 +19,13 @@ export const BetControls = observer(() => {
             <h2>{i18next.t("totalBet")}</h2>
             <div className="bet-container__controls">
                 <button disabled={isDisabled} onClick={() => onClick("decrease")} className="bet-container__button" name="bet-minus">
-                    -
+                    <span>-</span>
                 </button>
                 <div className="bet-container__value">
                     <p>{settingStore.betText}</p>
                 </div>
                 <button disabled={isDisabled} onClick={() => onClick("increase")} className="bet-container__button" name="bet-plus">
-                    +
+                    <span>+</span>
                 </button>
             </div>
         </div>);

package/dist/SettingsUI/components/Bet/bet.css

@@ -28,6 +28,9 @@
     text-align: center;
     color: white;
     text-transform: uppercase;
+    margin-bottom: 12px;
+    font-size: 20px;
+    color: #ec5e27;
 }
 
 .bet-container__button {
@@ -41,6 +44,15 @@
     color: white;
     text-align: center;
     cursor: pointer;
+    position: relative;
+    transition: all 0.2s ease-in-out;
+}
+
+.bet-container__button span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 .bet-container__button:disabled {
@@ -49,10 +61,16 @@
     user-select: none;
 }
 
-.bet-container__button:active {
-    background-color: #fdf42550;
-    color: #fdf425;
-    border: 2px solid #fdf425;
+.bet-container__button:hover:not(:disabled) {
+    background-color: #ec5f274d;
+    color: #ec5e27;
+    border: 2px solid #ec5e27;
+}
+
+.bet-container__button:active:not(:disabled) {
+    background-color: #ec5f27b0;
+    color: #ec5e27;
+    border: 2px solid #ec5e27;
 }
 
 .bet-container__controls {
@@ -61,6 +79,10 @@
 }
 
 @media only screen and (max-width: 900px) {
+    .bet-container__controls {
+        margin-bottom: 12px;
+    }
+
     #bet-layer.modal {
         width: 90vw;
         height: fit-content;

package/dist/SettingsUI/components/SlidingSwitch/slidingSwitch.css

@@ -27,6 +27,26 @@
     border-radius: 34px;
 }
 
+@keyframes shine {
+    from {
+        -webkit-mask-position: 150%;
+    }
+
+    to {
+        -webkit-mask-position: -50%;
+    }
+}
+
+.switch-round-box:hover:not(.switch-round-box--active) {
+    -webkit-mask-image: linear-gradient(-75deg, #000 30%, rgba(0, 0, 0, 0.6) 50%, #000 70%);
+    -webkit-mask-size: 200%;
+    animation: shine 1.5s infinite;
+}
+
+.turtle-switch {
+    width: 83px;
+}
+
 .turtle-switch-round-box {
     position: absolute;
     cursor: pointer;
@@ -89,26 +109,26 @@
 .switch__text {
     margin: 0;
     position: absolute;
-    top: 5px;
+    top: 8px;
     right: 9px;
 }
 
 .switch__text--active {
     left: 9px;
-    color: #fdf425;
+    color: #ec5e27;
 }
 
 .switch-round-box--active {
-    box-shadow: 0 0 1px #fdf425;
-    background-color: #fdf42550;
-    border: 2px solid #fdf425;
+    box-shadow: 0px 0px 30px 00px rgba(236, 94, 39, 1);
+    background-color: #ec5f2778;
+    border: 2px solid #ec5e27;
 }
 
 .switch-round-box--active:before {
     -webkit-transform: translateX(45px);
     -ms-transform: translateX(45px);
     transform: translateX(45px);
-    background-color: #fdf425;
+    background-color: #ec5e27;
 }
 
 @media only screen and (max-width: 900px) {

package/dist/SettingsUI/components/SwitchWithHeader/headerStyle.css

@@ -1,11 +1,12 @@
 .header-description {
-    max-width: 200px;
+    width: 75%;
 }
 
 .header-description__title {
     min-width: 200px;
     margin: 0px;
     text-transform: uppercase;
+    font-weight: bold;
 }
 
 @media only screen and (max-width: 650px) {
@@ -15,8 +16,9 @@
 }
 
 .header-description__text {
-    max-width: 170px;
+    max-width: 90%;
     margin: 0px;
+    opacity: 0.6;
 }
 
 @media only screen and (max-width: 900px) {

package/dist/SettingsUI/components/UXSettings/UXSettings.css

@@ -21,14 +21,20 @@
     width: 100%;
 }
 
-@media only screen and (max-width: 900px) {
+@media only screen and (orientation: landscape), only screen and (orientation: portrait) {
     .ux-settings__switch {
-        width: 250px;
+        width: max(250px, 80%);
+    }
+    .ux-settings__switch:last-child {
+        padding-bottom: 20px;
     }
     .ux-settings {
-        width: unset;
+        width: 85%;
         overflow-y: auto;
         overflow-x: hidden;
         padding: 0 30px;
     }
+    .ux-settings__switch-container {
+        gap: 10px;
+    }
 }

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

@@ -61,6 +61,7 @@
         "collect": "COLLECT",
         "totalBet": "Bet",
         "buyFreeSpins": "Buy Free Spins",
-        "possibleWin": "POSSIBLE WIN: "
+        "possibleWin": "POSSIBLE WIN: ",
+        "gamePaysText": "GAME PAYS: "
     }
 }

package/dist/components/frame/AbstractFrame.js

@@ -64,6 +64,9 @@ export class AbstractFrame extends ResumableContainer {
         const spineName = this.mysteryFxConfig.mobileSpineName && getDeviceOrientation() === "mobile-portrait"
             ? this.mysteryFxConfig.mobileSpineName
             : this.mysteryFxConfig.spineName;
+        if (!spineName) {
+            return;
+        }
         this.mysteryFxHighlight = new Spine(getSpineData(spineName));
         this.repositionMysteryFx(x, y);
         SoundManager.play(SoundTracks.mysteryFxLoop);

package/dist/components/messageBox/MessageBox.d.ts

@@ -18,14 +18,17 @@ export declare class MessageBox extends Container {
     static readonly autoSpinTextRegistryName = "autoSpinAmount";
     static readonly currentWinTextRegistryName = "winAmount";
     static readonly possibleWinTextRegistryName = "possibleWinAmount";
+    static readonly gamePaysTextRegistryName = "gamePaysAmount";
     private readonly positioningFrame;
     private readonly autoSpinText;
     private readonly freeSpinText;
     private readonly incentiveText;
     private readonly currentWinText;
     private readonly possibleWinText;
+    private readonly gamePaysText;
     private winLineIndicator?;
     private currentWinShown;
+    private gamePaysShown;
     private autoSpinShown;
     private freeSpinShown;
     private possibleWinShown;
@@ -45,6 +48,12 @@ export declare class MessageBox extends Container {
      * @returns {void}
      */
     hideCurrentWinText(): void;
+    /**
+     * Function for hiding game pays text
+     * @public
+     * @returns {void}
+     */
+    hideGamePaysText(): void;
     /**
      * Function fro hiding possible win text
      * @public
@@ -105,6 +114,13 @@ export declare class MessageBox extends Container {
      * @returns {void}
      */
     showPossibleWinText(): void;
+    /**
+     * Displays the game pays text in the message box.
+     * It also checks if the text is already shown and if other texts are visible to prevent overlapping.
+     * @public
+     * @returns {void}
+     */
+    showGamePaysText(): void;
     /**
      * Displays the auto spin text in the message box.
      * It checks if auto spins are enabled and if the text is already shown.

package/dist/components/messageBox/MessageBox.js

@@ -23,14 +23,17 @@ export class MessageBox extends Container {
     static autoSpinTextRegistryName = "autoSpinAmount";
     static currentWinTextRegistryName = "winAmount";
     static possibleWinTextRegistryName = "possibleWinAmount";
+    static gamePaysTextRegistryName = "gamePaysAmount";
     positioningFrame;
     autoSpinText;
     freeSpinText;
     incentiveText;
     currentWinText;
     possibleWinText;
+    gamePaysText;
     winLineIndicator = undefined;
     currentWinShown = false;
+    gamePaysShown = false;
     autoSpinShown = false;
     freeSpinShown = false;
     possibleWinShown = false;
@@ -50,6 +53,7 @@ export class MessageBox extends Container {
         this.freeSpinText = new UpdatableTextComponent(MessageBox.freeSpinTextRegistryName, i18n.t("currentFreeSpins"), UPDATABLE_MODES.int, fontSize - 5, new Color(0xffffff).toHex(), () => this.centerTextOnX(this.freeSpinText));
         this.autoSpinText = new UpdatableTextComponent(MessageBox.autoSpinTextRegistryName, i18n.t("autoSpinsLeft"), UPDATABLE_MODES.int, fontSize - 5, new Color(0xffffff).toHex(), () => this.centerTextOnX(this.autoSpinText));
         this.currentWinText = new UpdatableTextComponent(MessageBox.currentWinTextRegistryName, i18n.t("currentWin"), UPDATABLE_MODES.money, fontSize + 15, undefined, () => this.centerTextOnX(this.currentWinText));
+        this.gamePaysText = new UpdatableTextComponent(MessageBox.gamePaysTextRegistryName, i18n.t("gamePaysText"), UPDATABLE_MODES.money, fontSize + 15, undefined, () => this.centerTextOnX(this.gamePaysText));
         this.possibleWinText = new UpdatableTextComponent(MessageBox.possibleWinTextRegistryName, i18n.t("possibleWin"), UPDATABLE_MODES.money, fontSize + 15, undefined, () => this.centerTextOnX(this.possibleWinText));
         this.incentiveText = new Text(sample(i18n.t("idleMessages", { returnObjects: true })[RainMan.componentRegistry.getSpeedLevel()]), {
             fontFamily: RainMan.config.fontFace,
@@ -60,11 +64,13 @@ export class MessageBox extends Container {
         });
         this.incentiveText.y = -25;
         this.currentWinText.y = -25;
+        this.gamePaysText.y = -25;
         this.possibleWinText.y = -25;
         this.freeSpinText.y = this.currentWinText.y + this.currentWinText.height / 2 + this.freeSpinText.height / 2;
         this.autoSpinText.y = this.currentWinText.y + this.currentWinText.height / 2 + this.autoSpinText.height / 2;
         RainMan.componentRegistry.addMany([
             this.currentWinText,
+            this.gamePaysText,
             this.autoSpinText,
             this.freeSpinText,
             this.possibleWinText
@@ -91,6 +97,17 @@ export class MessageBox extends Container {
             this.removeChild(this.currentWinText);
         }
     }
+    /**
+     * Function for hiding game pays text
+     * @public
+     * @returns {void}
+     */
+    hideGamePaysText() {
+        if (this.gamePaysShown) {
+            this.gamePaysShown = false;
+            this.removeChild(this.gamePaysText);
+        }
+    }
     /**
      * Function fro hiding possible win text
      * @public
@@ -183,6 +200,7 @@ export class MessageBox extends Container {
         }
         this.hideIncentiveText();
         this.hidePossibleWinText();
+        this.hideGamePaysText();
         if (this.currentWinShown) {
             return;
         }
@@ -205,6 +223,23 @@ export class MessageBox extends Container {
         this.centerTextOnX(this.possibleWinText);
         this.addChild(this.possibleWinText);
     }
+    /**
+     * Displays the game pays text in the message box.
+     * It also checks if the text is already shown and if other texts are visible to prevent overlapping.
+     * @public
+     * @returns {void}
+     */
+    showGamePaysText() {
+        this.hideIncentiveText();
+        this.hideCurrentWinText();
+        this.hidePossibleWinText();
+        if (this.gamePaysShown) {
+            return;
+        }
+        this.gamePaysShown = true;
+        this.centerTextOnX(this.gamePaysText);
+        this.addChild(this.gamePaysText);
+    }
     /**
      * Displays the auto spin text in the message box.
      * It checks if auto spins are enabled and if the text is already shown.

package/dist/controllers/AbstractController.d.ts

@@ -54,6 +54,7 @@ export declare abstract class AbstractController<T> {
     protected wasAutoplayEnabledBeforeFreeSpin: boolean;
     protected setSlowerSpeedForFreeSpins: boolean;
     shouldStopMobileSpin: boolean;
+    disableMessageBoxChange: boolean;
     protected resolveBigWin?: () => void;
     protected resolveMysteryWin?: () => void;
     protected resolveBonusWin?: () => void;

package/dist/controllers/AbstractController.js

@@ -54,6 +54,7 @@ export class AbstractController {
     wasAutoplayEnabledBeforeFreeSpin = false;
     setSlowerSpeedForFreeSpins = false;
     shouldStopMobileSpin = false;
+    disableMessageBoxChange = false;
     resolveBigWin;
     resolveMysteryWin;
     resolveBonusWin;
@@ -361,7 +362,12 @@ export class AbstractController {
             this.uiController.recentWin = ceilToDecimal(spinLogic.winTotalAmount);
             this.uiController.totalFreeSpinWinAmount = this._lastWinAmount;
         }
-        this.uiController.currentBalance = spinData.balance;
+        if (availableFreeSpins > 0) {
+            this.uiController.currentBalance = spinData.balance;
+        }
+        else {
+            this.uiController.currentBalance = spinData.balance + this.initData.round_win_amount;
+        }
         this.roundNumber = spinData.getRawData().round_number;
         RainMan.settingsStore.setRoundNumber(this.roundNumber);
         if (this._lastWinAmount !== 0) {
@@ -578,7 +584,9 @@ export class AbstractController {
      * @returns {void}
      */
     setMessageBoxBasedOnPhase(phase) {
-        if (RainMan.settingsStore.isFreeSpinsPlayEnabled && !this.invokeFreeSpinPlateAfterWin) {
+        if (RainMan.settingsStore.isFreeSpinsPlayEnabled &&
+            !this.invokeFreeSpinPlateAfterWin &&
+            !this.disableMessageBoxChange) {
             this.uiController.messageBox.showCurrentWinText();
             if (!this.hideFreeSpinsMessageBox) {
                 this.uiController.messageBox.showFreeSpinText();

package/dist/controllers/UiController.d.ts

@@ -147,6 +147,19 @@ export declare class UiController {
      * @returns {void}
      */
     updateShownPossibleWin(): void;
+    /**
+     * Shows game pays in a bottom panel, if exists
+     * @param amount
+     * @public
+     * @returns {void}
+     */
+    updateShownGamePays(amount: number): void;
+    /**
+     * Shows game pays in a bottom panel, if exists
+     * @public
+     * @returns {void}
+     */
+    resetGamePaysText(): void;
     /**
      * Function for updating shown free spin amount
      * @public

package/dist/controllers/UiController.js

@@ -214,6 +214,24 @@ export class UiController {
         this.messageBox.showPossibleWinText();
         RainMan.componentRegistry.get(MessageBox.possibleWinTextRegistryName).set(this.recentWin);
     }
+    /**
+     * Shows game pays in a bottom panel, if exists
+     * @param amount
+     * @public
+     * @returns {void}
+     */
+    updateShownGamePays(amount) {
+        this.messageBox.showGamePaysText();
+        RainMan.componentRegistry.get(MessageBox.gamePaysTextRegistryName).update(amount);
+    }
+    /**
+     * Shows game pays in a bottom panel, if exists
+     * @public
+     * @returns {void}
+     */
+    resetGamePaysText() {
+        RainMan.componentRegistry.get(MessageBox.gamePaysTextRegistryName).set(0);
+    }
     /**
      * Function for updating shown free spin amount
      * @public

package/dist/utils/common/functions.js

@@ -143,7 +143,10 @@ export const setTimeScale = (spine, flag) => {
  * @returns {void}
  */
 export const changeResolution = (high) => {
-    RainMan.app.renderer.resolution = high ? window.devicePixelRatio : 1;
+    const lowRes = Math.max(window.devicePixelRatio * 0.5, 1);
+    const resolution = high ? window.devicePixelRatio : lowRes;
+    RainMan.app.renderer.resolution = resolution;
+    RainMan.app.renderer.resize(RainMan.app.screen.width, RainMan.app.screen.height);
 };
 /**
  * Helper function for checking if the value is not null or undefined

package/dist/winComponents/TexturedText.d.ts

@@ -6,6 +6,7 @@ import { UpdatableValueComponent } from "../components";
  * @augments {UpdatableValueComponent}
  */
 export declare class TexturedText extends UpdatableValueComponent {
+    private baseFontSize;
     registryName: string;
     textureSprite?: Sprite;
     constructor(registryName: string, text: string, textStyle: ITextStyle, textureName?: string);
@@ -30,4 +31,24 @@ export declare class TexturedText extends UpdatableValueComponent {
      * @returns {void}
      */
     play(): void;
+    /**
+     * Sets the text style for the value text component.
+     * @param {Partial<ITextStyle>} style - The new text style to apply.
+     * @public
+     * @returns {void}
+     */
+    setTextStyle(style: Partial<ITextStyle>): void;
+    /**
+     * Sets base font size
+     * @param {number} value new value of the base font size
+     * @public
+     * @returns {void}
+     */
+    setBaseFontSize(value: number): void;
+    /**
+     * Updates current text font size based on current text length and base font size
+     * @public
+     * @returns {void}
+     */
+    updateFontSize(): void;
 }

package/dist/winComponents/TexturedText.js

@@ -10,6 +10,7 @@ import { getTexture } from "../utils";
  * @augments {UpdatableValueComponent}
  */
 export class TexturedText extends UpdatableValueComponent {
+    baseFontSize = 190;
     registryName = "";
     textureSprite;
     constructor(registryName, text, textStyle, textureName) {
@@ -33,7 +34,7 @@ export class TexturedText extends UpdatableValueComponent {
      * @returns {Promise<void>}
      */
     async update(newValue) {
-        this.valueTextComponent.style.fontSize = -10 * new MoneyText(newValue).toString().length + 190;
+        this.valueTextComponent.style.fontSize = -10 * new MoneyText(newValue).toString().length + this.baseFontSize;
         await super.update(newValue, RainMan.config.durationOfActions.updatableTextCountingDuration);
     }
     /**
@@ -44,7 +45,7 @@ export class TexturedText extends UpdatableValueComponent {
      * @returns {void}
      */
     randomizeSet(value, _possibleValues) {
-        this.valueTextComponent.style.fontSize = -10 * new MoneyText(value).toString().length + 190;
+        this.valueTextComponent.style.fontSize = -10 * new MoneyText(value).toString().length + this.baseFontSize;
         super.update(value, 1);
     }
     /**
@@ -63,4 +64,30 @@ export class TexturedText extends UpdatableValueComponent {
         })
             .start();
     }
+    /**
+     * Sets the text style for the value text component.
+     * @param {Partial<ITextStyle>} style - The new text style to apply.
+     * @public
+     * @returns {void}
+     */
+    setTextStyle(style) {
+        this.valueTextComponent.style = { ...this.valueTextComponent.style, ...style };
+    }
+    /**
+     * Sets base font size
+     * @param {number} value new value of the base font size
+     * @public
+     * @returns {void}
+     */
+    setBaseFontSize(value) {
+        this.baseFontSize = value;
+    }
+    /**
+     * Updates current text font size based on current text length and base font size
+     * @public
+     * @returns {void}
+     */
+    updateFontSize() {
+        this.valueTextComponent.style.fontSize = -10 * super.value.length + this.baseFontSize;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixi-rainman-game-engine",
-    "version": "0.3.20",
+    "version": "0.3.22",
     "description": "This repository contains all of the mechanics that used in rainman games.",
     "main": "./dist/index.js",
     "module": "./dist/index.js",