Add error messages in landing page for duplicate user names and missing game code

interface/server-events/ServerError.ts

@@ -8,4 +8,6 @@ export enum ErrorCode {
   GAME_NOT_FOUND = "game-not-found",
   MISSING_USER_NAME = "missing-player-name",
   INVALID_USER_NAME = "invalid-player-name",
+  DUPLICATE_USER_NAME = "duplicate-player-name",
+  MISSING_GAME_CODE = "missing-game-code",
 }

web/src/pages/landing/LandingPage.tsx

@@ -7,7 +7,7 @@ import {
   handleJoinLobby,
   JoinLobbyEvent,
 } from "interface";
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 import { Socket } from "socket.io-client";
 import "./LandingPage.scss";
 
@@ -34,20 +34,26 @@ const LandingPage = (props: LandingPageProps) => {
       ErrorCode.INVALID_USER_NAME,
       "Player name must be letters or spaces only and up to 25 characters",
     ],
+    [ErrorCode.DUPLICATE_USER_NAME, "Player name is already under use"],
   ]);
   const userNameErrorMessage =
     userNameErrorCodesToMessageMap.get(receivedError);
   const gameCodeErrorCodesToMessageMap = new Map([
     [ErrorCode.GAME_NOT_FOUND, "No game found with such lobby ID"],
+    [ErrorCode.MISSING_GAME_CODE, "Introduce a game code"],
   ]);
   const gameCodeErrorMessage =
     gameCodeErrorCodesToMessageMap.get(receivedError);
 
+  useEffect(() =>
     attachHandlerToCreateLobbyError(socket, (event) =>
       setReceivedError(event.error),
+    ),
   );
+  useEffect(() =>
     attachHandlerToJoinLobbyError(socket, (event) =>
       setReceivedError(event.error),
+    ),
   );
 
   return (