Moving shared logic back into the useMarkers hook

client/src/components/screens/PlayerScores/PlayerScores.jsx

@@ -90,17 +90,13 @@ const SummaryMap = ({ players, coords, roundActive }) => {
   const mapDivRef = useRef(null);
   const mapRef = useMap(mapDivRef, 0, 0, 1);
 
-  console.log("SummaryMap render");
-
-  // get just the relevant players to put on the map
-  // TODO this can probably go back to being shared code...
-  const playersFiltered = players
-    ?.filter(({ guesses }) => guesses[roundActive] && guesses[roundActive].score !== null)
-    ?.map(({ name, totalScore, guesses }) => ({ name, totalScore, guess: guesses[roundActive] }));
+  // get the target point
   const targetPoint = coords?.[roundActive] ?? null;
 
-  useMarkersFromGuesses(mapRef, playersFiltered, targetPoint);
+  // put the markers on the map
+  useMarkersFromGuesses(mapRef, players, roundActive, targetPoint);
 
+  // scroll the map to the target point
   useEffect(() => {
     if (targetPoint && mapRef.current) {
       mapRef.current.panTo(targetPoint);

client/src/components/screens/RoundSummary/RoundSummary.jsx

@@ -37,13 +37,10 @@ export default () => {
   const mapRef = useMap(mapDivRef, targetPoint.lat, targetPoint.lng, 4);
 
   // live update with all the scores
-  const players = useGameInfo()
-    ?.players
-    ?.filter(({ guesses }) => guesses[roundNum] && guesses[roundNum].score !== null)
-    ?.map(({ name, totalScore, guesses }) => ({ name, totalScore, guess: guesses[roundNum] }));
+  const players = useGameInfo()?.players;
 
   // add the player guess markers
-  useMarkersFromGuesses(mapRef, players, targetPoint);
+  useMarkersFromGuesses(mapRef, players, roundNum, targetPoint);
 
   // let the current player click the map to see a possible score
   useClickToCheckScore(mapRef, targetPoint);

client/src/hooks/useMarkersFromGuesses.jsx

@@ -4,7 +4,7 @@ import { makeQuestionMarker, makeFlagMarker, makeLine } from "../components/scre
 import getColorGenerator from "../components/screens/RoundSummary/getColorGenerator";
 import { useRef } from "react";
 
-export default (mapRef, players, targetPoint) => {
+export default (mapRef, playersRaw, roundNum, targetPoint) => {
   // set up the flag at the target point
   useEffect(() => {
     if (targetPoint === null) {
@@ -14,6 +14,11 @@ export default (mapRef, players, targetPoint) => {
     return () => targetMarker.setMap(null);
   }, [mapRef, targetPoint]);
 
+  // get just the relevant players to put on the map
+  const players = playersRaw
+    ?.filter(({ guesses }) => guesses[roundNum] && guesses[roundNum].score !== null)
+    ?.map(({ name, totalScore, guesses }) => ({ name, totalScore, guess: guesses[roundNum] }));
+
   // get the current player's name
   const playerName = usePlayerName();