pixi-rainman-game-engine 0.1.22 → 0.1.24

package/dist/SettingsUI/SystemSettings/SystemSettingsComponent.d.ts

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

package/dist/SettingsUI/SystemSettings/SystemSettingsComponent.jsx

@@ -1,18 +1,17 @@
+import "./systemSettings.css";
 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 sm:max-w-xl">
-            <div className="flex w-full justify-center">
-                <h2 className="text-2xl font-bold uppercase text-primary-500">{i18next.t("systemSettings")}</h2>
+    return (<div className="settings">
+            <div className="settings__title">
+                <h2>{i18next.t("systemSettings")}</h2>
             </div>
             <CloseModalButton layerId={UI_ITEMS.settings}/>
-            <div className="flex w-full flex-col justify-center">
+            <div className="settings__column">
+                <BetSettings className="bet-desktop__container"/>
                 <UXSettings />
-                {!deviceOrientation.includes("mobile") ? <BetSettings className="flex w-full justify-center"/> : null}
             </div>
         </div>);
 };

package/dist/SettingsUI/SystemSettings/systemSettings.css

@@ -0,0 +1,41 @@
+.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

@@ -0,0 +1,267 @@
+.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;
+    }
+}

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

@@ -1,4 +1,5 @@
 import "react-custom-scroll/dist/customScroll.css";
