add features

README.md

@@ -0,0 +1,4 @@
+# Pool Tracker
+Simple web app the keeps track of who's turn it is in pool.
+
+Add the players with the homepage, and view who's turn it is on the `/live` page

backend/server.py

@@ -2,7 +2,7 @@ import eventlet
 
 eventlet.monkey_patch()
 
-from flask import Flask, jsonify
+from flask import Flask, jsonify, request
 from flask_cors import CORS
 from flask_socketio import SocketIO
 
@@ -12,11 +12,40 @@ socketio = SocketIO(app, cors_allowed_origins="*")
 
 
 game_state = {
-    "gameActive": True,
-    "players": ["Alice", "Bob", "Charlie"],
+    "gameActive": False,
+    "players": [],
     "playerTurn": 0
 }
 
+@app.route("/add", methods=["POST"])
+def add_player():
+    data = request.get_json()
+    if not data:
+        return jsonify({"error": "No JSON body received"}), 400
+
+    name = data.get("name")
+    group = data.get("group")
+
+    if not name or group not in ["stripes", "solids"]:
+        return jsonify({"error": "Invalid data"}), 400
+
+    game_state["players"].append({"name": name, "group": group})
+
+    # emit socket update
+    socketio.emit("player_update", {"players": game_state["players"]})
+
+    return jsonify({"message": f"Player {name} added to {group} group"})
+
+@app.route("/reset", methods=["GET"])
+def reset():
+    game_state = {
+    "gameActive": False,
+    "players": [""],
+    "playerTurn": 0
+    }
+    return jsonify(game_state)
+
+
 @app.route("/status", methods=["GET"])
 def status():
     return jsonify(game_state)

frontend/app/live/page.tsx

@@ -36,7 +36,7 @@ export default function HomePage() {
       <div className="mb-4">
         {currentPlayer ? (
           <p className="text-lg">
-            🎯 Current Player: <strong>{currentPlayer}</strong>
+            🎯 Current Player: <strong>{currentPlayer.name} ({currentPlayer.group})</strong>
           </p>
         ) : (
           <p className="text-gray-500">Waiting for turn to start…</p>

frontend/app/page.tsx

@@ -32,6 +32,14 @@ const addPlayer = async () => {
     }
   };
   const [selectedGroup, setSelectedGroup] = useState<"stripes" | "solids">("stripes");
+
+  const advanceTurn = async () => {
+    await fetch('http://localhost:8080/next'); // triggers backend to emit event
+  };
+
+  const resetGame = async () => {
+    await fetch('http://localhost:8080/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)]">
@@ -85,14 +93,14 @@ const addPlayer = async () => {
             />
             Start Game
           </a>
-          <a
+          <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]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+            onClick={resetGame}
           >
-            Reset Game
-          </a>
+            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>
         </div>
       </main>
     </div>