81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
// ---------------------------------------------------------------------------------------------------------------------
|
|
//! Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
|
|
import { useEffect, useState } from 'react';
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
import { useGameStateStore } from '@/store/gameState';
|
|
import { saveToLocalStorage } from '../../../utils/generics';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
|
|
import Clock from '../../../assets/clock';
|
|
import '../styles.scss';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
const Timer = () => {
|
|
const { status, endType, difficulty, gridSize, setGameTime } = useGameStateStore(
|
|
useShallow((state) => ({
|
|
status: state.status,
|
|
endType: state.endType,
|
|
difficulty: state.difficulty,
|
|
gridSize: state.gridSize,
|
|
|
|
setGameTime: state.setGameTime,
|
|
})),
|
|
);
|
|
|
|
const [intervalId, setIntervalId] = useState<NodeJS.Timeout | null>(null);
|
|
const [startedTime, setStartedTime] = useState<number | null>(null);
|
|
const [displayedTime, setDisplayedTime] = useState<string>('00:00');
|
|
|
|
useEffect(() => {
|
|
if (endType === 'win' || endType === 'loose') {
|
|
setStartedTime(null);
|
|
}
|
|
}, [status]);
|
|
|
|
useEffect(() => {
|
|
if (!startedTime && endType === '' && 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, endType, status]);
|
|
|
|
useEffect(() => {
|
|
if (intervalId && endType !== '') {
|
|
setGameTime(displayedTime);
|
|
|
|
clearInterval(intervalId);
|
|
|
|
if (endType === 'win') {
|
|
saveToLocalStorage(displayedTime, difficulty, gridSize);
|
|
}
|
|
}
|
|
}, [intervalId, endType, difficulty, gridSize, displayedTime, setGameTime]);
|
|
|
|
return (
|
|
<div className='stat-container'>
|
|
<Clock />
|
|
<p>{displayedTime}</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Timer;
|