Changing some layout and logic for the Lobby

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

@@ -1,11 +1,14 @@
 import React 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 JoinForm from "./JoinForm";
-import LobbyInfo from "./LobbyInfo";
+import StartGame from "./StartGame";
+import useGameInfo from "../../../hooks/useGameInfo";
+import Loading from "../../util/Loading";
 
 const InfoContainer = styled.div`
   flex: 3;
@@ -13,8 +16,9 @@ const InfoContainer = styled.div`
 
   display: flex;
   flex-flow: column nowrap;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
+  height: 100%;
 `
 
 const PageContainer = styled.div`
@@ -26,7 +30,8 @@ const PageContainer = styled.div`
 `
 
 const Label = styled.span`
-  padding: 0.2em;
+  padding: 1em;
+  text-align: center;
 `
 
 const getUrl = gameId => {
@@ -38,20 +43,25 @@ const getUrl = gameId => {
 const Lobby = ({ onStart }) => {
   const gameId = useGameId();
   const joined = useGameJoined();
+  const { players, rounds, timer } = useGameInfo();
+
+  if (!players || !rounds || !timer) {
+    return <Loading/>
+  }
 
   return (
     <HeaderAndFooter>
       <PageContainer>
         <InfoContainer>
+          <Label>Game will run for {rounds} rounds, each with a {ms(timer * 1000)} time limit</Label>
           {
             joined
-              ? <LobbyInfo onStart={onStart}/>
+              ? <StartGame onStart={onStart}/>
               : <JoinForm />
           }
-          <Label>Use this link to invite other players:</Label>
-          <Label><ClickToCopy text={getUrl(gameId)} /></Label>
+          <Label><ClickToCopy text={getUrl(gameId)}>Click here to copy an invite link!</ClickToCopy></Label>
         </InfoContainer>
-        <LobbyPlayerList/>
+        <LobbyPlayerList playerNames={players?.map(({ name }) => name) ?? []} />
       </PageContainer>
     </HeaderAndFooter>
   )

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

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import useGameInfo from "../../../hooks/useGameInfo";
 
 const PlayerListContainer = styled.div`
   flex: 1;
@@ -25,17 +24,14 @@ const PlayerList = styled.ul`
 const PlayerName = styled.li`
 `
 
-const LobbyPlayerList = () => (
+export default ({ playerNames }) => (
   <PlayerListContainer>
     <Label>Players</Label>
     <PlayerList>
       {
-        useGameInfo()?.players?.map(({ name }) => (
-          <PlayerName key={name}>{name}</PlayerName>
-        ))
+        playerNames
+          .map(name => <PlayerName key={name}>{name}</PlayerName>)
       }
     </PlayerList>
   </PlayerListContainer>
 );
-
-export default LobbyPlayerList;

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

@@ -13,7 +13,7 @@ const StyledDelayButton = styled(DelayedButton)`
   margin-top: 0.3em;
 `
 
-const LobbyInfo = () => {
+export default () => {
   const playerName = usePlayerName();
 
   return (
@@ -28,5 +28,3 @@ const LobbyInfo = () => {
     </>
   )
 };
-
-export default LobbyInfo;