Improving player scoreboard

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

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