Merge branch 'main' of https://codeberg.org/MonkeyGG2/MonkeyGG2-v2

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;

index.html

@@ -259,11 +259,22 @@
                     <button class="save-button">Upload Game Data</button>
                 </div>
 
+                <div class="setting">
+                    <h5>Cloak</h5>
+                    <p>Toggles if Cloak (Hides site from history and being view online) is forced</p>
+                    <label class="switch">
+                        <input id="cloakCheckboxInput" type="checkbox" hidden>
+                        <div class="switch__wrapper">
+                            <div class="switch__toggle"></div>
+                        </div>
+                    </label>
+                </div>
+
                 <div class="setting">
                     <h5>Cloak URL</h5>
                     <p>This site will appear in your history instead of MonkeyGG2.</p>
-                    <input class="text-field" type="text" placeholder="https://classroom.google.com">
-                    <button class="submit-button">Submit</button>
+                    <input id="cloakUrlInput" class="text-field" type="text" placeholder="https://classroom.google.com">
+                    <button id="cloakUrlSubmit" class="submit-button">Submit</button>
                 </div>
                 <div class="setting">
                     <h5>Mask</h5>
@@ -298,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>

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",
@@ -359,9 +375,13 @@ if (localStorage.getItem("preferences") == null) {
     localStorage.setItem("preferences", JSON.stringify(preferencesDefaults));
 }
 const preferences = JSON.parse(localStorage.getItem("preferences"));
+const cloakCheckbox = document.getElementById('cloakCheckboxInput');
+const cloakUrl = document.getElementById('cloakUrlInput');
 const maskCheckbox = document.getElementById('maskCheckboxInput');
 const maskTitle = document.getElementById('maskTitleInput');
 const maskIcon = document.getElementById('maskIconInput');
+cloakCheckbox.checked = preferences.cloak;
+cloakUrl.value = preferences.cloakUrl;
 maskCheckbox.checked = preferences.mask;
 maskTitle.value = preferences.maskTitle;
 maskIcon.value = preferences.maskIconUrl;
@@ -384,6 +404,11 @@ maskCheckbox.addEventListener('change', function () {
     localStorage.setItem('preferences', JSON.stringify(preferences));
 });
 
+cloakCheckbox.addEventListener('change', function () {
+    preferences.cloak = cloakCheckbox.checked;
+    localStorage.setItem('preferences', JSON.stringify(preferences));
+});
+
 
 /* if it is wanted to save on input change wather than submission
 document.querySelector('.text-field').addEventListener('change', function () {
@@ -392,14 +417,22 @@ document.querySelector('.text-field').addEventListener('change', function () {
 });
 */
 
+document.getElementById('cloakUrlSubmit').addEventListener('click', function () {
+    preferences.cloakUrl = cloakUrl.value;
+    localStorage.setItem('preferences', JSON.stringify(preferences));
+    alert("Submitted! Change will take place upon refresh");
+});
+
 document.getElementById('maskTitleSubmit').addEventListener('click', function () {
     preferences.maskTitle = maskTitle.value;
     localStorage.setItem('preferences', JSON.stringify(preferences));
+    alert("Submitted! Change will take place upon refresh");
 });
 
 document.getElementById('maskIconSubmit').addEventListener('click', function () {
     preferences.maskIconUrl = maskIcon.value;
     localStorage.setItem('preferences', JSON.stringify(preferences));
+    alert("Submitted! Change will take place upon refresh");
 });
 /* if (preferences.cloak && !localStorage.getItem("cloakTabOpened")){
     if (window.top.location.href !== "about:blank"){