+import "./autoplaySettings.css";
 import React from "react";
 export declare const AutoplaySettings: (() => React.JSX.Element) & {
     displayName: string;

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

@@ -1,17 +1,16 @@
 import "react-custom-scroll/dist/customScroll.css";
+import "./autoplaySettings.css";
 import i18next from "i18next";
 import { observer } from "mobx-react-lite";
 import React, { useEffect, useState } from "react";
 import { COMPONENTS } from "../../../components";
 import { UI_ITEMS } from "../../../utils";
 import { useStores } from "../../hooks";
-import { cn } from "../../utils/tw";
-import { Button } from "../Button";
 import { CloseModalButton } from "../CloseModalButton";
 import { RichLimitingSlider } from "../RichLimitingSlider";
 import { SpeedButtonWithHeader, SwitchWithHeader } from "../SwitchWithHeader";
 export const AutoplaySettings = observer(() => {
-    const [limitNumbers, setLimitNumbers] = useState([0]);
+    const [limit_numbers, setLimitNumbers] = useState([0]);
     const initialAutoSpinCount = 50;
     const availableAutoSpinLimits = [10, 20, 50, 100, 150, 200, 250, 300, 350, 400, 500, 600, 700, 800, 900, 1000];
     const { settingStore } = useStores();
@@ -51,24 +50,28 @@ export const AutoplaySettings = observer(() => {
         updateLimitsBounds(initialAutoSpinCount);
     }, []);
     const { singleWinExceeds, balancedIncreased, balancedDecreased, howManyAutoSpinsLeft, infinitySpinsEnabled, setSingleWinExceeds, setBalancedIncreased, setBalancedDecreased, setAutoSpinsCount, flipInfinitySpinsFlag, resetAutoplaySettings, } = settingStore;
-    return (<div className="flex w-full max-w-xs flex-col items-center justify-between gap-8 p-4 sm:max-w-xl">
+    return (<div className="autoplay-settings">
             <CloseModalButton layerId={UI_ITEMS.autoplay}/>
-            <h2 className="text-center text-3xl font-bold text-primary-500">{i18next.t("autoPlay")}</h2>
-            <div className="flex h-12 w-full flex-wrap items-center justify-center gap-2 sm:max-w-72 sm:flex-nowrap">
-                <Button className="flex rounded bg-zinc-800 px-3 py-1 text-lg shadow shadow-primary-500/40 hover:bg-zinc-500 disabled:cursor-not-allowed disabled:bg-zinc-700" onClick={() => {
+            <div className="autoplay-settings__title">
+                <h2>{i18next.t("autoPlay")}</h2>
+            </div>
+            <div className="autoplay-settings__stop-limits">
+                <div className={`autoplay-settings__limit left ${infinitySpinsEnabled ? "autoplay-settings__limit--infinity" : ""}`} onClick={() => {
             let indexOfSelectedSpinsLimit = availableAutoSpinLimits.findIndex((limitCount) => limitCount === howManyAutoSpinsLeft);
             indexOfSelectedSpinsLimit -= 1;
             if (indexOfSelectedSpinsLimit === -1) {
                 indexOfSelectedSpinsLimit = availableAutoSpinLimits.length - 1;
             }
             updateLimitsBounds(availableAutoSpinLimits[indexOfSelectedSpinsLimit]);
-        }} disabled={infinitySpinsEnabled}>
+        }}>
                     <p>-</p>
-                </Button>
-                {limitNumbers.map((limiter) => (<Button key={limiter} value={limiter} className={cn("flex items-center justify-center rounded bg-zinc-800 px-5 py-1 text-lg shadow shadow-primary-500/40 hover:bg-zinc-600 disabled:cursor-not-allowed disabled:bg-zinc-700 disabled:text-zinc-500", { "border-2 border-primary-500": limiter === howManyAutoSpinsLeft })} disabled={infinitySpinsEnabled} onClick={(event) => updateLimitsBounds(Number(event.currentTarget.value))}>
-                        <p>{limiter}</p>
-                    </Button>))}
-                <Button className="flex rounded bg-zinc-800 px-3 py-1 text-lg shadow shadow-primary-500/40 hover:bg-zinc-500 disabled:cursor-not-allowed disabled:bg-zinc-700 disabled:text-zinc-500" onClick={() => {
+                </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={() => {
             let indexOfSelectedSpinsLimit = availableAutoSpinLimits.findIndex((limitCount) => limitCount === howManyAutoSpinsLeft);
             indexOfSelectedSpinsLimit += 1;
             if (indexOfSelectedSpinsLimit === availableAutoSpinLimits.length) {
@@ -76,34 +79,43 @@ export const AutoplaySettings = observer(() => {
             }
             const newAutoSpinsLimitNumber = availableAutoSpinLimits[indexOfSelectedSpinsLimit];
             updateLimitsBounds(newAutoSpinsLimitNumber);
-        }} disabled={infinitySpinsEnabled}>
+        }}>
                     <p>+</p>
-                </Button>
-                <Button className={"flex rounded bg-zinc-800 px-3 py-1 text-lg shadow shadow-primary-500/40 hover:bg-zinc-500 disabled:cursor-not-allowed disabled:bg-zinc-700"} onClick={() => flipInfinitySpinsFlag()}>
+                </div>
+                <div className={`autoplay-settings__limit circle ${infinitySpinsEnabled ? "autoplay-settings__limit--active" : ""}`} onClick={() => flipInfinitySpinsFlag()}>
                     <p>∞</p>
-                </Button>
+                </div>
             </div>
-            <div className="flex w-full max-w-3xl flex-col justify-around gap-4">
+
+            <div className="autoplay-settings__title">
+                <h2>{i18next.t("stopAutoPlay")}</h2>
+            </div>
+            <div className="autoplay-settings__sliders">
                 <RichLimitingSlider value={singleWinExceeds} setValue={setSingleWinExceeds} maxValue={Number(i18next.t("ifSingleWinExceedsMax"))} description={i18next.t("ifSingleWinExceedsMaxDescription")}/>
                 <RichLimitingSlider value={balancedIncreased} setValue={setBalancedIncreased} maxValue={Number(i18next.t("ifBalanceIncreasesBy"))} description={i18next.t("ifBalanceIncreasesByDescription")}/>
                 <RichLimitingSlider value={balancedDecreased} setValue={setBalancedDecreased} maxValue={Number(i18next.t("ifSingleWinExceedsMax"))} description={i18next.t("ifBalanceDecreaseByDescription")}/>
             </div>
 
-            <div className="flex w-full flex-col items-center justify-between gap-2 sm:flex-row">
-                <SwitchWithHeader header={i18next.t("onAnyWin")} flag={settingStore.onAnyWin} setFlag={settingStore.setOnAnyWin}/>
-                <SpeedButtonWithHeader header={i18next.t("speedButtonHeader")} description={i18next.t("speedButtonDescription")}/>
+            <div className="autoplay-settings__switches">
+                <div className="autoplay-settings__switch">
+                    <SwitchWithHeader header={i18next.t("onAnyWin")} flag={settingStore.onAnyWin} setFlag={settingStore.setOnAnyWin}/>
+                </div>
+                <div className="autoplay-settings__switch">
+                    <SpeedButtonWithHeader header={i18next.t("speedButtonHeader")} description={i18next.t("speedButtonDescription")}/>
+                </div>
             </div>
-            <div className="flex w-full items-center justify-center gap-4">
-                <Button className="flex items-center rounded-lg bg-zinc-800 px-4 py-2 text-sm hover:bg-zinc-700" onClick={() => {
+
+            <div className="autoplay-settings__confirmation">
+                <div className="autoplay-settings__confirmation-button" onClick={() => {
             resetAutoplaySettings();
             updateLimitsBounds(initialAutoSpinCount);
             settingStore.handleModalInvocation?.(UI_ITEMS.autoplay);
         }}>
                     <p>{i18next.t("cancel")}</p>
-                </Button>
-                <Button id={COMPONENTS.autoSpinConfirm} className="flex items-center justify-center rounded-lg bg-primary-500 px-4 py-2 text-sm hover:bg-primary-600" onClick={() => settingStore.handleModalInvocation?.(UI_ITEMS.autoplay)}>
+                </div>
+                <div id={COMPONENTS.autoSpinConfirm} className="autoplay-settings__confirmation-button" onClick={() => settingStore.handleModalInvocation?.(UI_ITEMS.autoplay)}>
                     <p>{i18next.t("confirm")}</p>
-                </Button>
+                </div>
             </div>
         </div>);
 });

package/dist/SettingsUI/components/Bet/BetControls.d.ts

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

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

@@ -1,22 +1,30 @@
+import "./bet.css";
 import i18next from "i18next";
 import { observer } from "mobx-react-lite";
 import React from "react";
 import { useStores } from "../../hooks";
-import { Button } from "../Button";
 export const BetControls = observer(() => {
     const { settingStore } = useStores();
-    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">
+    const onClick = (type) => {
+        if (type === "increase") {
+            settingStore.increaseBet?.();
+        }
+        else {
+            settingStore.decreaseBet?.();
+        }
+    };
+    return (<div className="bet-container">
+            <h2>{i18next.t("totalBet")}</h2>
+            <div className="bet-container__controls">
+                <button name="bet-minus" className="bet-container__button" onClick={() => onClick("decrease")}>
                     -
-                </Button>
-                <div className="flex w-fit items-center justify-center rounded-lg bg-zinc-800 px-4 py-2 text-sm sm:text-xl">
+                </button>
+                <div className="bet-container__value">
                     <p>{settingStore.betText}</p>
                 </div>
-                <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-plus">
+                <button name="bet-plus" className="bet-container__button" onClick={() => onClick("increase")}>
                     +
-                </Button>
+                </button>
             </div>
         </div>);
 });

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

@@ -0,0 +1,115 @@
+.bet-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 50%;
+    margin: 0px 30px;
+}
+
+.bet-container__value {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 150px;
+    height: 60px;
+    border-radius: 60px;
+    border: 2px white;
+    border-style: solid;
+    margin: 0px 10px;
+}
+
+.bet-container__value p {
+    font-size: 25px;
+}
+
+.bet-container__button {
+    height: 62px;
+    width: 62px;
+    font-size: 40px;
+    font-weight: bold;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0);
+    border: 2px solid white;
+    color: white;
+    text-align: center;
+    cursor: pointer;
+}
+
+.bet-container h2 {
+    text-align: center;
+    color: white;
+    text-transform: uppercase;
+}
+
+.bet-container__controls {
+    display: flex;
+    flex-direction: row;
+}
+
+.bet-container__button:active {
+    background-color: #fdf42550;
+    color: #fdf425;
+    border: 2px solid #fdf425;
+}
+
+@media only screen and (max-width: 900px) {
+    #bet-layer.modal {
+        width: 90vw;
+        height: fit-content;
+        top: 40vh;
+        left: 5vw;
+    }
+
+    #bet-layer.modal-style {
+        flex-direction: column;
+        padding-inline: 1vw;
+        padding-block: 1vh;
+    }
+
+    .bet-container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .bet-container__value {
+        width: 100px;
+        height: 60px;
+    }
+
+    .bet-container h2 {
+        color: #ec5e27;
+    }
+
+    .bet-container__value p {
+        font-size: 24px;
+    }
+
+    .bet-container__button {
+        height: 64px;
+        width: 64px;
+        font-size: 32px;
+        padding: 0px;
+    }
+}
+
+@media only screen and (orientation: landscape) and (max-width: 900px) {
+    #bet-layer.modal {
+        width: 90vw;
+        height: fit-content;
+        top: 25vh;
+        left: 5vw;
+    }
+
+    #bet-layer.modal-style {
+        flex-direction: column;
+    }
+
+    .bet-container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        padding-block: 2vh;
+    }
+}

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

@@ -1,3 +1,4 @@
+import "./bet.css";
 import React from "react";
 type BetSettingsProps = {
     className?: string;

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

@@ -1,3 +1,4 @@
+import "./bet.css";
 import { observer } from "mobx-react-lite";
 import React from "react";
 import { UI_ITEMS } from "../../../utils";
@@ -5,8 +6,9 @@ import { useDeviceOrientations } from "../../hooks";
 import { CloseModalButton } from "../CloseModalButton";
 import { BetControls } from "./BetControls";
 export const BetSettings = observer(({ className }) => {
+    const allClassNames = className ? `bet-container ${className}` : "bet-container";
     const deviceOrientation = useDeviceOrientations();
-    return (<div className={className}>
+    return (<div className={allClassNames}>
             {deviceOrientation.includes("mobile") ? <CloseModalButton layerId={UI_ITEMS.bet}/> : null}
             <BetControls />
         </div>);