add logic for screensaver

README.md

@@ -1,4 +1,14 @@
 # Pool Tracker
 Simple web app the keeps track of who's turn it is in pool.
 
+Uses Next.JS for frontend and Flask for the backend.
+
+Syncs in realtime between devices with sockets
+
 Add the players with the homepage, and view who's turn it is on the `/live` page
+
+
+
+Tools used:
+SVGs generated from https://www.svgrepo.com
+https://www.freetool.dev/emoji-picker/

backend/server.py

@@ -7,7 +7,7 @@ from flask_cors import CORS
 from flask_socketio import SocketIO
 
 app = Flask(__name__)
-CORS(app, origins=["http://localhost:3000", "10.*"])
+CORS(app, origins=["*", "0.0.0.0"])
 socketio = SocketIO(app, cors_allowed_origins="*")
 
 
@@ -38,11 +38,10 @@ def add_player():
 
 @app.route("/reset", methods=["GET"])
 def reset():
-    game_state = {
-    "gameActive": False,
-    "players": [""],
-    "playerTurn": 0
-    }
+    game_state["gameActive"] = False
+    game_state["players"] = []
+    game_state["playerTurn"] = 0
+    socketio.emit("player_update", {"players": game_state["players"]})
     return jsonify(game_state)
 
 
@@ -50,6 +49,15 @@ def reset():
 def status():
     return jsonify(game_state)
 
+@app.route("/start", methods=["GET"])
+def start_game():
+    players = game_state["players"]
+    game_state["gameActive"] = True
+    current_player = players[game_state["playerTurn"]]
+    socketio.emit("player_update", {"nextPlayer": current_player})
+    return jsonify(game_state)
+
+
 @app.route("/next", methods=["GET"])
 def next_player():
     players = game_state["players"]
@@ -67,4 +75,4 @@ def next_player():
     })
 
 if __name__ == "__main__":
-    socketio.run(app, host="localhost", port=8080)
+    socketio.run(app, host="0.0.0.0", port=8080)

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>
+    );
+  }
+
 }

frontend/app/page.tsx

@@ -1,13 +1,58 @@
 'use client';
 import Image from "next/image";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import io from 'socket.io-client';
 
 
 export default function Home() {
-const nameInputRef = useRef<HTMLInputElement>(null);
-const currentPlayers = useState<string | null>(null);
+  const nameInputRef = useRef<HTMLInputElement>(null);
+  const currentPlayers = useState<string | null>(null);
+  const [gameStatus, setGameStatus] = useState<{ gameActive: boolean, players: any[] }>({
+    gameActive: false,
+    players: [],
+  });
 
-const addPlayer = async () => {
+  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 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);
+    }
+  };
+
+  // useEffect(() => {
+  //   fetchStatus();
+  //   // Need to change this so it just listens on a socket instead
+  //   const interval = setInterval(fetchStatus, 5000);
+  //   return () => clearInterval(interval);
+  // }, []);
+
+  useEffect(() => {
+    socket.on('connect', () => {
+      console.log('Connected to Socket.IO server');
+      fetchStatus();
+    });
+
+    socket.on('player_update', (data: { nextPlayer: string }) => {
+      fetchStatus();
+    });
+
+    return () => {
+      socket.off('player_update');
+    };
+  }, []);
+
+  const addPlayer = async () => {
       const playerName = nameInputRef.current?.value?.trim();
       if (!playerName) {
         alert("Please enter a player name");
@@ -16,7 +61,7 @@ const addPlayer = async () => {
 
       try {
         console.log(`${process.env.NEXT_PUBLIC_API_BASE}`);
-      const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE}/add`, {
+        const res = await fetch(`${backendUrl}/add`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ name: playerName, group: selectedGroup }),
@@ -33,19 +78,43 @@ const addPlayer = async () => {
         console.error("Failed to add player:", error);
       }
     };
+
+    const startGame = async() => {
+      fetch(`${backendUrl}/start`);
+    }
+
     const [selectedGroup, setSelectedGroup] = useState<"stripes" | "solids">("stripes");
 
     const advanceTurn = async () => {
-    await fetch('http://localhost:8080/next'); // triggers backend to emit event
+      await fetch(`${backendUrl}/next`); // triggers backend to emit event
     };
 
     const resetGame = async () => {
-    await fetch('http://localhost:8080/reset'); // triggers backend to emit event
+      await fetch(`${backendUrl}/reset`); // triggers backend to emit event
     };
     
     return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      Game Info
+      
+      <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">
@@ -75,38 +144,59 @@ const addPlayer = async () => {
             </div>
             <div className="flex gap-4 items-center flex-col sm:flex-row">
               <input ref={nameInputRef} id="name" placeholder="Enter Name Here"></input>
-          <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">Add Player</button>
             </div>
             
 
             <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
+              <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"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+                onClick={startGame}
               >
                 <Image
                   className="dark:invert"
-              src="/vercel.svg"
+                  src="/play-button.svg"
                   alt="Vercel logomark"
                   width={20}
                   height={20}
                 />
                 Start Game
-          </a>
+              </button>
               <button
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
+                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">Next Turn</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">
+                <Image
+                  className="dark:invert"
+                  src="/next.svg"
+                  alt="Vercel logomark"
+                  width={20}
+                  height={20}
+                />Next Turn</button>
             </div>
           </main>
         </div>
+      </div>
     );
 }

frontend/public/add.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

frontend/public/next.svg

@@ -1 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

frontend/public/play-button.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512" fill="#f6f5f4">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

frontend/public/plus.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

frontend/public/reset.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" stroke-width="3" stroke="#FFFFFF" fill="none"><line x1="8.06" y1="8.06" x2="55.41" y2="55.94"/><line x1="55.94" y1="8.06" x2="8.59" y2="55.94"/></svg>