Change host assignment

The host is now the oldest member of the lobby

client/src/components/PlayerBox/PlayerBox.scss

@@ -7,5 +7,6 @@ $background-color: rgb(37, 153, 138);
   background-color: $background-color;
   color: white;
   padding: 1rem;
+  margin: 1rem;
   min-width: 10rem;
 }

client/src/pages/Index.tsx

@@ -12,7 +12,6 @@ const Index: FC<IndexProps> = () => {
   const createGame = async () => {
     const postGameResponse: AxiosResponse<Game> = await axios.post(`/games`)
     const game = postGameResponse.data
-    localStorage.setItem(`poule-poule-${game.id}`, game.hostId)
     navigate(`/lobby/${game.id}`)
   }
 

client/src/pages/Lobby/Lobby.scss

@@ -4,7 +4,7 @@ $background-color: #f8de96;
   .Players {
     margin-top: 1rem;
     display: flex;
-    justify-content: space-evenly;
+    justify-content: flex-start;
     flex-wrap: wrap;
     .Player {
       display: flex;

client/src/pages/Lobby/Lobby.tsx

@@ -22,8 +22,7 @@ const Lobby: FC<LobbyProps> = (props: LobbyProps) => {
       const getGameResponse: AxiosResponse<Game> = await axios.get(
         `/games/${props.id}`
       )
-      const game = getGameResponse.data
-      return game
+      return getGameResponse.data
     }
     const onLoad = async () => {
       var game = await loadGame()
@@ -44,21 +43,23 @@ const Lobby: FC<LobbyProps> = (props: LobbyProps) => {
     onLoad()
   }, [props.id])
 
+  // The oldest member of the lobby is the host
+  const isGameHost = (game: Game, playerId: string | undefined) => {
+    return game.players && game.players[0].id === playerId
+  }
+
   return (
     <div className='Lobby'>
       {game && (
         <>
           <h1>Details de la partie ({game.id})</h1>
           <h2>{`Créé ${moment.utc(game.creationDate).fromNow()}`}</h2>
-          <h3>Statut {game.status}</h3>
-          <br></br>
-          <h4>Joueurs</h4>
           <div className='Players'>
             {game.players.map(player => (
               <PlayerBox
                 name={player.name}
                 isSelf={currentPlayerId === player.id || false}
-                isHost={game.hostId === player.id}
+                isHost={isGameHost(game, player.id)}
               />
             ))}
           </div>

client/src/utils/signalrConnector.ts

@@ -13,11 +13,6 @@ const connectToGameHub = (
     .configureLogging(SignalR.LogLevel.Debug)
     .build()
 
-  // connection
-  //   .start()
-  //   .then(() => onStart && onStart())
-  //   .catch(err => console.log(err))
-
   return connection
 }
 

server/DTO/GameDTOs.cs

@@ -19,7 +19,7 @@ public GameDTO(Game game)
       hostId = game.HostId;
       status = game.Status.ToString();
       creationDate = game.CreationDate.ToString("o", CultureInfo.InvariantCulture);
-      players = game.Players.Select(p => new PlayerDTO(p)).ToArray();
+      players = game.Players.OrderBy(p => p.CreationDate).Select(player => new PlayerDTO(player)).ToArray();
     }
     public int id { get; set; }
     public string hostId { get; set; }