add clock screensaver, basic team ordering, connection error message

README.md

@@ -7,8 +7,16 @@ Syncs in realtime between devices with sockets
 
 Add the players with the homepage, and view who's turn it is on the `/live` page
 
+![Idle Screen](image.png)
+Idle Screensaver ()
+![No Connection](image-1.png)
+No Connection Message
 
+![Main Menu](image-2.png)
+Root Menu
+![Tablet Screen](image-3.png)
+Live page
 
 Tools used:
 SVGs generated from https://www.svgrepo.com
-https://www.freetool.dev/emoji-picker/
+https://www.freetool.dev/emoji-picker/http://localhost:3000/

backend/server.py

@@ -49,10 +49,27 @@ def reset():
 def status():
     return jsonify(game_state)
 
+def orderplayers():
+    stripes = []
+    solids = []
+    for player in game_state["players"]:
+        if player["group"] == "stripes":
+            stripes.append(player)
+        else:
+            solids.append(player)
+    print(stripes)
+    print(solids)
+
+    combined = [player for pair in zip(stripes, solids) for player in pair]
+    print(combined)
+
+    game_state["players"] = combined
+
 @app.route("/start", methods=["GET"])
 def start_game():
     players = game_state["players"]
     game_state["gameActive"] = True
+    orderplayers()
     current_player = players[game_state["playerTurn"]]
     socketio.emit("player_update", {"nextPlayer": current_player})
     return jsonify(game_state)

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">
+        <main>
-          {time.getTime()}
+          <div className="h-screen flex flex-col items-center justify-center text-center text-4xl font-semibold">
-          This will show the time
+            <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>
     );
   }

frontend/app/page.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { connect } from "http2";
 import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
 import io from 'socket.io-client';
@@ -7,6 +8,7 @@ import io from 'socket.io-client';
 export default function Home() {
   const nameInputRef = useRef<HTMLInputElement>(null);
   const currentPlayers = useState<string | null>(null);
+  const [apiConnected, setAPIStatus] = useState<boolean>(false);
   const [gameStatus, setGameStatus] = useState<{ gameActive: boolean, players: any[] }>({
     gameActive: false,
     players: [],
@@ -20,13 +22,16 @@ export default function Home() {
   const backendUrl = `${baseUrl}:${process.env.NEXT_PUBLIC_API_BASE}`;
   const socket = io(`${backendUrl}`);
 
+
   const fetchStatus = async () => {
     try {
       const res = await fetch(`${backendUrl}/status`);
       const data = await res.json();
+      setAPIStatus(true);
       setGameStatus(data);
     } catch (err) {
       console.error("Failed to fetch status", err);
+      setAPIStatus(false);
     }
   };
 
@@ -40,6 +45,7 @@ export default function Home() {
   useEffect(() => {
     socket.on('connect', () => {
       console.log('Connected to Socket.IO server');
+      setAPIStatus(true);
       fetchStatus();
     });
 
@@ -93,8 +99,9 @@ export default function Home() {
       await fetch(`${backendUrl}/reset`); // triggers backend to emit event
     };
 
+    console.log(apiConnected);
+    if (apiConnected) {
       return (
-      
         <div>
           <div className="border rounded p-4 max-w-md m-5">
             <h2 className="text-xl font-semibold mb-3">🎯 Game Info</h2>
@@ -114,8 +121,6 @@ export default function Home() {
             </table>
           </div>
           <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-          
-
             <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
               <div className="flex gap-8 mb-4">
                 <label className="flex items-center gap-2 cursor-pointer">
@@ -200,3 +205,29 @@ export default function Home() {
         </div>
       );
     }
+    else
+      return (
+        <div>
+          <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+            <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">             
+              <p>Not Connected to API {apiConnected}</p>
+              <div className="flex gap-4 items-center flex-col sm:flex-row">
+                <button
+                  className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
+                  onClick={startGame}
+                >
+                  <Image
+                    className="dark:invert"
+                    src="/play-button.svg"
+                    alt="Vercel logomark"
+                    width={20}
+                    height={20}
+                  />
+                  Try Reconnecting
+                </button>
+              </div>
+            </main>
+          </div>
+        </div>
+      );
+}