52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
'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.name} ({currentPlayer.group})</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>
|
|
);
|
|
}
|