Преглед изворни кода

Escape to toggle fullscreen map, some transition tweaks, and disabling the fullscreen pano button

Kirk Trombley пре 5 година
родитељ
комит
de3829990b

+ 12 - 1
client/src/components/screens/GamePanel/GuessPane/GuessPane.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { dispatch } from '../../../../domain/gameStore';
 import ClickMarkerMap from './ClickMarkerMap';
 import styles from './GuessPane.module.css';
@@ -9,6 +9,17 @@ export default () => {
   const [ submitted, setSubmitted ] = useState(false);
   const [ bigMap, setBigMap ] = useState(false);
 
+  useEffect(() => {
+    const listener = event => {
+      if (event.code === 'Escape') {
+        setBigMap(b => !b);
+      }
+    }
+    document.addEventListener("keydown", listener, false);
+    return () => document.removeEventListener("keydown", listener, false);
+
+  }, [])
+
   const handleSubmitGuess = async () => {
     setSubmitted(true);
     if (!submitted) {

+ 6 - 6
client/src/components/screens/GamePanel/GuessPane/GuessPane.module.css

@@ -38,7 +38,7 @@
 .resizeButton {
   display: none;
   position: absolute;
-  right: 4px;
+  left: 4px;
   bottom: 25px;
   width: 24px;
   height: 24px;
@@ -55,7 +55,7 @@
     flex-flow: column-reverse nowrap;
     z-index: 1;
     opacity: .75;
-    transition: 1s;
+    transition: all 0.5s ease-in;
   }
 
   .pane:hover {
@@ -102,11 +102,11 @@
     transition: 0.5s;
   }
 
-  .pane:hover .resizeButton {
-    display: block;
+  .pane:hover .map {
+    opacity: 1;
   }
 
-  .pane--big .resizeButton {
+  .resizeButton {
     display: block;
   }
 
@@ -122,7 +122,7 @@
     justify-content: space-around;
     z-index: 1;
     opacity: 1;
-    transition: 0.5s;
+    transition: all 0.5s ease-out;
   }
 
   .pane--big .submitButton {

+ 1 - 0
client/src/components/screens/GamePanel/usePano.jsx

@@ -18,6 +18,7 @@ export default (panoDivRef, position, pov) => {
     panoRef.current = new google.maps.StreetViewPanorama(panoDivRef.current, {
       position,
       pov,
+      fullscreenControl: false,
       addressControl: false,
       showRoadLabels: false,
       clickToGo: true,