pixi-rainman-game-engine 0.1.21 → 0.1.23

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

@@ -1,2 +1,3 @@
+import "./buyFreeSpin.css";
 import { ReactElement } from "react";
 export declare const BuyFreeSpinModal: () => ReactElement;

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

@@ -1,4 +1,4 @@
-import i18next from "i18next";
+import "./buyFreeSpin.css";
 import React, { useState } from "react";
 import { Currencies } from "ts-money";
 import { UI_ITEMS } from "../../../utils";
@@ -10,16 +10,16 @@ export const BuyFreeSpinModal = () => {
     const freeSpinOptions = useBuyFreeSpinOptions();
     const currency = Currencies[localStorage.getItem("currency")]?.symbol_native || "$";
     const clearErrorMessage = () => setErrorMessage("");
-    return (<div className="flex h-[90%] w-[90%] flex-col items-center justify-center gap-4 px-5">
+    return (<div className="buyFreeSpins__container">
             <CloseModalButton layerId={UI_ITEMS.freeSpin} afterClose={clearErrorMessage}/>
-            <div className="flex">
-                <h1 className="text-2xl font-bold text-primary-500">{i18next.t("buyFreeSpins")}</h1>
+            <div className="buyFreeSpins__title-container">
+                <h1>Buy Free Spins</h1>
             </div>
-            <div className="flex items-center justify-between gap-4">
+            <div className="buyFreeSpins__buttons-container">
                 {freeSpinOptions.map((option) => (<OptionButton key={option.amount} setMessage={setErrorMessage} option={option} currency={currency}/>))}
             </div>
             {errorMessage ? (<div>
-                    <p className="text-center text-2xl text-primary-500">{errorMessage}</p>
+                    <p className="buyFreeSpins__error-message">{errorMessage}</p>
                 </div>) : null}
         </div>);
 };

package/dist/SettingsUI/components/CloseModalButton/closeModalButton.css

@@ -0,0 +1,20 @@
+.close-modal-button {
+    font-size: 30px;
+    color: white;
+    position: absolute;
+    right: 30px;
+    top: 15px;
+    background-color: #00000000;
+    border-style: none;
+}
+
+.close-modal-button:hover {
+    color: #ffffff50;
+}
+
+@media only screen and (max-width: 900px) {
+    .close-modal-button {
+        right: 20px;
+        top: 10px;
+    }
+}

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import "./closeModalButton.css";
 export type CloseModalButtonProps = {
     layerId: string;
     afterClose?: () => void;

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

@@ -1,13 +1,13 @@
+import "./closeModalButton.css";
 import React from "react";
 import { useStores } from "../../hooks";
-import { Button } from "../Button";
 export const CloseModalButton = ({ layerId, afterClose }) => {
     const { settingStore } = useStores();
     const onClose = () => {
         settingStore.handleModalInvocation?.(layerId);
         afterClose?.();
     };
-    return (<Button className="absolute right-5 top-2 block border-none text-3xl text-white hover:text-zinc-500 sm:right-8 sm:top-4" onClick={onClose}>
+    return (<button className="close-modal-button" onClick={onClose}>
             x
-        </Button>);
+        </button>);
 };

package/dist/SettingsUI/components/GameRules/gameRules.css

@@ -0,0 +1,96 @@
+.game-rules {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 90%;
+    width: 90%;
+}
+
+.game-rules__content {
+    text-align: justify;
+    width: 90%;
+    line-height: 20px;
+    padding: 10px 20px;
+    height: 100%;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    max-height: 60vh;
+    font-size: 20px;
+}
+
+.game-rules__container {
+    display: inline-block;
+    margin-top: 20px;
+}
+
+.game-rules__scroll {
+    height: 70%;
+}
+
+.game-rules__page-control {
+    display: flex;
+    flex-direction: row;
+    height: 50px;
+    position: absolute;
+    left: 20px;
+    bottom: 20px;
+}
+
+.page-left {
+    background-size: contain;
+    background-repeat: no-repeat no-repeat;
+    background-image: url("/assets/settings/gameRules/left.png");
+    opacity: 1;
+    width: 22px;
+    height: 100%;
+}
+
+.page-middle {
+    background-repeat: no-repeat no-repeat;
+    background-size: contain;
+    background-image: url("/assets/settings/gameRules/cross.png");
+    width: 30px;
+    height: 100%;
+    margin: 0px 10px;
+}
+
+.page-right {
+    background-repeat: no-repeat no-repeat;
+    background-size: contain;
+    background-image: url("/assets/settings/gameRules/right.png");
+    width: 22px;
+    height: 100%;
+}
+
+.page-left:hover {
+    opacity: 0.5;
+}
+
+.page-middle:hover {
+    opacity: 0.5;
+}
+
+.page-right:hover {
+    opacity: 0.5;
+}
+
+.rcs-custom-scroll-handle {
+    position: absolute;
+    right: 10px;
+}
+
+.custom-scroll .rcs-inner-handle {
+    background-color: inherit;
+    background-repeat: no-repeat no-repeat;
+    background-size: cover;
+    background-image: url("/assets/settings/slider/slidersDot.png");
+    width: 20px;
+    height: 20px;
+    right: 10px;
+}
+
+@media only screen and (max-width: 450px) {
+    .game-rules__content {
+        padding: 10px 20px 10px 5px;
+    }
+}

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

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

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

@@ -1,4 +1,5 @@
 import "react-custom-scroll/dist/customScroll.css";
+import "./gameRules.css";
 import i18next from "i18next";
 import { observer } from "mobx-react-lite";
 import React, { useState } from "react";
@@ -22,20 +23,21 @@ export const GameRules = observer(() => {
         }
         setPageNumber(pageNumber + incrementor);
     };
-    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>
+    return (<div className="game-rules">
+            <div className="settings__title">
+                <h2>{i18next.t("gameRules")}</h2>
+            </div>
             <CloseModalButton layerId={UI_ITEMS.gameRules}/>
-            <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>
+
+            <div className="game-rules__container custom-scroll">
+                <CustomScroll className="game-rules__scroll" allowOuterScroll={true}>
+                    <div className="game-rules__content">{gameRulesContent.pages[pageNumber]}</div>
                 </CustomScroll>
             </div>
-            <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)}/>
+            <div className="game-rules__page-control">
+                <div className="page-left" onClick={() => changePage(-1)}></div>
+                <div className="page-middle" onClick={() => settingStore.handleModalInvocation?.(UI_ITEMS.gameRules)}></div>
+                <div className="page-right" onClick={() => changePage(1)}></div>
             </div>
         </div>);
 });

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

