47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import {FunctionComponent} from "react";
|
|
import {Connection} from "../../pages/Room";
|
|
import {Button} from "../../components/Button";
|
|
|
|
interface Props {
|
|
winner: string | undefined;
|
|
handleLobbyAction: (action: string) => void;
|
|
playerList: Connection[];
|
|
onKickClick: (playerId: string) => void;
|
|
}
|
|
|
|
const Lobby: FunctionComponent<Props> = ({winner, handleLobbyAction, playerList, onKickClick}) => {
|
|
|
|
const onStartClick = () => {
|
|
console.log('Start Game');
|
|
handleLobbyAction("START");
|
|
}
|
|
|
|
return (
|
|
<main className={"game-lobby"}>
|
|
<h1>Waiting for host to start the game</h1>
|
|
<section>
|
|
<h2>Players</h2>
|
|
<ol className={"game-lobby__player-list"}>
|
|
{
|
|
playerList.map((player) => {
|
|
return <li key={player.Id}>
|
|
<p>{player.Name}</p>
|
|
<Button className={"button-danger"} onClick={() => onKickClick(player.Id)}>Kick</Button>
|
|
</li>
|
|
})
|
|
}
|
|
</ol>
|
|
</section>
|
|
<section>
|
|
<h2>Game Settings</h2>
|
|
<i>Not available... yet?</i>
|
|
</section>
|
|
<Button className={"button-success game-lobby__start-game"} onClick={onStartClick}>
|
|
<strong>Start Game</strong>
|
|
</Button>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default Lobby;
|