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;
-    Players: string[];
+    CurrentPlayer: Player;
+    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 isMe = player === gameState.PlayerName;
-                        return <li key={player} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
-                            {player} {isMe && '(You)'}
+                        const isCurrentPlayer = player.Id === gameState.CurrentPlayer.Id;
+                        const isMe = player.Id === gameState.Me.Id;
+                        return <li key={player.Id} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
+                            {player.Name} {isMe && '(You)'}
                         </li>
                     })
                 }