added rudimentary lobby status indicator

components/molecules/LobbyStatus.tsx

@@ -0,0 +1,20 @@
+import { Card } from "@zeit-ui/react";
+import { JellyfishSpinner } from "react-spinners-kit";
+import { ClientGame } from "../../types/types";
+
+const LobbyStatus = ({ selectedGame }: LobbyStatusProps): JSX.Element => (
+    <Card>
+        <JellyfishSpinner />
+        <span>
+            {selectedGame
+                ? selectedGame.name + " selected! Waiting for host to start..."
+                : "Waiting for host to select a game..."}
+        </span>
+    </Card>
+);
+
+type LobbyStatusProps = {
+    selectedGame: ClientGame;
+};
+
+export default LobbyStatus;

components/organisms/Lobby.tsx → components/organisms/LobbyScreen.tsx

@@ -5,14 +5,13 @@ import { Spacer } from "@zeit-ui/react";
 import GameSelector from "./GameSelector";
 import { Player, ClientGameLibrary } from "../../types/types";
 import { useState } from "react";
-import NameBox from "../atoms/NameBox";
-import GameDetailBox from "../atoms/GameDetailBox";
+import LobbyStatus from "../molecules/LobbyStatus";
 
 const Lobby = ({
     playerList,
     gameLibrary,
     onSelectGame,
-    selectedGame,
+    selectedGameId,
     onStartGame,
     resetName,
     meId,
@@ -32,18 +31,11 @@ const Lobby = ({
             ) : (
                 <>
                     <Spacer y={1.25} />
-                    {selectedGame ? (
-                        <GameDetailBox
-                            game={gameLibrary.gameList.find(
-                                ({ id }) => id === selectedGame
-                            )}
-                            allCategories={gameLibrary.categories}
-                            readyToPlay={true}
-                            showOnlyHostMessage={false}
-                        />
-                    ) : (
-                        <NameBox name="No Game Selected" />
-                    )}
+                    <LobbyStatus
+                        selectedGame={gameLibrary.gameList.find(
+                            ({ id }) => id === selectedGameId
+                        )}
+                    />
                     <Spacer y={1} />
                     <ButtonGroup>
                         <PrimaryButton
@@ -53,7 +45,7 @@ const Lobby = ({
                             View games
                         </PrimaryButton>
                         <PrimaryButton
-                            disabled={!selectedGame || !isHost}
+                            disabled={!selectedGameId || !isHost}
                             onClick={onStartGame}
                             size="large"
                             type="error"
@@ -81,7 +73,7 @@ type LobbyProps = {
     playerList: Array<Player>;
     gameLibrary: ClientGameLibrary;
     onSelectGame: (gameId: string) => void;
-    selectedGame: string;
+    selectedGameId: string;
     onStartGame: () => void;
     resetName: () => void;
     meId: number;

components/templates/GameLayout.tsx

@@ -10,7 +10,7 @@ import PlayerList from "../molecules/PlayerList";
 const GameLayout = ({
     gameState,
     path,
-    selectedGame,
+    selectedGameId,
     onExitGame,
     onStartGame,
     onHostGameLoaded,
@@ -24,7 +24,7 @@ const GameLayout = ({
     } = gameState;
 
     const { renameParams } = gameLibrary.gameList.find(
-        ({ id }) => id == selectedGame
+        ({ id }) => id == selectedGameId
     );
 
     const { name, isHost } = thisPlayer;
@@ -245,7 +245,7 @@ const GameLayout = ({
 
 type GameLayoutProps = {
     gameState: GameState;
-    selectedGame: string;
+    selectedGameId: string;
     path: string;
     onExitGame: () => void;
     onStartGame: () => void;

package.json

@@ -41,6 +41,7 @@
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-ga": "^3.1.2",
+        "react-spinners-kit": "^1.9.1",
         "socket.io": "^2.3.0",
         "ws": "^7.3.1"
     },