Removing the gameJoined shared state and fixing some more layout issues in the lobby

client/src/components/screens/Lobby/JoinForm.jsx

@@ -31,7 +31,7 @@ const ErrMsg = styled.div`
   text-align: center;
 `
 
-const JoinForm = () => {
+export default ({ onJoined }) => {
   const playerName = usePlayerName();
   const [loading, setLoading] = useState(false);
   const [failed, setFailed] = useState(false);
@@ -48,11 +48,12 @@ const JoinForm = () => {
       setLoading(false);
       return;
     }
+    onJoined();
   };
   const cannotJoinGame = loading || !playerName || playerName.length === 0;
 
   return (
-    <div>
+    <>
       <NameInputGroup>
         Enter your name to join:
         <FormInput
@@ -64,8 +65,6 @@ const JoinForm = () => {
         <Button onClick={onJoinGame} disabled={cannotJoinGame}>Join Game</Button>
       </NameInputGroup>
       <ErrMsg>{failed ? "Failed to join the game! Maybe try a different name?" : ""}</ErrMsg>
-    </div>
+    </>
   );
 };
-
-export default JoinForm;

client/src/components/screens/Lobby/Lobby.jsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import ms from "pretty-ms";
 import LobbyPlayerList from "./LobbyPlayerList";
 import HeaderAndFooter from "../../util/HeaderAndFooter";
 import ClickToCopy from "../../util/ClickToCopy";
-import { useGameJoined, useGameId } from "../../../domain/gameStore";
+import { useGameId } from "../../../domain/gameStore";
 import JoinForm from "./JoinForm";
 import StartGame from "./StartGame";
 import useGameInfo from "../../../hooks/useGameInfo";
@@ -21,6 +21,14 @@ const InfoContainer = styled.div`
   height: 100%;
 `
 
+const FormContainer = styled.div`
+  flex: 1;
+
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+`
+
 const PageContainer = styled.div`
   flex: 1;
   display: flex;
@@ -42,8 +50,8 @@ const getUrl = gameId => {
 
 const Lobby = ({ onStart }) => {
   const gameId = useGameId();
-  const joined = useGameJoined();
   const { players, rounds, timer } = useGameInfo();
+  const [joined, setJoined] = useState(false);
 
   if (!players || !rounds || !timer) {
     return <Loading/>
@@ -54,11 +62,13 @@ const Lobby = ({ onStart }) => {
       <PageContainer>
         <InfoContainer>
           <Label>Game will run for {rounds} rounds, each with a {ms(timer * 1000)} time limit</Label>
-          {
-            joined
-              ? <StartGame onStart={onStart}/>
-              : <JoinForm />
-          }
+          <FormContainer>
+            {
+              joined
+                ? <StartGame onStart={onStart}/>
+                : <JoinForm onJoined={() => setJoined(true)}/>
+            }
+          </FormContainer>
           <Label><ClickToCopy text={getUrl(gameId)}>Click here to copy an invite link!</ClickToCopy></Label>
         </InfoContainer>
         <LobbyPlayerList playerNames={players?.map(({ name }) => name) ?? []} />

client/src/domain/gameStore.js

@@ -7,7 +7,6 @@ export const [
     useGameId,
     usePlayerName,
     useLastRound,
-    useGameJoined,
     usePlayerId,
     useGameState,
   },
@@ -24,14 +23,12 @@ export const [
     score: -1,
     totalScore: -1,
   },
-  gameJoined: false,
   playerId: null,
   gameState: PRE_GAME,
 }, {
   setPlayerName: ([set], playerName) => set({ playerName }),
   goToLobby: ([set], gameId) => set({ 
     gameId, 
-    gameJoined: false,
     playerId: null,
     gameState: PRE_ROUND,
   }),
@@ -39,7 +36,7 @@ export const [
     const gameId = get.gameId();
     const name = get.playerName();
     const { playerId } = await joinGame(gameId, name);
-    set({ gameJoined: true, playerId });
+    set({ playerId });
   },
   startRound: ([set]) => set({ gameState: IN_ROUND }),
   submitGuess: async ([set, get], selectedPoint, roundNum, targetPoint) => {
@@ -64,7 +61,6 @@ export const [
     gameState: POST_GAME,
   }),
   resetGame: ([set]) => set({
-    gameJoined: false,
     playerId: null,
     gameState: PRE_GAME,
   }),