Put flags on the summary page

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

@@ -1,6 +1,7 @@
+import flagLookup from '../../../../domain/flagLookup';
 import styles from './ScoreBoard.module.css';
 
-// TODO rewrite this to be cleaner, include flags for each round and guess
+// TODO redesign this
 
 const PlayerScoreTile = ({ name, guesses, totalScore }) => (
   <div className={styles.tile}>
@@ -11,10 +12,10 @@ const PlayerScoreTile = ({ name, guesses, totalScore }) => (
         .map(([ k, v ]) => [ parseInt(k), v ])
         .sort(([ k1 ], [ k2 ]) => (k1 < k2 ? -1 : k1 > k2 ? 1 : 0))
         .map(
-          ([ num, { score } ]) =>
+          ([ num, { score, country } ]) =>
             score !== undefined ? (
               <span key={num}>
-                {num}: {score ?? 0}
+                {num}: {score ?? 0} - { flagLookup(country) }
               </span>
             ) : null
         )}

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

@@ -1,9 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
+import flagLookup from '../../../../domain/flagLookup';
 import useMap from '../../../../hooks/useMap';
 import useMarkersFromGuesses from '../../../../hooks/useMarkersFromGuesses';
 import styles from './SummaryMap.module.css';
 
-const RoundSelect = ({ rounds, selected, onSelect }) => (
+const RoundSelect = ({ rounds, coords, selected, onSelect }) => (
   <div className={styles.tabs}>
     {// fun fact: es6 doesn't have a range(x) function
     Array.from(Array(rounds).keys()).map((r) => (r + 1).toString()).map((r) => (
@@ -12,7 +13,7 @@ const RoundSelect = ({ rounds, selected, onSelect }) => (
         key={r}
         onClick={() => onSelect(r)}
       >
-        {r}
+        { r } - { flagLookup(coords[r].country) }
       </div>
     ))}
     <div className={styles.tab} onClick={() => onSelect('0')}>
@@ -50,7 +51,7 @@ const SummaryMap = ({ players, coords }) => {
   return (
     <div className={styles.container}>
       <div className={styles.map} ref={mapDivRef} />
-      {singleRound || <RoundSelect rounds={rounds} selected={roundNum} onSelect={setRoundNum} />}
+      {singleRound || <RoundSelect rounds={rounds} coords={coords} selected={roundNum} onSelect={setRoundNum} />}
     </div>
   );
 };

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

@@ -24,7 +24,7 @@
 .tab {
   background-color: #555;
   height: 2em;
-  width: 2em;
+  width: 4em;
   margin-top: 1px;
   margin-bottom: 2px;
   border-radius: 0% 20% 20% 0%;