81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import {
|
|
attachHandlerToCreateLobbyError,
|
|
CreateLobbyEvent,
|
|
ErrorCode,
|
|
handleCreateLobby,
|
|
handleJoinLobby,
|
|
JoinLobbyEvent,
|
|
} from "interface";
|
|
import React, { ChangeEvent, useState } from "react";
|
|
import { Socket } from "socket.io-client";
|
|
import "./LandingPage.scss";
|
|
|
|
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);
|
|
|
|
const [receivedError, setReceivedError] = useState("" as ErrorCode);
|
|
const userNameErrorCodesToMessageMap = new Map([
|
|
[ErrorCode.MISSING_USER_NAME, "Introduce your player name"],
|
|
[
|
|
ErrorCode.INVALID_USER_NAME,
|
|
"Player name must be letters or spaces only and up to 25 characters",
|
|
],
|
|
]);
|
|
const userNameErrorMessage =
|
|
userNameErrorCodesToMessageMap.get(receivedError);
|
|
|
|
attachHandlerToCreateLobbyError(socket, (event) =>
|
|
setReceivedError(event.error),
|
|
);
|
|
|
|
return (
|
|
<div className="landing-page">
|
|
<div>
|
|
<h1>Trains And Roads</h1>
|
|
</div>
|
|
<div className="landing-page-body">
|
|
<div>
|
|
<input
|
|
placeholder="Enter username"
|
|
onChange={registerUsername}
|
|
maxLength={20}
|
|
></input>
|
|
{userNameErrorMessage && (
|
|
<small id="error-message">{userNameErrorMessage}</small>
|
|
)}
|
|
<button onClick={() => handleCreateLobby(socket, createLobbyPayload)}>
|
|
Create Lobby
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<input
|
|
placeholder="Enter Lobby Id"
|
|
onChange={registerLobbyId}
|
|
maxLength={5}
|
|
></input>
|
|
<button
|
|
className="secondary"
|
|
onClick={() => handleJoinLobby(socket, joinLobbyPayload)}
|
|
>
|
|
Join Lobby
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default LandingPage;
|