What if the summary screen... was really good?

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

@@ -1,12 +1,12 @@
 import flagLookup from '../../../../domain/flagLookup';
 import styles from './ScoreBoard.module.css';
 
-// TODO redesign this
-
-const PlayerScoreTile = ({ name, guesses, totalScore }) => (
+const PlayerScoreTile = ({ name, guesses, totalScore, winner }) => (
   <div className={styles.tile}>
-    <span className={styles.name}>{name}</span>
-    <span className={styles.total}>Score: {totalScore}</span>
+    <div className={styles.header}>
+      <span className={styles.name}>{name}</span>
+      <span className={styles.total}>{winner && '🏆'} {totalScore}</span>
+    </div>
     <div className={styles.scores}>
       {Object.entries(guesses)
         .map(([ k, v ]) => [ parseInt(k), v ])
@@ -14,9 +14,10 @@ const PlayerScoreTile = ({ name, guesses, totalScore }) => (
         .map(
           ([ num, { score, country } ]) =>
             score !== undefined ? (
-              <span key={num}>
-                {num}: {score ?? 0} - { flagLookup(country) }
-              </span>
+              <div className={styles.round} key={num}>
+                <span className={styles.score}>Round {num}: {score ?? 0}</span>
+                <span className={styles.flag}>{ flagLookup(country) }</span>
+              </div>
             ) : null
         )}
     </div>
@@ -28,7 +29,7 @@ const ScoreBoard = ({ players }) => (
     {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} />)}
+      .map((data, i) => <PlayerScoreTile key={data.name} winner={i === 0} {...data} />)}
   </div>
 );
 

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

@@ -2,7 +2,7 @@
   flex: 2;
   display: flex;
   flex-flow: row wrap;
-  justify-content: space-evenly;
+  justify-content: space-between;
   align-items: flex-start;
   align-content: space-around;
   max-width: 80%;
@@ -15,25 +15,61 @@
   flex-flow: column nowrap;
   justify-content: flex-start;
   align-items: center;
-  min-width: 10em;
+  min-width: 12em;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.header {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  border-bottom: 2px solid #eee;
 }
 
 .name {
   font-size: 1.4em;
   font-weight: 800;
+  padding-left: .1em;
+  max-width: 65%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .total {
   font-size: 1.1em;
   margin-left: .5em;
+  padding-right: .1em;
+  text-align: right;
 }
 
 .scores {
+  width: 100%;
+  align-self: flex-start;
   display: flex;
   flex-flow: column nowrap;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: flex-start;
-  margin-bottom: 20%;
-  margin-left: 1em;
   list-style: none;
+}
+
+.round {
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding-top: 1px;
+  padding-bottom: 3px;
+}
+
+.score {
+  padding-left: 1em;
+}
+
+.flag {
+  padding-right: 1em;
 }