pixi-rainman-game-engine 0.1.19 → 0.1.21

package/README.md

@@ -1,6 +1,6 @@
 # RainMan pixi game engine
 
-This repository contains all of the mechanics that used in rainMan games. This library uses pixi and pixi-spine as dependencies.
+This repository contains all the mechanics that used in RainMan games. This library uses pixi and pixi-spine as dependencies.
 
 ### Scripts
 
@@ -16,19 +16,20 @@ This repository contains all of the mechanics that used in rainMan games. This l
 
     Modifying css files does not automatically reload server, after each change manual restart is needed.
 
-    To have live updates in one of the games, link is recommended:
+    To have live updates in one of the games, link is recommended. It needs to be done just once, yarn will remember link to this package even after computer restart.
 
     ```shell
-    yarn dev:link
+    yarn link
     ```
 
-    After that you can use following command in one of the games. If there will be problems or the changes will not reflect in the game, uninstalling npm package may be needed.
+    After that use the following command in one of the games to use local version of the engine.
 
     ```sh
-    yarn remove pixi-rainman-game-engine
-    npm link pixi-rainman-game-engine
+    yarn link pixi-rainman-game-engine
     ```
 
+    Link is common to cause bugs when used together with npm version of the same package, that is why you should use helper commands engine:local and engine:npm in the games. If there are still some bugs (most common with pixi/layers) try deleting node_modules, installing dependencies without engine, linking engine and restart server. This should resolve all the problems.
+
     By using package from npm, in vite optimizeDeps you must exclude this package, but must include each package that throws error in the console. This is probably due to problem with [excluding commonJS dependencies](https://vitejs.dev/config/dep-optimization-options#optimizedeps-exclude). An example is below.
 
     ```ts
@@ -60,9 +61,7 @@ This repository contains all of the mechanics that used in rainMan games. This l
     Uncaught SyntaxError: The requested module '/node_modules/eventemitter3/index.js?v=ec22a584' does not provide an export named 'default'
     ```
 
-    you must include it in the optimizeDeps.include array. Typically it is the name after /node_modules/.
-
-    **On the other hand, when linking package with npm link, the whole optimizeDeps.include an optimzieDeps.exclude should be commented out.**
+    you must include it in the optimizeDeps.include array. Typically, it is the name after /node_modules/.
 
 3. Lint project
     ```sh
@@ -71,11 +70,6 @@ This repository contains all of the mechanics that used in rainMan games. This l
 
 ### Game engine structure
 
-Code for the game engine contains in the `src` directory. For create an feature you should add new directory into `src` directory. For example: `freeSpins` and in this folder contains all of the mechanics.
-
-In utils directory there all of the utility functions and types.
-
-### Test environment
+Code for the game engine contains in the `src` directory. For creating a feature you should add new directory into `src` directory. For example: `freeSpins` and in this folder contains all the mechanics.
 
-To simulate behavior of game engine mechanics, this repository contains react-pixi app, where you can test features that are included in game engine.
-Test environment uses local built of game engine. To setup test environment go to [README](./test-environment/README.md) of test environment.
+In utils directory there all the utility functions and types.

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

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

package/dist/SettingsUI/SystemSettings/SystemSettingsComponent.jsx

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

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

@@ -1,5 +1,4 @@
 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,16 +1,17 @@
 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 [limit_numbers, setLimitNumbers] = useState([0]);
+    const [limitNumbers, 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();
@@ -50,28 +51,24 @@ export const AutoplaySettings = observer(() => {
         updateLimitsBounds(initialAutoSpinCount);
     }, []);
     const { singleWinExceeds, balancedIncreased, balancedDecreased, howManyAutoSpinsLeft, infinitySpinsEnabled, setSingleWinExceeds, setBalancedIncreased, setBalancedDecreased, setAutoSpinsCount, flipInfinitySpinsFlag, resetAutoplaySettings, } = settingStore;
-    return (<div className="autoplay-settings">
+    return (<div className="flex w-full max-w-xs flex-col items-center justify-between gap-8 p-4 sm:max-w-md">
             <CloseModalButton layerId={UI_ITEMS.autoplay}/>
-            <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={() => {
+            <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={() => {
             let indexOfSelectedSpinsLimit = availableAutoSpinLimits.findIndex((limitCount) => limitCount === howManyAutoSpinsLeft);
             indexOfSelectedSpinsLimit -= 1;
             if (indexOfSelectedSpinsLimit === -1) {
                 indexOfSelectedSpinsLimit = availableAutoSpinLimits.length - 1;
             }
             updateLimitsBounds(availableAutoSpinLimits[indexOfSelectedSpinsLimit]);
-        }}>
+        }} disabled={infinitySpinsEnabled}>
                     <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>
+                {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={() => {
             let indexOfSelectedSpinsLimit = availableAutoSpinLimits.findIndex((limitCount) => limitCount === howManyAutoSpinsLeft);
             indexOfSelectedSpinsLimit += 1;
             if (indexOfSelectedSpinsLimit === availableAutoSpinLimits.length) {
@@ -79,43 +76,34 @@ export const AutoplaySettings = observer(() => {
             }
             const newAutoSpinsLimitNumber = availableAutoSpinLimits[indexOfSelectedSpinsLimit];
             updateLimitsBounds(newAutoSpinsLimitNumber);
-        }}>
+        }} disabled={infinitySpinsEnabled}>
                     <p>+</p>
-                </div>
-                <div className={`autoplay-settings__limit circle ${infinitySpinsEnabled ? "autoplay-settings__limit--active" : ""}`} onClick={() => flipInfinitySpinsFlag()}>
+                </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()}>
                     <p>∞</p>
-                </div>
+                </Button>
             </div>
-
-            <div className="autoplay-settings__title">
-                <h2>{i18next.t("stopAutoPlay")}</h2>
-            </div>
-            <div className="autoplay-settings__sliders">
+            <div className="flex w-full max-w-3xl flex-col justify-around gap-4">
                 <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="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 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>
-
-            <div className="autoplay-settings__confirmation">
-                <div className="autoplay-settings__confirmation-button" onClick={() => {
+            <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={() => {
             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="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)}>
                     <p>{i18next.t("confirm")}</p>
-                </div>
+                </Button>
             </div>
         </div>);
 });

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

@@ -1,4 +1,3 @@
-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,22 @@
-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="bet-container">
-            <h2>{i18next.t("totalBet")}</h2>
-            <div className="bet-container__controls">
-                <button name="bet-minus" className="bet-container__button">
+    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">
                     -
-                </button>
-                <div className="bet-container__value">
+                </Button>
+                <div className="flex w-fit items-center justify-center rounded-lg bg-zinc-800 px-4 py-2 text-sm sm:text-xl">
                     <p>{settingStore.betText}</p>
                 </div>
-                <button name="bet-plus" className="bet-container__button">
+                <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>
+                </Button>
             </div>
         </div>);
 });

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

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

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

@@ -1,4 +1,3 @@
-import "./bet.css";
 import { observer } from "mobx-react-lite";
 import React from "react";
 import { UI_ITEMS } from "../../../utils";
@@ -6,9 +5,8 @@ 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={allClassNames}>
+    return (<div className={className}>
             {deviceOrientation.includes("mobile") ? <CloseModalButton layerId={UI_ITEMS.bet}/> : null}
             <BetControls />
         </div>);

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

@@ -0,0 +1,2 @@
+import React, { ComponentProps } from "react";
+export declare const Button: ({ children, onClick, ...props }: ComponentProps<"button">) => React.JSX.Element;

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

@@ -0,0 +1,6 @@
+import React from "react";
+export const Button = ({ children, onClick, ...props }) => {
+    return (<button onClick={onClick} {...props}>
+            {children}
+        </button>);
+};

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

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

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

@@ -1,4 +1,4 @@
-import "./buyFreeSpin.css";
+import i18next from "i18next";
 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="buyFreeSpins__container">
+    return (<div className="flex h-[90%] w-[90%] flex-col items-center justify-center gap-4 px-5">
             <CloseModalButton layerId={UI_ITEMS.freeSpin} afterClose={clearErrorMessage}/>
-            <div className="buyFreeSpins__title-container">
-                <h1>Buy Free Spins</h1>
+            <div className="flex">
+                <h1 className="text-2xl font-bold text-primary-500">{i18next.t("buyFreeSpins")}</h1>
             </div>
-            <div className="buyFreeSpins__buttons-container">
+            <div className="flex items-center justify-between gap-4">
                 {freeSpinOptions.map((option) => (<OptionButton key={option.amount} setMessage={setErrorMessage} option={option} currency={currency}/>))}
             </div>
             {errorMessage ? (<div>
-                    <p className="buyFreeSpins__error-message">{errorMessage}</p>
+                    <p className="text-center text-2xl text-primary-500">{errorMessage}</p>
                 </div>) : null}
         </div>);
 };

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

@@ -1,5 +1,4 @@
 /// <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="close-modal-button" onClick={onClose}>
+    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}>
             x
-        </button>);
+        </Button>);
 };

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

@@ -1,5 +1,4 @@
 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,5 +1,4 @@
 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";
@@ -23,21 +22,20 @@ export const GameRules = observer(() => {
         }
         setPageNumber(pageNumber + incrementor);
     };
-    return (<div className="game-rules">
-            <div className="settings__title">
-                <h2>{i18next.t("gameRules")}</h2>
-            </div>
+    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>
             <CloseModalButton layerId={UI_ITEMS.gameRules}/>
-
-            <div className="game-rules__container custom-scroll">
-                <CustomScroll className="game-rules__scroll" allowOuterScroll={true}>
-                    <div className="game-rules__content">{gameRulesContent.pages[pageNumber]}</div>
+            <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>
                 </CustomScroll>
             </div>
-            <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 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>
         </div>);
 });

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

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+type ModalProps = {
+    layerId: string;
+    className?: string;
+    children?: ReactNode;
+};
+export declare const Modal: (({ layerId, children, className }: ModalProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,24 @@
+import { observer } from "mobx-react-lite";
+import React from "react";
+import { useClickOutside, useStores } from "../../hooks";
+import { cn } from "../../utils/tw";
+export const Modal = observer(({ layerId, children, className }) => {
+    const { settingStore } = useStores();
+    const { ref, open, setOpen } = useClickOutside(() => {
+        const element = document.getElementById(layerId);
+        if (element && element.style.display !== "none") {
+            setOpen(false);
+            settingStore.handleModalInvocation?.(layerId);
+        }
+    });
+    return (<dialog onClick={() => setOpen(!open)} className="relative z-10 text-white" id={layerId} aria-labelledby={layerId}>
+            <div onClick={() => setOpen(!open)} className="fixed inset-0 bg-zinc-800 bg-opacity-75 transition-opacity"/>
+            <div className="fixed inset-0 z-10 w-screen overflow-y-auto p-6">
+                <div className="flex min-h-full w-full items-center justify-center rounded-lg shadow">
+                    <div ref={ref} className={cn("relative flex h-5/6 transform flex-col items-center overflow-hidden rounded-lg bg-zinc-900 p-2 text-left shadow-xl transition-all", className)}>
+                        {children}
+                    </div>
+                </div>
+            </div>
+        </dialog>);
+});

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

@@ -30,7 +30,7 @@ export const OptionButton = ({ option, currency, setMessage }) => {
             settingStore.setIsFreeSpinBought(false);
         }
     };
-    return (<div className="optionButton" key={option.amount} onClick={async () => await onButtonClick(option)}>
+    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)}>
             <p>
                 {i18next.t("amount")}: {option.amount}
             </p>

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

@@ -1,5 +1,4 @@
 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,17 +1,15 @@
 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 }) => {
-    return (<div className="rich-slider">
+    const handleStyle = { width: "20px", height: "20px", bottom: "-4px" };
+    return (<div className="flex items-center gap-4 py-4">
             {/* @ts-expect-error type error in library */}
-            <Slider className="rich-slider__slider" step={1} min={0} max={maxValue} defaultValue={value} value={value} handleStyle={{
+            <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={{
             backgroundColor: "#fdf425",
             borderColor: "#fdf425",
-            width: "20px",
-            height: "20px",
-            bottom: "-4px",
+            ...handleStyle,
         }} railStyle={{
             backgroundColor: "#fff",
         }} trackStyle={{
@@ -19,8 +17,10 @@ export const RichLimitingSlider = observer(({ value, setValue, maxValue, descrip
         }} dotStyle={{
             borderColor: "#fdf425",
         }} onChange={(value) => setValue(value)}>
-                <p className="rich-slider__description">{description}</p>
+                <p className="mt-6 self-center pt-4 text-center sm:mt-5 sm:text-xl">{description}</p>
             </Slider>
-            <div className="rich-slider__number">{value}</div>
+            <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>);
 });

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

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

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

@@ -1,10 +1,9 @@
-import "./slidingSwitch.css";
 import { observer } from "mobx-react-lite";
 import React from "react";
 export const SlidingSwitch = observer(({ flag, setFlag }) => {
-    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>
+    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"/>
         </label>);
 });

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

@@ -1,5 +1,4 @@
 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="speed-settings-popup">
+    return (<div className="flex h-full w-fit flex-col items-center justify-between gap-2 p-4 portrait:max-w-72">
             <CloseModalButton layerId={UI_ITEMS.speedSettings}/>
-            <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`}/>
+            <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>))}
             </div>
         </div>);

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

