add clock screensaver, basic team ordering, connection error message

frontend/app/live/page.tsx

@@ -14,7 +14,7 @@ export default function HomePage() {
   const backendUrl = `${baseUrl}:${process.env.NEXT_PUBLIC_API_BASE}`;
   const socket = io(`${backendUrl}`);
 
-  const [time, setTime] = useState<Date>(new Date());
+  const [time, setTime] = useState(new Date());
   
   const [currentPlayer, setCurrentPlayer] = useState<string | null>(null);
 
@@ -37,6 +37,30 @@ export default function HomePage() {
       socket.off('player_update');
     };
   }, []);
+  // Idle clock stuff
+  useEffect(() => {
+    const interval = setInterval(() => setTime(new Date()), 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const timeString = time.toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+
+  const dateString = time.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  });
+
+  const day = time.getDate();
+  const suffix =
+    day % 10 === 1 && day !== 11 ? 'st' :
+    day % 10 === 2 && day !== 12 ? 'nd' :
+    day % 10 === 3 && day !== 13 ? 'rd' : 'th';
+
+  const formattedDate = `${time.toLocaleString('en-US', { month: 'long' })} ${day}${suffix}, ${time.getFullYear()}`;
 
   const advanceTurn = async () => {
     await fetch(`${baseUrl}/next`); // triggers backend to emit event
@@ -77,9 +101,14 @@ export default function HomePage() {
     );
   } else {
       return (
-        <main className="p-6">
-          {time.getTime()}
-          This will show the time
+        <main>
+          <div className="h-screen flex flex-col items-center justify-center text-center text-4xl font-semibold">
+            <div>{timeString}</div>
+            <div className="text-2xl mt-2">{formattedDate}</div>
+          </div>
+          <div className="w-full py-4 text-center text-gray-500">
+            <div className="text-xl mt-2">Go to {baseUrl} to start a game!</div>
+          </div>
         </main>
     );
   }