pixi-rainman-game-engine 0.3.38 → 0.3.39

package/dist/controllers/AbstractController.js

@@ -6,7 +6,6 @@ import { SpinData } from "../connectivity";
 import { gamePhases, PossibleWins } from "../constants";
 import { RainMan } from "../Rainman";
 import { ceilToDecimal, debugSpinData, debugSymbolsMatchConfiguration, getDeviceOrientation, hideLayerIfPresent, hidePaytable, hideVolumeModal, logGroup, logGroupEnd, logInfo, logWarn, UI_ITEMS } from "../utils";
-import { QuickStopController } from "./QuickStopController";
 import { UiController } from "./UiController";
 /**
  * Abstract controller class for games, this class control game flow
@@ -42,7 +41,6 @@ export class AbstractController {
     invokeFreeSpinPlateAfterWin = false;
     invokeFreeSpinSummaryPlateAfterWin = false;
     hideFreeSpinsMessageBox = false;
-    quickStopController;
     uiController;
     mysteryFxSymbol = null;
     mysteryFxSymbolMustFormWinningLine = false;
@@ -53,12 +51,13 @@ export class AbstractController {
     shouldDisableBetButtons = false;
     wasAutoplayEnabledBeforeFreeSpin = false;
     setSlowerSpeedForFreeSpins = false;
-    quickReelsCounter = 0;
+    speedLevelBeforeFreeSpins = null;
     buttonPressed = false;
     buttonHeldSince = 0;
     shouldStopMobileSpin = false;
     disableMessageBoxChange = false;
     shouldClearQuickReelsStopAfterSpin = false;
+    freeSpinsWin = null;
     resolveBigWin;
     resolveMysteryWin;
     resolveBonusWin;
@@ -74,7 +73,6 @@ export class AbstractController {
         const initData = this.connection.initData();
         this.initData = initData;
         this.config = new ApiConfig(initData);
-        this.quickStopController = new QuickStopController(buttonsEventManager);
         this.uiController = new UiController(this.config);
         this.componentRegistry = RainMan.componentRegistry;
         this.setupSpaceOrEnterListener();
@@ -119,7 +117,6 @@ export class AbstractController {
         this.buttonsEventManager.initFreeSpinModal();
         this.buttonsEventManager.setUpUIElementsInteractivity();
         this.buttonsEventManager.setConfirmAutoplayButton(() => {
-            this.quickStopController.speedPopupDisabled = true;
             if (RainMan.settingsStore.isAutoplayEnabled) {
                 return;
             }
@@ -315,8 +312,7 @@ export class AbstractController {
             this.buttonsEventManager.initGambleButton(() => {
                 RainMan.settingsStore.isGambleGameAvailable = false;
                 this.mainContainer.invokeGambleGame();
-            }, this.lastWinAmount === 0 ||
-                !RainMan.settingsStore.isGambleGameAvailable ||
+            }, !RainMan.settingsStore.isGambleGameAvailable ||
                 RainMan.settingsStore.isPlayingAnyAction ||
                 this.gamePhase === gamePhases.HANDLING_ACTIONS ||
                 this.gamePhase === gamePhases.STOPPING_HANDLING_ACTIONS ||
@@ -344,7 +340,6 @@ export class AbstractController {
                 this.gamePhase === gamePhases.GAME_SUMMARY);
         }
         RainMan.componentRegistry.get(SpeedControlButton.registryName).setOnClick(() => {
-            this.quickStopController.speedPopupDisabled = true;
             RainMan.settingsStore.closeCurrentlyOpenModal?.();
             RainMan.componentRegistry.nextSpeedLevel();
             this.uiController.messageBox.updateIncentiveText(sample(i18next.t("idleMessages", { returnObjects: true })[RainMan.componentRegistry.getSpeedLevel()]));
@@ -416,7 +411,7 @@ export class AbstractController {
         }
         this.roundNumber = spinData.getRawData().round_number;
         RainMan.settingsStore.setRoundNumber(this.roundNumber);
-        if (this._lastWinAmount !== 0) {
+        if (this._lastWinAmount !== 0 && spinData.getRawData().round_win_amount) {
             RainMan.settingsStore.isTakeActionAvailable = true;
             RainMan.settingsStore.isGambleGameAvailable = true;
         }
@@ -469,7 +464,6 @@ export class AbstractController {
             }
             else {
                 this.columnsContainer.clearQuickReelsStop();
-                this.quickStopController.setQuickStopCounterLock(false);
                 this.shouldClearQuickReelsStopAfterSpin = false;
             }
         };
@@ -530,7 +524,6 @@ export class AbstractController {
                     }
                     this.columnsContainer.enableQuickReelsStop();
                     this.handleDisablingButtons(true);
-                    this.quickStopController.setQuickStopCounterLock(true);
                     this.summaryStop = this.skipFreeSpinSummary ? false : this.invokeFreeSpinSummaryPlateAfterWin;
                     if (this.invokeFreeSpinPlateAfterWin ||
                         this.summaryStop ||
@@ -554,9 +547,6 @@ export class AbstractController {
      * @returns {boolean} should buttons be disabled
      */
     get shouldButtonsBeDisabled() {
-        if (this.quickStopController.quickStopCounterLock) {
-            return true;
-        }
         if (RainMan.settingsStore.isAutoplayEnabled) {
             return true;
         }
@@ -812,23 +802,15 @@ export class AbstractController {
      * @returns {void}
      */
     throttledSpin() {
-        this.quickReelsCounter += 1;
         this.columnsContainer.setInteractivityForSymbols(false);
         this.handleDisablingButtons(true);
         RainMan.globals.shouldShowModals = false;
-        if (performance.now() - this.buttonsEventManager.speedPopupShownAt <
-            RainMan.config.durationOfActions.speedPopupVisibleTime) {
-            RainMan.globals.handleDisablingButtons?.();
-            this.columnsContainer.clearQuickReelsStop();
-        }
         hidePaytable();
         if (this.gamePhase === gamePhases.DATA_FETCH ||
             this.gamePhase === gamePhases.SPINNING ||
             this.gamePhase === gamePhases.CONFIGURING_SPIN) {
             this.columnsContainer.enableQuickReelsStop();
             this.isSpinThrottled = true;
-            this.quickStopController.handleResetCounter(this.spinThrottlerTimeout !== null);
-            this.quickStopController.handleInvokingSpeedPopup();
             return;
         }
         this.prepareBoughtFreeSpins();
@@ -944,7 +926,6 @@ export class AbstractController {
      * @returns {void}
      */
     disableAutoplay() {
-        this.quickStopController.speedPopupDisabled = false;
         this.autoSpinBalance = 0;
         RainMan.componentRegistry.get(MessageBox.registryName).hideAutoSpinText();
         RainMan.componentRegistry.get(AutoplayButton.registryName).activate(false);
@@ -1104,7 +1085,6 @@ export class AbstractController {
             default:
                 throw new Error(`Exception in game phase: ${this.gamePhase}`);
         }
-        this.buttonsEventManager.setSpeedPopupVisibility("none");
         RainMan.settingsStore.setModalsAvailability(false);
         this.spinning = true;
         logGroup("🟢 spinning start");
@@ -1124,12 +1104,12 @@ export class AbstractController {
         RainMan.settingsStore.disableSpecialButtons();
         this.columnsContainer.blindSpin();
         this.clearAndDestroyActions();
-        const { spinLogic } = await this.fetchAndPrepareSpinData();
+        const { spinLogic, data } = await this.fetchAndPrepareSpinData();
         const beforeFetchFreeSpins = RainMan.settingsStore.howManyFreeSpinsLeft;
         const availableFreeSpins = spinLogic.availableFreeSpins;
         const availableFreeSpinsIncreased = availableFreeSpins > RainMan.settingsStore.howManyFreeSpinsLeft;
         this.hideFreeSpinsMessageBox = availableFreeSpinsIncreased;
-        if (this._lastWinAmount !== 0 && !(availableFreeSpins > 0)) {
+        if ((this._lastWinAmount !== 0 || data.getRawData().round_win_amount) && !(availableFreeSpins > 0)) {
             RainMan.settingsStore.isTakeActionAvailable = true;
             RainMan.settingsStore.isGambleGameAvailable = true;
         }
@@ -1181,6 +1161,9 @@ export class AbstractController {
             (this.invokeFreeSpinPlateAfterWin || this.setSlowerSpeedForFreeSpins) &&
             RainMan.settingsStore.isFreeSpinsPlayEnabled) {
             this.columnsContainer.clearQuickReelsStop();
+            if (this.speedLevelBeforeFreeSpins === null) {
+                this.speedLevelBeforeFreeSpins = RainMan.settingsStore.currentSpeed;
+            }
             RainMan.settingsStore.setIsTemporarySpeed(false);
             RainMan.componentRegistry.setSpeedLevel(SPEED_LEVELS.slow);
             this.uiController.updateShownSpeedLevel(SPEED_LEVELS.slow);
@@ -1190,8 +1173,6 @@ export class AbstractController {
         debugSymbolsMatchConfiguration(spinLogic.finalBlindsConfiguration);
         await Promise.allSettled(this.uiController.promisesToSetBalances);
         this.changeGamePhase(this.uiController.recentWin === 0 ? gamePhases.IDLE : gamePhases.GAME_SUMMARY);
-        this.quickStopController.handleSpeedPopupInvocation();
-        this.quickStopController.handleResetCounter(!this.isSpinThrottled);
         logInfo("🔴 spinning end");
         RainMan.settingsStore.reinitData = undefined;
         logGroupEnd();
@@ -1230,12 +1211,15 @@ export class AbstractController {
         if (availableFreeSpinsIncreased) {
             this.uiController.updateShownFreeSpinAmount(availableFreeSpins);
         }
+        let gambleWinAmount = this.lastWinAmount;
         if (this.invokeFreeSpinSummaryPlateAfterWin && !this.skipFreeSpinSummary) {
+            gambleWinAmount = this.uiController.totalFreeSpinWinAmount;
             hideLayerIfPresent();
             await this.handleFreeSpinSummaryPlateInvocation();
         }
         await this.performActionsAfterSpin();
-        this.gambleGameEnabler(this.lastWinAmount);
+        this.freeSpinsWin = gambleWinAmount > 0 ? gambleWinAmount : null;
+        this.gambleGameEnabler(gambleWinAmount);
         if (RainMan.settingsStore.isAutoplayEnabled ||
             (RainMan.settingsStore.howManyFreeSpinsLeft !== 0 && this.shouldAutoplayFreeSpins)) {
             this.handleAutoplayLogic();
@@ -1250,6 +1234,13 @@ export class AbstractController {
             this.disableAutoplayButton(false);
         }
         await this.performActionsAfterAllActions();
+        if (this.speedLevelBeforeFreeSpins !== null &&
+            !RainMan.settingsStore.isFreeSpinsPlayEnabled &&
+            !RainMan.globals.isSuperBonusGameEnabled) {
+            RainMan.componentRegistry.setSpeedLevel(this.speedLevelBeforeFreeSpins);
+            this.uiController.updateShownSpeedLevel(this.speedLevelBeforeFreeSpins);
+            this.speedLevelBeforeFreeSpins = null;
+        }
         if (this.wasAutoplayEnabledBeforeFreeSpin &&
             !RainMan.settingsStore.isFreeSpinsPlayEnabled &&
             !RainMan.globals.isSuperBonusGameEnabled) {
@@ -1296,7 +1287,6 @@ export class AbstractController {
             return;
         }
         this.columnsContainer.clearQuickReelsStop();
-        this.quickStopController.setQuickStopCounterLock(false);
         this.shouldClearQuickReelsStopAfterSpin = false;
     }
     /**
@@ -1315,6 +1305,7 @@ export class AbstractController {
         });
         this.changeGamePhase(gamePhases.IDLE);
         this.invokeFreeSpinPlateAfterWin = false;
+        RainMan.settingsStore.isFreeSpinsStarted = true;
     }
     /**
      * Function for invoking free spin summary plate, invoked in mainContainer
@@ -1337,6 +1328,7 @@ export class AbstractController {
         RainMan.settingsStore.resetFreeSpinNumberBought();
         this.changeGamePhase(gamePhases.IDLE);
         this.invokeFreeSpinSummaryPlateAfterWin = false;
+        RainMan.settingsStore.isFreeSpinsStarted = false;
     }
     /**
      * Function for handling autoplay logic

package/dist/controllers/index.d.ts

@@ -1,4 +1,3 @@
 export * from "./AbstractController";
-export * from "./QuickStopController";
 export * from "./types";
 export * from "./UiController";

package/dist/controllers/index.js

@@ -1,4 +1,3 @@
 export * from "./AbstractController";
-export * from "./QuickStopController";
 export * from "./types";
 export * from "./UiController";

package/dist/localStorage/localStorage.d.ts

@@ -3,7 +3,6 @@
  */
 export declare const LOCAL_STORAGE: {
     readonly roundNumber: "roundNumberLocalStorage";
-    readonly hiResolution: "hiResolutionLocalStorage";
     readonly batterySaver: "batterySaverLocalStorage";
     readonly volumeLevel: "volumeLevelLocalStorage";
     readonly isSoundEnabled: "isSoundEnabledLocalStorage";

package/dist/localStorage/localStorage.js

@@ -3,7 +3,6 @@
  */
 export const LOCAL_STORAGE = {
     roundNumber: "roundNumberLocalStorage",
-    hiResolution: "hiResolutionLocalStorage",
     batterySaver: "batterySaverLocalStorage",
     volumeLevel: "volumeLevelLocalStorage",
     isSoundEnabled: "isSoundEnabledLocalStorage",

package/dist/stores/SettingsStore.d.ts

@@ -31,7 +31,6 @@ export declare class SettingsStore {
     infinitySpinsEnabled: boolean;
     roundNumber: number;
     reelSetId: number;
-    HiResolutionFlag: boolean;
     batterySaverFlag: boolean;
     isGambleGameAvailable: boolean;
     isGambleGameActive: boolean;
@@ -58,8 +57,8 @@ export declare class SettingsStore {
     disableBigWin: boolean;
     isAfterFreeSpinsSummary: boolean;
     isSpeedModalShown: boolean;
+    isFreeSpinsStarted: boolean;
     reinitData?: SpinDataInterface[];
-    setSpeedPopupVisibility?: (visibility: "flex" | "none") => void;
     popupPaytableRepositionCallback?: () => void;
     updateVolumeButtonTexture?: () => void;
     handleModalInvocation?: (layerId: string) => void;
@@ -137,8 +136,7 @@ export declare class SettingsStore {
     /**
      * Sets the free spins price table.
      * @public
-     * @param freeSpinsBuyOptions
-     * @param {Record<number, number>} freeSpinsPriceTable table with free spins prices
+     * @param {FreeSpinsBuyOption[]} freeSpinsBuyOptions array with free spins buy options
      * @returns {void}
      */
     setFreeSpinsBuyOptions(freeSpinsBuyOptions: FreeSpinsBuyOption[]): void;
@@ -152,8 +150,7 @@ export declare class SettingsStore {
     /**
      * Sets the free spins price table.
      * @public
-     * @param buyTypes
-     * @param {Record<number, number>} jokerBuyOption table with free spins prices
+     * @param {BuyType[]} buyTypes array with available buy types
      * @returns {void}
      */
     setGameBuyTypes(buyTypes: BuyType[]): void;
@@ -221,13 +218,6 @@ export declare class SettingsStore {
      * @returns {void}
      */
     setFullScreenFlag(flag: boolean): void;
-    /**
-     * Sets the high resolution flag.
-     * @public
-     * @param {boolean} flag - New value for high resolution flag.
-     * @returns {void}
-     */
-    setHiResolutionFlag(flag: boolean): void;
     /**
      * Sets the temporary speed flag.
      * @public

package/dist/stores/SettingsStore.js

@@ -1,12 +1,14 @@
 import { first, last, range } from "lodash";
 import { action, computed, makeAutoObservable, observable } from "mobx";
-import { SoundManager, SoundTracks } from "../application";
+import { Ticker } from "pixi.js";
+import { SoundManager } from "../application";
 import { BUTTONS } from "../components";
 import { PaytableTypes } from "../constants";
 import { getFromLocalStorage, LOCAL_STORAGE, removeFromLocalStorage, setToLocalStorage } from "../localStorage";
 import { RainMan } from "../Rainman";
-import { changeResolution, logError } from "../utils";
+import { logError } from "../utils";
 const INITIAL_AUTO_SPIN_COUNT = 50;
+const BATTERY_SAVER_MAX_FPS = 30;
 /**
  * This class represents global state of pixi and react application
  * @class SettingsStore
@@ -35,7 +37,6 @@ export class SettingsStore {
     infinitySpinsEnabled = false;
     roundNumber = 0;
     reelSetId = 0;
-    HiResolutionFlag = getFromLocalStorage(LOCAL_STORAGE.hiResolution, false);
     batterySaverFlag = getFromLocalStorage(LOCAL_STORAGE.batterySaver, false);
     isGambleGameAvailable = true;
     isGambleGameActive = false;
@@ -49,7 +50,6 @@ export class SettingsStore {
     howManyFreeSpinsLeft = 0;
     balanceAfterSpin = 0;
     howManyAutoSpinsLeft = INITIAL_AUTO_SPIN_COUNT;
-    // public freeSpinBuyTable: Record<number, number> = {};
     freeSpinsBuyOptions = [];
     jokerBuyOptions = [];
     gameBuyTypes = [];
@@ -63,8 +63,8 @@ export class SettingsStore {
     disableBigWin = false;
     isAfterFreeSpinsSummary = true;
     isSpeedModalShown = false;
+    isFreeSpinsStarted = false;
     reinitData;
-    setSpeedPopupVisibility;
     popupPaytableRepositionCallback;
     updateVolumeButtonTexture;
     handleModalInvocation;
@@ -100,7 +100,6 @@ export class SettingsStore {
             setShouldPlayAmbientMusic: action.bound,
             setShouldPlayFxSounds: action.bound,
             setFullScreenFlag: action.bound,
-            setHiResolutionFlag: action.bound,
             setSpeedLevel: action.bound,
             setVolumeLevel: action.bound,
             setOnAnyWin: action.bound,
@@ -220,8 +219,7 @@ export class SettingsStore {
     /**
      * Sets the free spins price table.
      * @public
-     * @param freeSpinsBuyOptions
-     * @param {Record<number, number>} freeSpinsPriceTable table with free spins prices
+     * @param {FreeSpinsBuyOption[]} freeSpinsBuyOptions array with free spins buy options
      * @returns {void}
      */
     setFreeSpinsBuyOptions(freeSpinsBuyOptions) {
@@ -239,8 +237,7 @@ export class SettingsStore {
     /**
      * Sets the free spins price table.
      * @public
-     * @param buyTypes
-     * @param {Record<number, number>} jokerBuyOption table with free spins prices
+     * @param {BuyType[]} buyTypes array with available buy types
      * @returns {void}
      */
     setGameBuyTypes(buyTypes) {
@@ -281,6 +278,9 @@ export class SettingsStore {
      * @returns {void}
      */
     refreshBatterySaver() {
+        const maxFPS = this.batterySaverFlag ? BATTERY_SAVER_MAX_FPS : 0;
+        RainMan.app.ticker.maxFPS = maxFPS;
+        Ticker.shared.maxFPS = maxFPS;
         this.containersWithSpines.forEach((spine) => spine.setAnimationTimescale(!this.batterySaverFlag));
     }
     /**
@@ -292,7 +292,12 @@ export class SettingsStore {
      */
     setShouldPlayAmbientMusic(flag, saveToLocalStorage = true) {
         this.shouldPlayAmbientMusic = flag;
-        SoundManager.setPlayStatus(this.isFreeSpinsPlayEnabled ? SoundTracks.freeSpinsMusic : SoundTracks.music, flag);
+        if (!flag) {
+            SoundManager.stopAmbientMusic();
+        }
+        else {
+            SoundManager.restoreAmbientPlayback();
+        }
         this.updateVolumeButtonTexture?.();
         if (saveToLocalStorage) {
             setToLocalStorage(LOCAL_STORAGE.isAmbientMusicEnabled, flag);
@@ -371,18 +376,6 @@ export class SettingsStore {
             window.document.exitFullscreen();
         }
     }
-    /**
-     * Sets the high resolution flag.
-     * @public
-     * @param {boolean} flag - New value for high resolution flag.
-     * @returns {void}
-     */
-    setHiResolutionFlag(flag) {
-        this.HiResolutionFlag = flag;
-        setToLocalStorage(LOCAL_STORAGE.hiResolution, flag);
-        changeResolution(flag);
-        window.dispatchEvent(new Event("resize"));
-    }
     /**
      * Sets the temporary speed flag.
      * @public

package/dist/utils/common/functions.d.ts

@@ -77,7 +77,7 @@ export declare const setTimeScale: (spine: Spine, flag: boolean) => void;
  * @param {boolean} high should be true for high resolution, false for low resolution
  * @returns {void}
  */
-export declare const changeResolution: (high: boolean) => void;
+export declare const changeResolution: () => void;
 /**
  * Helper function for checking if the value is not null or undefined
  * @template T

package/dist/utils/common/functions.js

@@ -145,9 +145,8 @@ export const setTimeScale = (spine, flag) => {
  * @param {boolean} high should be true for high resolution, false for low resolution
  * @returns {void}
  */
-export const changeResolution = (high) => {
-    const lowRes = Math.max(window.devicePixelRatio * 0.5, 1);
-    const resolution = high ? window.devicePixelRatio : lowRes;
+export const changeResolution = () => {
+    const resolution = window.devicePixelRatio;
     RainMan.app.renderer.resolution = resolution;
     RainMan.app.renderer.resize(RainMan.app.screen.width, RainMan.app.screen.height);
 };

package/dist/utils/common/sound.js

@@ -24,7 +24,7 @@ const pauseAudio = () => {
     shouldResumeAudioOnInterruption = false;
     removeInterruptedAudioResumeListeners();
     if (RainMan.settingsStore.isSoundEnabled()) {
-        SoundManager.pauseAll();
+        SoundManager.stopSoundsForPageHide();
     }
 };
 /**
@@ -40,13 +40,10 @@ const resumeAudio = async () => {
     }
     isResumingAudio = true;
     try {
-        if (RainMan.settingsStore.isSoundEnabled()) {
-            const hasResumedAudioContext = await SoundManager.resumeOnFocus();
-            if (!hasResumedAudioContext) {
-                interruptedAudioResume();
-                return;
-            }
-            SoundManager.resumeAll();
+        const hasResumedAudioContext = await SoundManager.resumeOnFocus();
+        if (!hasResumedAudioContext) {
+            interruptedAudioResume();
+            return;
         }
         if (SoundManager.isAudioContextRunning()) {
             shouldResumeAudioOnInterruption = false;

package/package.json

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

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

@@ -1,7 +0,0 @@
-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) & {
-    displayName: string;
-};

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

@@ -1,27 +0,0 @@
-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 { CloseModalButton } from "../CloseModalButton";
-export const SPEED_PREFIX = "speed-";
-export const SpeedSettingsPopup = observer(() => {
-    const speedLevelMapper = {
-        slow: SPEED_LEVELS.slow,
-        normal: SPEED_LEVELS.normal,
-        fast: SPEED_LEVELS.fast,
-    };
-    const { settingStore } = useStores();
-    return (<div className="speed-settings-popup">
-            <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`}/>
-                    </div>))}
-            </div>
-        </div>);
-});

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

@@ -1,159 +0,0 @@
-.speed-settings-modal {
-    width: 50vw;
-    height: 30vh;
-    top: 40vh;
-    left: 25vw;
-    align-items: center;
-    justify-content: center;
-    z-index: 0;
-}
-
-.modal-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(2px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 0;
-}
-
-.speed-settings-popup {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    align-items: center;
-    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;
-    gap: 25px;
-    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;
-    cursor: pointer;
-}
-
-.speed-settings-popup__option:hover {
-    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_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: 10vh;
-    }
-
-    .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 screen and (max-width: 450px) and (pointer: coarse) {
-    .speed-settings-popup__option {
-        width: 120px;
-        height: 66px;
-    }
-
-    .speed-settings-popup__option:hover {
-        background-image: url("/assets/settings/speedPopup/speed-frame-active.png");
-        background-repeat: no-repeat no-repeat;
-        background-size: contain;
-    }
-
-    .speed-settings-popup__option:focus {
-        background-image: url("/assets/settings/speedPopup/speed-frame-active.png");
-        background-repeat: no-repeat no-repeat;
-        background-size: contain;
-    }
-}
-
-@media only screen and (max-height: 450px) {
-    .speed-settings-modal {
-        width: 80vw;
-        height: 50vh;
-        left: 10vw;
-        top: 10vh;
-    }
-
-    .speed-settings-popup__title {
-        font-size: 20px;
-    }
-
-    .speed-settings-popup__speed-options {
-        height: 60%;
-    }
-}