Merge pull request #212 from bryanlundberg/new-timer-logic

Reworked all logic from old timer making it easier to read and maintain, includes new feature "inspection".

Author: bryanlundberg

src/components/PreloadSettings.tsx

@@ -18,7 +18,7 @@ export default function PreloadSettings({
       <div className={`${theme}`}>
         <div className="flex flex-col justify-between max-h-screen min-h-screen gap-2 overflow-hidden select-none light:bg-neutral-50 light:text-zinc-950 dark:bg-zinc-950 dark:text-slate-50">
           {children}{" "}
-          <>{!isSolving && timerStatus !== "ready" ? <Navbar /> : null}</>
+          <>{!isSolving && timerStatus === "IDLE" ? <Navbar /> : null}</>
         </div>
       </div>
     </>

src/components/timer/HeaderTimer.tsx

@@ -17,7 +17,7 @@ export default function HeaderTimer() {
   const { global } = useTimerStatistics();
   const { lastSolve } = useTimerStore();
 
-  if (isSolving || timerStatus === "ready") return null;
+  if (isSolving || timerStatus !== "IDLE") return null;
   return (
     <div className="flex flex-col items-center justify-center gap-5 p-4">
       <div className="flex items-center gap-3">

src/components/timer/Timer.tsx

@@ -9,10 +9,11 @@ import { useTimerStatistics } from "@/hooks/useTimerStatistics";
 import useDeviceMatch from "@/hooks/useDeviceMatch";
 
 const timerStatusClasses = {
-  idle: "light:text-neutral-900 dark:text-white",
-  holdingKey: "light:text-pink-600 dark:text-pink-600",
-  solving: "light:text-neutral-700 dark:text-slate-200",
-  ready: "text-emerald-400",
+  IDLE: "light:text-neutral-900 dark:text-white",
+  HOLDING: "light:text-pink-600 dark:text-pink-600",
+  SOLVING: "light:text-neutral-700 dark:text-slate-200",
+  READY: "text-emerald-400",
+  INSPECTING: "text-orange-500",
 };
 
 const config: any = {
@@ -31,10 +32,12 @@ const config: any = {
 
 export default function Timer() {
   const { lang, settings } = useSettingsModalStore();
-  const { selectedCube, isSolving, lastSolve } = useTimerStore();
-  const { timerStatus, hideWhileSolving, solvingTime } = useTimer();
+  const { selectedCube, isSolving, lastSolve, timerStatus, solvingTime } =
+    useTimerStore();
+  const { inspectionTime } = useTimer();
   const { global } = useTimerStatistics();
   const { device } = useDeviceMatch();
+  const hideWhileSolving = settings.features.hideWhileSolving.status;
 
   return (
     selectedCube && (
@@ -50,16 +53,26 @@ export default function Timer() {
                   {translation.timer["solving"][lang]}
                 </span>
               ) : (
-                <div className="font-mono relative flex flex-col gap-1">
+                <div className="relative flex flex-col gap-1 font-mono">
                   <div className="flex items-end justify-center">
-                    <div className="text-6xl sm:text-7xl md:text-8xl lg:text-9xl">
-                      {formatTime(solvingTime).split(".")[0]}
-                    </div>
-                    <div className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl">
-                      .{formatTime(solvingTime).split(".")[1]}
-                    </div>
+                    {inspectionTime !== 16000 ? (
+                      <>
+                        <div className="text-6xl sm:text-7xl md:text-8xl lg:text-9xl">
+                          {Math.trunc(inspectionTime)}
+                        </div>
+                      </>
+                    ) : (
+                      <>
+                        <div className="text-6xl sm:text-7xl md:text-8xl lg:text-9xl">
+                          {formatTime(solvingTime).split(".")[0]}
+                        </div>
+                        <div className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl">
+                          .{formatTime(solvingTime).split(".")[1]}
+                        </div>
+                      </>
+                    )}
                   </div>
-                  {!lastSolve && timerStatus === "idle" ? (
+                  {!lastSolve && timerStatus === "IDLE" ? (
                     <div className="text-xs text-center animate-pulse">
                       {device === "Desktop"
                         ? `${translation.timer["space-to-start"][lang]}`
@@ -80,7 +93,7 @@ export default function Timer() {
           />
           {lastSolve &&
             settings.features.quickActionButtons.status &&
-            timerStatus === "idle" && <SolveOptions solve={lastSolve} />}
+            timerStatus === "IDLE" && <SolveOptions solve={lastSolve} />}
         </div>
       </>
     )

src/components/timer/TimerWidgets.tsx

@@ -10,7 +10,7 @@ export default function TimerWidgets() {
   const { isSolving, timerStatus } = useTimerStore();
   const { lang, settings } = useSettingsModalStore();
   const { global, session } = useTimerStatistics();
-  if (isSolving || timerStatus === "ready") return null;
+  if (isSolving || timerStatus !== "IDLE") return null;
   return (
     <>
       <div className="flex flex-col gap-1" id="touch">