Untitled
unknown
typescript
a year ago
1.4 kB
2
Indexable
Never
import { useState, useEffect, useMemo } from "react"; import { ITimer } from "types"; import useSocketClient from "hooks/useSocketClient"; import { useGameContext } from "./GameProvider"; interface TimerProps { timer: ITimer; } function Timer({ timer }: TimerProps) { const calculatedTimerRemaining = useMemo( () => timer.running ? timer.timeLeft - (Date.now() - timer.running) : timer.timeLeft, [timer.running, timer.timeLeft], ); const [timeRemaining, setTimeRemaining] = useState( calculatedTimerRemaining < 0 ? 0 : calculatedTimerRemaining, ); const { socket } = useSocketClient(); const { isFinished } = useGameContext(); useEffect(() => { if (timeRemaining <= 0) { if (!isFinished) { socket?.emit("timer_end"); } return; } }, [socket, timeRemaining, isFinished]); useEffect(() => { if (!timer.running) return; const intervalId = setInterval(() => { setTimeRemaining(time => (time - 1000 < 0 ? 0 : time - 1000)); }, 1000); return () => { clearInterval(intervalId); }; }, [timer.running]); const minutes = Math.floor((timeRemaining / 1000 / 60) % 60); const seconds = Math.floor((timeRemaining / 1000) % 60); return ( <div> <h1>{`${minutes}:${Number(seconds) < 10 ? "0" : ""}${seconds}`}</h1> </div> ); } export default Timer;