import React, { useState, useEffect } from 'react';
// --- Reusable Helper Components ---
// A component for each player in the list on the right
const PlayerListItem = ({ playerName, status, isPlayer }) => {
const statusColor = status === 'Ready' ? 'text-green-400' : 'text-yellow-400';
const bgColor = isPlayer ? 'bg-pink-500/10' : 'bg-transparent';
return (
{playerName}
{status}
);
};
// A component for the character pedestals in the center
const CharacterPedestal = ({ characterName, skinName, isEmpty }) => {
if (isEmpty) {
return (
Waiting...
);
}
// All pedestals now use the same neutral styling.
const pedestalColor = 'border-blue-500/50';
const characterImage = "https://placehold.co/150x250/11111b/60a5fa?text=AGENT";
return (
{characterName}
{skinName}
);
};
// --- Main Lobby UI Component ---
const LobbyUI = () => {
// --- State Management ---
// The 'killer' property is now for internal logic only and not revealed in the UI.
const [players, setPlayers] = useState([
{ id: 1, name: 'Pekly', status: 'Ready', isPlayer: true, killer: true, character: 'The Mimic', skin: 'Default' },
{ id: 2, name: 'Player2', status: 'Ready', isPlayer: false, killer: false, character: 'Medic', skin: 'Default' },
{ id: 3, name: 'Player3', status: 'Connecting...', isPlayer: false, killer: false, character: 'Technician', skin: 'Default' },
{ id: 4, name: 'Player4', status: 'Ready', isPlayer: false, killer: false, character: 'Runner', skin: 'Default' },
]);
const [isReady, setIsReady] = useState(false);
const [countdown, setCountdown] = useState(0); // 0 means not counting down
const readyPlayers = players.filter(p => p.status === 'Ready').length;
const totalPlayers = 8;
// --- Game Logic Hooks ---
useEffect(() => {
// Start countdown if all connected players are ready
if (readyPlayers === players.length && players.length >= 2 && !countdown) {
setCountdown(10);
}
// If someone un-readies, stop the countdown
if (readyPlayers < players.length && countdown > 0) {
setCountdown(0);
}
}, [readyPlayers, players.length, countdown]);
useEffect(() => {
if (countdown > 0) {
const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
return () => clearTimeout(timer);
}
// When countdown hits 0, start the match (simulation)
if (countdown === 0 && isReady && readyPlayers === players.length) {
console.log("MATCH STARTING!");
}
}, [countdown]);
// --- Helper Functions ---
const handleReadyClick = () => {
setIsReady(!isReady);
setPlayers(players.map(p => p.isPlayer ? { ...p, status: !isReady ? 'Ready' : 'Not Ready' } : p));
};
const getButtonText = () => {
if (countdown > 0) {
return `STARTING IN ${countdown}...`;
}
return isReady ? 'UNREADY' : 'READY UP';
};
// --- Render JSX ---
return (
{/* Main Content Area */}
{/* Unified Pedestals for all players */}
{Array.from({ length: totalPlayers }).map((_, index) => {
const player = players[index];
return player ? (
) : (
// FIX: Use a unique key for empty slots to prevent collision.
);
})}
{/* Right Sidebar */}
);
};
// --- Main App Component ---
export default function App() {
return (