@@ -30,7 +30,7 @@ export const OptionButton = ({ option, currency, setMessage }) => {
             settingStore.setIsFreeSpinBought(false);
         }
     };
-    return (<div className="flex w-[120px] flex-col items-center justify-center rounded-[8px] bg-primary-900 p-2 hover:cursor-pointer hover:bg-primary-600" key={option.amount} onClick={async () => await onButtonClick(option)}>
+    return (<div className="optionButton" key={option.amount} onClick={async () => await onButtonClick(option)}>
             <p>
                 {i18next.t("amount")}: {option.amount}
             </p>

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

@@ -1,4 +1,5 @@
 import "rc-slider/assets/index.css";
+import "./richLimitingSlider.css";
 import React from "react";
 type RichLimitingSliderProps = {
     value: number;

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

@@ -1,15 +1,17 @@
 import "rc-slider/assets/index.css";
+import "./richLimitingSlider.css";
 import { observer } from "mobx-react-lite";
 import Slider from "rc-slider";
 import React from "react";
 export const RichLimitingSlider = observer(({ value, setValue, maxValue, description }) => {
-    const handleStyle = { width: "20px", height: "20px", bottom: "-4px" };
-    return (<div className="flex items-center gap-4 py-4">
+    return (<div className="rich-slider">
             {/* @ts-expect-error type error in library */}
-            <Slider className="flex w-full flex-col items-center justify-center gap-2 sm:gap-4" step={1} min={0} max={maxValue} defaultValue={value} value={value} handleStyle={{
+            <Slider className="rich-slider__slider" step={1} min={0} max={maxValue} defaultValue={value} value={value} handleStyle={{
             backgroundColor: "#fdf425",
             borderColor: "#fdf425",
-            ...handleStyle,
+            width: "20px",
+            height: "20px",
+            bottom: "-4px",
         }} railStyle={{
             backgroundColor: "#fff",
         }} trackStyle={{
@@ -17,10 +19,8 @@ export const RichLimitingSlider = observer(({ value, setValue, maxValue, descrip
         }} dotStyle={{
             borderColor: "#fdf425",
         }} onChange={(value) => setValue(value)}>
-                <p className="mt-6 self-center pt-4 text-center sm:mt-5 sm:text-xl">{description}</p>
+                <p className="rich-slider__description">{description}</p>
             </Slider>
-            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-zinc-800 px-8 py-4 shadow-primary-400/25">
-                {value}
-            </div>
+            <div className="rich-slider__number">{value}</div>
         </div>);
 });

package/dist/SettingsUI/components/RichLimitingSlider/richLimitingSlider.css

@@ -0,0 +1,39 @@
+.rich-slider {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-inline: 16px;
+}
+
+.rich-slider__slider {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.rich-slider__number {
+    margin: 10px 0px 10px 10px;
+    width: 100px;
+    height: 40px;
+    border: solid white 2px;
+    background-color: black;
+    border-radius: 34px;
+    font-size: x-large;
+    font-weight: bold;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.rich-slider__description {
+    text-transform: uppercase;
+}
+
+@media only screen and (max-width: 650px) {
+    .rich-slider__description {
+        padding-top: 4px;
+        font-size: 9px;
+    }
+}

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

@@ -1,3 +1,4 @@
+import "./slidingSwitch.css";
 import React from "react";
 type SlidingSwitchProps = {
     flag: boolean;

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

@@ -1,9 +1,10 @@
+import "./slidingSwitch.css";
 import { observer } from "mobx-react-lite";
 import React from "react";
 export const SlidingSwitch = observer(({ flag, setFlag }) => {
-    return (<label className="relative flex items-center justify-between p-2 text-xl">
-            {flag ? "ON" : "OFF"}
-            <input type="checkbox" className="peer absolute left-0 top-0 h-full w-full appearance-none rounded-md" checked={flag} onChange={(event) => setFlag(event.target.checked)}/>
-            <span className="ml-4 flex h-10 w-16 flex-shrink-0 items-center rounded-full bg-zinc-700 p-1 duration-300 ease-in-out after:h-8 after:w-8 after:rounded-full after:bg-white after:shadow-md after:duration-300 group-hover:after:translate-x-1 peer-checked:bg-primary-400 peer-checked:after:translate-x-6"/>
+    return (<label className="switch">
+            <span className={`switch-round-box round ${flag ? "switch-round-box--active" : ""}`}/>
+            <input type="checkbox" checked={flag} onChange={(event) => setFlag(event.target.checked)}/>
+            <p className={`switch__text ${flag ? "switch__text--active" : ""}`}>{flag ? "ON" : "OFF"}</p>
         </label>);
 });

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

@@ -0,0 +1,126 @@
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 80px;
+    height: 34px;
+    cursor: pointer;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* The slider */
+.switch-round-box {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #00000000;
+    border: 2px solid white;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 34px;
+}
+
+.turtle-switch-round-box {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #00000000;
+    border: 2px solid white;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 34px;
+}
+
+.turtle-switch__icon {
+    position: relative;
+    left: 7px;
+    top: 7px;
+    width: 24px;
+    height: 20px;
+}
+
+.dot-container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    width: 36px;
+    justify-content: space-between;
+    bottom: 10px;
+    left: 36px;
+}
+
+.white-dot {
+    position: relative;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: #ffffff50;
+}
+
+.white-dot--active {
+    background-color: #fff;
+}
+
+.switch-round-box:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 3px;
+    top: 2px;
+    bottom: 4px;
+    right: 4px;
+    background-color: white;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 50%;
+}
+
+.switch__text {
+    margin: 0;
+    position: absolute;
+    top: 7px;
+    right: 9px;
+}
+
+.switch__text--active {
+    left: 9px;
+    color: #fdf425;
+}
+
+.switch-round-box--active {
+    box-shadow: 0 0 1px #fdf425;
+    background-color: #fdf42550;
+    border: 2px solid #fdf425;
+}
+
+.switch-round-box--active:before {
+    -webkit-transform: translateX(45px);
+    -ms-transform: translateX(45px);
+    transform: translateX(45px);
+    background-color: #fdf425;
+}
+
+@media only screen and (max-width: 900px) {
+    .header-description {
+        max-width: 150px;
+    }
+
+    .header-description h2 {
+        font-size: 20px;
+    }
+
+    .header-description h6 {
+        font-size: 10px;
+    }
+}

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

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

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

@@ -1,11 +1,11 @@
 import "react-custom-scroll/dist/customScroll.css";
+import "./speedSettingsPopup.css";
 import i18next from "i18next";
 import { observer } from "mobx-react-lite";
 import React from "react";
 import { SPEED_LEVELS } from "../../../application";
 import { UI_ITEMS } from "../../../utils";
 import { useStores } from "../../hooks";
-import { cn } from "../../utils/tw";
 import { CloseModalButton } from "../CloseModalButton";
 export const SPEED_PREFIX = "speed-";
 export const SpeedSettingsPopup = observer(() => {
@@ -15,12 +15,12 @@ export const SpeedSettingsPopup = observer(() => {
         fast: SPEED_LEVELS.fast,
     };
     const { settingStore } = useStores();
-    return (<div className="flex h-full w-fit flex-col items-center justify-between gap-2 p-4 portrait:max-w-72">
+    return (<div className="speed-settings-popup">
             <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 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 className="speed-settings-popup__title">{i18next.t("howDoYouWantToPlay")}</div>
+            <div className="speed-settings-popup__speed-options">
+                {Object.keys(speedLevelMapper).map((speedLevelKey) => (<div id={`${SPEED_PREFIX}${speedLevelKey}`} key={`${SPEED_PREFIX}${speedLevelKey}`} className={`speed-settings-popup__option ${speedLevelKey === settingStore.currentSpeed ? "speed-settings-popup_option--active" : ""}`}>
+                        <img className={`speed-settings-popup__icon ${speedLevelMapper[speedLevelKey]}`} src={`../../../assets/settings/speedPopup/speed-${speedLevelMapper[speedLevelKey]}.png`}/>
                     </div>))}
             </div>
         </div>);

package/dist/SettingsUI/components/SpeedSettingsPopup/speedSettingsPopup.css

@@ -0,0 +1,119 @@
+.speed-settings-modal {
+    width: 50vw;
+    height: 30vh;
+    top: 40vh;
+    left: 25vw;
+    align-items: center;
+    justify-content: center;
+}
+
+.speed-settings-popup {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 90%;
+    height: 90%;
+    justify-content: space-between;
+}
+
+.speed-settings-popup__title {
+    font-size: 25px;
+    color: white;
+    text-transform: uppercase;
+    margin-top: 10px;
+}
+
+.speed-settings-popup__speed-options {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    height: 120px;
+}
+
+.speed-settings-popup__option {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: url("/assets/settings/speedPopup/speed-frame.png");
+    width: 145px;
+    height: 78px;
+    background-repeat: no-repeat no-repeat;
+    background-size: contain;
+}
+
+.speed-settings-popup_option--active {
+    background-image: url("/assets/settings/speedPopup/speed-frame-active.png");
+    width: 145px;
+    height: 78px;
+    background-repeat: no-repeat no-repeat;
+    background-size: contain;
+}
+
+.speed-settings-popup__icon.slow {
+    width: 70px;
+}
+
+.speed-settings-popup__icon.normal {
+    width: 35px;
+}
+
+.speed-settings-popup__icon.fast {
+    width: 90px;
+}
+
+@media only screen and (max-width: 450px) {
+    .speed-settings-modal {
+        width: 80vw;
+        height: 50vh;
+        left: 10vw;
+        top: 30vh;
+    }
+
+    .speed-settings-popup__title {
+        margin-top: 10px;
+        font-size: 14px;
+    }
+
+    .speed-settings-popup__speed-options {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        height: 75%;
+    }
+
+    .speed-settings-popup__option {
+        width: 120px;
+        height: 66px;
+    }
+
+    .speed-settings-popup__icon.slow {
+        width: 60px;
+    }
+
+    .speed-settings-popup__icon.normal {
+        width: 30px;
+    }
+
+    .speed-settings-popup__icon.fast {
+        width: 70px;
+    }
+}
+
+@media only screen and (max-height: 450px) {
+    .speed-settings-modal {
+        width: 80vw;
+        height: 50vh;
+        left: 10vw;
+        top: 30vh;
+    }
+
+    .speed-settings-popup__title {
+        font-size: 20px;
+    }
+
+    .speed-settings-popup__speed-options {
+        height: 60%;
+    }
+}

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

@@ -1,7 +1,6 @@
 import { observer } from "mobx-react-lite";
 import React from "react";
 import { useStores } from "../../hooks";
-import { cn } from "../../utils/tw";
 export const SpeedButtonSwitch = observer(() => {
     const speedLevelMapper = {
         slow: "turtle",
@@ -10,11 +9,11 @@ export const SpeedButtonSwitch = observer(() => {
     };
     const { settingStore } = useStores();
     const { currentSpeed } = settingStore;
-    return (<label className="speed-level-id relative inline-block h-[34px] w-full max-w-20 transition-all ease-in hover:cursor-pointer">
-            <span className="absolute bottom-0 left-0 right-0 top-0 cursor-pointer rounded-lg bg-zinc-800 shadow shadow-primary-500/30"/>
-            <img className="relative left-2 top-2 h-5 w-6" src={`assets/settings/speed-${speedLevelMapper[currentSpeed]}.png`}/>
-            <div className="relative bottom-2 left-9 flex w-9 justify-between gap-[2px]">
-                {Array.from({ length: 3 }).map((_, i) => (<div key={i} className={cn("relative h-3 w-3 rounded-full bg-white", i < settingStore.indexOfSpeedLevel ? "bg-primary-500" : "")}/>))}
+    return (<label className="switch turtle-switch speed-level-id">
+            <span className="turtle-switch-round-box"/>
+            <img className="turtle-switch__icon" src={`assets/settings/speed-${speedLevelMapper[currentSpeed]}.png`}/>
+            <div className="dot-container">
+                {Array.from({ length: 3 }).map((_, i) => (<div key={i} className={`white-dot ${i < settingStore.indexOfSpeedLevel ? "white-dot--active" : ""}`}/>))}
             </div>
         </label>);
 });