✨ (game): Added Bombs & Flags count

Added placed flags by bombs count. Fix timer startng only when first click is triggered

src/components/Stats/MinesCounter/MinesCounter.tsx

@@ -0,0 +1,28 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                       Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ----------------------------------------------------- Recoil --------------------------------------------------------
+import { useRecoilState } from 'recoil';
+import { gameStateAtom } from '../../../contexts/gameState';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ----------------------------------------------------- Assets --------------------------------------------------------
+import Flag from '../../../assets/flag';
+import '../styles.scss';
+// ---------------------------------------------------------------------------------------------------------------------
+
+const MinesCounter = () => {
+	const [{ bombs, placedFlags }] = useRecoilState(gameStateAtom);
+
+	return (
+		<div className='statContainer'>
+			<Flag />
+			<p>
+				{placedFlags} / {bombs}
+			</p>
+		</div>
+	);
+};
+
+export default MinesCounter;

src/components/Stats/Timer/Timer.tsx

@@ -0,0 +1,56 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                       Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------------ React --------------------------------------------------------
+import { useEffect, useState } from 'react';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ----------------------------------------------------- Assets --------------------------------------------------------
+import Clock from '../../../assets/clock';
+import '../styles.scss';
+import { useRecoilState } from 'recoil';
+import { gameStateAtom } from '../../../contexts/gameState';
+// ---------------------------------------------------------------------------------------------------------------------
+
+const Timer = () => {
+	const [{ status }] = useRecoilState(gameStateAtom);
+
+	const [startedTime, setStartedTime] = useState<number | null>(null);
+	const [displayedTime, setDisplayedTime] = useState<string>('00:00');
+
+	useEffect(() => {
+		if (status === 'playing') {
+			setStartedTime(Date.now());
+		} else if (status === 'win' || status === 'loose') {
+			setStartedTime(null);
+		}
+	}, [status]);
+
+	useEffect(() => {
+		if (startedTime) {
+			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='statContainer'>
+			<Clock />
+			<p>{displayedTime}</p>
+		</div>
+	);
+};
+
+export default Timer;

src/components/Stats/styles.scss

@@ -0,0 +1,11 @@
+.statContainer {
+	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;
+}