refactor: scramble display

package.json

@@ -16,6 +16,7 @@
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
+    "cubing": "^0.44.1",
     "date-fns": "^2.30.0",
     "eslint": "8.49.0",
     "eslint-config-next": "13.4.19",

src/app/layout.tsx

@@ -1,5 +1,4 @@
 import "./globals.css";
-import Script from "next/script";
 import type { Metadata } from "next";
 import PreloadSettings from "@/components/PreloadSettings";
 
@@ -20,10 +19,6 @@ export default function RootLayout({
         <main>
           <PreloadSettings>{children}</PreloadSettings>
         </main>
-        <Script
-          src="https://cdn.cubing.net/js/scramble-display"
-          type="module"
-        />
       </body>
     </html>
   );

src/components/scramble-display/ScrambleDisplay.tsx

@@ -1,5 +1,6 @@
-import createScrambleImage from "@/lib/createScrambleImage";
 import { useEffect } from "react";
+import { TwistyPlayer, PuzzleID } from "cubing/twisty";
+import { cubeCollection } from "@/lib/cubeCollection";
 
 interface ScrambleDisplay {
   className: string;
@@ -8,19 +9,46 @@ interface ScrambleDisplay {
   event: string;
 }
 
-export default function ScrambleDisplay(props: ScrambleDisplay) {
-  const { className, show, scramble, event } = props;
-
+export default function ScrambleDisplay({
+  show,
+  scramble,
+  event,
+  className,
+}: ScrambleDisplay) {
   useEffect(() => {
     if (!show) return;
-    createScrambleImage(event, scramble ? scramble : "");
+
+    const display = document.querySelector("twisty-player");
+    display?.remove();
+
+    const getDisplayId = (): PuzzleID => {
+      const category = cubeCollection.filter((u) => u.event === event);
+      console.log(category[0].displayId);
+      return category[0].displayId;
+    };
+
+    const displayId = getDisplayId();
+
+    const player = new TwistyPlayer({
+      puzzle: displayId,
+      alg: scramble ? scramble : "",
+      hintFacelets: "none",
+      background: "none",
+      controlPanel: "none",
+      visualization: "2D",
+    });
+
+    document.querySelector("#scramble-display")?.appendChild(player);
+    const twistyPlayerElement = document.querySelector("twisty-player");
+    if (twistyPlayerElement) {
+      twistyPlayerElement.style.width = "100%";
+      twistyPlayerElement.style.height = "auto";
+      twistyPlayerElement.style.maxWidth = "100%";
+      twistyPlayerElement.style.minHeight = "100%";
+    }
   }, [show, event, scramble]);
 
   return (
-    <>
-      {show ? (
-        <div className={className} id="scramble-display"></div>
-      ) : null}
-    </>
+    <>{show ? <div className={className} id="scramble-display"></div> : null}</>
   );
 }

src/components/solves/ModalSolve.tsx

@@ -142,17 +142,17 @@ export default function ModalSolve() {
             </div>
           </div>
           <div className="flex flex-col items-center justify-between p-3 font-medium border-b border-neutral-200 text-md">
-            <div className="flex items-center justify-between w-full gap-5 md:gap-5">
+            <div
+              className="flex items-center justify-between w-full gap-5 md:gap-5"
+              onClick={() => setShowScramble(!showScramble)}
+            >
               <div>
                 <CubeTransparent />
               </div>
               <div className="text-base font-normal text-justify">
                 {solve.scramble}
               </div>
-              <div
-                className="transition duration-200 hover:text-neutral-500 hover:cursor-pointer"
-                onClick={() => setShowScramble(!showScramble)}
-              >
+              <div className="transition duration-200 hover:text-neutral-500 hover:cursor-pointer">
                 {showScramble ? <ChevronUp /> : <ChevronDown />}
               </div>
             </div>

src/interfaces/cubeCollection.ts

@@ -1,3 +1,4 @@
+import { PuzzleID } from "cubing/twisty";
 import { Categories } from "./Categories";
 
 type Event =
@@ -26,4 +27,5 @@ export interface CubeCollection {
   id: number;
   name: Categories;
   src: any;
+  displayId: PuzzleID;
 }

src/lib/cubeCollection.ts

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