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;