Turned ScoreBoard into its own submodule of the summary screen

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

@@ -5,18 +5,9 @@ import ClickToCopy from '../../util/ClickToCopy';
 import Loading from '../../util/Loading';
 import LinkedGame from './LinkedGame';
 import styles from './PlayerScores.module.css';
-import PlayerScoreTile from './PlayerScoreTile';
+import ScoreBoard from './ScoreBoard';
 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,43 +32,3 @@
   margin-top: 1em;
   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;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  min-width: 10em;
-}
-
-.name {
-  font-size: 1.4em;
-  font-weight: 800;
-}
-
-.total {
-  font-size: 1.1em;
-  margin-left: .5em;
-}
-
-.scores {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: flex-start;
-  margin-bottom: 20%;
-  margin-left: 1em;
-  list-style: none;
-}

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import styles from './PlayerScores.module.css';
+import styles from './ScoreBoard.module.css';
 
-export default ({ name, guesses, totalScore }) => (
+const PlayerScoreTile = ({ name, guesses, totalScore }) => (
   <div className={styles.tile}>
     <span className={styles.name}>{name}</span>
     <span className={styles.total}>Score: {totalScore}</span>
@@ -20,3 +20,12 @@ export default ({ name, guesses, totalScore }) => (
     </div>
   </div>
 );
+
+export default ({ 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>
+);

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

@@ -0,0 +1,39 @@
+.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;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  min-width: 10em;
+}
+
+.name {
+  font-size: 1.4em;
+  font-weight: 800;
+}
+
+.total {
+  font-size: 1.1em;
+  margin-left: .5em;
+}
+
+.scores {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  margin-bottom: 20%;
+  margin-left: 1em;
+  list-style: none;
+}

client/src/components/screens/PlayerScores/ScoreBoard/index.js

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