Settings page now persists on reloads + added a "Load Defaults" button

.utilities/settings-page-builder/index.html

@@ -18,6 +18,7 @@
             <span id="urlLabel">Click to copy URL</span>
             <input id="widgetUrlInput" type="text" readonly onclick="CopyURLToClipboard()">
         </div>
+        <button id="loadDefaultsButton" onclick="OpenLoadDefaultsPopup()">Load Default Settings</button>
         <button id="loadSettingsButton" onclick="OpenLoadSettingsPopup()">Load Settings</button>
     </div>
 
@@ -48,6 +49,17 @@
             </div>
         </div>
     </div>
+
+    <div id="loadDefaultsWrapper">
+        <div id="loadDefaultsContainer">
+            <h2>Load Defaults</h2>
+            <label style="font-size: 0.8em;">Are you sure?</label>
+            <div style="display: flex; gap: 20px">
+                <button id="cancelDefaultsButton" onclick="CloseDefaultsPopup()">No</button>
+                <button style="background-color: var(--accent-color);" onclick="LoadDefaultSettings()">Yes</button>
+            </div>
+        </div>
+    </div>
 </body>
 
 </html>

.utilities/settings-page-builder/script.js

@@ -12,10 +12,14 @@ const urlLabel = document.getElementById('urlLabel');
 const settingsPanel = document.getElementById('settingsPanel');
 const widgetPreview = document.getElementById('widgetPreview');
 const loadURLBox = document.getElementById('loadUrlBox');
-const cancelSettingsButton = document.getElementById('cancelSettingsButton');
+const loadDefaultsBox = document.getElementById('loadDefaultsWrapper');
 const loadSettingsBox = document.getElementById('loadSettingsWrapper');
 const unmuteLabel = document.getElementById('unmute-label');
 
+// Global variables
+let settingsMap = new Map();
+
+// Set visibility of the unmute indicator
 if (showUnmuteIndicator)
 	unmuteLabel.style.display = 'inline';
 
@@ -25,9 +29,13 @@ if (showUnmuteIndicator)
 // LOAD FROM SETTINGS.JSON //
 /////////////////////////////
 
-fetch(settingsJson)
+function LoadJSON(settingsJson) {
+	fetch(settingsJson)
 		.then(response => response.json())
 		.then(data => {
+			// Clear the settings panel
+			settingsPanel.innerHTML = '';
+
 			const groupedSettings = {};
 
 			// Group settings by their 'group' property
@@ -75,7 +83,8 @@ fetch(settingsJson)
 							inputElement = document.createElement('input');
 							inputElement.type = 'text';
 							inputElement.id = setting.id; //Added setting ID
-						inputElement.value = setting.defaultValue;
+							inputElement.value = settingsMap.has(setting.id) ? settingsMap.get(setting.id) : setting.defaultValue;
+							inputElement.autocomplete = 'new-password';
 							break;
 						case 'checkbox':
 							const labelDiv = document.createElement('label');
@@ -83,7 +92,7 @@ fetch(settingsJson)
 							checkBoxElement = document.createElement('input');
 							checkBoxElement.type = 'checkbox';
 							checkBoxElement.id = setting.id;
-						checkBoxElement.checked = setting.defaultValue;
+							checkBoxElement.checked = settingsMap.has(setting.id) ? settingsMap.get(setting.id) : setting.defaultValue;
 							labelDiv.appendChild(checkBoxElement);
 
 							const slider = document.createElement('span');
@@ -110,19 +119,19 @@ fetch(settingsJson)
 								}
 								inputElement.appendChild(optionElement);
 							});
-						inputElement.value = setting.defaultValue;
+							inputElement.value = settingsMap.has(setting.id) ? settingsMap.get(setting.id) : setting.defaultValue;
 							break;
 						case 'color':
 							inputElement = document.createElement('input');
 							inputElement.type = 'color';
 							inputElement.id = setting.id; //Added setting ID
-						inputElement.value = setting.defaultValue;
+							inputElement.value = settingsMap.has(setting.id) ? settingsMap.get(setting.id) : setting.defaultValue;
 							break;
 						case 'number':
 							inputElement = document.createElement('input');
 							inputElement.type = 'number';
 							inputElement.id = setting.id; //Added setting ID
-						inputElement.value = setting.defaultValue;
+							inputElement.value = settingsMap.has(setting.id) ? settingsMap.get(setting.id) : setting.defaultValue;
 							inputElement.min = setting.min;
 							inputElement.max = setting.max;
 							inputElement.step = setting.step;
