From 7c273c74806e0710e6636af4e4bb527636cdc4e0 Mon Sep 17 00:00:00 2001
From: James Almeida <jimmyplaysdrums@gmail.com>
Date: Tue, 1 Oct 2024 13:52:44 -0700
Subject: [PATCH] Add more keyboard shorcuts and require shift to use them.

---
 src/App.js                                    | 33 ++++++++++-------
 src/components/GearSelect/GearSelect.js       | 14 ++++----
 src/components/MapNavigation/MapNavigation.js |  1 +
 src/components/MusicPanel/MusicPanel.css      | 11 +++++-
 src/components/MusicPanel/MusicPanel.js       | 35 +++++++++++++++++--
 5 files changed, 72 insertions(+), 22 deletions(-)

diff --git a/src/App.js b/src/App.js
index 6524412..901121c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -249,21 +249,30 @@ function App() {
       if (event.target.tagName.toLowerCase() === 'input') {
         return; // Exit the function if we're typing in an input field
       }
-  
-      switch (event.key.toUpperCase()) {
-        case 'F':
-          handleToggleFrunk();
-          break;
-        case 'T':
-          handleToggleTrunk();
-          break;
-        default:
-          break;
+
+      if (event.shiftKey) {
+        switch (event.key.toUpperCase()) {
+          case 'F':
+            handleToggleFrunk();
+            break;
+          case 'T':
+            handleToggleTrunk();
+            break;
+          case 'M':
+            event.preventDefault(); // Prevent 'M' from being typed
+            const navigateToInput = document.getElementById('navigateTo');
+            if (navigateToInput) {
+              navigateToInput.focus();
+            }
+            break;
+          default:
+            break;
+        }
       }
     };
-  
+
     window.addEventListener('keydown', handleKeyDown);
-  
+
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
diff --git a/src/components/GearSelect/GearSelect.js b/src/components/GearSelect/GearSelect.js
index c7e964d..a85f2b7 100644
--- a/src/components/GearSelect/GearSelect.js
+++ b/src/components/GearSelect/GearSelect.js
@@ -8,15 +8,17 @@ function GearSelect({ activeGear, onGearSelect }) {
       if (event.target.tagName.toLowerCase() === 'input') {
         return; // Exit the function if we're typing in an input field
       }
-  
-      const gear = event.key.toUpperCase();
-      if (['P', 'R', 'N', 'D'].includes(gear)) {
-        onGearSelect(gear);
+
+      if (event.shiftKey) {
+        const gear = event.key.toUpperCase();
+        if (['P', 'R', 'N', 'D'].includes(gear)) {
+          onGearSelect(gear);
+        }
       }
     };
-  
+
     window.addEventListener('keydown', handleKeyDown);
-  
+
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
diff --git a/src/components/MapNavigation/MapNavigation.js b/src/components/MapNavigation/MapNavigation.js
index 5ae5368..b4ea48b 100644
--- a/src/components/MapNavigation/MapNavigation.js
+++ b/src/components/MapNavigation/MapNavigation.js
@@ -271,6 +271,7 @@ export function MapNavigation() {
                 name="NavigateTo"
                 defaultValue={inputValue}
                 onChange={handleInputChange}
+                id="navigateTo"
               />
               {inputValue && (
                 <button className="clearInput" onClick={clearInput}>
diff --git a/src/components/MusicPanel/MusicPanel.css b/src/components/MusicPanel/MusicPanel.css
index f8aacd4..dde7aab 100644
--- a/src/components/MusicPanel/MusicPanel.css
+++ b/src/components/MusicPanel/MusicPanel.css
@@ -113,6 +113,14 @@
     border-radius: 12px;
 }
 
+.musicBtn:focus {
+    outline: none;
+}
+
+.musicBtn::-moz-focus-inner {
+    border: 0;
+}
+
 .musicIcon {
     /* height: 45%; */
     height: 20px;
@@ -187,4 +195,5 @@
     .albumTitle {
         /* font-size: 14px; */
     }
-}
\ No newline at end of file
+}
+
diff --git a/src/components/MusicPanel/MusicPanel.js b/src/components/MusicPanel/MusicPanel.js
index 28901be..4ad18b6 100644
--- a/src/components/MusicPanel/MusicPanel.js
+++ b/src/components/MusicPanel/MusicPanel.js
@@ -66,9 +66,9 @@ export function MusicPanel({ volume }) {
         setCurrentTime(currentTimeRef.current);
     };
 
-    const togglePlayPause = () => {
-        setIsPlaying(!isPlaying);
-    };
+    const togglePlayPause = useCallback(() => {
+        setIsPlaying(prevIsPlaying => !prevIsPlaying);
+    }, []);
 
     const handlePrevious = () => {
         const now = Date.now();
@@ -105,6 +105,35 @@ export function MusicPanel({ volume }) {
         }
     }, [handleProgressBarClick]);
 
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.shiftKey) {
+                switch (event.key) {
+                    case ' ':
+                        event.preventDefault();
+                        togglePlayPause();
+                        break;
+                    case 'ArrowRight':
+                        event.preventDefault();
+                        handleNext();
+                        break;
+                    case 'ArrowLeft':
+                        event.preventDefault();
+                        handlePrevious();
+                        break;
+                    default:
+                        break;
+                }
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [togglePlayPause, handleNext, handlePrevious]);
+
     return (
         <div className="musicPanel">
             <div className="albumArt">