Test memory

package.json

@@ -21,7 +21,7 @@
         "typescript"
     ],
     "scripts": {
-        "dev": "vite --config vite/config.dev.mjs --port 3000",
+        "dev": "vite --config vite/config.dev.mjs --port 3000 --host 0.0.0.0",
         "build": "vite build --config vite/config.prod.mjs"
     },
     "dependencies": {
@@ -38,6 +38,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-firebase-hooks": "^5.1.1",
+        "react-router-dom": "^6.26.1",
         "tone": "^15.0.4",
         "use-indexeddb": "^2.0.2",
         "webfontloader": "^1.6.28"
@@ -58,3 +59,4 @@
         "vite": "^5.3.1"
     }
 }
+

src/App.tsx

@@ -21,7 +21,7 @@ import SelectTracks from "./components/SelectTracks";
 import SelectVoices from "./components/SelectVoices";
 import { IRefPhaserGame, PhaserGame } from "./game/PhaserGame";
 import { GameVoiceInfo } from "./game/scenes/Preloader";
-import { downloadAudioFiles, stopAndDestroyPlayers } from "./hooks/useTonejs";
+// import { downloadAudioFiles, stopAndDestroyPlayers } from "./hooks/useTonejs";
 import { CoverV1 } from "./services/db/coversV1.service";
 import {
     listAllTrackBackgrounds,
@@ -33,18 +33,17 @@ import TuneIcon from "@mui/icons-material/Tune";
 import { createRandomNumber, formatSecondsTohr } from "./helpers";
 import axios from "axios";
 import Close from "@mui/icons-material/Close";
-
 export const tracks = [
     "01",
-    "02",
+    // "02",
     "03",
     "06",
     "07",
-    "11",
-    "14",
+    // "11",
+    // "14",
     "16",
-    "21",
-    "22",
+    // "21",
+    // "22",
 ];
 
 function App() {
@@ -68,16 +67,18 @@ function App() {
             if (localTracks) {
                 const arr = JSON.parse(localTracks);
                 // unique array
-                return [...new Set(arr)] as string[];
+                return [...new Set(arr)].filter((t) =>
+                    tracks.includes(t as string)
+                ) as string[];
             }
             return tracks?.slice(0, 10);
         }
     );
     const [selectedVoices, setSelectedVoices] = useState<GameVoiceInfo[]>([]);
     const [downloadProgress, setDownloadProgress] = useState(0);
-    const [startSectionIdx, setStartSectionIdx] = useState(3);
+    const [startSectionIdx, setStartSectionIdx] = useState(1);
     const [noOfRaceTracks, setNoOfRaceTracks] = useState(6);
-    const [marbleSpeed, setMarbleSpeed] = useState(0.2);
+    const [marbleSpeed, setMarbleSpeed] = useState(0.8);
     const theme = useTheme();
     const isMobileView = useMediaQuery(theme.breakpoints.down("md"));
     const canvasElemWidth = window.innerWidth > 414 ? 414 : window.innerWidth;
@@ -141,7 +142,7 @@ function App() {
             );
 
             if (quite) {
-                stopAndDestroyPlayers();
+                // stopAndDestroyPlayers();
                 setDownloadProgress(0);
                 phaserRef.current?.game?.destroy(true);
                 setReady(false);
@@ -201,28 +202,28 @@ function App() {
         });
         if ((_coverDoc || coverDoc) && (_coverId || selectedCoverDocId)) {
             setIsDownloading(true);
-            await downloadAudioFiles(
-                [
-                    `https://voxaudio.nusic.fm/covers/${
-                        _coverId || selectedCoverDocId
-                    }/instrumental.mp3`,
-                    ...(_coverDoc
-                        ? _coverDoc.voices.slice(0, 5)
-                        : selectedVoices
-                    )
-                        .map((v) => v.id)
-                        .map(
-                            (v) =>
-                                `https://voxaudio.nusic.fm/covers/${
-                                    _coverId || selectedCoverDocId
-                                }/${v}.mp3`
-                        ),
-                ],
-                (progress: number) => {
-                    console.log("progress", progress);
-                    setDownloadProgress(progress);
-                }
-            );
+            // await downloadAudioFiles(
+            //     [
+            //         `https://voxaudio.nusic.fm/covers/${
+            //             _coverId || selectedCoverDocId
+            //         }/instrumental.mp3`,
+            //         ...(_coverDoc
+            //             ? _coverDoc.voices.slice(0, 5)
+            //             : selectedVoices
+            //         )
+            //             .map((v) => v.id)
+            //             .map(
+            //                 (v) =>
+            //                     `https://voxaudio.nusic.fm/covers/${
+            //                         _coverId || selectedCoverDocId
+            //                     }/${v}.mp3`
+            //             ),
+            //     ],
+            //     (progress: number) => {
+            //         console.log("progress", progress);
+            //         setDownloadProgress(progress);
+            //     }
+            // );
             setIsDownloading(false);
             setReady(true);
         }
@@ -249,7 +250,7 @@ function App() {
                 ]
             );
             setBgPaths(nonMotionBgPaths);
