From 38ab7ec90ea69c617fec40ea217ff95521130d2d Mon Sep 17 00:00:00 2001
From: James Almeida <703253+jamesalmeida@users.noreply.github.com>
Date: Sat, 28 Sep 2024 22:55:50 -0700
Subject: [PATCH] Add keyboard shortcuts for gear select and toggling frunk and
 trunk.

---
 src/App.css                              | 22 ---------------
 src/App.js                               | 35 ++++++++++++++++--------
 src/components/GearSelect/GearSelect.css | 21 ++++++++++++++
 src/components/GearSelect/GearSelect.js  | 35 ++++++++++++++++++++++++
 4 files changed, 80 insertions(+), 33 deletions(-)
 create mode 100644 src/components/GearSelect/GearSelect.css
 create mode 100644 src/components/GearSelect/GearSelect.js

diff --git a/src/App.css b/src/App.css
index 2366878..2187440 100644
--- a/src/App.css
+++ b/src/App.css
@@ -180,28 +180,6 @@
   font-weight: 400;
 }
 
-.gearSelect {
-  display: flex;
-  gap: 5px;
-}
-
-.gearSelectIcon {
-  color: #4e4e4e;
-  font-weight: 400;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.gearSelectIcon:hover {
-  background-color: #f0f0f0;
-}
-
-.gearSelectIcon.active {
-  color: #000000;
-  font-weight: 800;
-  transform: scale(0.95);
-}
-
 .appShelfContainer {
   position: relative;
   width: 100%;
diff --git a/src/App.js b/src/App.js
index 7c30d9e..31ee1f8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,6 +14,7 @@ import CarLock from './components/CarLock/CarLock';
 import VolumeControl from './components/VolumeControl/VolumeControl';
 import TemperatureControl from './components/TemperatureControl/TemperatureControl';
 import BatteryStatus from './components/BatteryStatus/BatteryStatus';
+import GearSelect from './components/GearSelect/GearSelect';
 import { useDots } from './utils/dots';
 import './App.css';
 
@@ -257,6 +258,28 @@ function App() {
     return () => clearTimeout(fallbackTimer);
   }, []);
 
+  // Add this new useEffect for keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      switch (event.key.toUpperCase()) {
+        case 'F':
+          handleToggleFrunk();
+          break;
+        case 'T':
+          handleToggleTrunk();
+          break;
+        default:
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);  // Empty dependency array means this effect runs once on mount
+
   return (
     <CarLockProvider>
       <UserProfileProvider>
@@ -273,17 +296,7 @@ function App() {
                 onResize={handleLeftPanelResize}
               >
                 <div className="carStatusIcons">
-                  <div className="gearSelect no-select">
-                    {['P', 'R', 'N', 'D'].map((gear) => (
-                      <span
-                        key={gear}
-                        className={`gearSelectIcon ${activeGear === gear ? 'active' : ''}`}
-                        onClick={() => handleGearSelect(gear)}
-                      >
-                        {gear}
-                      </span>
-                    ))}
-                  </div>
+                  <GearSelect activeGear={activeGear} onGearSelect={handleGearSelect} />
                   <BatteryStatus />
                 </div>
                 <div className="carModelStatus">
diff --git a/src/components/GearSelect/GearSelect.css b/src/components/GearSelect/GearSelect.css
new file mode 100644
index 0000000..ab22f0f
--- /dev/null
+++ b/src/components/GearSelect/GearSelect.css
@@ -0,0 +1,21 @@
+.gearSelect {
+    display: flex;
+    gap: 5px;
+  }
+  
+  .gearSelectIcon {
+    color: #4e4e4e;
+    font-weight: 400;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+  
+  .gearSelectIcon:hover {
+    background-color: #f0f0f0;
+  }
+  
+  .gearSelectIcon.active {
+    color: #000000;
+    font-weight: 800;
+    transform: scale(0.95);
+  }
\ No newline at end of file
diff --git a/src/components/GearSelect/GearSelect.js b/src/components/GearSelect/GearSelect.js
new file mode 100644
index 0000000..0ad898d
--- /dev/null
+++ b/src/components/GearSelect/GearSelect.js
@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import './GearSelect.css';
+
+function GearSelect({ activeGear, onGearSelect }) {
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      const gear = event.key.toUpperCase();
+      if (['P', 'R', 'N', 'D'].includes(gear)) {
+        onGearSelect(gear);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onGearSelect]);
+
+  return (
+    <div className="gearSelect no-select">
+      {['P', 'R', 'N', 'D'].map((gear) => (
+        <span
+          key={gear}
+          className={`gearSelectIcon ${activeGear === gear ? 'active' : ''}`}
+          onClick={() => onGearSelect(gear)}
+        >
+          {gear}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export default GearSelect;
\ No newline at end of file