pixi-rainman-game-engine 0.1.24 → 0.1.25

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

@@ -59,18 +59,17 @@
 
 .autoplay-settings__stop-limits {
     display: flex;
-    flex-direction: row;
+    justify-content: center;
     width: 100%;
     height: 50px;
-    justify-content: center;
 }
 
 .autoplay-settings__limit {
-    width: 40px;
-    border: solid 2px white;
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 40px;
+    border: solid 2px white;
     font-size: 20px;
     font-weight: bolder;
     margin: 0px 5px;
@@ -95,10 +94,14 @@
 }
 
 .left {
+    background-color: #00000000;
+    text-align: center;
     border-radius: 34px 0px 0px 34px;
 }
 
 .right {
+    background-color: #00000000;
+    text-align: center;
     border-radius: 0px 34px 34px 0px;
 }
 
@@ -109,6 +112,7 @@
 }
 
 .circle {
+    background-color: #00000000;
     border-radius: 34px;
     font-size: 40px;
 }
@@ -164,10 +168,6 @@
         width: 90%;
     }
 
-    .autoplay-settings__column {
-        flex-direction: column-reverse;
-    }
-
     .autoplay-settings__switches {
         width: 100%;
         flex-direction: column;
@@ -179,46 +179,66 @@
         margin: 5px 0px;
     }
 
