cloak changeable in settings

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>

js/index.js

@@ -359,9 +359,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 +388,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 +401,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"){