polished homepage, added game info table

2025-07-10 14:49:49 -04:00
parent e9a7fe9b25
commit 5032b3c7d1
8 changed files with 238 additions and 103 deletions
@@ -1,112 +1,202 @@
 '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 () => {
-    const playerName = nameInputRef.current?.value?.trim();
-    if (!playerName) {
-      alert("Please enter a player name");
-      return;
-    }
+  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 {
-      console.log(`${process.env.NEXT_PUBLIC_API_BASE}`);
-      const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE}/add`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name: playerName, group: selectedGroup }),
-      });
-
-      if (!res.ok) {
-        throw new Error(`Server error: ${res.statusText}`);
-      }
-
-      if (nameInputRef.current) {
-        nameInputRef.current.value = "";
-      }
-    } catch (error) {
-      console.error("Failed to add player:", error);
+      const res = await fetch(`${backendUrl}/status`);
+      const data = await res.json();
+      setGameStatus(data);
+    } catch (err) {
+      console.error("Failed to fetch status", err);
    }
  };
-  const [selectedGroup, setSelectedGroup] = useState<"stripes" | "solids">("stripes");

-  const advanceTurn = async () => {
-    await fetch('http://localhost:8080/next'); // triggers backend to emit event
-  };
+  // useEffect(() => {
+  //   fetchStatus();
+  //   // Need to change this so it just listens on a socket instead
+  //   const interval = setInterval(fetchStatus, 5000);
+  //   return () => clearInterval(interval);
+  // }, []);

-  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)]">
-      Game Info
+  useEffect(() => {
+    socket.on('connect', () => {
+      console.log('Connected to Socket.IO server');
+      fetchStatus();
+    });

-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <div className="flex gap-8 mb-4">
-          <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="radio"
-              name="group"
-              value="stripes"
-              checked={selectedGroup === "stripes"}
-              onChange={() => setSelectedGroup("stripes")}
-              className="cursor-pointer"
-            />
-            Stripes
-          </label>
+    socket.on('player_update', (data: { nextPlayer: string }) => {
+      fetchStatus();
+    });

-          <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="radio"
-              name="group"
-              value="solids"
-              checked={selectedGroup === "solids"}
-              onChange={() => setSelectedGroup("solids")}
-              className="cursor-pointer"
-            />
-            Solids
-          </label>
+    return () => {
+      socket.off('player_update');
+    };
+  }, []);
+
+  const addPlayer = async () => {
+      const playerName = nameInputRef.current?.value?.trim();
+      if (!playerName) {
+        alert("Please enter a player name");
+        return;
+      }
+
+      try {
+        console.log(`${process.env.NEXT_PUBLIC_API_BASE}`);
+        const res = await fetch(`${backendUrl}/add`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ name: playerName, group: selectedGroup }),
+        });
+
+        if (!res.ok) {
+          throw new Error(`Server error: ${res.statusText}`);
+        }
+
+        if (nameInputRef.current) {
+          nameInputRef.current.value = "";
+        }
+      } catch (error) {
+        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(`${backendUrl}/next`); // triggers backend to emit event
+    };
+
+    const resetGame = async () => {
+      await fetch(`${backendUrl}/reset`); // triggers backend to emit event
+    };
+    
+    return (
+      
+      <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="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="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)]">
+          

-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            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"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Start Game
-          </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]"
-            onClick={resetGame}
-          >
-            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>
+          <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+            <div className="flex gap-8 mb-4">
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="radio"
+                  name="group"
+                  value="stripes"
+                  checked={selectedGroup === "stripes"}
+                  onChange={() => setSelectedGroup("stripes")}
+                  className="cursor-pointer"
+                />
+                Stripes
+              </label>
+
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="radio"
+                  name="group"
+                  value="solids"
+                  checked={selectedGroup === "solids"}
+                  onChange={() => setSelectedGroup("solids")}
+                  className="cursor-pointer"
+                />
+                Solids
+              </label>
+            </div>
+            <div className="flex gap-4 items-center flex-col sm:flex-row">
+              <input ref={nameInputRef} id="name" placeholder="Enter Name Here"></input>
+            </div>
+            
+
+            <div className="flex gap-4 items-center flex-col sm:flex-row">
+              <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"
+                onClick={startGame}
+              >
+                <Image
+                  className="dark:invert"
+                  src="/play-button.svg"
+                  alt="Vercel logomark"
+                  width={20}
+                  height={20}
+                />
+                Start Game
+              </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"
+                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">
+                <Image
+                  className="dark:invert"
+                  src="/next.svg"
+                  alt="Vercel logomark"
+                  width={20}
+                  height={20}
+                />Next Turn</button>
+            </div>
+          </main>
        </div>
-      </main>
-    </div>
-  );
+      </div>
+    );
 }