-    .left {
-        width: 40px;
-        border-radius: 34px 0px 0px 34px;
+    .autoplay-settings__limit {
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        margin: 0px;
+        padding: 0px;
     }
 
     .right {
-        width: 40px;
+        width: 34px;
+        height: 34px;
+        font-size: 12px;
+        background-color: #00000000;
         border-radius: 0px 34px 34px 0px;
     }
 
     .middle {
-        width: 70px;
+        width: 34px;
+        height: 34px;
         font-size: 12px;
+        background-color: #00000000;
         border-radius: 0px 0px 0px 0px;
     }
 
+    .left {
+        width: 34px;
+        height: 34px;
+        background-color: #00000000;
+        font-size: 12px;
+        border-radius: 34px 0px 0px 34px;
+    }
+
     .circle {
         border-radius: 34px;
-        font-size: 40px;
-        width: 30px;
+        width: 34px;
+        height: 34px;
+        font-size: 20px;
+        background-color: #00000000;
     }
 
     .autoplay-settings__stop-limits {
-        height: 35px;
+        width: 100%;
+        flex-wrap: wrap;
+        height: fit-content;
+        overflow: hidden;
     }
 
     .autoplay-settings__limit.circle p {
         position: relative;
-        top: -4px;
-        font-size: 20px;
     }
 
     .autoplay-settings__limit.left p {
         position: relative;
-        top: -2px;
+        text-align: center;
     }
 
     .autoplay-settings__limit.right p {
         position: relative;
-        top: -2px;
+        text-align: center;
+        margin: 0px;
     }
 
     .autoplay-settings__confirmation {
@@ -230,36 +250,6 @@
         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;

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

@@ -56,7 +56,7 @@ export const AutoplaySettings = observer(() => {
                 <h2>{i18next.t("autoPlay")}</h2>
             </div>
             <div className="autoplay-settings__stop-limits">
-                <div className={`autoplay-settings__limit left ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`} onClick={() => {
+                <button className={`autoplay-settings__limit left ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`} onClick={() => {
             let indexOfSelectedSpinsLimit = availableAutoSpinLimits.findIndex((limitCount) => limitCount === howManyAutoSpinsLeft);
             indexOfSelectedSpinsLimit -= 1;
             if (indexOfSelectedSpinsLimit === -1) {
@@ -65,13 +65,11 @@ export const AutoplaySettings = observer(() => {
             updateLimitsBounds(availableAutoSpinLimits[indexOfSelectedSpinsLimit]);
         }}>
                     <p>-</p>
-                </div>
-                {limit_numbers.map((limiter, index) => {
-            return (<button key={`${limiter}${index}`} value={limiter} className={`autoplay-settings__limit ${limiter === howManyAutoSpinsLeft ? "autoplay-settings__limit--active" : ""} middle ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`} onClick={(event) => updateLimitsBounds(Number(event.currentTarget.value))}>
-                            <p>{limiter}</p>
-                        </button>);
-        })}
-                <div className={`autoplay-settings__limit right ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`} onClick={() => {
+                </button>
+                {limit_numbers.map((limiter, index) => (<button key={`${limiter}${index}`} value={limiter} className={`autoplay-settings__limit ${limiter === howManyAutoSpinsLeft ? "autoplay-settings__limit--active" : ""} middle ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`} disabled={settingStore.infinitySpinsEnabled} onClick={(event) => updateLimitsBounds(Number(event.currentTarget.value))}>
+                        <p>{limiter}</p>
+                    </button>))}
+                <button className={`autoplay-settings__limit right ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`} onClick={() => {
             let indexOfSelectedSpinsLimit = availableAutoSpinLimits.findIndex((limitCount) => limitCount === howManyAutoSpinsLeft);
             indexOfSelectedSpinsLimit += 1;
             if (indexOfSelectedSpinsLimit === availableAutoSpinLimits.length) {
@@ -81,12 +79,11 @@ export const AutoplaySettings = observer(() => {
             updateLimitsBounds(newAutoSpinsLimitNumber);
         }}>
                     <p>+</p>
-                </div>
-                <div className={`autoplay-settings__limit circle ${infinitySpinsEnabled ? "autoplay-settings__limit--active" : ""}`} onClick={() => flipInfinitySpinsFlag()}>
+                </button>
+                <button className={`autoplay-settings__limit circle ${infinitySpinsEnabled ? "autoplay-settings__limit--active" : ""}`} onClick={() => flipInfinitySpinsFlag()}>
                     <p>∞</p>
-                </div>
+                </button>
             </div>
-
             <div className="autoplay-settings__title">
                 <h2>{i18next.t("stopAutoPlay")}</h2>
             </div>
@@ -106,16 +103,16 @@ export const AutoplaySettings = observer(() => {
             </div>
 
             <div className="autoplay-settings__confirmation">
-                <div className="autoplay-settings__confirmation-button" onClick={() => {
+                <button className="autoplay-settings__confirmation-button" onClick={() => {
             resetAutoplaySettings();
             updateLimitsBounds(initialAutoSpinCount);
             settingStore.handleModalInvocation?.(UI_ITEMS.autoplay);
         }}>
                     <p>{i18next.t("cancel")}</p>
-                </div>
-                <div id={COMPONENTS.autoSpinConfirm} className="autoplay-settings__confirmation-button" onClick={() => settingStore.handleModalInvocation?.(UI_ITEMS.autoplay)}>
+                </button>
+                <button id={COMPONENTS.autoSpinConfirm} className="autoplay-settings__confirmation-button">
                     <p>{i18next.t("confirm")}</p>
-                </div>
+                </button>
             </div>
         </div>);
 });

package/dist/SettingsUI/index.css

@@ -161,3 +161,9 @@ html.is-locked .ios-scroller-animation {
     opacity: 0;
     z-index: -9999;
 }
+
+@media (orientation: landscape) {
+    .modal-style {
+        overflow-y: auto;
+    }
+}

package/dist/application/ButtonsEventManager/ButtonsEventManager.js

@@ -246,6 +246,7 @@ export class ButtonsEventManager {
         const confirmAutoplayButton = window.document.getElementById(COMPONENTS.autoSpinConfirm);
         if (confirmAutoplayButton !== null) {
             confirmAutoplayButton.addEventListener("click", () => {
+                RainMan.settingsStore.handleModalInvocation?.(UI_ITEMS.autoplay);
                 confirmAutoplayButtonCallback();
             });
         }
@@ -285,23 +286,16 @@ export class ButtonsEventManager {
      * @param {string} layerName
      */
     handleModalInvocation(layerName) {
-        const alreadyInvokedLayer = this.getInvokedSettingItem();
-        if (alreadyInvokedLayer !== null) {
-            if (alreadyInvokedLayer.style.display === "flex") {
-                alreadyInvokedLayer.style.display = "none";
-                this.enableButtons();
-            }
-        }
-        else {
-            this.lastLayerInvoked = "";
-        }
         const layer = window.document.getElementById(layerName);
         if (layer !== null) {
-            if (layer.style.display !== "flex" && this.lastLayerInvoked !== layerName) {
-                this.lastLayerInvoked = layerName;
+            if (layer.style.display !== "flex") {
                 layer.style.display = "flex";
                 this.disableButtons();
             }
+            else {
+                layer.style.display = "none";
+                this.enableButtons();
+            }
         }
     }
 }

package/dist/components/common/AnimatedBackground.js

@@ -25,7 +25,6 @@ export class AnimatedBackground extends ResumableContainer {
         this.mobileSpineName = mobileSpineName;
         this.name = AnimatedBackground.registryName;
         this.parentLayer = BackgroundLayer;
-        RainMan.settingsStore.containersWithSpines.push(this);
     }
     resize() {
         this.changeSpineForOrientation();

package/dist/utils/common/functions.js

@@ -64,7 +64,7 @@ export const setTimeScale = (spine, flag) => {
         spine.state.timeScale = spine.state.originalTimeScale;
     }
     else {
-        spine.state.originalTimeScale = spine.state.timeScale;
+        spine.state.timeScale = 0;
     }
 };
 export const changeResolution = (high) => {

package/package.json

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