add features

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>