polished homepage, added game info table

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 = {
+    game_state["gameActive"] = False
-    "gameActive": False,
+    game_state["players"] = []
-    "players": [""],
+    game_state["playerTurn"] = 0
-    "playerTurn": 0
+    socketio.emit("player_update", {"players": game_state["players"]})
-    }
     return jsonify(game_state)
 
 
@@ -50,6 +49,13 @@ def reset():
 def status():
     return jsonify(game_state)
 
+@app.route("/start", methods=["GET"])
+def start_game():
+    game_state["gameActive"] = True
+    socketio.emit("player_update", {"players": game_state["players"]})
+    return jsonify(game_state)
+
+
 @app.route("/next", methods=["GET"])
 def next_player():
     players = game_state["players"]
@@ -67,4 +73,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/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 nameInputRef = useRef<HTMLInputElement>(null);
-const currentPlayers = useState<string | null>(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"
+                onClick={startGame}
-            target="_blank"
-            rel="noopener noreferrer"
               >
                 <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"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M6 12H18M12 6V18" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>

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"/>
+
<g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 4.29289C12.6834 3.90237 13.3166 3.90237 13.7071 4.29289L20.7071 11.2929C21.0976 11.6834 21.0976 12.3166 20.7071 12.7071L13.7071 19.7071C13.3166 20.0976 12.6834 20.0976 12.2929 19.7071C11.9024 19.3166 11.9024 18.6834 12.2929 18.2929L17.5858 13H4C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11H17.5858L12.2929 5.70711C11.9024 5.31658 11.9024 4.68342 12.2929 4.29289Z" fill="#ffffff"/> </g>
+
</svg>

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"/>
+
<g id="SVGRepo_iconCarrier"> <g> <g fill="#f6f5f4"> <path d="m354.2,247.4l-135.1-92.4c-4.2-3.1-15.4-3.1-16.3,8.6v184.8c1,11.7 12.4,11.9 16.3,8.6l135.1-92.4c3.5-2.1 8.3-10.7 0-17.2zm-130.5,81.3v-145.4l106.1,72.7-106.1,72.7z"/> <path d="M256,11C120.9,11,11,120.9,11,256s109.9,245,245,245s245-109.9,245-245S391.1,11,256,11z M256,480.1 C132.4,480.1,31.9,379.6,31.9,256S132.4,31.9,256,31.9S480.1,132.4,480.1,256S379.6,480.1,256,480.1z"/> </g> </g> </g>
+
</svg>

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"/>
+
<g id="SVGRepo_iconCarrier"> <title>plus</title> <desc>Created with Sketch Beta.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-360.000000, -1035.000000)" fill="#ffffff"> <path d="M388,1053 L378,1053 L378,1063 C378,1064.1 377.104,1065 376,1065 C374.896,1065 374,1064.1 374,1063 L374,1053 L364,1053 C362.896,1053 362,1052.1 362,1051 C362,1049.9 362.896,1049 364,1049 L374,1049 L374,1039 C374,1037.9 374.896,1037 376,1037 C377.104,1037 378,1037.9 378,1039 L378,1049 L388,1049 C389.104,1049 390,1049.9 390,1051 C390,1052.1 389.104,1053 388,1053 L388,1053 Z M388,1047 L380,1047 L380,1039 C380,1036.79 378.209,1035 376,1035 C373.791,1035 372,1036.79 372,1039 L372,1047 L364,1047 C361.791,1047 360,1048.79 360,1051 C360,1053.21 361.791,1055 364,1055 L372,1055 L372,1063 C372,1065.21 373.791,1067 376,1067 C378.209,1067 380,1065.21 380,1063 L380,1055 L388,1055 C390.209,1055 392,1053.21 392,1051 C392,1048.79 390.209,1047 388,1047 L388,1047 Z" id="plus" sketch:type="MSShapeGroup"> </path> </g> </g> </g>
+
</svg>

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>