Refactoring Lobby component a little

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

@@ -1,80 +1,66 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-import ms from "pretty-ms";
-import LobbyPlayerList from "./LobbyPlayerList";
-import ClickToCopy from "../../util/ClickToCopy";
-import { useGameId } from "../../../domain/gameStore";
-import JoinForm from "./JoinForm";
-import StartGame from "./StartGame";
-import { useGameConfig, usePlayers } from "../../../hooks/useGameInfo";
-import Loading from "../../util/Loading";
+import ms from 'pretty-ms';
+import React, { useState } from 'react';
+import { useGameId } from '../../../domain/gameStore';
+import { useGameConfig, usePlayers } from '../../../hooks/useGameInfo';
+import ClickToCopy from '../../util/ClickToCopy';
+import Loading from '../../util/Loading';
+import JoinForm from './JoinForm';
+import styles from './Lobby.module.css';
+import StartGame from './StartGame';
 
-const InfoContainer = styled.div`
-  flex: 3;
-  align-self: center;
-
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-around;
-  align-items: center;
-  height: 100%;
-`
-
-const FormContainer = styled.div`
-  flex: 1;
-
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-`
+const GameInfo = () => {
+  const { rounds, timer, onlyAmerica } = useGameConfig();
 
-const PageContainer = styled.div`
-  flex: 1;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-  align-items: flex-start;
-`
+  if (!rounds || !timer) {
+    return <Loading />
+  }
 
-const Label = styled.span`
-  padding: 1em;
-  text-align: center;
-`
+  return (
+    <>
+      <span className={styles.label}>
+        Game will run for {rounds} round{rounds !== 1 && 's, each'} with a {ms(timer * 1000)} time limit
+      </span>
+      {onlyAmerica && (
+        <span className={styles.label}>This game will only use locations within the United States of America</span>
+      )}
+    </>
+  );
+}
 
-const getUrl = gameId => {
+const getUrl = (gameId) => {
   const u = new URL(window.location.href);
-  u.searchParams.append("join", gameId);
+  u.searchParams.append('join', gameId);
   return u.href;
-}
+};
 
-const Lobby = ({ onStart }) => {
+const PlayerList = ({ playerNames }) => (
+  <div className={styles.players}>
+    <span>Players</span>
+    <ul>{playerNames.map((name) => <li key={name}>{name}</li>)}</ul>
+  </div>
+);
+
+export default ({ onStart }) => {
   const gameId = useGameId();
   const players = usePlayers();
-  const { rounds, timer, onlyAmerica } = useGameConfig();
-  const [joined, setJoined] = useState(false);
+  const [ joined, setJoined ] = useState(false);
 
-  if (!players || !rounds || !timer) {
-    return <Loading/>
+  if (!players) {
+    return <Loading />;
   }
 
   return (
-    <PageContainer>
-      <InfoContainer>
-        <Label>Game will run for {rounds} round{rounds !== 1 && "s, each"} with a {ms(timer * 1000)} time limit</Label>
-        {onlyAmerica && <Label>This game will only use locations within the United States of America</Label>}
-        <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) ?? []} />
-    </PageContainer>
-  )
+    <div className={styles.page}>
+      <div className={styles.info}>
+        <GameInfo />
+        <div className={styles.form}>
+          {joined ? <StartGame onStart={onStart} /> : <JoinForm onJoined={() => setJoined(true)} />}
+        </div>
+        <span className={styles.label}>
+          <ClickToCopy text={getUrl(gameId)}>Click here to copy an invite link!</ClickToCopy>
+        </span>
+      </div>
+      <PlayerList playerNames={players?.map(({ name }) => name) ?? []} />
+    </div>
+  );
 };
-
-export default Lobby;

client/src/components/screens/Lobby/Lobby.module.css

@@ -0,0 +1,45 @@
+.page {
+  flex: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.info {
+  flex: 3;
+  align-self: center;
+
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-around;
+  align-items: center;
+  height: 100%;
+}
+
+.form {
+  flex: 1;
+
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.label {
+  padding: 1em;
+  text-align: center;
+}
+
+.players {
+  flex: 1;
+  
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+
+  border-left: 2px solid #777;
+  height: 100%;
+  padding-left: 1rem;
+}

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

@@ -1,37 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-const PlayerListContainer = styled.div`
-  flex: 1;
-  
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-
-  border-left: 2px solid #777;
-  height: 100%;
-  padding-left: 1rem;
-`
-
-const Label = styled.span`
-  padding: 0.2em;
-`
-
-const PlayerList = styled.ul`
-`
-
-const PlayerName = styled.li`
-`
-
-export default ({ playerNames }) => (
-  <PlayerListContainer>
-    <Label>Players</Label>
-    <PlayerList>
-      {
-        playerNames
-          .map(name => <PlayerName key={name}>{name}</PlayerName>)
-      }
-    </PlayerList>
-  </PlayerListContainer>
-);