39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import { useState } from "react";
|
|
import "./LobbyPage.scss";
|
|
import { Socket } from "socket.io-client";
|
|
import { attachHandlerToUpdateLobbyEvent } from "interface";
|
|
|
|
export interface LobbyPageProps {
|
|
initialPlayerNames: string[];
|
|
gameCode: string;
|
|
socket: Socket;
|
|
}
|
|
|
|
const LobbyPage = (props: LobbyPageProps) => {
|
|
const { initialPlayerNames, gameCode, socket } = props;
|
|
const [playerNames, setPlayerNames] = useState(initialPlayerNames);
|
|
|
|
attachHandlerToUpdateLobbyEvent(socket, (event) => {
|
|
setPlayerNames(event.playerNames);
|
|
});
|
|
|
|
return (
|
|
<div className="lobby-page">
|
|
<div className="landing-page-title">
|
|
<h1>Trains And Roads</h1>
|
|
</div>
|
|
<div className="lobby-page-body">
|
|
{playerNames.map((name) => (
|
|
<article className="lobby-user-name">{name}</article>
|
|
))}
|
|
<div className="start-game-button">
|
|
<button>Start Game</button>
|
|
</div>
|
|
<article className="game-code">Game code: {gameCode}</article>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LobbyPage;
|