Merge pull request #175 from bryanlundberg/best-time-animations

Add personal best time animations / alerts
bryanlundberg · Nov 19, 2023 · b047de9 · b047de9
2 parents 3397362 + acf8e7b
commit b047de9
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "pretty-ms": "^8.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-dom-confetti": "^0.2.0",
     "recharts": "^2.8.0",
     "scrambow": "^1.8.1",
     "sharp": "0.32.6",

diff --git a/src/components/PreloadSettings.tsx b/src/components/PreloadSettings.tsx
@@ -17,7 +17,7 @@ export default function PreloadSettings({
   return (
     <>
       <div className={`${theme}`}>
-        <div className="flex flex-col justify-between max-h-screen min-h-screen gap-2 select-none light:bg-neutral-50 light:text-zinc-950 dark:bg-zinc-950 dark:text-slate-50">
+        <div className="flex flex-col justify-between max-h-screen min-h-screen gap-2 select-none light:bg-neutral-50 light:text-zinc-950 dark:bg-zinc-950 dark:text-slate-50 overflow-hidden">
           {children} <>{!isSolving && <Navbar />}</>
         </div>
       </div>

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -1,6 +1,6 @@
 import PlusIcon from "@/icons/PlusIcon";
 import SelectOptions from "@/icons/SelectOptions";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { Categories } from "@/interfaces/Categories";
@@ -135,7 +135,8 @@ function Option({
   cubeId: string;
   handleClose: () => void;
 }) {
-  const { selectedCube, setSelectedCube, setNewScramble } = useTimerStore();
+  const { selectedCube, setSelectedCube, setNewScramble, setLastSolve } =
+    useTimerStore();
   const { settings } = useSettingsModalStore();
 
   const variation: Record<Themes, string> = {
@@ -156,6 +157,7 @@ function Option({
           if (cube) {
             setSelectedCube(cube);
             setNewScramble(cube);
+            setLastSolve(null);
           }
         }
         handleClose();

diff --git a/src/components/timer/OverviewPanel.tsx b/src/components/timer/OverviewPanel.tsx
@@ -8,7 +8,7 @@ export default function OverviewPanel() {
   const { session } = useTimerStatistics();
 
   return (
-    <div className="flex flex-col justify-center w-full h-full">
+    <div className="flex flex-col justify-center w-full h-full gap-1">
       {settings.features.sessionStats.status ? (
         <>
           <div className="font-medium">

diff --git a/src/components/timer/StatisticsPanel.tsx b/src/components/timer/StatisticsPanel.tsx
@@ -4,24 +4,58 @@ import { useTimerStatistics } from "@/hooks/useTimerStatistics";
 
 export default function StatisticsPanel() {
   const { settings } = useSettingsModalStore();
-  const { session } = useTimerStatistics();
+  const { global, session } = useTimerStatistics();
+  const bgRecord = "bg-yellow-500";
 
   return (
     <>
-      <div className="flex flex-col justify-center w-full h-full">
+      <div className="flex flex-col justify-center w-full h-full gap-1">
         {settings.features.sessionStats.status ? (
           <>
-            <div className="font-medium text-right">
-              Ao5: {session.ao5 === 0 ? "--" : formatTime(session.ao5)}
+            <div className="flex justify-end w-full font-medium text-right">
+              <div
+                className={`w-fit px-[5px] rounded-md ${
+                  global.ao5 !== 0 && global.ao5 === session.ao5 ? bgRecord : ""
+                }`}
+              >
+                Ao5: {session.ao5 === 0 ? "--" : formatTime(session.ao5)}
+              </div>
             </div>
-            <div className="font-medium text-right">
-              Ao12: {session.ao12 === 0 ? "--" : formatTime(session.ao12)}
+            <div className="flex justify-end w-full font-medium text-right">
+              <div
+                className={`w-fit px-[5px] rounded-md ${
+                  global.ao12 !== 0 && global.ao12 === session.ao12
+                    ? bgRecord
+                    : ""
+                }`}
+              >
+                Ao12:{" "}
+                {global.ao12 !== 0 && session.ao12 === 0
+                  ? "--"
+                  : formatTime(session.ao12)}
+              </div>
             </div>
-            <div className="font-medium text-right">
-              Ao50: {session.ao50 === 0 ? "--" : formatTime(session.ao50)}
+            <div className="flex justify-end w-full font-medium text-right">
+              <div
+                className={`w-fit px-[5px] rounded-md ${
+                  global.ao50 !== 0 && global.ao50 === session.ao50
+                    ? bgRecord
+                    : ""
+                }`}
+              >
+                Ao50: {session.ao50 === 0 ? "--" : formatTime(session.ao50)}
+              </div>
             </div>
-            <div className="font-medium text-right">
-              Ao100: {session.ao100 === 0 ? "--" : formatTime(session.ao100)}
+            <div className="flex justify-end w-full font-medium text-right">
+              <div
+                className={`w-fit px-[5px] rounded-md ${
+                  global.ao100 !== 0 && global.ao100 === session.ao100
+                    ? bgRecord
+                    : ""
+                }`}
+              >
+                Ao100: {session.ao100 === 0 ? "--" : formatTime(session.ao100)}
+              </div>
             </div>
           </>
         ) : null}

diff --git a/src/components/timer/Timer.tsx b/src/components/timer/Timer.tsx
@@ -4,6 +4,8 @@ import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import formatTime from "@/lib/formatTime";
 import translation from "@/translations/global.json";
 import useTimer from "@/hooks/useTimer";
+import Confetti from "react-dom-confetti";
+import { useTimerStatistics } from "@/hooks/useTimerStatistics";
 
 const timerStatusClasses = {
   idle: "light:text-neutral-900 dark:text-white",
@@ -12,12 +14,27 @@ const timerStatusClasses = {
   ready: "text-emerald-400",
 };
 
+const config: any = {
+  angle: 90,
+  spread: 180,
+  startVelocity: 40,
+  elementCount: 70,
+  dragFriction: 0.12,
+  duration: 5000,
+  stagger: 3,
+  width: "10px",
+  height: "10px",
+  perspective: "500px",
+  colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"],
+};
+
 export default function Timer() {
   const { lang, settings } = useSettingsModalStore();
   const { selectedCube, isSolving, lastSolve } = useTimerStore();
   const { timerStatus, hideWhileSolving, solvingTime } = useTimer();
+  const { global } = useTimerStatistics();
 
-  if (selectedCube === null) return;
+  if (selectedCube === null) return <></>;
 
   return (
     <>
@@ -38,6 +55,10 @@ export default function Timer() {
             )}
           </div>
         )}
+        <Confetti
+          active={global.best === lastSolve?.time && !isSolving}
+          config={config}
+        />
         {lastSolve &&
           settings.features.quickActionButtons.status &&
           timerStatus === "idle" && <SolveOptions solve={lastSolve} />}

diff --git a/src/store/timerStore.ts b/src/store/timerStore.ts
@@ -40,13 +40,21 @@ export const useTimerStore = create<TimerStore>((set) => ({
   setSelectedCube: (cube: Cube | null) => {
     set((state: any) => {
       if (!cube) {
-        return { ...state, event: null, selectedCube: null };
+        return {
+          ...state,
+          event: null,
+          selectedCube: null,
+        };
       }
 
       const selectedEvent = cubeCollection.find(
         (item) => item.name === cube.category
       );
-      return { ...state, event: selectedEvent?.event, selectedCube: cube };
+      return {
+        ...state,
+        event: selectedEvent?.event,
+        selectedCube: cube,
+      };
     });
   },
   setLastSolve: (solve: Solve | null) => {