Minor style fixes

app/src/games/game.ts

@@ -3,10 +3,10 @@ import { Player } from 'src/players/player';
 export class Game {
   gameId: string;
   gameCode: string;
-  players: Set<Player>;
+  players: Player[];
   constructor(gameId: string, gameCode: string, player: Player) {
     this.gameId = gameId;
     this.gameCode = gameCode;
-    this.players = new Set([player]);
+    this.players = [player];
   }
 }

web/src/App.scss

@@ -1,3 +1,9 @@
 @use "node_modules/@picocss/pico/scss/pico" with (
     $theme-color: "pumpkin"
 );
+
+#root, #app {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+}

web/src/App.tsx

@@ -8,7 +8,7 @@ export interface AppProps {
 
 const App = (props: AppProps) => {
   return (
-    <div className="app">
+    <div id="app">
       <LandingPage {...props} />
     </div>
   );

web/src/pages/landing/LandingPage.scss

@@ -1,12 +1,16 @@
-body {
+.landing-page {
+    height: 100%;
+    width: 100%;
+    padding: 2%;
     margin: 0 auto;
     text-align: center;
+
     background: linear-gradient(-45deg, #03444a, #00a8a8, #f1bc52, #ff8f4b);
     background-size: 400% 400%;
     animation: gradient 15s ease infinite;
     height: 100vh;
-}
+
-@keyframes gradient {
+    @keyframes gradient {
         0% {
             background-position: 0% 50%;
         }
@@ -17,13 +21,20 @@ body {
             background-position: 0% 50%;
         }
     }
-div {
+
-    padding: 2%;
+    .landing-page-body {
-}
-button {
-    font-size: 1rem;
-}
-#body-format {
         margin: auto;
-    max-width: 20%;
+        width: 20%;
+        min-width: 300px;
+    }
+
+    > div {
+        padding: 2%;
+    }
+
+    button {
+        font-size: 1rem;
+        width: 70%;
+        margin-bottom: var(--pico-spacing)
+    }
 }

web/src/pages/landing/LandingPage.tsx

@@ -25,12 +25,12 @@ const LandingPage = (props: LandingPageProps) => {
     (joinLobbyPayload.lobbyId = event.target.value);
 
   return (
-    <React.Fragment>
+    <div className="landing-page">
-      <div className="landing-page-title" id="landing-page-title">
+      <div>
         <h1>Trains And Roads</h1>
       </div>
-      <div id="body-format">
+      <div className="landing-page-body">
-        <div className="user-name-input" id="user-name-input">
+        <div>
           <input
             placeholder="Enter username"
             onChange={registerUsername}
@@ -39,21 +39,20 @@ const LandingPage = (props: LandingPageProps) => {
             Create Lobby
           </button>
         </div>
-        <div className="join-lobby" id="join-lobby">
+        <div>
           <input
-            className="lobby-id-input"
             placeholder="Enter Lobby Id"
             onChange={registerLobbyId}
           ></input>
           <button
-            className="join-lobby-button secondary"
+            className="secondary"
             onClick={() => handleJoinLobby(socket, joinLobbyPayload)}
           >
             Join Lobby
           </button>
         </div>
       </div>
-    </React.Fragment>
+    </div>
   );
 };
 export default LandingPage;