Custom names and time in chat

src/layout/components/Game.tsx

@@ -2,14 +2,15 @@ import React, {FunctionComponent} from "react";
 import Deck from "./Deck";
 import Hand from "./Hand";
 import {GHButton} from "./Button";
+import {Player} from "../pages/Room";
 
 export interface GameState {
-    PlayerName: string;
+    Me: Player;
     CurrentState: string;
     Hand: string[];
     CurrentCard: string;
-    CurrentPlayer: string;
+    CurrentPlayer: Player;
-    Players: string[];
+    Players: Player[];
 }
 
 interface Props {
@@ -38,12 +39,12 @@ const Game: FunctionComponent<Props> = ({gameState, handleCardSend, handleDraw,
             }
             <ul>
                 {
-                    gameState?.Players &&
+                    gameState?.Me?.Id &&
                     gameState.Players.map((player) => {
-                        const isCurrentPlayer = player === gameState.CurrentPlayer;
+                        const isCurrentPlayer = player.Id === gameState.CurrentPlayer.Id;
-                        const isMe = player === gameState.PlayerName;
+                        const isMe = player.Id === gameState.Me.Id;
-                        return <li key={player} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
+                        return <li key={player.Id} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
-                            {player} {isMe && '(You)'}
+                            {player.Name} {isMe && '(You)'}
                         </li>
                     })
                 }

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>

src/layout/pages/Room.tsx

@@ -6,10 +6,16 @@ import useTitle from "../../utils/hooks/TitleHook";
 import Game, {GameState} from "../components/Game";
 
 interface ChatMessage {
-    PlayerName: string;
+    Time: Date;
+    Sender: string;
     Message: string;
 }
 
+export interface Player {
+    Name: string;
+    Id: string;
+}
+
 interface SocketMessage {
     Type: string;
     Payload: any;
@@ -23,14 +29,15 @@ const Room = () => {
 
     const {roomId} = useParams();
 
-    const WS_URL = `${process.env.REACT_APP_WEBSOCKET_URL}/room/${roomId}`;
+    const playerName = localStorage.getItem('playerName') || Math.random().toString(36).substring(7);
+    const WS_URL = `${process.env.REACT_APP_WEBSOCKET_URL}/room/${roomId}/${playerName}`;
 
     const [gameState, setGameState] = React.useState<GameState>({
-        PlayerName: '',
+        Me: {Name: playerName, Id: ''},
         CurrentState: '',
         Hand: [],
         CurrentCard: '',
-        CurrentPlayer: '',
+        CurrentPlayer: {Name: "", Id: ''},
         Players: []
     });
     const [chatMessages, setChatMessages] = React.useState<ChatMessage[]>([]);
@@ -44,7 +51,11 @@ const Room = () => {
             const data = JSON.parse(event.data);
             const payload = JSON.parse(data.Payload);
             if (data.Type === 'GAME') setGameState(payload);
-            if (data.Type === 'CHAT') setChatMessages(prev => [...prev, payload]);
+            if (data.Type === 'CHAT') setChatMessages(prev => [...prev, {
+                Time: new Date(payload.Time),
+                Sender: payload.Sender,
+                Message: payload.Message
+            }]);
         }
     });
 
@@ -110,8 +121,8 @@ const Room = () => {
                 <GHButton type={"submit"}>Send</GHButton>
             </form>
             <ul>
-                {chatMessages.map((message, index) => (
+                {chatMessages.map((message) => (
-                    <li key={index}>{message.PlayerName}: {message.Message}</li>
+                    <li key={message.Time.getUTCMilliseconds()}>({message.Time.toLocaleTimeString()}) {message.Sender}: {message.Message}</li>
                 ))}
             </ul>
         </div>

src/styles/layout/pages/mainlobby.scss

@@ -5,6 +5,12 @@
   justify-content: space-evenly;
   align-items: center;
 
+  &__name {
+    display: flex;
+    flex-direction: column;
+    font-size: 1.5rem;
+  }
+
   &__container {
     display: flex;
     gap: 2rem;
@@ -18,6 +24,6 @@
   }
 
   &__title {
-    font-size: 5rem;
+    font-size: 7.5rem;
   }
 }