diff --git a/components/gameUI.js b/components/gameUI.js index 767530dc6..e584d6c24 100644 --- a/components/gameUI.js +++ b/components/gameUI.js @@ -1,4 +1,4 @@ -import { useEffect, useState, useRef } from "react" +import { useEffect, useState, useRef, useCallback } from "react" import dynamic from "next/dynamic"; import { FaMap } from "react-icons/fa"; import useWindowDimensions from "./useWindowDimensions"; @@ -398,6 +398,15 @@ export default function GameUI({ inCoolMathGames, inGameDistribution, miniMapSho } }, [onboarding?.round]) + const toggleMiniMapFullscreen = useCallback(() => { + setMiniMapFullscreen((prev) => { + if (!prev) { + setMiniMapExpanded(true) + } + return !prev + }) + }, []) + useEffect(() => { function keydown(e) { @@ -409,6 +418,10 @@ export default function GameUI({ inCoolMathGames, inGameDistribution, miniMapSho if(explanationModalShown) return; // Don't handle space during onboarding completion - let home button handle it if(onboarding?.completed) return; + if((e.key === 'm' || e.key === 'M') && !e.repeat && !showAnswer) { + toggleMiniMapFullscreen() + return; + } if(singlePlayerRound?.done && e.key === ' ') { loadLocationFunc() return; @@ -424,7 +437,7 @@ export default function GameUI({ inCoolMathGames, inGameDistribution, miniMapSho return () => { document.removeEventListener('keydown', keydown); } - }, [pinPoint, showAnswer, onboarding, explanationModalShown, singlePlayerRound]) + }, [pinPoint, showAnswer, onboarding, explanationModalShown, singlePlayerRound, toggleMiniMapFullscreen]) useEffect(() => { if (!loading && latLong && width > 600 && !isTouchScreen) { @@ -442,6 +455,7 @@ export default function GameUI({ inCoolMathGames, inGameDistribution, miniMapSho setHintShown(true); setHintsUsedThisGame((prev) => prev + 1); } + useEffect(() => { loadLocation() if(singlePlayerRound) { @@ -653,12 +667,7 @@ session={session}/> {!showAnswer && (
-