From 33a6dd09c04e34749b784cf6931ca0b1a31f9581 Mon Sep 17 00:00:00 2001
From: rojonaitor <bryanlundberg@outlook.com>
Date: Mon, 1 Jan 2024 08:51:59 -0600
Subject: [PATCH] refactor: scramble display

---
 package-lock.json                             | 73 +++++++++++++++++++
 package.json                                  |  1 +
 src/app/layout.tsx                            |  5 --
 .../scramble-display/ScrambleDisplay.tsx      | 48 +++++++++---
 src/components/solves/ModalSolve.tsx          | 10 +--
 src/interfaces/cubeCollection.ts              |  2 +
 src/lib/createScrambleImage.ts                |  8 --
 src/lib/cubeCollection.ts                     | 11 +++
 8 files changed, 130 insertions(+), 28 deletions(-)
 delete mode 100644 src/lib/createScrambleImage.ts

diff --git a/package-lock.json b/package-lock.json
index d1a48bb8..5dbb1744 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,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",
@@ -491,12 +492,38 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
       "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+      "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ=="
+    },
+    "node_modules/@types/three": {
+      "version": "0.157.2",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.157.2.tgz",
+      "integrity": "sha512-2kykrMgvO5LTAiahadM6ijoER+GcbEJ61pQVOyGxIJTCASoUnzwJvfhilsLxvEw4+glzhLYUDvvTvNjx+58Vzw==",
+      "dependencies": {
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "fflate": "~0.6.10",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
     "node_modules/@types/uuid": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.3.tgz",
       "integrity": "sha512-taHQQH/3ZyI3zP8M/puluDEIEvtQHVYcC6y3N8ijFtAd28+Ey/G4sg1u2gB01S8MwybLOKAp9/yCMu/uR5l3Ug==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz",
+      "integrity": "sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw=="
+    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.10.tgz",
+      "integrity": "sha512-n3u5sqXQJhf1CS68mw3Wf16FQ4cRPNBBwdYLFzq3UddiADOim1Pn3Y6PBdDilz1vOJF3ybLxJ8ZEDlLIzrOQZg=="
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "6.7.2",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.7.2.tgz",
@@ -1166,6 +1193,11 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "node_modules/comlink": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/comlink/-/comlink-4.4.1.tgz",
+      "integrity": "sha512-+1dlx0aY5Jo1vHy/tSsIGpSkN4tS9rZSW8FIhG0JH/crs9wwweswIo/POr451r7bZww3hFbPAKnTpimzL/mm4Q=="
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1213,6 +1245,24 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/cubing": {
+      "version": "0.44.1",
+      "resolved": "https://registry.npmjs.org/cubing/-/cubing-0.44.1.tgz",
+      "integrity": "sha512-BMBts7FsCC8DzbkFKTryA1LEc/xl5SgRZITeemE2Ib9/73gMiAwvREm9FpBYmqochbQ7w9vxOZbabvm2Z9H5jA==",
+      "dependencies": {
+        "@types/three": "^0.157.0",
+        "@types/web-bluetooth": "^0.0.18",
+        "comlink": "^4.4.1",
+        "random-uint-below": "^2.0.0",
+        "three": "^0.157.0"
+      },
+      "bin": {
+        "scramble": "dist/bin/scramble.js"
+      },
+      "engines": {
+        "node": ">=19"
+      }
+    },
     "node_modules/d3-array": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
@@ -2118,6 +2168,11 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3057,6 +3112,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw=="
+    },
     "node_modules/micromatch": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -3760,6 +3820,14 @@
       "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
       "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
     },
+    "node_modules/random-uint-below": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/random-uint-below/-/random-uint-below-2.0.0.tgz",
+      "integrity": "sha512-2gD9r+3IkNJ6JGfra+T2tA4SGf3ne5pz2QGuXQ9fXdxAX38i0OEsqJ19smnEsYnjhYi0H0ICo8D4pfqw3Pszhw==",
+      "engines": {
+        "node": ">=19"
+      }
+    },
     "node_modules/rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -4574,6 +4642,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.157.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.157.0.tgz",
+      "integrity": "sha512-CeAwQrf4x3z0/e+MC4F+nXLW5t0gh3pw+L6CCBqpHvOq3bGYIgRYub7Pv0j/9wR+d++OiEglyZzWyuSYbwWGOA=="
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/package.json b/package.json
index b441573d..8a2db96e 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b5e79f73..0199c752 100644
--- a/src/app/layout.tsx
+++ b/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>
   );
diff --git a/src/components/scramble-display/ScrambleDisplay.tsx b/src/components/scramble-display/ScrambleDisplay.tsx
index 5dee5ff1..4fc4cc27 100644
--- a/src/components/scramble-display/ScrambleDisplay.tsx
+++ b/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}</>
   );
 }
diff --git a/src/components/solves/ModalSolve.tsx b/src/components/solves/ModalSolve.tsx
index df6ebbfa..e6176e5e 100644
--- a/src/components/solves/ModalSolve.tsx
+++ b/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>
diff --git a/src/interfaces/cubeCollection.ts b/src/interfaces/cubeCollection.ts
index ed28fee0..938a6273 100644
--- a/src/interfaces/cubeCollection.ts
+++ b/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;
 }
diff --git a/src/lib/createScrambleImage.ts b/src/lib/createScrambleImage.ts
deleted file mode 100644
index ae5d432d..00000000
--- a/src/lib/createScrambleImage.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function createScrambleImage(event: string, scramble: string) {
-  const display = document.querySelector("scramble-display");
-  display?.remove();
-  const child = document.createElement("scramble-display");
-  child.setAttribute("event", event);
-  child.setAttribute("scramble", scramble ? scramble : "");
-  document.querySelector("#scramble-display")?.appendChild(child);
-}
diff --git a/src/lib/cubeCollection.ts b/src/lib/cubeCollection.ts
index 78036938..07a7967d 100644
--- a/src/lib/cubeCollection.ts
+++ b/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",
   },
 ];