88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import io from 'socket.io-client';
|
|
|
|
|
|
|
|
|
|
export default function HomePage() {
|
|
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 [time, setTime] = useState<Date>(new Date());
|
|
|
|
const [currentPlayer, setCurrentPlayer] = useState<string | null>(null);
|
|
|
|
const [gameStatus, setGameStatus] = useState<{ gameActive: boolean, players: any[] }>({
|
|
gameActive: false,
|
|
players: [],
|
|
});
|
|
|
|
useEffect(() => {
|
|
socket.on('connect', () => {
|
|
console.log('Connected to Socket.IO server');
|
|
});
|
|
|
|
socket.on('player_update', (data: { nextPlayer: string }) => {
|
|
setCurrentPlayer(data.nextPlayer);
|
|
fetchStatus();
|
|
});
|
|
|
|
return () => {
|
|
socket.off('player_update');
|
|
};
|
|
}, []);
|
|
|
|
const advanceTurn = async () => {
|
|
await fetch(`${baseUrl}/next`); // triggers backend to emit event
|
|
};
|
|
|
|
const fetchStatus = async () => {
|
|
try {
|
|
const res = await fetch(`${backendUrl}/status`);
|
|
const data = await res.json();
|
|
setGameStatus(data);
|
|
} catch (err) {
|
|
console.error("Failed to fetch status", err);
|
|
}
|
|
};
|
|
|
|
if (gameStatus.gameActive) {
|
|
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>
|
|
);
|
|
} else {
|
|
return (
|
|
<main className="p-6">
|
|
{time.getTime()}
|
|
This will show the time
|
|
</main>
|
|
);
|
|
}
|
|
|
|
}
|