-            setMotionBgPaths(motionBgPaths);
+            // setMotionBgPaths(motionBgPaths);
         })();
         (async () => {
             const _trailsPath = await listAllTrails();
@@ -448,7 +449,7 @@ function App() {
                                     size="small"
                                     onClick={() => {
                                         phaserRef.current?.game?.destroy(true);
-                                        stopAndDestroyPlayers();
+                                        // stopAndDestroyPlayers();
                                         setDownloadProgress(0);
                                         setReady(false);
                                     }}
@@ -538,9 +539,9 @@ function App() {
                                     <Typography>Speed</Typography>
                                     <Slider
                                         sx={{ width: 200 }}
-                                        min={0.1}
-                                        step={0.1}
-                                        max={0.8}
+                                        min={0.2}
+                                        step={0.2}
+                                        max={2}
                                         value={marbleSpeed}
                                         onChange={(_, val) =>
                                             setMarbleSpeed(val as number)
@@ -897,7 +898,7 @@ function App() {
                                 size="small"
                                 onClick={() => {
                                     phaserRef.current?.game?.destroy(true);
-                                    stopAndDestroyPlayers();
+                                    // stopAndDestroyPlayers();
                                     setDownloadProgress(0);
                                     setReady(false);
                                 }}
@@ -964,9 +965,9 @@ function App() {
                             <Typography>Speed</Typography>
                             <Slider
                                 sx={{ width: 200 }}
-                                min={0.1}
-                                step={0.1}
-                                max={0.8}
+                                min={0.2}
+                                step={0.2}
+                                max={2}
                                 value={marbleSpeed}
                                 onChange={(_, val) =>
                                     setMarbleSpeed(val as number)
@@ -1087,7 +1088,7 @@ function App() {
                                     }}
                                 />
                             ))}
-                            {motionBgPaths.map((path) => (
+                            {/* {motionBgPaths.map((path) => (
                                 <img
                                     key={path}
                                     src={path}
@@ -1108,7 +1109,7 @@ function App() {
                                         setEnableMotion(true);
                                     }}
                                 />
-                            ))}
+                            ))} */}
                         </Stack>
                         <SelectTracks
                             setSelectedTracksList={setSelectedTracksList}

src/components/Rows.tsx

@@ -20,6 +20,7 @@ import {
     orderBy,
     DocumentData,
     QuerySnapshot,
+    documentId,
 } from "firebase/firestore";
 import { useEffect, useState } from "react";
 import { useCollection } from "react-firebase-hooks/firestore";
@@ -30,6 +31,13 @@ import Settings from "@mui/icons-material/Settings";
 import { createRandomNumber } from "../helpers";
 
 const getRowsQuery = (recordsLimit: number, isLatest: boolean) => {
+    return query(
+        collection(db, "covers"),
+        where(documentId(), "in", [
+            "lsUBEcaYfOidpvjUxpz1",
+            "YE7LMzWbCKgkLgSKVX9Q",
+        ])
+    );
     if (isLatest) {
         return query(
             collection(db, "covers"),
@@ -54,7 +62,7 @@ type Props = {
     onGotoControls?: (coverDocId: string, coverDoc: CoverV1) => void;
 };
 const Rows = ({ onCoverSelection, onPlay, onGotoControls }: Props) => {
-    const [recordsLimit, setRecordsLimit] = useState(15);
+    const [recordsLimit, setRecordsLimit] = useState(2);
     const [isLatest, setIsLatest] = useState(false);
     const [coversCollectionSnapshot, coversLoading, error] = useCollection(
         getRowsQuery(recordsLimit, isLatest)

src/components/SelectVoices.tsx

@@ -97,7 +97,7 @@ const SelectVoices = ({ selectedVoices, setSelectedVoices, voices }: Props) => {
             >
                 <Stack p={2} gap={1}>
                     <Typography>Choose Voice</Typography>
-                    <Stack direction={"row"} gap={1}>
+                    <Stack direction={"row"} gap={1} flexWrap={"wrap"}>
                         {voices
                             .filter(
                                 (v) =>