From aa9cd07f69476a8042b9fe696e49c8317f497918 Mon Sep 17 00:00:00 2001
From: Logan Howarth <loganhowarth@icloud.com>
Date: Sat, 8 Feb 2025 23:16:45 -0700
Subject: [PATCH] Mobile fixes

---
 script.js | 11 +++++++----
 style.css | 10 ++++++----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/script.js b/script.js
index f26dd21..1b389b0 100644
--- a/script.js
+++ b/script.js
@@ -60,7 +60,7 @@ const locationData = [
     [2522, 2071, 'images/screenshots/50.png'],
     [1970, 1835, 'images/screenshots/51.png'],
     [2910, 1745, 'images/screenshots/52.png'],
-    // [0, 0, 'images/screenshots/53.png'],
+    [2893, 1634, 'images/screenshots/53.png'],
     // [0, 0, 'images/screenshots/54.png'],
     // [0, 0, 'images/screenshots/55.png'],
     // [0, 0, 'images/screenshots/56.png'],
@@ -199,7 +199,7 @@ function updateGuessPos() {
     }
 }
 
-function toggleFullscreen(){
+function toggleFullscreen() {
     if (mapContainer.classList.contains('fullscreen')) {
         mapContainer.classList.remove('fullscreen');
     } else {
@@ -213,7 +213,7 @@ function addEventListeners() {
     var dragStart = { x: 0, y: 0 }
     var hasMoved = false
 
-    fullscreenButton.addEventListener('click', function(){
+    fullscreenButton.addEventListener('click', function () {
         toggleFullscreen()
     })
 
@@ -221,7 +221,10 @@ function addEventListeners() {
         if (event.code === 'Space') {
             guessButtonClicked()
         }
-        if (event.key === 'f'){
+        if (event.key === 'f') {
+            toggleFullscreen()
+        }
+        if(event.key === 'Escape'){
             toggleFullscreen()
         }
     })
diff --git a/style.css b/style.css
index 2706696..9c362bb 100644
--- a/style.css
+++ b/style.css
@@ -75,11 +75,13 @@ p {
 
 
 #mapContainer {
+
     background-color: #000000;
     transition: all 0.3s ease-in-out;
     position: absolute;
-    width: 20%;
-    height: 30%;
+    inset: auto 0 1rem auto;
+    width: 30%;
+    height: auto;
     right: 0;
     bottom: 0;
     margin: 1rem;
@@ -96,7 +98,7 @@ p {
 
 #mapContainer:hover {
     width: 50%;
-    height: 70%;
+    height: auto;
 }
 
 #mapCanvas {
@@ -108,7 +110,7 @@ p {
 #buttonContainer {
     display: flex;
     justify-content: space-between;
-    width: 100%;
+    width: 70%;
     padding: 0.5rem;
 }