add clock screensaver, basic team ordering, connection error message

2025-07-24 19:48:00 -04:00 · 2025-07-24 19:48:00 -04:00 · 66186eb016
commit 66186eb016
parent 8a14be321e
8 changed files with 188 additions and 103 deletions
--- a/README.md
+++ b/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/
--- a/backend/server.py
+++ b/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)
--- a/frontend/app/live/page.tsx
+++ b/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>
    );
  }
--- a/frontend/app/page.tsx
+++ b/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();
    });

@ -92,111 +98,136 @@ export default function Home() {
    const resetGame = async () => {
      await fetch(`${backendUrl}/reset`); // triggers backend to emit event
    };
-    
-    return (
-      
-      <div>
-        <div className="border rounded p-4 max-w-md m-5">
-          <h2 className="text-xl font-semibold mb-3">🎯 Game Info</h2>
-          <p className="mb-2">Game Active: <strong>{gameStatus.gameActive ? "Yes" : "No"}</strong></p>
-          <table className="w-full text-left border-t">
-            <thead>
-              <tr><th className="py-1">Player</th><th>Group</th></tr>
-            </thead>
-            <tbody>
-              {gameStatus.players.map((player, idx) => (
-                <tr key={idx} className="border-t">
-                  <td className="py-1">{player.name}</td>
-                  <td>{player.group}</td>
-                </tr>
-              ))}
-            </tbody>
-          </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">
-                <input
-                  type="radio"
-                  name="group"
-                  value="stripes"
-                  checked={selectedGroup === "stripes"}
-                  onChange={() => setSelectedGroup("stripes")}
-                  className="cursor-pointer"
-                />
-                Stripes
-              </label>
+    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>
+            <p className="mb-2">Game Active: <strong>{gameStatus.gameActive ? "Yes" : "No"}</strong></p>
+            <table className="w-full text-left border-t">
+              <thead>
+                <tr><th className="py-1">Player</th><th>Group</th></tr>
+              </thead>
+              <tbody>
+                {gameStatus.players.map((player, idx) => (
+                  <tr key={idx} className="border-t">
+                    <td className="py-1">{player.name}</td>
+                    <td>{player.group}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </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">
+                  <input
+                    type="radio"
+                    name="group"
+                    value="stripes"
+                    checked={selectedGroup === "stripes"}
+                    onChange={() => setSelectedGroup("stripes")}
+                    className="cursor-pointer"
+                  />
+                  Stripes
+                </label>

-              <label className="flex items-center gap-2 cursor-pointer">
-                <input
-                  type="radio"
-                  name="group"
-                  value="solids"
-                  checked={selectedGroup === "solids"}
-                  onChange={() => setSelectedGroup("solids")}
-                  className="cursor-pointer"
-                />
-                Solids
-              </label>
-            </div>
-            <div className="flex gap-4 items-center flex-col sm:flex-row">
-              <input ref={nameInputRef} id="name" placeholder="Enter Name Here"></input>
-            </div>
-            
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="radio"
+                    name="group"
+                    value="solids"
+                    checked={selectedGroup === "solids"}
+                    onChange={() => setSelectedGroup("solids")}
+                    className="cursor-pointer"
+                  />
+                  Solids
+                </label>
+              </div>
+              <div className="flex gap-4 items-center flex-col sm:flex-row">
+                <input ref={nameInputRef} id="name" placeholder="Enter Name Here"></input>
+              </div>
+              

-            <div className="flex gap-4 items-center flex-col sm:flex-row">
-              <button
-                onClick={addPlayer}
-                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">
+              <div className="flex gap-4 items-center flex-col sm:flex-row">
+                <button
+                  onClick={addPlayer}
+                  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">
+                    <Image
+                      className="dark:invert"
+                      src="/add.svg"
+                      alt="Vercel logomark"
+                      width={20}
+                      height={20}
+                  />
+                    Add Player</button>
+                <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="/add.svg"
+                    src="/play-button.svg"
                    alt="Vercel logomark"
                    width={20}
                    height={20}
-                />
-                  Add Player</button>
-              <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}
-                />
-                Start Game
-              </button>
-              <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={resetGame}
-              >                
-                <Image
-                  className="dark:invert"
-                  src="/reset.svg"
-                  alt="Vercel logomark"
-                  width={20}
-                  height={20}
-                />
-                Reset Game</button>
-              <button
-                onClick={advanceTurn}
-                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">
-                <Image
-                  className="dark:invert"
-                  src="/next.svg"
-                  alt="Vercel logomark"
-                  width={20}
-                  height={20}
-                />Next Turn</button>
-            </div>
-          </main>
+                  />
+                  Start Game
+                </button>
+                <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={resetGame}
+                >                
+                  <Image
+                    className="dark:invert"
+                    src="/reset.svg"
+                    alt="Vercel logomark"
+                    width={20}
+                    height={20}
+                  />
+                  Reset Game</button>
+                <button
+                  onClick={advanceTurn}
+                  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">
+                  <Image
+                    className="dark:invert"
+                    src="/next.svg"
+                    alt="Vercel logomark"
+                    width={20}
+                    height={20}
+                  />Next Turn</button>
+              </div>
+            </main>
+          </div>
        </div>
-      </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>
+      );
 }
--- a/image-1.png
+++ b/image-1.png
--- a/image-2.png
+++ b/image-2.png
--- a/image-3.png
+++ b/image-3.png
--- a/image.png
+++ b/image.png