117 lines
3.1 KiB
TypeScript
117 lines
3.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(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');
|
|
};
|
|
}, []);
|
|
// Idle clock stuff
|
|
useEffect(() => {
|
|
const interval = setInterval(() => setTime(new Date()), 1000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const timeString = time.toLocaleTimeString('en-US', {
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
});
|
|
|
|
const dateString = time.toLocaleDateString('en-US', {
|
|
month: 'long',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
});
|
|
|
|
const day = time.getDate();
|
|
const suffix =
|
|
day % 10 === 1 && day !== 11 ? 'st' :
|
|
day % 10 === 2 && day !== 12 ? 'nd' :
|
|
day % 10 === 3 && day !== 13 ? 'rd' : 'th';
|
|
|
|
const formattedDate = `${time.toLocaleString('en-US', { month: 'long' })} ${day}${suffix}, ${time.getFullYear()}`;
|
|
|
|
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>
|
|
<div className="h-screen flex flex-col items-center justify-center text-center text-4xl font-semibold">
|
|
<div>{timeString}</div>
|
|
<div className="text-2xl mt-2">{formattedDate}</div>
|
|
</div>
|
|
<div className="w-full py-4 text-center text-gray-500">
|
|
<div className="text-xl mt-2">Go to {baseUrl} to start a game!</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
}
|