Making join link appear before you set a name

README.md

@@ -94,7 +94,6 @@ POST /game/{ID}/guesses/{round}
 - Re-join a game you did not finish
 - Optimize docker file or set up compose structure
 - Override google controls in streetview, make custom divs
-- Join link should appear before you log in
 - Ivan's idea of launching a new lobby right from the end screen and updating all the other viewers
     - Add a "next game" field to game in db
     - Embed the game creation form in the summary page

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

@@ -2,11 +2,7 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import Button from "../../util/Button";
 import Loading from "../../util/Loading";
-import { dispatch, useGameId, usePlayerName } from "../../../domain/gameStore";
-
-const Label = styled.span`
-  padding: 0.2em;
-`
+import { dispatch, usePlayerName } from "../../../domain/gameStore";
 
 const FormInput = styled.input`
   border-radius: 0px;
@@ -14,16 +10,20 @@ const FormInput = styled.input`
   background-color: #181a1b;
   color: #eee;
   padding: 0.5em;
+  margin-left: 2em;
+  margin-right: 2em;
+  height: 100%;
 `
 
-const FormButton = styled(Button)`
-  padding: 1em;
-  margin: 0.2em;
-  margin-top: 0.3em;
+const NameInputGroup = styled.div`
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1em;
 `
 
 const JoinForm = () => {
-  const gameId = useGameId();
   const playerName = usePlayerName();
   const [loading, setLoading] = useState(false);
   const [failed, setFailed] = useState(false);
@@ -49,16 +49,17 @@ const JoinForm = () => {
 
   return (
     <>
-      {failed && <Label>Failed to join the game! Maybe try a different name?</Label>}
-      <Label>Joining {gameId}...</Label>
-      <Label>Player Name</Label>
-      <FormInput
-        type="text" 
-        value={playerName || ""} 
-        onChange={({ target }) => dispatch.setPlayerName(target.value)} 
-        onKeyDown={({ key }) => { if (key === "Enter") { onJoinGame() }}}
-      />
-      <FormButton onClick={onJoinGame} disabled={cannotJoinGame}>Join Game</FormButton>
+      {failed && "Failed to join the game! Maybe try a different name?"}
+      <NameInputGroup>
+        Enter your name to join:
+        <FormInput
+          type="text"
+          value={playerName || ""} 
+          onChange={({ target }) => dispatch.setPlayerName(target.value)}
+          onKeyDown={({ key }) => { if (key === "Enter") { onJoinGame() }}}
+        />
+        <Button onClick={onJoinGame} disabled={cannotJoinGame}>Join Game</Button>
+      </NameInputGroup>
     </>
   );
 };

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

@@ -2,7 +2,8 @@ import React from "react";
 import styled from "styled-components";
 import LobbyPlayerList from "./LobbyPlayerList";
 import HeaderAndFooter from "../../util/HeaderAndFooter";
-import { useGameJoined } from "../../../domain/gameStore";
+import ClickToCopy from "../../util/ClickToCopy";
+import { useGameJoined, useGameId } from "../../../domain/gameStore";
 import JoinForm from "./JoinForm";
 import LobbyInfo from "./LobbyInfo";
 
@@ -24,7 +25,18 @@ const PageContainer = styled.div`
   align-items: flex-start;
 `
 
+const Label = styled.span`
+  padding: 0.2em;
+`
+
+const getUrl = gameId => {
+  const u = new URL(window.location.href);
+  u.searchParams.append("join", gameId);
+  return u.href;
+}
+
 const Lobby = ({ onStart }) => {
+  const gameId = useGameId();
   const joined = useGameJoined();
 
   return (
@@ -36,6 +48,8 @@ const Lobby = ({ onStart }) => {
               ? <LobbyInfo onStart={onStart}/>
               : <JoinForm />
           }
+          <Label>Use this link to invite other players:</Label>
+          <Label><ClickToCopy text={getUrl(gameId)} /></Label>
         </InfoContainer>
         <LobbyPlayerList/>
       </PageContainer>

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

@@ -1,8 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import ClickToCopy from "../../util/ClickToCopy";
 import DelayedButton from "../../util/DelayedButton";
-import { dispatch, useGameId, usePlayerName } from "../../../domain/gameStore";
+import { dispatch, usePlayerName } from "../../../domain/gameStore";
 
 const Label = styled.span`
   padding: 0.2em;
@@ -14,21 +13,12 @@ const StyledDelayButton = styled(DelayedButton)`
   margin-top: 0.3em;
 `
 
-const getUrl = gameId => {
-  const u = new URL(window.location.href);
-  u.searchParams.append("join", gameId);
-  return u.href;
-}
-
 const LobbyInfo = () => {
-  const gameId = useGameId();
   const playerName = usePlayerName();
 
   return (
     <>
       <Label>Playing as {playerName}</Label>
-      <Label>Use this link to invite other players:</Label>
-      <Label><ClickToCopy text={getUrl(gameId)} /></Label>
       <StyledDelayButton 
         onEnd={dispatch.startRound} 
         countDownFormatter={rem => `Click to cancel, ${rem}s...`}