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