82 lines
3.1 KiB
TypeScript
82 lines
3.1 KiB
TypeScript
// ---------------------------------------------------------------------------------------------------------------------
|
|
//! Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------------ React --------------------------------------------------------
|
|
import { useEffect, useState } from 'react';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ----------------------------------------------------- Context -------------------------------------------------------
|
|
import { useRecoilState } from 'recoil';
|
|
import { gameStateAtom } from '../../../contexts/gameState';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// -------------------------------------------------- Utils & Types ----------------------------------------------------
|
|
import { Difficulty } from '../../../types/game';
|
|
import { saveToLocalStorage } from '../../../utils/generics';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ----------------------------------------------------- Assets --------------------------------------------------------
|
|
import Clock from '../../../assets/clock';
|
|
import '../styles.scss';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
const Timer = () => {
|
|
const [gameState, setGameState] = useRecoilState(gameStateAtom);
|
|
|
|
const [intervalId, setIntervalId] = useState<NodeJS.Timeout | null>(null);
|
|
const [startedTime, setStartedTime] = useState<number | null>(null);
|
|
const [displayedTime, setDisplayedTime] = useState<string>('00:00');
|
|
|
|
useEffect(() => {
|
|
if (gameState.status === 'win' || gameState.status === 'loose') {
|
|
setStartedTime(null);
|
|
}
|
|
}, [gameState.status]);
|
|
|
|
useEffect(() => {
|
|
if (!startedTime && gameState.endType === '' && gameState.status === 'playing') {
|
|
const now = Date.now();
|
|
setStartedTime(now);
|
|
|
|
const interval = setInterval(() => {
|
|
const elapsedTime = (Date.now() - now) / 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);
|
|
|
|
setIntervalId(interval);
|
|
}
|
|
}, [startedTime, gameState.endType, gameState.status]);
|
|
|
|
useEffect(() => {
|
|
if (intervalId && gameState.endType !== '') {
|
|
setGameState((prev) => ({
|
|
...prev,
|
|
gameTime: displayedTime,
|
|
}));
|
|
|
|
clearInterval(intervalId);
|
|
|
|
if (gameState.endType === 'win') {
|
|
saveToLocalStorage(displayedTime, gameState.difficulty as Difficulty, gameState.gridSize);
|
|
}
|
|
}
|
|
}, [intervalId, gameState.endType, setGameState, displayedTime]);
|
|
|
|
return (
|
|
<div className='statContainer'>
|
|
<Clock />
|
|
<p>{displayedTime}</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Timer;
|