feat: scramble display render 3d model

bryanlundberg · Sep 11, 2024 · 9afc9b0 · 9afc9b0
1 parent 71fa5b2
commit 9afc9b0
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 20 deletions.
diff --git a/src/app/[locale]/solves-experimental/page.tsx b/src/app/[locale]/solves-experimental/page.tsx
@@ -78,22 +78,15 @@ export default function Page() {
                 <TabsTrigger value="session">Session</TabsTrigger>
                 <TabsTrigger value="all">All</TabsTrigger>
               </TabsList>
-
-              <Toggle
-                variant="outline"
-                aria-label="Toggle session"
-                className="flex items-center justify-center gap-1"
-              >
-                <BarsArrowDownIcon className="h-4 w-4" />
-                <span className="hidden sm:block">Options</span>
-              </Toggle>
             </div>
           </Card>
 
           <TabsContent value="session">
-            <SolvesArea displaySolves={FAKE_SESSION} currentTab={"Session"} />
+            <SolvesArea displaySolves={FAKE_SESSION} />
+          </TabsContent>
+          <TabsContent value="all">
+            <SolvesArea displaySolves={FAKE_SESSION.slice(5, 20)} />
           </TabsContent>
-          <TabsContent value="all">Change your password here.</TabsContent>
 
           <Sheet open={isDialogSolveOpen} onOpenChange={handleCloseDialogSolve}>
             <SheetSolveDetails />

diff --git a/src/components/scramble-display/ScrambleDisplay.tsx b/src/components/scramble-display/ScrambleDisplay.tsx
@@ -8,13 +8,15 @@ interface ScrambleDisplay extends React.HTMLAttributes<HTMLDivElement> {
   show: boolean;
   scramble: string | null;
   event: Categories;
+  visualization?: "2D" | "3D";
 }
 
 export default function ScrambleDisplay({
   show,
   scramble,
   event,
   className,
+  visualization = "2D",
   ...rest
 }: ScrambleDisplay) {
   useEffect(() => {
@@ -31,7 +33,7 @@ export default function ScrambleDisplay({
       hintFacelets: "none",
       background: "none",
       controlPanel: "none",
-      visualization: "2D",
+      visualization: visualization,
     });
 
     document.querySelector("#scramble-display")?.appendChild(player);
@@ -42,7 +44,7 @@ export default function ScrambleDisplay({
       twistyPlayerElement.style.maxWidth = "100%";
       twistyPlayerElement.style.minHeight = "100%";
     }
-  }, [show, event, scramble]);
+  }, [show, event, scramble, visualization]);
 
   return (
     <>

diff --git a/src/components/sheets/sheet-solve-details/SheetSolveDetails.tsx b/src/components/sheets/sheet-solve-details/SheetSolveDetails.tsx
@@ -47,13 +47,11 @@ export default function SheetSolveDetails() {
           scramble={solve?.scramble || ""}
           event={selectedCube?.category || "3x3"}
           className="h-40"
+          visualization="3D"
         />
 
         <p className="font-black text-5xl text-center mx-auto pt-5 relative">
-          {formatTime(solve?.time || 0)}{" "}
-          <span className="text-secondary text-sm absolute top-5 -right-6 text-yellow-300">
-            Pb
-          </span>
+          {formatTime(solve?.time || 0)}
         </p>
 
         {/* comment */}

diff --git a/src/components/solves/SolvesArea.tsx b/src/components/solves/SolvesArea.tsx
@@ -10,16 +10,14 @@ import {
   ChatBubbleBottomCenterTextIcon,
   StarIcon,
 } from "@heroicons/react/24/solid";
-import { SolveTab } from "@/interfaces/types/SolveTabs";
 import { Card } from "../ui/card";
 import { useDialogSolve } from "@/store/DialogSolve";
 
 interface SolvesArea {
   displaySolves: Solve[] | null;
-  currentTab: SolveTab;
 }
 
-export function SolvesArea({ displaySolves, currentTab }: SolvesArea) {
+export function SolvesArea({ displaySolves }: SolvesArea) {
   const { handleOpenDialogSolve } = useDialogSolve();
   const { selectedCube } = useTimerStore();
   const t = useTranslations("Index.SolvesPage");