What if the map was big now

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

@@ -7,6 +7,7 @@ import RoundTimer from './RoundTimer';
 export default () => {
   const [ selectedPoint, setSelectedPoint ] = useState(null);
   const [ submitted, setSubmitted ] = useState(false);
+  const [ bigMap, setBigMap ] = useState(false);
 
   const handleSubmitGuess = async () => {
     setSubmitted(true);
@@ -16,10 +17,13 @@ export default () => {
   };
 
   return (
-    <div className={styles.pane}>
+    <div className={bigMap ? styles['pane--big'] : styles.pane}>
       <ClickMarkerMap onMarkerMoved={setSelectedPoint} />
       <div className={styles.submit}>
         <RoundTimer onTimeout={handleSubmitGuess} />
+        <div className={styles.resizeButton} onClick={() => setBigMap(b => !b)}>
+          {bigMap ? '↙️' : '↗️'}
+        </div>
         <button
           className={styles.submitButton}
           onClick={handleSubmitGuess}

client/src/components/screens/GamePanel/GuessPane/GuessPane.module.css

@@ -35,6 +35,16 @@
   color: red;
 }
 
+.resizeButton {
+  display: none;
+  position: absolute;
+  right: 4px;
+  bottom: 25px;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
 @media only screen and (min-width: 600px) and (min-height: 600px) {
   .pane {
     position: absolute;
@@ -65,6 +75,7 @@
   }
 
   .submit {
+    flex: 0.25;
     flex-flow: column-reverse nowrap;
     margin-top: 4px;
     color: #fff;
@@ -90,4 +101,37 @@
     opacity: 1;
     transition: 0.5s;
   }
+
+  .pane:hover .resizeButton {
+    display: block;
+  }
+
+  .pane--big .resizeButton {
+    display: block;
+  }
+
+  .pane--big {
+    flex: 1;
+    display: flex;
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    height: calc(100vh - 20px);
+    width: calc(100vw - 20px);
+    flex-flow: column-reverse nowrap;
+    justify-content: space-around;
+    z-index: 1;
+    opacity: 1;
+    transition: 0.5s;
+  }
+
+  .pane--big .submitButton {
+    visibility: visible;
+    opacity: 1;
+    transition: 0.5s;
+  }
+
+  .pane--big .map {
+    opacity: 1;
+  }
 }

client/src/hooks/useMap.jsx

@@ -13,7 +13,7 @@ export default (mapDiv, lat=25, lng=-25, zoom=0) => {
       center: { lat, lng },
       zoom,
       disableDefaultUI: true,
-      fullscreenControl: true,
+      fullscreenControl: false,
     });
   }, [mapDiv, lat, lng, zoom]);