Logic cleanup

client/src/components/screens/RoundSummary.jsx

@@ -8,59 +8,64 @@ import question from "../../assets/question-mark.svg";
 
 // TODO eventually we want this to query and show other players
 
+const questionIcon = {
+  url: question,
+  scaledSize: new google.maps.Size(64, 64),
+  origin: new google.maps.Point(0, 0),
+  anchor: new google.maps.Point(32, 48),
+};
+
+const flagIcon = {
+  url: flag,
+  scaledSize: new google.maps.Size(32, 32),
+  origin: new google.maps.Point(0, 0),
+  anchor: new google.maps.Point(4, 32),
+};
+
+const lineSettings = {
+  strokeColor: "#333333",
+  strokeOpacity: 0,
+  icons: [{
+    icon: {
+      path: 'M 0,-1 0,1',
+      strokeOpacity: 1,
+      scale: 4
+    },
+    offset: '0',
+    repeat: '20px'
+  }],
+};
+
 const openMapInNewTab = ({ lat, lng }) => {
   window.open(`https://www.google.com/maps?hl=en&q=+${lat},+${lng}`, "_blank");
 }
 
+const makeMarker = (map, position, title, icon) => {
+  const marker = new google.maps.Marker({ 
+    clickable: true,
+    map,
+    position,
+    title,
+    icon,
+  });
+
+  marker.addListener("click", () => openMapInNewTab(position));
+
+  return marker;
+}
+
 const useMarkedPoints = (mapRef, selectedPoint, targetPoint) => {
   useEffect(() => {
     mapRef.current.panTo(targetPoint);
     mapRef.current.setZoom(4);
 
-    const selectedMarker = new google.maps.Marker({ 
-      map: mapRef.current,
-      position: selectedPoint,
-      title: "Selected",
-      clickable: true,
-      icon: {
-        url: question,
-        scaledSize: new google.maps.Size(64, 64),
-        origin: new google.maps.Point(0, 0),
-        anchor: new google.maps.Point(32, 48),
-      },
-    });
-
-    selectedMarker.addListener('click', () => openMapInNewTab(selectedPoint));
-
-    const targetMarker = new google.maps.Marker({ 
-      map: mapRef.current,
-      position: targetPoint,
-      title: "Goal",
-      clickable: true,
-      icon: {
-        url: flag,
-        scaledSize: new google.maps.Size(32, 32),
-        origin: new google.maps.Point(0, 0),
-        anchor: new google.maps.Point(4, 32),
-      },
-    });
-
-    targetMarker.addListener('click', () => openMapInNewTab(targetPoint));
+    const selectedMarker = makeMarker(mapRef.current, selectedPoint, "Selected", questionIcon);
+    const targetMarker = makeMarker(mapRef.current, targetPoint, "Goal", flagIcon);
 
     const line = new google.maps.Polyline({
       path: [ selectedPoint, targetPoint ],
-      strokeColor: "#333333",
-      strokeOpacity: 0,
-      icons: [{
-        icon: {
-          path: 'M 0,-1 0,1',
-          strokeOpacity: 1,
-          scale: 4
-        },
-        offset: '0',
-        repeat: '20px'
-      }],
-      map: mapRef.current
+      map: mapRef.current,
+      ...lineSettings,
     });
 
     return () => {