Prevent mid-game navigation

client/src/components/screens/GamePanel/GamePanel.jsx

@@ -6,6 +6,7 @@ import PositionedStreetView from "./PositionedStreetView";
 import useRoundInfo from "../../../hooks/useRoundInfo";
 import { dispatch } from '../../../domain/gameStore';
 import { useTimerFromLocalStorage, clearTimerFromLocalStorage } from '../../../domain/localStorageMethods';
+import usePreventNavigation from '../../../hooks/usePreventNavigation';
 
 const Container = styled.div`
   height: 100%;
@@ -31,6 +32,9 @@ const StreetViewWrapper = styled.div`
 `
 
 export default () => {
+  // warn the user if they navigate away
+  usePreventNavigation();
+  
   const [submitDisabled, setSubmitDisabled] = useState(false);
   const [selectedPoint, setSelectedPoint] = useState(null);
   const [finished, roundInfo] = useRoundInfo();

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

@@ -6,6 +6,7 @@ import useMap from "../../../hooks/useMap";
 import NextRoundButton from "./NextRoundButton";
 import useClickToCheckScore from "./useClickToCheckScore";
 import useGameInfo from "../../../hooks/useGameInfo";
+import usePreventNavigation from "../../../hooks/usePreventNavigation";
 
 const SummaryDiv = styled.div`
   position: absolute;
@@ -44,6 +45,9 @@ export default () => {
 
   // let the current player click the map to see a possible score
   useClickToCheckScore(mapRef, targetPoint);
+
+  // warn the user if they navigate away
+  usePreventNavigation();
   
   return (
     <div>

client/src/hooks/usePreventNavigation.jsx

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+
+const preventNav = evt => {
+  evt.preventDefault();
+  evt.returnValue = '';
+}
+
+export default () => useEffect(() => {
+  window.addEventListener("beforeunload", preventNav);
+  return () => window.removeEventListener("beforeunload", preventNav);
+}, []);