@@ -1,6 +1,7 @@
 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",
@@ -9,11 +10,11 @@ export const SpeedButtonSwitch = observer(() => {
     };
     const { settingStore } = useStores();
     const { currentSpeed } = settingStore;
-    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" : ""}`}/>))}
+    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" : "")}/>))}
             </div>
         </label>);
 });

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

@@ -1,4 +1,3 @@
-import "./headerStyle.css";
 import React from "react";
 import { HeaderWithDescriptionProps, SpeedButtonWithHeaderProps, SwitchHeaderProps } from "./types";
 export declare const HeaderWithDescription: ({ header, description }: HeaderWithDescriptionProps) => React.JSX.Element;

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

@@ -1,22 +1,21 @@
-import "./headerStyle.css";
 import { observer } from "mobx-react-lite";
 import React from "react";
 import { SlidingSwitch } from "../SlidingSwitch";
 import { SpeedButtonSwitch } from "../SpeedSwitchButton";
 export const HeaderWithDescription = ({ header, description }) => {
-    return (<div className="header-description">
-            <h2 className="header-description__title">{header}</h2>
-            {description && <h6 className="header-description__text">{description}</h6>}
+    return (<div className="flex flex-col gap-2">
+            <h2 className="text-xl font-bold uppercase">{header}</h2>
+            {description && <span>{description}</span>}
         </div>);
 };
 export const SwitchWithHeader = observer(({ header, description, flag, setFlag }) => {
-    return (<div className="flex-containers-stretched">
+    return (<div className="flex w-full items-center justify-between">
             <HeaderWithDescription header={header} description={description}/>
             <SlidingSwitch flag={flag} setFlag={setFlag}/>
         </div>);
 });
 export const SpeedButtonWithHeader = observer(({ header, description }) => {
-    return (<div className="flex-containers-stretched">
+    return (<div className="flex w-full items-center justify-between">
             <HeaderWithDescription header={header} description={description}/>
             <SpeedButtonSwitch />
         </div>);