Improve system storage and data structure

src/app/page.tsx

@@ -8,6 +8,7 @@ import FullscreenOption from "@/components/timer/FullscreenOption";
 import HintPanel from "@/components/timer/HintPanel";
 import ScrambleModal from "@/components/timer/ScrambleModal";
 import useInitializeTimer from "@/hooks/useInitializeHint";
+import ImportModal from "@/components/menu-settings/ImportModal";
 
 export default function Home() {
   useInitializeTimer();
@@ -22,6 +23,7 @@ export default function Home() {
       <HintPanel />
       <FullscreenOption />
       <ScrambleModal />
+      <ImportModal />
     </>
   );
 }

src/components/menu-settings/DataImportExport.tsx

@@ -1,36 +1,20 @@
 import exportDataToFile from "@/lib/exportDataToFile";
 import { Button } from "@/components/button";
-import { useRef } from "react";
-import importDataFromFile from "@/lib/importDataFromFile";
 import Import from "@/icons/Import";
 import Export from "@/icons/Export";
 import translation from "@/translations/global.json";
 import { useSettingsModalStore } from "@/store/SettingsModalStore";
-import { useTimerStore } from "@/store/timerStore";
-import { useRouter } from "next/navigation";
 
 export function DataImportExport() {
-  const dataInputRef = useRef<HTMLInputElement>(null);
   const { lang } = useSettingsModalStore();
-  const { setSelectedCube } = useTimerStore();
-  const router = useRouter();
+  const { setImportModalOpen } = useSettingsModalStore();
   return (
     <div className="flex justify-center w-11/12 gap-2 mx-auto light">
-      <input
-        type="file"
-        accept=".txt"
-        ref={dataInputRef}
-        className="hidden"
-        onChange={(e) => {
-          importDataFromFile(e);
-          router.push("/cubes");
-          setSelectedCube(null);
-        }}
-      />
       <Button
         className="font-normal transition duration-400"
         label={translation.settings["import-from-file"][lang]}
-        onClick={() => dataInputRef.current && dataInputRef.current.click()}
+        onClick={() => setImportModalOpen(true)}
+        // onClick={() => dataInputRef.current && dataInputRef.current.click()}
         minimalistic={false}
         icon={<Import />}
       />

src/components/menu-settings/ImportModal.tsx

@@ -0,0 +1,98 @@
+import useClickOutside from "@/hooks/useClickOutside";
+import importDataFromFile from "@/lib/importDataFromFile";
+import { useSettingsModalStore } from "@/store/SettingsModalStore";
+import { useTimerStore } from "@/store/timerStore";
+import { AnimatePresence, motion } from "framer-motion";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useRef } from "react";
+
+export default function ImportModal() {
+  const { setImportModalOpen, importModalOpen } = useSettingsModalStore();
+  const { setSelectedCube } = useTimerStore();
+  const dataInputRef = useRef<HTMLInputElement>(null);
+  const componentRef = useRef<HTMLDivElement | null>(null);
+  const router = useRouter();
+  useClickOutside(componentRef, () => setImportModalOpen(false));
+  return (
+    <>
+      <AnimatePresence>
+        {importModalOpen && (
+          <div className="fixed top-0 left-0 z-50 flex flex-col items-center justify-center w-full h-screen px-4 py-10 overflow-x-hidden overflow-y-auto bg-black bg-opacity-10 md:inset-0 text-neutral-950">
+            <motion.div
+              initial={{ y: 100, scale: 0.9, opacity: 0 }}
+              animate={{ y: 0, scale: 1, opacity: 1 }}
+              exit={{ y: 10, scale: 0.9, opacity: 0 }}
+              className="relative w-full h-auto text-xs bg-white rounded-md sm:w-96 p-3 flex flex-col gap-2 items-center text-center"
+              ref={componentRef}
+            >
+              <div className="text-xl font-medium">
+                Intelligent Backup Restoration
+              </div>
+              <div className="text-md text-balance">
+                Let NexusTimer smartly import everything; it will automatically
+                detect and recreate a compatible data structure.
+              </div>
+
+              <div className="relative border-2 border-dashed border-blue-900 w-full h-20 text-md flex justify-center items-center hover:border-blue-600 transition duration-200 ">
+                <input
+                  type="file"
+                  accept=".txt"
+                  ref={dataInputRef}
+                  onChange={(e) => {
+                    alert("Testing");
+                    importDataFromFile(e);
+                    router.push("/cubes");
+                    setSelectedCube(null);
+                    setImportModalOpen(false);
+                  }}
+                  className="absolute z-50 w-full h-full opacity-0 hover:cursor-pointer"
+                />
+                <div className="absolute z-40 text-center">
+                  Drag and drop your files here, or click to select.
+                </div>
+              </div>
+              <div className="font-medium">Supported Timers:</div>
+              <ul className="flex gap-2">
+                <Image
+                  src={"/timer-logos/nexustimer.jpg"}
+                  alt="nexustimer logo"
+                  width={64}
+                  height={64}
+                  className="rounded-2xl"
+                  draggable={false}
+                />
+                <Image
+                  src={"/timer-logos/cstimer.jpg"}
+                  alt="cstimer logo"
+                  width={64}
+                  height={64}
+                  className="rounded-2xl"
+                  draggable={false}
+                />
+
+                <Image
+                  src={"/timer-logos/twistytimer.jpg"}
+                  alt="twistytimer logo"
+                  width={64}
+                  height={64}
+                  className="rounded-2xl"
+                  draggable={false}
+                />
+
+                <Image
+                  src={"/timer-logos/cubedesk.jpg"}
+                  alt="cubedesk logo"
+                  width={64}
+                  height={64}
+                  className="rounded-2xl"
+                  draggable={false}
+                />
+              </ul>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

src/components/solves/ModalSolve.tsx

@@ -182,7 +182,9 @@ export default function ModalSolve({ currentTab }: { currentTab: SolveTab }) {
                     className="w-full h-32 my-3"
                     show={status}
                     scramble={solve.scramble}
-                    event={solve ? solve.category : "3x3"}
+                    event={
+                      solve && selectedCube ? selectedCube.category : "3x3"
+                    }
                   ></ScrambleDisplay>
                 )}
                 <div>{solve.comment}</div>

src/components/timer/ManualMode.tsx

@@ -57,7 +57,6 @@ export default function ManualMode() {
             dnf: false,
             plus2: false,
             rating: Math.floor(Math.random() * 20) + scramble.length,
-            category: selectedCube.category,
             cubeId: selectedCube.id,
           };
           setLastSolve(newSolve);

src/hooks/useTimer.ts

@@ -134,7 +134,6 @@ export default function useTimer() {
           dnf: false,
           plus2: false,
           rating: Math.floor(Math.random() * 20) + scramble.length,
-          category: selectedCube.category,
           cubeId: selectedCube.id,
           comment: "",
         };

src/interfaces/Solve.tsx

@@ -1,5 +1,3 @@
-import { Categories } from "./Categories";
-
 export interface Solve {
   id: string;
   cubeId: string;
@@ -11,6 +9,5 @@ export interface Solve {
   rating: number;
   dnf: boolean;
   plus2: boolean;
-  category: Categories;
   comment?: string;
 }

src/interfaces/cubeCollection.ts

@@ -22,10 +22,24 @@ export type Event =
   | "333mbf"
   | "333ft";
 
+type TwistyTimerEvent =
+  | "222"
+  | "333"
+  | "444"
+  | "555"
+  | "666"
+  | "777"
+  | "skewb"
+  | "mega"
+  | "pyra"
+  | "sq1"
+  | "clock";
+
 export interface CubeCollection {
   event: Event;
   id: number;
   name: Categories;
   src: any;
   displayId: PuzzleID;
+  twistyId: TwistyTimerEvent;
 }

src/lib/const/cubeCollection.ts

@@ -17,75 +17,86 @@ export const cubeCollection: CubeCollection[] = [
     name: "2x2",
     src: cube222,
     displayId: "2x2x2",
+    twistyId: "222",
   },
   {
     event: "333",
     id: 2,
     name: "3x3",
     src: cube333,
     displayId: "3x3x3",
+    twistyId: "333",
   },
   {
     event: "333",
     id: 3,
     name: "3x3 OH",
     src: cube333oh,
     displayId: "3x3x3",
+    twistyId: "333",
   },
   {
     event: "444",
     id: 4,
     name: "4x4",
     src: cube444,
     displayId: "4x4x4",
+    twistyId: "444",
   },
   {
     event: "555",
     id: 5,
     name: "5x5",
     src: cube555,
     displayId: "5x5x5",
+    twistyId: "555",
   },
   {
     event: "666",
     id: 6,
     name: "6x6",
     src: cube666,
     displayId: "6x6x6",
+    twistyId: "666",
   },
   {
     event: "777",
     id: 7,
     name: "7x7",
     src: cube777,
     displayId: "7x7x7",
+    twistyId: "777",
   },
   {
     event: "sq1",
     id: 8,
     name: "SQ1",
     src: cubesq1,
     displayId: "square1",
+    twistyId: "sq1",
   },
   {
     event: "skewb",
     id: 9,
     name: "Skewb",
     src: cubeskewb,
     displayId: "skewb",
+    twistyId: "skewb",
   },
   {
     event: "pyram",
     id: 10,
     name: "Pyraminx",
     src: cubepyramix,
     displayId: "pyraminx",
+    twistyId: "pyra",
   },
   {
     event: "minx",
     id: 11,
     name: "Megaminx",
     src: cubemegaminx,
     displayId: "megaminx",
+    twistyId: "mega",
   },
 ];