From 0ee09b52da7f709cd999a7f1c136329caf3b999c Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Tue, 13 Feb 2024 19:19:11 +0100
Subject: [PATCH] refining timer component

---
 src/assets/css/components/Timer.scss | 13 +++++++++++++
 src/components/game/Timer.jsx        | 27 +++++++++++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 src/assets/css/components/Timer.scss
 create mode 100644 src/components/game/Timer.jsx

diff --git a/src/assets/css/components/Timer.scss b/src/assets/css/components/Timer.scss
new file mode 100644
index 0000000..7ecafb7
--- /dev/null
+++ b/src/assets/css/components/Timer.scss
@@ -0,0 +1,13 @@
+.timer {
+	@apply absolute top-0 left-1/2 z-10  py-2 px-8 flex items-center gap-x-2;
+	transform: translate(-50%, -2px);
+	.bg {
+		@apply absolute block top-0 left-1/2 w-full h-full bg-transparent bg-white;
+		z-index: -1;
+		translate: -50%;
+		transform: perspective(150px) rotateY(7deg);
+	}
+	.clock {
+		@apply w-8;
+	}
+}
diff --git a/src/components/game/Timer.jsx b/src/components/game/Timer.jsx
new file mode 100644
index 0000000..eadfc50
--- /dev/null
+++ b/src/components/game/Timer.jsx
@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from "react";
+import clock from "../../assets/img/clock.svg";
+import { useGame } from "../../hooks/useGame";
+import {formatCurrentTime} from "../../utils/gameFunctions";
+
+export default function Timer({ currentTime, setCurrentTime }) {
+	const { hasCheckedTutorial, isTimeRuning } = useGame();
+	console.log("currentTime", currentTime);
+	useEffect(() => {
+		if (!hasCheckedTutorial || !isTimeRuning) return;
+		let intervalId;
+		intervalId = setInterval(() => setCurrentTime(currentTime + 100), 1000);
+		setCurrentTime(currentTime);
+
+		return () => clearInterval(intervalId);
+	}, [hasCheckedTutorial, currentTime, isTimeRuning]);
+
+	const gameTime = formatCurrentTime(currentTime);
+
+	return (
+		<div className='timer'>
+			<div className='bg'></div>
+			<img className='clock' src={clock} alt='' />
+			<h2>{gameTime}</h2>
+		</div>
+	);
+}