From c449044f2ecca8deaab88e09b0acc3e056ba9cc1 Mon Sep 17 00:00:00 2001
From: BluePotato102 <bluepotato102@noreply.codeberg.org>
Date: Mon, 25 Sep 2023 18:22:41 -0500
Subject: [PATCH] basic custom keybinds layout

---
 css/style.css | 13 ++++++++++++-
 index.html    | 16 ++++++++++++++++
 js/index.js   | 16 ++++++++++++++++
 3 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 48dde3a5..ab367e0b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -208,7 +208,7 @@ body.noscript {
   background-color: var(--block-color);
 }
 
-#sort {
+#sort, #keybind-slot-1 {
   all: unset;
   margin: 0;
   border: none;
@@ -220,6 +220,17 @@ body.noscript {
   width: 20%;
 }
 
+.keySlot{
+  margin: 0;
+  border: none;
+  background-color: var(--bg);
+  color: var(--font-color);
+  font-size: 1rem;
+  font-family: var(--font-family);
+  padding: 1rem;
+  width: 20%;
+  cursor: pointer;
+}
 
 logo img {
   z-index: 50;
diff --git a/index.html b/index.html
index 207f9912..0e510844 100644
--- a/index.html
+++ b/index.html
@@ -309,6 +309,22 @@
                         </div>
                     </label>
                 </div>
+                
+                <div class="setting">
+                    <h5>Slot 1</h5>
+                    <p>Press a button then press a key on your keyboard to choose </p>
+                    <button class="keySlot">Set Key</button> <!-- add some inline "+" between buttons later -->
+                    <button class="keySlot">Set Key</button>
+                    <button class="keySlot">Set Key (Optional)</button>
+                    <select id="keybind-slot-1">
+                        <option value="#">Cloak</option>
+                        <option value="#">Mask</option>
+                        <option value="#">Close</option>
+                        <option value="#">Custom JS</option>
+                        <option value="#">Select an option   ▼</option>
+                    </select>
+                </div>
+
                 <div class="setting">
                     <h5>Background</h5>
                     <p>Background can cause a lot of lag. Disable if your computer is diagnosed with low FPS.</p>
diff --git a/js/index.js b/js/index.js
index 103311e6..9d4f753a 100644
--- a/js/index.js
+++ b/js/index.js
@@ -346,6 +346,22 @@ function popupsAllowed(){
     }
 }
 
+const keySlots = document.querySelectorAll('.keySlot');
+
+keySlots.forEach((slot) => {
+    slot.addEventListener('click', () => {
+        slot.textContent = 'Press any key';
+
+        // Add a one-time event listener to capture the key press
+        const keyPressHandler = (event) => {
+            slot.textContent = event.key;
+            document.removeEventListener('keydown', keyPressHandler);
+        };
+
+        document.addEventListener('keydown', keyPressHandler);
+    });
+});
+
 const preferencesDefaults = {
     cloak: true,
     cloakUrl: "https://classroom.google.com",