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,9 +39,20 @@ 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
   };
 
+  const fetchStatus = async () => {
+    try {
+      const res = await fetch(`${backendUrl}/status`);
+      const data = await res.json();
+      setGameStatus(data);
+    } catch (err) {
+      console.error("Failed to fetch status", err);
+    }
+  };
+
+  if (gameStatus.gameActive) {
     return (
       <main className="p-6">
         <h1 className="text-2xl font-bold mb-4">Game Turn Tracker</h1>
@@ -48,4 +75,13 @@ export default function HomePage() {
         </button>
       </main>
     );
+  } else {
+      return (
+        <main className="p-6">
+          {time.getTime()}
+          This will show the time
+        </main>
+    );
+  }
+
 }