updated timer animation to change update every second

sn163 · Mar 30, 2024 · 43facbd · 43facbd
1 parent 6b9ea36
commit 43facbd
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/_components/Dashboard.tsx b/src/app/_components/Dashboard.tsx
@@ -1,14 +1,5 @@
-import { CSSProperties, useEffect, useRef, useState } from "react";
+import { CSSProperties, useEffect, useMemo, useRef, useState } from "react";
 
-<<<<<<< HEAD
-type Timer = {
-  hours: number;
-  minutes: number;
-  seconds: number;
-};
-
-=======
->>>>>>> 0a5f06b04fc42c2fdecd90937191a12c5de5fdce
 type DashBoardProps = {
   startMin: number;
   startSec: number;
@@ -19,6 +10,15 @@ export default function Dashboard({ startMin, startSec }: DashBoardProps) {
   const [minutes, setMinutes] = useState(startMin);
   const [seconds, setSeconds] = useState(startSec);
   const [percentage, setPercentage] = useState(100);
+
+  // turn 
+  const timeToSecs = (min:number, sec:number):number => min * 60 + sec;
+
+  const totalStartSec = useMemo(
+    () => timeToSecs(startMin, startSec),
+    [startMin, startSec]
+  );
+
   const timerRef = useRef<NodeJS.Timeout>();
 
   useEffect(() => {
@@ -41,8 +41,9 @@ export default function Dashboard({ startMin, startSec }: DashBoardProps) {
   }, [activeTimer, minutes, seconds]);
 
   useEffect(() => {
-    setPercentage(Math.abs((minutes / startMin) * 100 - 100));
-  }, [minutes, startMin]);
+    setPercentage(Math.abs((timeToSecs(minutes, seconds) / totalStartSec) * 100));
+    console.log((timeToSecs(minutes, seconds) / totalStartSec) * 100);
+  }, [minutes, seconds, totalStartSec]);
 
   const restart = () => {
     // Clears the interval to stop the timer from updating

diff --git a/src/app/output.css b/src/app/output.css
@@ -1192,11 +1192,6 @@ html {
   color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
 }
 
-.text-primary-content {
-  --tw-text-opacity: 1;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1217,11 +1212,6 @@ html {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.drop-shadow-md {
-  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 :root {
   --foreground-rgb: 0, 0, 255;
   --background-start-rgb: 214, 219, 220;

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,8 +1,6 @@
 "use client";
 import Dashboard from "./_components/Dashboard";
 
-import Dashboard from "./_components/Dashboard";
-
 export default function Home() {
-  return <Dashboard startMin={60} startSec={0} />;
+	return <Dashboard startMin={2} startSec={10} />;
 }