Fix portal timers stopping when tab is backgrounded + upgrade Next.js to patch DoS CVE

apps/portal/src/app/[locale]/tools/rubrics/hooks/use-judging-timer.ts

@@ -48,7 +48,8 @@ type TimerAction =
   | 'TICK'
   | 'FORWARD'
   | 'BACK'
-  | { type: 'STAGE_COMPLETE'; nextStage: number };
+  | { type: 'STAGE_COMPLETE'; nextStage: number }
+  | { type: 'TICK_BY'; count: number };
 
 const createTimerReducer = (stages: ReturnType<typeof getJudgingStages>) => {
   return (state: TimerState, action: TimerAction): TimerState => {
@@ -60,6 +61,27 @@ const createTimerReducer = (stages: ReturnType<typeof getJudgingStages>) => {
       };
     }
 
+    if (typeof action === 'object' && action.type === 'TICK_BY') {
+      const { count } = action;
+      let { currentStage, stageTimeRemaining } = state;
+      let remaining = count;
+
+      while (remaining > 0) {
+        if (stageTimeRemaining > remaining) {
+          stageTimeRemaining -= remaining;
+          remaining = 0;
+        } else if (currentStage < stages.length - 1) {
+          remaining -= stageTimeRemaining;
+          currentStage++;
+          stageTimeRemaining = stages[currentStage].duration;
+        } else {
+          return { currentStage, stageTimeRemaining: 0, isRunning: false };
+        }
+      }
+
+      return { ...state, currentStage, stageTimeRemaining };
+    }
+
     switch (action) {
       case 'START':
         return { ...state, isRunning: true };
@@ -143,6 +165,7 @@ export const useJudgingTimer = (): [JudgingTimerState, JudgingTimerControls] =>
 
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
   const previousStageRef = useRef(state.currentStage);
+  const lastTickAtRef = useRef<number | null>(null);
 
   const start = useCallback(() => {
     dispatch('START');
@@ -174,11 +197,20 @@ export const useJudgingTimer = (): [JudgingTimerState, JudgingTimerControls] =>
   }, []);
 
   useEffect(() => {
-    if (state.isRunning && state.stageTimeRemaining > 0) {
+    if (state.isRunning) {
+      lastTickAtRef.current = Date.now();
       intervalRef.current = setInterval(() => {
-        dispatch('TICK');
-      }, 1000);
+        if (lastTickAtRef.current === null) return;
+        const now = Date.now();
+        const elapsedMs = now - lastTickAtRef.current;
+        const elapsedTicks = Math.floor(elapsedMs / 1000);
+        if (elapsedTicks > 0) {
+          lastTickAtRef.current += elapsedTicks * 1000;
+          dispatch({ type: 'TICK_BY', count: elapsedTicks });
+        }
+      }, 500);
     } else {
+      lastTickAtRef.current = null;
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
         intervalRef.current = null;
@@ -190,7 +222,7 @@ export const useJudgingTimer = (): [JudgingTimerState, JudgingTimerControls] =>
         clearInterval(intervalRef.current);
       }
     };
-  }, [state.isRunning, state.stageTimeRemaining]);
+  }, [state.isRunning]);
 
   // Handle stage progression sound
   useEffect(() => {

apps/portal/src/app/[locale]/tools/scorer/hooks/use-field-timer.ts

@@ -24,10 +24,10 @@ type TimerState = {
   isRunning: boolean;
 };
 
-type TimerAction = 'START' | 'PAUSE' | 'RESUME' | 'STOP' | 'RESET' | 'TICK';
+type TimerAction = 'START' | 'PAUSE' | 'RESUME' | 'STOP' | 'RESET' | 'TICK' | { type: 'TICK_BY'; count: number };
 
 const timerReducer = (state: TimerState, action: TimerAction): TimerState => {
-  switch (action) {
+  switch (typeof action === 'object' ? action.type : action) {
     case 'START':
       return { ...state, isRunning: true };
     case 'PAUSE':
@@ -46,6 +46,14 @@ const timerReducer = (state: TimerState, action: TimerAction): TimerState => {
       }
       return { ...state, timeRemaining: newTime };
     }
+    case 'TICK_BY': {
+      const count = (action as { type: 'TICK_BY'; count: number }).count;
+      const newTime = Math.max(0, state.timeRemaining - count);
+      if (newTime <= 0) {
+        return { ...state, isRunning: false, timeRemaining: 0 };
+      }
+      return { ...state, timeRemaining: newTime };
+    }
     default:
       return state;
   }
@@ -60,6 +68,8 @@ export const useFieldTimer = (): [FieldTimerState, FieldTimerControls] => {
   });
 
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const lastTickAtRef = useRef<number | null>(null);
+  const prevTimeRemainingRef = useRef<number>(MATCH_TIME);
 
   const start = useCallback(() => {
     dispatch('START');
@@ -84,11 +94,20 @@ export const useFieldTimer = (): [FieldTimerState, FieldTimerControls] => {
   }, []);
 
   useEffect(() => {
-    if (state.isRunning && state.timeRemaining > 0) {
+    if (state.isRunning) {
+      lastTickAtRef.current = Date.now();
       intervalRef.current = setInterval(() => {
-        dispatch('TICK');
-      }, 1000);
+        if (lastTickAtRef.current === null) return;
+        const now = Date.now();
+        const elapsedMs = now - lastTickAtRef.current;
+        const elapsedTicks = Math.floor(elapsedMs / 1000);
+        if (elapsedTicks > 0) {
+          lastTickAtRef.current += elapsedTicks * 1000;
+          dispatch({ type: 'TICK_BY', count: elapsedTicks });
+        }
+      }, 500);
     } else {
+      lastTickAtRef.current = null;
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
         intervalRef.current = null;
@@ -100,13 +119,17 @@ export const useFieldTimer = (): [FieldTimerState, FieldTimerControls] => {
         clearInterval(intervalRef.current);
       }
     };
-  }, [state.isRunning, state.timeRemaining]);
+  }, [state.isRunning]);
 
   useEffect(() => {
-    if (state.timeRemaining === 30) {
+    const prev = prevTimeRemainingRef.current;
+    const curr = state.timeRemaining;
+    prevTimeRemainingRef.current = curr;
+
+    if (curr <= 30 && curr > 0 && prev > 30) {
       playSound('endgame');
     }
-    if (state.timeRemaining === 0) {
+    if (curr === 0) {
       playSound('end');
     }
   }, [state.timeRemaining, playSound]);