node-mongo-demo

commit 6023d594a8f5b5afa2469b844237b42c37a23b83
parent 91ad42d9568c9929049ad691992524bff109e5e9
Author: Jul <jul@9o.is>
Date:   Tue, 28 Jan 2025 05:37:44 -0500

fix frontend timer alignment

Diffstat:
M
frontend/src/components/Lucky7.js
 | 
15
+++++++++------

1 file changed, 9 insertions(+), 6 deletions(-)
diff --git a/frontend/src/components/Lucky7.js b/frontend/src/components/Lucky7.js
@@ -52,29 +52,32 @@ const getNextGameTime = (createdAt) => {
 };
 
 const millisRemaining = date => date - Date.now();
-const secondsRemaining = date => Math.floor((date - Date.now()) / 1000);
+const secondsRemaining = date => Math.ceil((date - Date.now()) / 1000);
 
 const Timer = ({ createdAt }) => {
-    const reset = 15;
     const [nextGameTime, setNextGameTime] = React.useState(getNextGameTime(createdAt));
     const [seconds, setSeconds] = React.useState(secondsRemaining(nextGameTime));
 
     React.useEffect(() => {
         let timeout;
+        let interval;
+
+        const countdown = () => {
+            setSeconds((prevSeconds) => prevSeconds === 0 ? 0 : prevSeconds - 1);
+        };
 
         const resetTimer = () => {
             const nextGameTime = getNextGameTime(createdAt);
             setNextGameTime(nextGameTime);
             setSeconds(secondsRemaining(nextGameTime));
+            clearInterval(interval);
+
+            interval = setInterval(countdown, 1000);
             timeout = setTimeout(resetTimer, millisRemaining(nextGameTime));
         };
 
         resetTimer();
 
-        const interval = setInterval(() => {
-            setSeconds((prevSeconds) => prevSeconds === 1 ? reset : prevSeconds - 1);
-        }, 1000);
-
         return () => {
             clearTimeout(timeout);
             clearInterval(interval);