Minor cleanup and notes

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

@@ -18,14 +18,14 @@ const GameSummary = () => {
   const players = usePlayers();
   const linkedGame = useLinkedGame();
 
-  // set up the summary URL
-  const summaryURL = new URL(window.location.href);
-  summaryURL.searchParams.append("summary", gameId);
-
   if (!players || !coords) {
     return <Loading />;
   }
 
+  // set up the summary URL
+  const summaryURL = new URL(window.location.href);
+  summaryURL.searchParams.append("summary", gameId);
+
   return (
     <div className={styles.page}>
       <div className={styles.top}>

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

@@ -4,7 +4,7 @@ import styles from "./ScoreBoard.module.css";
 // since everyone wants to use giant names...
 const nameLineWidthGuess = 25;
 
-const PlayerScoreTile = ({ name, guesses, totalScore, winner }) => (
+export const PlayerScoreTile = ({ name, guesses, totalScore, winner }) => (
   <div className={styles.tile}>
     <div className={styles.header}>
       <span
@@ -48,6 +48,7 @@ const ScoreBoard = ({ players }) => (
       .map(({ name, guesses, totalScore, winner }, i) => (
         <PlayerScoreTile
           key={name}
+          // TODO gracefully handle ties...
           winner={i === 0}
           {...{ name, guesses, totalScore, winner }}
         />

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

@@ -1,12 +1,12 @@
 import { useEffect, useRef, useState } from "react";
 import flagLookup from "../../../../domain/flagLookup";
-import useMap from "../../../../hooks/useMap";
 import { useGameConfig } from "../../../../hooks/useGameInfo";
+import useMap from "../../../../hooks/useMap";
+import useMapBounds from "../../../../hooks/useMapBounds";
 import useMarkersFromGuesses from "../../../../hooks/useMarkersFromGuesses";
 import styles from "./SummaryMap.module.css";
-import useMapBounds from "../../../../hooks/useMapBounds";
 
-const RoundSelect = ({ rounds, coords, selected, onSelect }) => (
+export const RoundSelect = ({ rounds, coords, selected, onSelect }) => (
   <div className={styles.tabs}>
     {
       // fun fact: es6 doesn't have a range(x) function
@@ -70,6 +70,7 @@ const SummaryMap = ({ players, coords }) => {
   // scroll the map to the target point
   useEffect(() => {
     if (mapRef.current) {
+      // TODO maybe pack this up with setRoundNum and pass as onSelect
       mapRef.current.panTo(targetPoint ?? { lat: 0, lng: 0 });
     }
   }, [mapRef, targetPoint]);