81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import useExamStore from "@/stores/examStore";
|
|
import {useEffect, useState} from "react";
|
|
import {motion} from "framer-motion";
|
|
import TimerEndedModal from "../TimerEndedModal";
|
|
import clsx from "clsx";
|
|
import {BsStopwatch} from "react-icons/bs";
|
|
|
|
interface Props {
|
|
minTimer: number;
|
|
disableTimer?: boolean;
|
|
standalone?: boolean;
|
|
}
|
|
|
|
const Timer: React.FC<Props> = ({minTimer, disableTimer, standalone = false}) => {
|
|
const [timer, setTimer] = useState(minTimer * 60);
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [warningMode, setWarningMode] = useState(false);
|
|
|
|
const setHasExamEnded = useExamStore((state) => state.setHasExamEnded);
|
|
const {timeSpent} = useExamStore((state) => state);
|
|
|
|
useEffect(() => setTimer((prev) => prev - timeSpent), [timeSpent]);
|
|
|
|
useEffect(() => {
|
|
if (!disableTimer) {
|
|
const timerInterval = setInterval(() => setTimer((prev) => prev - 1), 1000);
|
|
|
|
return () => {
|
|
clearInterval(timerInterval);
|
|
};
|
|
}
|
|
}, [disableTimer, minTimer]);
|
|
|
|
useEffect(() => {
|
|
if (timer <= 0) setShowModal(true);
|
|
}, [timer]);
|
|
|
|
useEffect(() => {
|
|
if (timer < 300 && !warningMode) setWarningMode(true);
|
|
}, [timer, warningMode]);
|
|
|
|
return (
|
|
<>
|
|
<TimerEndedModal
|
|
isOpen={showModal}
|
|
onClose={() => {
|
|
setHasExamEnded(true);
|
|
setShowModal(false);
|
|
}}
|
|
/>
|
|
<motion.div
|
|
className={clsx(
|
|
"absolute right-6 bg-mti-gray-seasalt px-4 py-3 flex items-center gap-2 rounded-full text-mti-gray-davy",
|
|
standalone ? "top-10" : "top-4",
|
|
warningMode && !disableTimer && "bg-mti-red-light text-mti-gray-seasalt",
|
|
)}
|
|
initial={{scale: warningMode && !disableTimer ? 0.8 : 1}}
|
|
animate={{scale: warningMode && !disableTimer ? 1.1 : 1}}
|
|
transition={{repeat: Infinity, repeatType: "reverse", duration: 0.5, ease: "easeInOut"}}>
|
|
<BsStopwatch className="w-6 h-6" />
|
|
<span className="text-lg font-bold w-12">
|
|
{timer > 0 && (
|
|
<>
|
|
{Math.floor(timer / 60)
|
|
.toString(10)
|
|
.padStart(2, "0")}
|
|
:
|
|
{Math.floor(timer % 60)
|
|
.toString(10)
|
|
.padStart(2, "0")}
|
|
</>
|
|
)}
|
|
{timer <= 0 && <>00:00</>}
|
|
</span>
|
|
</motion.div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Timer;
|