From 3a6be56841fe99fbd3879d6a91a4d09e4541bb40 Mon Sep 17 00:00:00 2001
From: UnEpicier <alexisvasseur96@gmail.com>
Date: Mon, 12 Feb 2024 11:54:20 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(game):=20Added=20Clock=20Timer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added clock timer displaying elapsed time since the beginning of the game
---
 src/App.scss                     |  2 ++
 src/App.tsx                      |  2 ++
 src/assets/clock.tsx             | 27 ++++++++++++++++++++
 src/components/Timer/Timer.tsx   | 42 ++++++++++++++++++++++++++++++++
 src/components/Timer/styles.scss | 11 +++++++++
 5 files changed, 84 insertions(+)
 create mode 100644 src/assets/clock.tsx
 create mode 100644 src/components/Timer/Timer.tsx
 create mode 100644 src/components/Timer/styles.scss

diff --git a/src/App.scss b/src/App.scss
index eb442da..0386a36 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,7 +1,9 @@
 .App {
 	display: flex;
+	flex-direction: column;
 	justify-content: center;
 	align-items: center;
+	gap: 20px;
 	width: 100%;
 	height: 100%;
 }
diff --git a/src/App.tsx b/src/App.tsx
index 4f0cd48..2e93215 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,11 @@
 import './App.scss';
 import Grid from './components/Grid/Grid';
+import Timer from './components/Timer/Timer';
 
 const App = () => {
 	return (
 		<div className='App'>
+			<Timer />
 			<Grid />
 		</div>
 	);
diff --git a/src/assets/clock.tsx b/src/assets/clock.tsx
new file mode 100644
index 0000000..912214d
--- /dev/null
+++ b/src/assets/clock.tsx
@@ -0,0 +1,27 @@
+const Clock = (props: any) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				d='M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64z'
+				fill='none'
+				stroke='currentColor'
+				strokeMiterlimit='10'
+				strokeWidth='32'
+			/>
+			<path
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+				d='M256 128v144h96'
+			/>
+		</svg>
+	);
+};
+
+export default Clock;
diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx
new file mode 100644
index 0000000..673fd21
--- /dev/null
+++ b/src/components/Timer/Timer.tsx
@@ -0,0 +1,42 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                       Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------------ React --------------------------------------------------------
+import { useEffect, useState } from 'react';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ----------------------------------------------------- Assets --------------------------------------------------------
+import Clock from '../../assets/clock';
+import './styles.scss';
+// ---------------------------------------------------------------------------------------------------------------------
+
+const Timer = () => {
+	const [startedTime] = useState<number>(Date.now());
+	const [displayedTime, setDisplayedTime] = useState<string>('00:00');
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			const elapsedTime = (Date.now() - startedTime) / 1000;
+
+			const seconds = Math.floor(elapsedTime % 60);
+			const strSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+
+			const minutes = Math.floor(elapsedTime / 60);
+			const strMinute = minutes < 10 ? `0${minutes}` : `${minutes}`;
+
+			setDisplayedTime(`${strMinute}:${strSeconds}`);
+		}, 500);
+
+		return () => clearInterval(interval);
+	}, [startedTime]);
+
+	return (
+		<div className='timer'>
+			<Clock />
+			<p>{displayedTime}</p>
+		</div>
+	);
+};
+
+export default Timer;
diff --git a/src/components/Timer/styles.scss b/src/components/Timer/styles.scss
new file mode 100644
index 0000000..b4ff216
--- /dev/null
+++ b/src/components/Timer/styles.scss
@@ -0,0 +1,11 @@
+.timer {
+	display: grid;
+	grid-template-columns: 25px 40px;
+	align-items: center;
+	gap: 10px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: #ffdccb;
+	font-weight: 600;
+	color: #f39440;
+}