Slightly better end screen

ui/src/App.js

@@ -38,7 +38,7 @@ class Game extends React.Component {
   async handleCreateGame() {
     this.setState({ gameState: LOADING });
     const { playerName } = this.state;
-    const gameId = await createGame(playerName, 30);
+    const gameId = await createGame(playerName, 300);
     this.setState({ gameState: PRE_ROUND, gameId });
   }
 

ui/src/components/player-scores.component.jsx

@@ -2,15 +2,32 @@ import React from 'react';
 
 // TODO render this as a nice score page
 
-const PlayerScores = ({ players, onReturnToStart }) => (
-  <div>
-    <p>Previous Game:</p>
-    <p>{JSON.stringify(players)}</p>
-    <button
-      onClick={onReturnToStart}>
-      Return to Start
-    </button>
-  </div>
-);
+const PlayerScores = ({ players, onReturnToStart }) => {
+  const elems = players
+    .filter(({ currentRound }) => currentRound === null)
+    .sort((p1, p2) => p1.totalScore > p2.totalScore ? 1 : (p1.totalScore < p2.totalScore ? -1 : 0))
+    .map(({ name, guesses, totalScore }) => (
+      <div>
+        <p>{name}</p>
+        <p>Score: {totalScore}</p>
+        <p>1: {guesses["1"] && guesses["1"].score}</p>
+        <p>2: {guesses["2"] && guesses["2"].score}</p>
+        <p>3: {guesses["3"] && guesses["3"].score}</p>
+        <p>4: {guesses["4"] && guesses["4"].score}</p>
+        <p>5: {guesses["5"] && guesses["5"].score}</p>
+        <hr/>
+      </div>
+    ));
+  return (
+    <div>
+      <p>Previous Game:</p>
+      {elems}
+      <button
+        onClick={onReturnToStart}>
+        Return to Start
+      </button>
+    </div>
+  );
+}
 
 export default PlayerScores;