Moving the player list to a separate file

client/src/components/screens/PreGame/PreGame.jsx

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import Loading from "../../util/Loading";
 import PlayerNameInput from "./../../util/PlayerNameInput";
-import NewGameInput from "./NewGameInput"
 import { createGame } from "../../../domain/GGSHService";
+import NewGameInput from "./NewGameInput"
 
 const Container = styled.div`
   display: flex;

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

@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+import usePlayerScores from "../../../hooks/usePlayerScores";
+
+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`
+`
+
+const LobbyPlayerList = ({ gameId }) => (
+  <PlayerListContainer>
+    <Label>Players</Label>
+    <PlayerList>
+      {
+        usePlayerScores(gameId)?.map(({ name }) => (
+          <PlayerName key={name}>{name}</PlayerName>
+        ))
+      }
+    </PlayerList>
+  </PlayerListContainer>
+);
+
+export default LobbyPlayerList;

client/src/components/screens/PreRound.jsx → client/src/components/screens/PreRound/PreRound.jsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import ClickToCopy from "../util/ClickToCopy";
-import Button from "../util/Button";
-import Loading from "../util/Loading";
-import PlayerNameInput from "../util/PlayerNameInput";
-import usePlayerScores from "../../hooks/usePlayerScores";
-import { joinGame } from "../../domain/GGSHService";
+import ClickToCopy from "../../util/ClickToCopy";
+import Button from "../../util/Button";
+import Loading from "../../util/Loading";
+import PlayerNameInput from "../../util/PlayerNameInput";
+import LobbyPlayerList from "./LobbyPlayerList";
+import { joinGame } from "../../../domain/GGSHService";
 
 const InfoContainer = styled.div`
   flex: 3;
@@ -27,25 +27,6 @@ const FormButton = styled(Button)`
   margin-top: 0.3em;
 `
 
-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 PlayerList = styled.ul`
-`
-
-const PlayerName = styled.li`
-`
-
 const PageContainer = styled.div`
   flex: 1;
   display: flex;
@@ -63,8 +44,7 @@ const getUrl = gameId => {
 const JoinedInfo = ({ gameId, playerName, onStart }) => (
   <InfoContainer>
     <Label>Playing as {playerName}</Label>
-    <Label>Game Code: <ClickToCopy text={gameId} /></Label>
-    <Label>Or, send the following link:</Label>
+    <Label>Use this link to join:</Label>
     <Label><ClickToCopy text={getUrl(gameId)} /></Label>
     <FormButton onClick={onStart}>Start Game</FormButton>
   </InfoContainer>
@@ -112,16 +92,7 @@ const PreRound = ({ gameId, playerName, joined, onGameJoined, onStart }) => (
         ? <JoinedInfo gameId={gameId} playerName={playerName} onStart={onStart}/>
         : <UnjoinedInfo gameId={gameId} onGameJoined={onGameJoined}/>
     }
-    <PlayerListContainer>
-      <Label>Players</Label>
-      <PlayerList>
-        {
-          usePlayerScores(gameId)?.map(({ name }) => (
-            <PlayerName key={name}>{name}</PlayerName>
-          ))
-        }
-      </PlayerList>
-    </PlayerListContainer>
+    <LobbyPlayerList gameId={gameId} />
   </PageContainer>
 );
 

client/src/components/screens/PreRound/index.js

@@ -0,0 +1 @@
+export { default } from './PreRound';