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 07ef216a..0e510844 100644 --- a/index.html +++ b/index.html @@ -259,11 +259,22 @@ +
Toggles if Cloak (Hides site from history and being view online) is forced
+ +This site will appear in your history instead of MonkeyGG2.
- - + +Press a button then press a key on your keyboard to choose
+ + + + +Background can cause a lot of lag. Disable if your computer is diagnosed with low FPS.
diff --git a/js/index.js b/js/index.js index e33d1068..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", @@ -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"){