@@ -132,7 +141,7 @@ fetch(settingsJson)
 							inputElement.type = 'text';
 							inputElement.placeholder = 'Type to search...';
 							inputElement.id = setting.id; //Added setting ID
-						inputElement.value = setting.defaultValue;
+							inputElement.value = settingsMap.has(setting.id) ? settingsMap.get(setting.id) : setting.defaultValue;
 							inputElement.setAttribute('list', 'streamer-bot-actions');
 							inputElement.autocomplete = 'off';
 							break;
@@ -162,10 +171,22 @@ fetch(settingsJson)
 							inputElement = document.createElement('input');
 							inputElement.type = 'text';
 							inputElement.id = setting.id; //Added setting ID
-						inputElement.value = setting.defaultValue;
+							inputElement.value = settingsMap.has(setting.id) ? settingsMap.get(setting.id) : setting.defaultValue;
 					}
 
+					// Save settings to settings map
+					if (!settingsMap.has(setting.id))
+						settingsMap.set(setting.id, setting.defaultValue);
+
+					// Refresh the preview when any setting changes
 					inputElement.addEventListener('input', function (event) {
+						const settingElement = document.getElementById(setting.id);
+						if (setting.type == 'checkbox')
+							settingsMap.set(setting.id, settingElement.checked);
+						else
+							settingsMap.set(setting.id, settingElement.value);
+						
+						SaveSettingsToStorage();
 						RefreshWidgetPreview(data);
 					});
 
@@ -199,10 +220,35 @@ fetch(settingsJson)
 
 			UpdateSettingItemVisibility();
 			RefreshWidgetPreview(data);
+			SaveSettingsToStorage();
 		})
 		.catch(error => console.error('Error loading settings:', error));
+}
 
+function SaveSettingsToStorage() {
+	console.log(settingsMap);
+	const settingsArray = Array.from(settingsMap.entries());
+	const settingsArrayString = JSON.stringify(settingsArray);
+	localStorage.setItem('settingsMap', settingsArrayString);
+}
 
+function LoadSettingsFromStorage() {
+	// Retrieve session rankings from local storage
+	const settingsMapString = localStorage.getItem('settingsMap');
+	if (settingsMapString) {
+		const settingsMapArray = JSON.parse(settingsMapString);
+		settingsMap = new Map(settingsMapArray);
+	}
+}
+
+function LoadDefaultSettings() {
+	localStorage.removeItem('settingsMap');
+	settingsMap = new Map();
+	LoadJSON(settingsJson);
+
+	loadDefaultsBox.style.visibility = 'hidden';
+	loadDefaultsBox.style.opacity = 0;
+}
 
 function RefreshWidgetPreview(data) {
 	const settings = {};
@@ -330,6 +376,11 @@ function CopyURLToClipboard() {
 	}, 5000);
 }
 
+function CloseDefaultsPopup() {
+	loadDefaultsBox.style.visibility = 'hidden';
+	loadDefaultsBox.style.opacity = 0;
+};
+
 function CloseSettings() {
 	loadSettingsBox.style.visibility = 'hidden';
 	loadSettingsBox.style.opacity = 0;
@@ -359,6 +410,11 @@ function OpenMembershipPage() {
 	window.open("https://nutty.gg/collections/member-exclusive-widgets", '_blank').focus();
 }
 
+function OpenLoadDefaultsPopup() {
+	loadDefaultsBox.style.visibility = 'visible';
+	loadDefaultsBox.style.opacity = 1;
+}
+
 function OpenLoadSettingsPopup() {
 	loadSettingsBox.style.visibility = 'visible';
 	loadSettingsBox.style.opacity = 1;
@@ -417,3 +473,12 @@ window.addEventListener('message', (event) => {
 		unmuteLabel.style.display = 'none';
 	}
 });
+
+
+
+
+// Load settings from local storage
+LoadSettingsFromStorage();
+
+// Load default settings
+LoadJSON(settingsJson);

.utilities/settings-page-builder/style.css

@@ -329,7 +329,8 @@ button:hover {
     cursor: pointer;
 }
 
-#loadSettingsWrapper {
+#loadSettingsWrapper,
+#loadDefaultsWrapper {
     visibility: hidden;
     position: absolute;
     top: 0;
@@ -346,7 +347,8 @@ button:hover {
     opacity: 0;
 }
 
-#loadSettingsContainer {
+#loadSettingsContainer,
+#loadDefaultsContainer {
     position: absolute;
     left: 50%;
     top: 50%;