add logic for screensaver

backend/server.py

@@ -51,8 +51,10 @@ def status():
 
 @app.route("/start", methods=["GET"])
 def start_game():
+    players = game_state["players"]
     game_state["gameActive"] = True
-    socketio.emit("player_update", {"players": game_state["players"]})
+    current_player = players[game_state["playerTurn"]]
+    socketio.emit("player_update", {"nextPlayer": current_player})
     return jsonify(game_state)
 
 

frontend/app/live/page.tsx

@@ -3,11 +3,26 @@
 import { useEffect, useState } from 'react';
 import io from 'socket.io-client';
 
-const socket = io('http://localhost:8080');
+
+
 
 export default function HomePage() {
+  let baseUrl = "";
+  if (typeof window !== "undefined") {
+    baseUrl = `${window.location.protocol}//${window.location.hostname}`;
+  }
+  const backendUrl = `${baseUrl}:${process.env.NEXT_PUBLIC_API_BASE}`;
+  const socket = io(`${backendUrl}`);
+
+  const [time, setTime] = useState<Date>(new Date());
+  
   const [currentPlayer, setCurrentPlayer] = useState<string | null>(null);
 
+  const [gameStatus, setGameStatus] = useState<{ gameActive: boolean, players: any[] }>({
+    gameActive: false,
+    players: [],
+  });
+
   useEffect(() => {
     socket.on('connect', () => {
       console.log('Connected to Socket.IO server');
@@ -15,6 +30,7 @@ export default function HomePage() {
 
     socket.on('player_update', (data: { nextPlayer: string }) => {
       setCurrentPlayer(data.nextPlayer);
+      fetchStatus();
     });
 
     return () => {
@@ -23,29 +39,49 @@ export default function HomePage() {
   }, []);
 
   const advanceTurn = async () => {
-    await fetch('http://localhost:8080/next'); // triggers backend to emit event
+    await fetch(`${baseUrl}/next`); // triggers backend to emit event
   };
 
-  return (
+  const fetchStatus = async () => {
-    <main className="p-6">
+    try {
-      <h1 className="text-2xl font-bold mb-4">Game Turn Tracker</h1>
+      const res = await fetch(`${backendUrl}/status`);
+      const data = await res.json();
+      setGameStatus(data);
+    } catch (err) {
+      console.error("Failed to fetch status", err);
+    }
+  };
 
-      <div className="mb-4">
+  if (gameStatus.gameActive) {
-        {currentPlayer ? (
+    return (
-          <p className="text-lg">
+      <main className="p-6">
-            🎯 Current Player: <strong>{currentPlayer.name} ({currentPlayer.group})</strong>
+        <h1 className="text-2xl font-bold mb-4">Game Turn Tracker</h1>
-          </p>
+
-        ) : (
+        <div className="mb-4">
-          <p className="text-gray-500">Waiting for turn to start…</p>
+          {currentPlayer ? (
-        )}
+            <p className="text-lg">
-      </div>
+              🎯 Current Player: <strong>{currentPlayer.name} ({currentPlayer.group})</strong>
+            </p>
+          ) : (
+            <p className="text-gray-500">Waiting for turn to start…</p>
+          )}
+        </div>
+
+        <button
+          onClick={advanceTurn}
+          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+        >
+          Next Player
+        </button>
+      </main>
+    );
+  } else {
+      return (
+        <main className="p-6">
+          {time.getTime()}
+          This will show the time
+        </main>
+    );
+  }
 
-      <button
-        onClick={advanceTurn}
-        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
-      >
-        Next Player
-      </button>
-    </main>
-  );
 }