pixi-rainman-game-engine 0.1.19 → 0.1.21

package/dist/SettingsUI/components/SymbolMultiplierPopup/index.d.ts

@@ -1,5 +1,4 @@
-import "./symbolPopup.css";
 import React from "react";
-export declare const SymbolMultiplierPopup: (() => React.JSX.Element) & {
+export declare const SymbolMultiplierPopup: (() => React.JSX.Element | null) & {
     displayName: string;
 };

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

@@ -1,38 +1,40 @@
-import "./symbolPopup.css";
 import { observer } from "mobx-react-lite";
 import React from "react";
 import { MoneyText } from "../../../Money";
 import { RainMan } from "../../../Rainman";
 import { useStores } from "../../hooks";
+import { cn } from "../../utils/tw";
 const getPaytableValueDetails = (paytableValue, bet) => {
     if (typeof paytableValue === "number") {
-        return <div className="symbol-popup__value">{new MoneyText(paytableValue * bet).toString()}</div>;
+        return (<div className="whitespace-nowrap text-xs text-white sm:ml-5 sm:text-2xl">
+                {new MoneyText(paytableValue * bet).toString()}
+            </div>);
     }
     const min = Array.isArray(paytableValue) ? paytableValue[0] : paytableValue.min;
     const max = Array.isArray(paytableValue) ? paytableValue.at(-1) || 0 : paytableValue.max;
-    return (<div className="symbol-popup__value--range">
-            <div>{`min: ${new MoneyText(min * bet).toString()}`}</div>
-            <div>{`max: ${new MoneyText(max * bet).toString()}`}</div>
+    return (<div className="text-md flex flex-col whitespace-nowrap sm:text-xs">
+            <div>min: {new MoneyText(min * bet).toString()}</div>
+            <div>max: {new MoneyText(max * bet).toString()}</div>
         </div>);
 };
 export const SymbolMultiplierPopup = observer(() => {
     const { settingStore } = useStores();
     const { popupPaytablePosition, popupPaytableData } = settingStore;
     if (popupPaytablePosition && popupPaytableData) {
-        const arrowDirection = popupPaytablePosition.x > RainMan.app.screen.width / 2 ? "arrow-on-right" : "arrow-on-left";
-        return (<div className={`symbol-multiplier-popup-modal modal-style ${arrowDirection}`} style={{
+        const arrowDirection = popupPaytablePosition.x > RainMan.app.screen.width / 2 ? "arrow-on-right" : "arrow-on-left ";
+        return (<div className={cn("text-md absolute flex h-fit flex-col items-center justify-center rounded-lg bg-zinc-800 p-2 shadow-lg sm:text-2xl", arrowDirection)} style={{
                 left: popupPaytablePosition.x,
                 top: popupPaytablePosition.y,
             }}>
-                <div className={`symbol-popup ${arrowDirection}`}>
-                    {popupPaytableData.map((popupPaytableRow) => {
-                return (<div key={popupPaytableRow.prefix} className="symbol-popup__row">
-                                <div className="symbol-popup__prefix">{popupPaytableRow.prefix}x</div>
-                                {getPaytableValueDetails(popupPaytableRow.value, settingStore.bet)}
-                            </div>);
-            })}
+                <div className="flex h-full w-fit flex-col items-center justify-center sm:w-full">
+                    {popupPaytableData.map((popupPaytableRow) => (<div key={popupPaytableRow.prefix} className="flex gap-1 text-xs sm:text-2xl">
+                            <div className="text-xs font-bold text-primary-500 sm:text-2xl">
+                                {popupPaytableRow.prefix}x
+                            </div>
+                            {getPaytableValueDetails(popupPaytableRow.value, settingStore.bet)}
+                        </div>))}
                 </div>
             </div>);
     }
-    return <div></div>;
+    return null;
 });

package/dist/SettingsUI/components/UXSettings/index.d.ts

@@ -1,4 +1,3 @@
-import "./UXSettings.css";
 import React from "react";
 export declare const UXSettings: (() => React.JSX.Element) & {
     displayName: string;

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

@@ -1,30 +1,17 @@
-import "./UXSettings.css";
 import { observer } from "mobx-react-lite";
 import React from "react";
 import { useStores } from "../../hooks";
 import { SpeedButtonWithHeader, SwitchWithHeader } from "../SwitchWithHeader";
 export const UXSettings = observer(() => {
     const { settingStore } = useStores();
-    return (<div className="ux-settings">
-            <div className="ux-settings__switch-container">
-                <div className="ux-settings__switch">
-                    <SpeedButtonWithHeader header="Quick Spin" description="Play faster by reducing total spin time"/>
-                </div>
-                <div className="ux-settings__switch">
-                    <SwitchWithHeader header="Battery saver" description="Safe battery life by reducing animation speed" flag={settingStore.batterySaverFlag} setFlag={settingStore.setBatteryFlag}/>
-                </div>
-                <div className="ux-settings__switch">
-                    <SwitchWithHeader header="Ambient music" description="Turn on or off the game music" flag={settingStore.ambientMusicFlag} setFlag={settingStore.setAmbientMusicFlag}/>
-                </div>
-                <div className="ux-settings__switch">
-                    <SwitchWithHeader header="Sound fx" description="Turn on or off the game sounds" flag={settingStore.soundFxFlag} setFlag={settingStore.setSoundFxFlag}/>
-                </div>
-                <div className="ux-settings__switch">
-                    <SwitchWithHeader header="Full screen mode" description="Turn on or off game fullscreen" flag={settingStore.fullScreenFlag} setFlag={settingStore.setFullScreenFlag}/>
-                </div>
-                <div className="ux-settings__switch">
-                    <SwitchWithHeader header="HI resolution" description="Enable high resolution files" flag={settingStore.HiResolutionFlag} setFlag={settingStore.setHiResolutionFlag}/>
-                </div>
+    return (<div className="flex w-full max-w-xl flex-col">
+            <div className="flex flex-col gap-4">
+                <SpeedButtonWithHeader header="Quick Spin" description="Play faster by reducing total spin time"/>
+                <SwitchWithHeader header="Battery saver" description="Safe battery life by reducing animation speed" flag={settingStore.batterySaverFlag} setFlag={settingStore.setBatteryFlag}/>
+                <SwitchWithHeader header="Ambient music" description="Turn on or off the game music" flag={settingStore.ambientMusicFlag} setFlag={settingStore.setAmbientMusicFlag}/>
+                <SwitchWithHeader header="Sound fx" description="Turn on or off the game sounds" flag={settingStore.soundFxFlag} setFlag={settingStore.setSoundFxFlag}/>
+                <SwitchWithHeader header="Full screen mode" description="Turn on or off game fullscreen" flag={settingStore.fullScreenFlag} setFlag={settingStore.setFullScreenFlag}/>
+                <SwitchWithHeader header="HI resolution" description="Enable high resolution files" flag={settingStore.HiResolutionFlag} setFlag={settingStore.setHiResolutionFlag}/>
             </div>
         </div>);
 });

package/dist/SettingsUI/components/VolumeSettings/index.d.ts

@@ -1,5 +1,4 @@
 import "rc-slider/assets/index.css";
-import "./volume.css";
 import React from "react";
 export declare const VolumeSettings: (() => React.JSX.Element) & {
     displayName: string;

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

@@ -1,5 +1,4 @@
 import "rc-slider/assets/index.css";
-import "./volume.css";
 import { observer } from "mobx-react-lite";
 import Slider from "rc-slider";
 import React from "react";
@@ -12,9 +11,9 @@ const onChange = (newVolumeLevel) => {
 export const VolumeSettings = observer(() => {
     const { settingStore } = useStores();
     const COLOR = settingStore.isSoundEnabled() ? "#2FC408" : "#FA5F27";
-    return (<div className="volume-control">
-            <div className="volume-control__volume-icon"></div>
-            <Slider className="volume-control__slider" step={1} min={0} max={100} value={settingStore.volumeLevel} handleStyle={{
+    return (<div className="relative -right-10 top-2 flex h-full w-4/5 items-center">
+            <div className="relative -left-5 bottom-2 h-[30px] w-[30px] bg-[url('/assets/settings/sound-icon.png')] bg-contain bg-center bg-no-repeat"/>
+            <Slider className="relative bottom-2" step={1} min={0} max={100} value={settingStore.volumeLevel} handleStyle={{
             backgroundColor: COLOR,
             borderColor: COLOR,
             width: "7px",
@@ -28,7 +27,7 @@ export const VolumeSettings = observer(() => {
             height: "5px",
             borderRadius: "1px",
         }} onChange={onChange}/>
-            <p className="volume-control__text" style={{
+            <p className="text-md relative bottom-2 left-4 w-9 pl-2 font-bold" style={{
             color: COLOR,
         }}>
                 {settingStore.volumeLevel}

package/dist/SettingsUI/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./useBuyFreeSpins";
+export * from "./useClickOutside";
 export * from "./useDeviceOrientations";
 export * from "./useStore";

package/dist/SettingsUI/hooks/index.js

@@ -1,3 +1,4 @@
 export * from "./useBuyFreeSpins";
+export * from "./useClickOutside";
 export * from "./useDeviceOrientations";
 export * from "./useStore";

package/dist/SettingsUI/hooks/useClickOutside.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const useClickOutside: (handler: () => void, initialDisplay?: boolean) => {
+    ref: import("react").RefObject<HTMLDivElement>;
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

package/dist/SettingsUI/hooks/useClickOutside.js

@@ -0,0 +1,20 @@
+import { useEffect, useRef, useState } from "react";
+export const useClickOutside = (handler, initialDisplay = false) => {
+    const ref = useRef(null);
+    const [open, setOpen] = useState(initialDisplay);
+    const handleClickOutside = (event) => {
+        if (ref.current && !ref.current.contains(event?.target) && open) {
+            handler();
+            setOpen(false);
+        }
+    };
+    useEffect(() => {
+        document.addEventListener("mousedown", handleClickOutside, true);
+        document.addEventListener("touchend", handleClickOutside, true);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside, true);
+            document.removeEventListener("touchend", handleClickOutside, true);
+        };
+    }, [ref, handler]);
+    return { ref, open, setOpen };
+};

package/dist/SettingsUI/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html {
     height: 100vh;
 }
@@ -80,32 +84,6 @@ body {
     display: none;
 }
 
-.modal-style {
-    display: flex;
-    position: absolute;
-    background-color: rgba(0, 0, 0, 0.85);
-    border-radius: 20px;
-    border: 2px #423f42;
-    border-style: solid;
-    box-shadow: 0px 0px 6px 1px white;
-}
-
-.modal {
-    width: 80vw;
-    height: 80vh;
-    top: 5vh;
-    left: 10vw;
-    align-items: center;
-    justify-content: center;
-}
-
-.flex-containers-stretched {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-}
-
 @keyframes iosAnimMove {
     0% {
         background-position-y: 75%;
@@ -152,3 +130,45 @@ html.is-locked .ios-scroller-animation {
     opacity: 0;
     z-index: -9999;
 }
+
+.arrow-on-left {
+    transform: translate(75px, -50%);
+}
+
+.arrow-on-right {
+    transform: translate(calc(-100% - 75px), -50%);
+}
+
+.arrow-on-left::after {
+    content: "";
+    position: absolute;
+    display: block;
+    background: url("/assets/settings/symbol-pointer.png");
+    top: 50%;
+    right: 100%;
+    height: 25px;
+    width: 25px;
+    transform: translateY(-50%);
+}
+
+.arrow-on-right::after {
+    content: "";
+    position: absolute;
+    display: block;
+    background: url("/assets/settings/symbol-pointer.png");
+    top: 50%;
+    left: 100%;
+    height: 25px;
+    width: 25px;
+    transform: translate(0, -50%) rotate(180deg);
+}
+
+@media only screen and (max-width: 900px) {
+    .arrow-on-left {
+        transform: translate(50px, -50%);
+    }
+
+    .arrow-on-right {
+        transform: translate(calc(-100% - 50px), -50%);
+    }
+}

package/dist/SettingsUI/index.d.ts

@@ -1,3 +1,3 @@
-import "./index.css";
+import "./packedStyles.css";
 import React from "react";
 export declare const SettingsUI: () => React.JSX.Element;

package/dist/SettingsUI/index.jsx

@@ -1,33 +1,34 @@
-import "./index.css";
+import "./packedStyles.css";
 import React from "react";
 import { UI_ITEMS } from "../utils";
 import { AutoplaySettings, BetSettings, BuyFreeSpinModal, GameRules, SpeedSettingsPopup, SymbolMultiplierPopup, VolumeSettings, } from "./components";
+import { Modal } from "./components/Modal";
 import { SystemSettingsComponent } from "./SystemSettings/SystemSettingsComponent";
 export const SettingsUI = () => {
     return (<>
-            <div id={UI_ITEMS.settings} className="modal modal-style">
+            <Modal layerId={UI_ITEMS.settings}>
                 <SystemSettingsComponent />
-            </div>
-            <div id={UI_ITEMS.gameRules} className="modal modal-style">
+            </Modal>
+            <Modal layerId={UI_ITEMS.gameRules}>
                 <GameRules />
-            </div>
-            <div id={UI_ITEMS.volume} className="volume-modal modal-style">
+            </Modal>
+            <div id={UI_ITEMS.volume} className="absolute bottom-[5vh] left-[1vw] h-[50px] w-[40vh] rounded-xl bg-zinc-900 shadow shadow-primary-500/30">
                 <VolumeSettings />
             </div>
-            <div id={UI_ITEMS.autoplay} className="modal modal-style">
+            <Modal layerId={UI_ITEMS.autoplay}>
                 <AutoplaySettings />
-            </div>
-            <div id={UI_ITEMS.speedSettings} className="speed-settings-modal modal-style">
+            </Modal>
+            <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 />
-            </div>
+            </Modal>
             <div id={UI_ITEMS.symbolPayTable}>
                 <SymbolMultiplierPopup />
             </div>
-            <div id={UI_ITEMS.freeSpin} className="modal modal-style">
+            <Modal layerId={UI_ITEMS.freeSpin}>
                 <BuyFreeSpinModal />
-            </div>
-            <div id={UI_ITEMS.bet} className="modal modal-style">
+            </Modal>
+            <Modal layerId={UI_ITEMS.bet}>
                 <BetSettings />
-            </div>
+            </Modal>
         </>);
 };