WIP, commenting out some map stuff that was breaking

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

@@ -5,10 +5,12 @@ import Button from "../../util/Button";
 import PlayerScoreTile from "./PlayerScoreTile";
 import useGameInfo from '../../../hooks/useGameInfo';
 import ClickToCopy from '../../util/ClickToCopy';
-import { useGameId, dispatch } from '../../../domain/gameStore';
+import { dispatch } from '../../../domain/gameStore';
 import { linkGame } from '../../../domain/apiMethods';
 import GameCreationForm from '../../util/GameCreationForm';
 import useMap from '../../../hooks/useMap';
+import useMarkersFromGuesses from '../../../hooks/useMarkersFromGuesses';
+import { useState } from 'react';
 
 const Container = styled.div`
   display: flex;
@@ -18,7 +20,7 @@ const Container = styled.div`
   height: 100%;
 `
 
-const ScoreBoard = styled.div`
+const ScoreBoardContainer = styled.div`
   flex: 2;
   display: flex;
   flex-flow: row wrap;
@@ -64,16 +66,55 @@ const getUrl = gameId => {
   return u.href;
 }
 
-const SummaryMap = () => {
-  // create the map
-  const mapDivRef = useRef(null);
-  const mapRef = useMap(mapDivRef, 0, 0, 1);
-  return <MapDiv ref={mapDivRef} />
+const SummaryMap = ({ mapDivRef, mapRef, players, coords, roundNum }) => {
+  // get just the relevant players to put on the map
+  const playersFiltered = players
+    ?.filter(({ guesses }) => guesses[roundNum] && guesses[roundNum].score !== null)
+    ?.map(({ name, totalScore, guesses }) => ({ name, totalScore, guess: guesses[roundNum] }));
+  const targetPoint = coords?.[roundNum] ?? null;
+
+  // useMarkersFromGuesses(mapRef, playersFiltered, targetPoint);
+
+  return (
+    <MapContainer>
+      <MapDiv ref={mapDivRef}/>
+    </MapContainer>
+  );
 }
 
+const ScoreBoard = ({ players }) => (
+  <ScoreBoardContainer>
+    {
+      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} />)
+    }
+  </ScoreBoardContainer>
+)
+
+const LinkedGame = React.memo(({ linkedGame, gameId }) => (
+  <LinkedGameContainer>
+    {
+      linkedGame
+        ? <StyledButton onClick={() => dispatch.goToLobby(linkedGame)}>
+            Continue to Linked Game Lobby
+          </StyledButton>
+        : <GameCreationForm afterCreate={linkId => linkGame(gameId, linkId)}/>
+    }
+  </LinkedGameContainer>
+));
+
 export default () => {
-  const gameId = useGameId();
-  const { players, linkedGame }  = useGameInfo();
+  // create the map
+  // const mapDivRef = useRef(null);
+  // const mapRef = useMap(mapDivRef, 0, 0, 1);
+
+  // poll the game state
+  const { gameId, players, coords, linkedGame }  = useGameInfo();
+
+  // set up round number selection
+  // const [roundNum, setRoundNum] = useState("0");
 
   if (!players) {
     return <Loading/>
@@ -81,26 +122,9 @@ export default () => {
 
   return (
     <Container>
-      <MapContainer>
-        <SummaryMap/>
-      </MapContainer>
-      <ScoreBoard>
-        {
-          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} />)
-        }
-      </ScoreBoard>
-      <LinkedGameContainer>
-        {
-          linkedGame
-            ? <StyledButton onClick={() => dispatch.goToLobby(linkedGame)}>
-                Continue to Linked Game Lobby
-              </StyledButton>
-            : <GameCreationForm afterCreate={linkId => linkGame(gameId, linkId)}/>
-        }
-      </LinkedGameContainer>
+      {/* <SummaryMap {...{ mapDivRef, mapRef, players, coords, roundNum }}/> */}
+      <ScoreBoard {...{ players }}/>
+      <LinkedGame {...{ linkedGame, gameId }} />
       <Label><ClickToCopy text={getUrl(gameId)}>Click here to copy a link to this summary!</ClickToCopy></Label>
     </Container>
   );