init

frontend/app/live/page.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import io from 'socket.io-client';
+
+const socket = io('http://localhost:8080');
+
+export default function HomePage() {
+  const [currentPlayer, setCurrentPlayer] = useState<string | null>(null);
+
+  useEffect(() => {
+    socket.on('connect', () => {
+      console.log('Connected to Socket.IO server');
+    });
+
+    socket.on('player_update', (data: { nextPlayer: string }) => {
+      setCurrentPlayer(data.nextPlayer);
+    });
+
+    return () => {
+      socket.off('player_update');
+    };
+  }, []);
+
+  const advanceTurn = async () => {
+    await fetch('http://localhost:8080/next'); // triggers backend to emit event
+  };
+
+
+
+
+  return (
+    <main className="p-6">
+      <h1 className="text-2xl font-bold mb-4">Game Turn Tracker</h1>
+
+      <div className="mb-4">
+        {currentPlayer ? (
+          <p className="text-lg">
+            🎯 Current Player: <strong>{currentPlayer}</strong>
+          </p>
+        ) : (
+          <p className="text-gray-500">Waiting for turn to start…</p>
+        )}
+      </div>
+
+      <button
+        onClick={advanceTurn}
+        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+      >
+        Next Player
+      </button>
+    </main>
+  );
+}