Creating the useClickToCheckScore hook

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

@@ -3,8 +3,8 @@ import styled from "styled-components";
 import { useLastRound } from "../../../domain/gameStore";
 import useMarkersFromGuesses from "./useMarkersFromGuesses";
 import useMap from "../../../hooks/useMap";
-import useClickMarker from "../../../hooks/useClickMarker";
 import NextRoundButton from "./NextRoundButton";
+import useClickToCheckScore from "./useClickToCheckScore";
 
 const SummaryDiv = styled.div`
   position: absolute;
@@ -38,10 +38,8 @@ export default () => {
   // add the player guess markers
   useMarkersFromGuesses(mapRef, roundNum, targetPoint);
 
-  // let the current player click the map to add a new marker
-  useClickMarker(mapRef, ({ lat, lng }) => {
-    console.log(`lat: ${lat}, lng: ${lng}`);
-  })
+  // let the current player click the map to see a possible score
+  useClickToCheckScore(mapRef, targetPoint);
   
   return (
     <div>

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

@@ -0,0 +1,10 @@
+import useClickMarker from "../../../hooks/useClickMarker";
+import { checkScore } from "../../../domain/apiMethods";
+
+export default (mapRef, point1) => {
+  // when the map is clicked, call the scoring API and update the marker's title
+  useClickMarker(mapRef, async (point2, marker) => {
+    const { score } = await checkScore(point1, point2);
+    marker.setTitle(`Potential Score: ${score}`);
+  });
+}