From 21ed6c8133f3d7170fafe90dd6fa85297e4fa2c3 Mon Sep 17 00:00:00 2001
From: Cristi Miloiu <miloiuc4@gmail.com>
Date: Sat, 11 May 2024 20:03:37 +0300
Subject: [PATCH] add timer

---
 client/src/routes/AllRoutes.tsx      |  5 +++
 client/src/views/Cronometru.view.tsx | 63 ++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 client/src/views/Cronometru.view.tsx

diff --git a/client/src/routes/AllRoutes.tsx b/client/src/routes/AllRoutes.tsx
index 94edc58..2351a86 100644
--- a/client/src/routes/AllRoutes.tsx
+++ b/client/src/routes/AllRoutes.tsx
@@ -13,6 +13,7 @@ import Logout from "../views/Logout.view.tsx";
 import Checkin from "../views/Checkin.view.tsx";
 import InscriereParticipantiView from "../views/InscriereParticipanti.view.tsx";
 import Cronometrare from "../views/Cronometrare.view.tsx";
+import Timer from "../views/Cronometru.view.tsx";
 
 export const allRoutes = createBrowserRouter([
   {
@@ -73,4 +74,8 @@ export const allRoutes = createBrowserRouter([
     path:"cronometrare",
     element: <Cronometrare/>
   },
+  {
+    path:"cronometru",
+    element:<Timer/>
+  }
 ]);
\ No newline at end of file
diff --git a/client/src/views/Cronometru.view.tsx b/client/src/views/Cronometru.view.tsx
new file mode 100644
index 0000000..f6442e3
--- /dev/null
+++ b/client/src/views/Cronometru.view.tsx
@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+
+const Timer: React.FC = () => {
+  const [time, setTime] = useState<number>(0);
+  const [isActive, setIsActive] = useState<boolean>(false);
+  const [intervalId, setIntervalId] = useState<number | null>(null);
+
+  const toggleTimer = (): void => {
+    setIsActive(!isActive);
+  };
+
+  // Start the timer
+  useEffect(() => {
+    if (isActive) {
+      const id = window.setInterval(() => {
+        setTime(time => time + 1);
+      }, 1000);  // Update time every second
+      setIntervalId(id);
+    } else {
+      if (intervalId !== null) {
+        clearInterval(intervalId);
+      }
+      setIntervalId(null);
+    }
+    return () => {
+      if (intervalId !== null) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [isActive, intervalId]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if (event.code === 'Space') {
+        toggleTimer();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isActive]);
+
+  useEffect(() => {
+    const resetTime = () => setTime(0);
+    window.addEventListener('load', resetTime);
+    return () => window.removeEventListener('load', resetTime);
+  }, []);
+
+  useEffect(() => {
+    document.body.style.backgroundColor = "#081043";
+  }, []);
+
+  return (
+    <div className="flex flex-col items-center justify-center mt-[-5rem] text-white h-screen">
+      <img src="https://i.ibb.co/H4txyBj/logo-apv-XV.png" alt="Logo Aleargă pentru Viață" className="max-w-90 scale-[230%] h-auto" />
+      <div className="text-9xl font-bold">
+        {new Date(time * 1000).toISOString().substr(11, 8)}
+      </div>
+    </div>
+  );
+};
+
+export default Timer;