56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import {
|
|
CreateLobbyEvent,
|
|
handleCreateLobby,
|
|
handleJoinLobby,
|
|
JoinLobbyEvent,
|
|
} from "interface";
|
|
import React, { ChangeEvent } from "react";
|
|
import { Socket } from "socket.io-client";
|
|
|
|
export interface LandingPageProps {
|
|
socket: Socket;
|
|
}
|
|
|
|
const LandingPage = (props: LandingPageProps) => {
|
|
const { socket } = props;
|
|
|
|
const createLobbyPayload: CreateLobbyEvent = { userName: "" };
|
|
const joinLobbyPayload: JoinLobbyEvent = { userName: "", lobbyId: "" };
|
|
const registerUsername = (event: ChangeEvent<HTMLInputElement>) => {
|
|
createLobbyPayload.userName = event.target.value;
|
|
joinLobbyPayload.userName = event.target.value;
|
|
};
|
|
const registerLobbyId = (event: ChangeEvent<HTMLInputElement>) =>
|
|
(joinLobbyPayload.lobbyId = event.target.value);
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<div className="landing-page-title">
|
|
<h1>Trains And Roads</h1>
|
|
</div>
|
|
<div className="user-name-input">
|
|
<input placeholder="Enter username" onChange={registerUsername}></input>
|
|
</div>
|
|
<div className="create-lobby-button">
|
|
<button onClick={() => handleCreateLobby(socket, createLobbyPayload)}>
|
|
Create Lobby
|
|
</button>
|
|
</div>
|
|
<div className="join-lobby">
|
|
<input
|
|
className="lobby-id-input"
|
|
placeholder="Enter Lobby Id"
|
|
onChange={registerLobbyId}
|
|
></input>
|
|
<button
|
|
className="join-lobby-button secondary"
|
|
onClick={() => handleJoinLobby(socket, joinLobbyPayload)}
|
|
>
|
|
Join Lobby
|
|
</button>
|
|
</div>
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
export default LandingPage;
|