Custom names and time in chat

src/layout/pages/MainLobby.tsx

@@ -11,6 +11,7 @@ const MainLobby = () => {
     useTitle('Mau-Mau Lobby');
 
     const navigateTo = useNavigate();
+    const playerName = localStorage.getItem('playerName') ?? "";
 
     const handleCreateRoom = () => {
         fetch(ROOM_URL, {
@@ -20,9 +21,19 @@ const MainLobby = () => {
         });
     }
 
+    const changePlayerName = (name: string) => {
+        if (!name) return;
+        localStorage.setItem('playerName', name);
+    }
+
     return (
         <div className={"main-lobby"}>
             <h1 className={"main-lobby__title mau"}>Mau-Mau</h1>
+            <div className={"main-lobby__name mau"}>
+                <label htmlFor={"name-input"}>Enter your name</label>
+                <input id={"name-input"} type="text" placeholder="Enter your name"
+                       defaultValue={playerName} onBlur={(e) => changePlayerName(e.target.value)}/>
+            </div>
             <div className={"main-lobby__container"}>
                 <NoButton className={"main-lobby__container-button"} onClick={handleCreateRoom}>
                     <h2 className={"mau"}>Host Game</h2>