Medium size map mode

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

@@ -4,19 +4,27 @@ import ClickMarkerMap from './ClickMarkerMap';
 import styles from './GuessPane.module.css';
 import RoundTimer from './RoundTimer';
 
+const mapSizeOpts = {
+  small: styles['pane--small'],
+  medium: styles['pane--medium'],
+  big: styles['pane--big'],
+}
+
+const toggleMapSize = larger => b => b === 'big' || b === 'medium' ? 'small' : larger;
+
 export default () => {
   const [ selectedPoint, setSelectedPoint ] = useState(null);
   const [ submitted, setSubmitted ] = useState(false);
-  const [ bigMap, setBigMap ] = useState(false);
+  const [ mapSize, setMapSize ] = useState('small');
 
   useEffect(() => {
     const listener = event => {
       if (event.code === 'Escape') {
-        setBigMap(b => !b);
+        setMapSize(toggleMapSize('big'));
       }
     }
-    document.addEventListener("keydown", listener, false);
-    return () => document.removeEventListener("keydown", listener, false);
+    document.addEventListener('keydown', listener, false);
+    return () => document.removeEventListener('keydown', listener, false);
 
   }, [])
 
@@ -28,7 +36,7 @@ export default () => {
   };
 
   return (
-    <div className={`${styles.pane} ${bigMap ? styles['pane--big'] : styles['pane--small']}`}>
+    <div className={`${styles.pane} ${mapSizeOpts[mapSize]}`}>
       <button
         className={styles.submit}
         onClick={handleSubmitGuess}
@@ -38,8 +46,11 @@ export default () => {
       </button>
       <ClickMarkerMap onMarkerMoved={setSelectedPoint} />
       <RoundTimer onTimeout={handleSubmitGuess} />
-      <div className={styles.resize} onClick={() => setBigMap(b => !b)}>
-        {bigMap ? '↙️' : '↗️'}
+      <div className={styles.resize} onClick={() => setMapSize(toggleMapSize('big'))}>
+        { mapSize === 'big' ? '↙️' : '↗️' }
+      </div>
+      <div className={`${styles.resize} ${styles['resize--medium']}`} onClick={() => setMapSize(toggleMapSize('medium'))}>
+        { mapSize === 'medium' ? '⬅️' : '➡️' }
       </div>
     </div>
   );

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

@@ -105,6 +105,18 @@
     transition: opacity var(--transition-time) ease-out;
   }
 
+  .pane--medium {
+    height: 50vh;
+    width: 80vw;
+    transition: height var(--transition-time) ease-out, width var(--transition-time) ease-out;
+  }
+
+  .pane--medium>* {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity var(--transition-time) ease-out;
+  }
+
   .pane--big {
     height: calc(100vh - 2 * var(--margin));
     width: calc(100vw - 2 * var(--margin));
@@ -128,4 +140,9 @@
     height: var(--control-size);
     cursor: pointer;
   }
+
+  .resize--medium {
+    left: unset;
+    right: 0px;
+  }
 }