Merge pull request #35 from IEEEUCSC/dev/ecertificate

fix: update countdown timer logic

Author: Dinil-Thilakarathne

app/timer/CountDownTimer.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { START_TIME } from "@/libs/data";
 import { cn } from "@/libs/utils";
 import NumberFlow, { NumberFlowGroup } from "@number-flow/react";
 import { useEffect, useState } from "react";
@@ -19,24 +20,38 @@ export default function CountdownTimer({
 }: CountdownTimerProps) {
   const [timeRemaining, setTimeRemaining] = useState<number>(0);
   const [isCritical, setIsCritical] = useState<boolean>(false);
-  const [isActive, setIsActive] = useState(true);
+  const [isActive, setIsActive] = useState<boolean>(true);
+  const [statusMessage, setStatusMessage] = useState<string>("");
 
   useEffect(() => {
     const calculateTimeRemaining = () => {
-      const now = new Date().getTime();
+      const current = new Date().getTime();
+      const start = START_TIME.getTime();
       const end = typeof endTime === "number" ? endTime : endTime.getTime();
-      const remaining = Math.max(0, end - now);
 
+      if (current < start) {
+        // If current time is before the start time, set remaining to 0
+        setTimeRemaining(0);
+        setIsActive(false);
+        setStatusMessage("Countdown initiates soon.");
+        return;
+      }
+
+      // Calculate remaining time
+      const remaining = Math.max(0, end - current);
       setTimeRemaining(remaining);
 
       // Check if we're in the critical period
       const criticalTimeInMs = criticalHours * 60 * 60 * 1000;
       setIsCritical(remaining > 0 && remaining <= criticalTimeInMs);
 
-      // If countdown is finished, clear the interval
+      // If countdown is over
       if (remaining <= 0) {
         setIsActive(false);
-        // setTimeRemaining(0); // Reset to 0 when countdown is finished
+        setStatusMessage("Time’s up — the countdown has reached zero.");
+      } else {
+        setIsActive(true);
+        setStatusMessage("");
       }
     };
 
@@ -58,7 +73,7 @@ export default function CountdownTimer({
   // Format time values to always have two digits
   const formatTime = (value: number) => value.toString().padStart(2, "0");
 
-  return isActive ? (
+  return isActive === true ? (
     <NumberFlowGroup>
       <div
         className={cn(
@@ -93,8 +108,8 @@ export default function CountdownTimer({
     </NumberFlowGroup>
   ) : (
     <h1>
-      <span className="text-primary-100 text-xl font-bold lg:text-6xl">
-        Countdown Finished
+      <span className="text-primary-100 text-xl font-bold lg:text-3xl xl:text-5xl">
+        {statusMessage || "Countdown has ended"}
       </span>
     </h1>
   );

app/timer/page.tsx

@@ -3,19 +3,9 @@ import CountdownTimer from "./CountDownTimer";
 import { BPMono } from "@/fonts";
 import HeroBgImage from "@/components/Hero/HeroBg";
 import Glassmorphism from "@/components/Glassmorphism";
+import { CRITICAL_HOURS, END_TIME } from "@/libs/data";
 
 export default function Page() {
-  const START_TIME = new Date("2025-05-14T09:36:00"); // Start time in UTC
-  const DURATION = 24; // Duration in hours
-  const CRITICAL_HOURS = 3; // Critical period in hours (e.g., 3 hours before the end)
-
-
-  const endTime = () => {
-    const date = START_TIME;
-    date.setHours(date.getHours() + DURATION);
-    return date;
-  };
-
   return (
     <main
       className={cn(
@@ -26,11 +16,11 @@ export default function Page() {
       <HeroBgImage />
 
       <Glassmorphism className="container mx-auto flex flex-col items-center justify-center rounded-2xl px-4 py-8 lg:gap-y-8 lg:p-16">
-        <h1 className="text-center text-lg font-bold text-slate-100 lg:text-6xl">
-          Race to Patch – Final Countdown
+        <h1 className="text-center text-lg font-bold text-slate-100 lg:text-4xl xl:text-6xl 2xl:text-7xl">
+          Final Countdown: The Race to Patch Begins
         </h1>
         <CountdownTimer
-          endTime={endTime()}
+          endTime={END_TIME}
           criticalHours={CRITICAL_HOURS}
           className="font-bpmono text-4xl"
           criticalClassName="text-primary-300 font-bold animate-ping"

components/Header/HeaderContent.tsx

@@ -54,7 +54,7 @@ const HeaderContent = () => {
             {pathname === "/initialround-certificate" ? (
               <AnimatedButton text="Back to Home" to="/" />
             ) : (
-              <AnimatedButton text="Initial Round Certificate" to="/initialround-certificate" />
+              <AnimatedButton text="Final round Countdown" to="/timer" />
             )}
           </>
         ) : (

libs/data.ts

@@ -168,5 +168,6 @@ export const SPONSORS: SponsorLogoProps[] = [
   },
 ];
 
-export const START_TIME = new Date("2025-05-04T08:00:00Z");
-export const END_TIME = new Date("2025-05-04T16:30:00Z");
+export const START_TIME = new Date("2025-06-09T09:00:00");
+export const END_TIME = new Date("2025-06-09T17:00:00"); // Final round end time
+export const CRITICAL_HOURS = 1; // Critical period in hours (e.g., 3 hours before the end)