✨ (game): Added Clock Timer

Added clock timer displaying elapsed time since the beginning of the game

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%;
 }

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>
 	);

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;

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;

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;
+}