940: Create Component for Duel Timer

js/src/app/duel/_components/current/DuelTimer.tsx

@@ -0,0 +1,43 @@
+import { Text } from "@mantine/core";
+import { useState, useEffect } from "react";
+
+interface DuelTimerProps {
+  endTime: number; // milliseconds
+}
+
+const DuelTimer = ({ endTime }: DuelTimerProps) => {
+  const getTimeRemaining = () => {
+    const total = endTime - Date.now();
+    const seconds = Math.floor((total / 1000) % 60);
+    const minutes = Math.floor((total / 1000 / 60) % 60);
+    if (total <= 0) {
+      return {
+        minutes: 0,
+        seconds: 0,
+      };
+    }
+    return {
+      minutes,
+      seconds,
+    };
+  };
+
+  const [timeLeft, setTimeLeft] = useState(() => getTimeRemaining());
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(getTimeRemaining());
+    }, 1);
+
+    return () => clearInterval(timer);
+  });
+
+  return (
+    <div>
+      <Text size="xl">
+        {timeLeft.minutes}:{timeLeft.seconds.toString().padStart(2, "0")}
+      </Text>
+    </div>
+  );
+};
+
+export default DuelTimer;

js/src/lib/router.tsx

@@ -1,6 +1,7 @@
 import AdminPage from "@/app/admin/admin.page";
 import ClubSignUp from "@/app/club/[clubSlug]/ClubSignUp.page";
 import DashboardPage from "@/app/dashboard/Dashboard.page";
+import DuelTimer from "@/app/duel/_components/current/DuelTimer";
 import DuelPage from "@/app/duel/[lobbyCode]/Duel.page";
 import CurrentDuelPage from "@/app/duel/current/CurrentDuel.page";
 import PartyEntryPage from "@/app/duel/PartyEntry.page";
@@ -239,4 +240,13 @@ export const router = createBrowserRouter([
     ),
     errorElement: <ErrorPage />,
   },
+  {
+    path: "/timer",
+    element: (
+      <PageShell>
+        <DuelTimer endTime={Date.now() + 10000} />
+      </PageShell>
+    ),
+    errorElement: <ErrorPage />,
+  },
 ]);

pom.xml

@@ -306,4 +306,4 @@
             </plugin>
         </plugins>
     </build>
-</project>
+</project>