Move ScoreBoard component into PlayerScores

client/src/components/screens/PlayerScores/PlayerScores.jsx

@@ -5,9 +5,18 @@ import ClickToCopy from '../../util/ClickToCopy';
 import Loading from '../../util/Loading';
 import LinkedGame from './LinkedGame';
 import styles from './PlayerScores.module.css';
-import ScoreBoard from './ScoreBoard';
+import PlayerScoreTile from './PlayerScoreTile';
 import SummaryMap from './SummaryMap';
 
+const ScoreBoard = ({ players }) => (
+  <div className={styles.scoreboard}>
+    {players
+      .filter(({ currentRound }) => currentRound === null)
+      .sort((p1, p2) => (p1.totalScore > p2.totalScore ? -1 : p1.totalScore < p2.totalScore ? 1 : 0))
+      .map((data) => <PlayerScoreTile key={data.name} {...data} />)}
+  </div>
+);
+
 export default () => {
   // poll the game state
   const gameId = useGameId();

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

@@ -32,6 +32,17 @@
   margin-bottom: 1em;
 }
 
+.scoreboard {
+  flex: 2;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  align-items: flex-start;
+  align-content: space-around;
+  max-width: 80%;
+  margin-top: 2em;
+}
+
 .tile {
   flex: 1;
   display: flex;

client/src/components/screens/PlayerScores/ScoreBoard.jsx

@@ -1,25 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import PlayerScoreTile from "./PlayerScoreTile";
-
-const ScoreBoardContainer = styled.div`
-  flex: 2;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-evenly;
-  align-items: flex-start;
-  align-content: space-around;
-  max-width: 80%;
-  margin-top: 2em;
-`
-
-export default ({ players }) => (
-  <ScoreBoardContainer>
-    {
-      players
-        .filter(({ currentRound }) => currentRound === null)
-        .sort((p1, p2) => p1.totalScore > p2.totalScore ? -1 : (p1.totalScore < p2.totalScore ? 1 : 0))
-        .map((data) => <PlayerScoreTile key={data.name} {...data} />)
-    }
-  </ScoreBoardContainer>
-);