Moved the react-related logic out of the color gen code

client/src/components/screens/RoundSummary/usePlayerColors.jsx → client/src/components/screens/RoundSummary/getColorGenerator.js

@@ -1,6 +1,3 @@
-import { useRef } from "react";
-import { usePlayerName } from "../../../domain/gameStore";
-
 // logic adapted from How to Generate Random Colors Programmatically by Martin Ankerl
 // https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
 const goldenRatioConj = 0.618033988749895;
@@ -34,18 +31,4 @@ const getColorGenerator = () => {
   return nextColor
 };
 
-const usePlayerColors = (players) => {
-  const playerName = usePlayerName();
-  const playerColors = useRef({ [playerName]: "#000000" });
-  const nextColor = useRef(getColorGenerator());
-
-  if (players) {
-    players
-      .filter(name => !playerColors.current[name])
-      .forEach(name => { playerColors.current[name] = nextColor.current() });
-  }
-
-  return playerColors.current;
-};
-
-export default usePlayerColors;
+export default getColorGenerator;

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

@@ -1,9 +1,10 @@
 import { useEffect } from "react";
-import { useLastRound } from "../../../domain/gameStore";
+import { useLastRound, usePlayerName } from "../../../domain/gameStore";
 import useMap from "../../../hooks/useMap";
 import usePlayerScores from "../../../hooks/usePlayerScores";
-import usePlayerColors from "./usePlayerColors";
 import { makeQuestionMarker, makeFlagMarker, makeLine } from "./markers";
+import getColorGenerator from "./getColorGenerator";
+import { useRef } from "react";
 
 const useMapWithMarkers = (mapDivRef) => {
   // get the info about the last round
@@ -23,15 +24,24 @@ const useMapWithMarkers = (mapDivRef) => {
     ?.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();
+
   // set up the marker colors
-  const playerColors = usePlayerColors(players?.map(({ name }) => name));
+  const playerColors = useRef({ [playerName]: "#000000" });
+  const nextColor = useRef(getColorGenerator());
+  if (players) {
+    players
+      .filter(({ name }) => !playerColors.current[name])
+      .forEach(({ name }) => { playerColors.current[name] = nextColor.current() });
+  }
 
   // draw all the player markers and trails
   useEffect(() => {
     if (!players) return;
     const drawings = [];
     players.forEach(({ name, guess: { lat, lng, score } }) => {
-      const color = playerColors[name];
+      const color = playerColors.current[name];
       const selectedPoint = { lat, lng };
 
       const marker = makeQuestionMarker(mapRef.current, selectedPoint, `${name} - ${score} Points`, color);