From 0d16a2f9f26b05aa509aa4b1abb0cdadad93a5b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ph=C3=B6nix=2064?= <piosbenni@gmail.com>
Date: Tue, 15 Apr 2025 14:55:36 +0200
Subject: [PATCH 1/3] Added Continous Mode button and functionality

---
 src/index.html   | 21 +++++++++++++++++++++
 src/js/app.js    |  3 ++-
 src/js/inputs.js |  3 +++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index b5617aa..03973bd 100644
--- a/src/index.html
+++ b/src/index.html
@@ -361,6 +361,27 @@ <h5>Responding Station Settings</h5>
                   />
                 </div>
 
+                <!-- Enable Continuous respons -->
+                <div class="col-12 col-md-6 col-lg">
+                  <input
+                    type="checkbox"
+                    class="btn-check"
+                    id="enableContinuous"
+                    autocomplete="off"
+                    onchange="
+                    document.getElementById('enableContinuousLabel').innerHTML =
+                      `<i class='${this.checked ? 'fa-solid fa-circle-check' : 'fa-regular fa-circle-xmark'} me-2'></i>Continuous Mode`;
+                      "
+                  />
+                  <label
+                    class="btn btn-outline-primary w-100"
+                    for="enableContinuous"
+                    id="enableContinuousLabel"
+                  >
+                    <i class="fa-regular fa-circle-xmark me-2"></i>Continuous Mode
+                  </label>
+                </div>
+
                 <!-- Min Speed -->
                 <div class="col-12 col-md-4 col-lg">
                   <label for="minSpeed" class="form-label">Min Speed</label>
diff --git a/src/js/app.js b/src/js/app.js
index 0d5e604..a9411b5 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -494,6 +494,7 @@ function send() {
           stn.farnsworthSpeed = Math.max(
             5,
             stn.farnsworthSpeed - farnsworthLowerBy
+
           );
         } else {
           stn.enableFarnsworth = true;
@@ -831,7 +832,7 @@ function tu() {
   responseField.focus();
 
   // Chance of a new station joining
-  if (Math.random() < 0.4) {
+  if (Math.random() < 0.4 || document.getElementById('enableContinuous').checked) {
     addStations(currentStations, inputs);
   }
 
diff --git a/src/js/inputs.js b/src/js/inputs.js
index e07f38b..610cfbd 100644
--- a/src/js/inputs.js
+++ b/src/js/inputs.js
@@ -41,6 +41,9 @@ function getDOMInputs() {
     // convert volume to a float between 0 and 1
     yourVolume: parseFloat(document.getElementById('yourVolume').value) / 100,
     maxStations: parseInt(document.getElementById('maxStations').value, 10),
+    enableContinuous: document.getElementById('enableContinuous')
+      ? document.getElementById('enableContinuous').checked
+      : false,
     minSpeed: parseInt(document.getElementById('minSpeed').value, 10),
     maxSpeed: parseInt(document.getElementById('maxSpeed').value, 10),
     minTone: parseInt(document.getElementById('minTone').value, 10),

From 09fc29035ac223d3cd974bd590d89de3c7274b82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ph=C3=B6nix=2064?= <piosbenni@gmail.com>
Date: Wed, 23 Apr 2025 11:57:45 +0200
Subject: [PATCH 2/3] Saved all input fileds using new dynamic system and
 created reset logic

---
 src/index.html |  50 +++++++++
 src/js/app.js  | 295 ++++++++++++++++++++++++++++++-------------------
 2 files changed, 233 insertions(+), 112 deletions(-)

diff --git a/src/index.html b/src/index.html
index 03973bd..61d181d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -127,6 +127,7 @@ <h3 class="mb-2 mb-sm-0 text-center text-sm-start me-sm-3">Mode</h3>
             value="single"
             autocomplete="off"
             checked
+            data-persist="true"
           />
           <label
             class="btn btn-outline-primary d-flex align-items-center justify-content-center"
@@ -141,6 +142,7 @@ <h3 class="mb-2 mb-sm-0 text-center text-sm-start me-sm-3">Mode</h3>
             id="modeContest"
             value="contest"
             autocomplete="off"
+            data-persist="true"
           />
           <label
             class="btn btn-outline-primary d-flex align-items-center justify-content-center"
@@ -155,6 +157,7 @@ <h3 class="mb-2 mb-sm-0 text-center text-sm-start me-sm-3">Mode</h3>
             id="modePota"
             value="pota"
             autocomplete="off"
+            data-persist="true"
           />
           <label
             class="btn btn-outline-primary d-flex align-items-center justify-content-center"
@@ -169,6 +172,7 @@ <h3 class="mb-2 mb-sm-0 text-center text-sm-start me-sm-3">Mode</h3>
             id="modeCwt"
             value="cwt"
             autocomplete="off"
+            data-persist="true"
           />
           <label
             class="btn btn-outline-primary d-flex align-items-center justify-content-center"
@@ -183,6 +187,7 @@ <h3 class="mb-2 mb-sm-0 text-center text-sm-start me-sm-3">Mode</h3>
             id="modeSst"
             value="sst"
             autocomplete="off"
+            data-persist="true"
           />
           <label
             class="btn btn-outline-primary d-flex align-items-center justify-content-center"
@@ -191,6 +196,11 @@ <h3 class="mb-2 mb-sm-0 text-center text-sm-start me-sm-3">Mode</h3>
           >
         </div>
       </div>
+      <div
+      class="col-12 col-lg-3 d-flex justify-content-lg-end align-items-center"
+      >
+      <button id="resetSettingsButton" class="btn btn-secondary mb-2">Reset Settings</button>
+      </div>
     </div>
 
     <hr />
@@ -232,6 +242,7 @@ <h5>Your Station Settings</h5>
                     autocapitalize="characters"
                     spellcheck="false"
                     autocorrect="off"
+                    data-persist="true"
                   />
                   <div class="invalid-feedback"></div>
                 </div>
@@ -247,6 +258,7 @@ <h5>Your Station Settings</h5>
                     autocapitalize="characters"
                     spellcheck="false"
                     autocorrect="off"
+                    data-persist="true"
                   />
                   <div class="invalid-feedback"></div>
                 </div>
@@ -263,6 +275,7 @@ <h5>Your Station Settings</h5>
                     autocapitalize="characters"
                     spellcheck="false"
                     autocorrect="off"
+                    data-persist="true"
                   />
                   <div class="invalid-feedback"></div>
                 </div>
@@ -279,6 +292,7 @@ <h5>Your Station Settings</h5>
                     max="100"
                     step="1"
                     required
+                    data-persist="true"
                   />
                 </div>
                 <div class="col-6 col-md-4 col-lg-2">
@@ -295,6 +309,7 @@ <h5>Your Station Settings</h5>
                     max="9999"
                     step="1"
                     required
+                    data-persist="true"
                   />
                 </div>
                 <div class="col-6 col-md-4 col-lg-2">
@@ -311,6 +326,7 @@ <h5>Your Station Settings</h5>
                     max="100"
                     step="1"
                     required
+                    data-persist="true"
                   />
                 </div>
               </div>
@@ -358,6 +374,7 @@ <h5>Responding Station Settings</h5>
                     max="100"
                     step="1"
                     required
+                    data-persist="true"
                   />
                 </div>
 
@@ -368,6 +385,7 @@ <h5>Responding Station Settings</h5>
                     class="btn-check"
                     id="enableContinuous"
                     autocomplete="off"
+                    data-persist="true"
                     onchange="
                     document.getElementById('enableContinuousLabel').innerHTML =
                       `<i class='${this.checked ? 'fa-solid fa-circle-check' : 'fa-regular fa-circle-xmark'} me-2'></i>Continuous Mode`;
@@ -394,6 +412,7 @@ <h5>Responding Station Settings</h5>
                     min="1"
                     max="100"
                     step="1"
+                    data-persist="true"
                     required
                   />
                   <div class="invalid-feedback"></div>
@@ -411,6 +430,7 @@ <h5>Responding Station Settings</h5>
                     min="1"
                     max="100"
                     step="1"
+                    data-persist="true"
                     required
                   />
                 </div>
@@ -422,6 +442,7 @@ <h5>Responding Station Settings</h5>
                     class="btn-check"
                     id="enableFarnsworth"
                     autocomplete="off"
+                    data-persist="true"
                     onchange="
                    document.getElementById('enableFarnsworthLabel').innerHTML =
                      `<i class='${this.checked ? 'fa-solid fa-circle-check' : 'fa-regular fa-circle-xmark'} me-2'></i>Farnsworth`;
@@ -451,6 +472,7 @@ <h5>Responding Station Settings</h5>
                     min="1"
                     max="100"
                     step="1"
+                    data-persist="true"
                     required
                     disabled
                   />
@@ -470,6 +492,7 @@ <h5>Responding Station Settings</h5>
                     min="1"
                     max="9999"
                     step="1"
+                    data-persist="true"
                     required
                   />
                   <div class="invalid-feedback"></div>
@@ -485,6 +508,7 @@ <h5>Responding Station Settings</h5>
                     min="1"
                     max="9999"
                     step="1"
+                    data-persist="true"
                     required
                   />
                 </div>
@@ -499,6 +523,7 @@ <h5>Responding Station Settings</h5>
                     min="0"
                     max="100"
                     step="1"
+                    data-persist="true"
                     required
                   />
                   <div class="invalid-feedback"></div>
@@ -514,6 +539,7 @@ <h5>Responding Station Settings</h5>
                     min="0"
                     max="100"
                     step="1"
+                    data-persist="true"
                     required
                   />
                 </div>
@@ -532,6 +558,7 @@ <h5>Responding Station Settings</h5>
                     min="0"
                     max="2"
                     step="0.25"
+                    data-persist="true"
                     required
                   />
                 </div>
@@ -550,6 +577,7 @@ <h5>Responding Station Settings</h5>
                     min="0"
                     max="5"
                     step="0.25"
+                    data-persist="true"
                     required
                   />
                 </div>
@@ -565,6 +593,7 @@ <h5>Responding Station Settings</h5>
                     autocomplete="off"
                     id="usOnly"
                     checked
+                    data-persist="true"
                     onchange="
                    document.getElementById('usOnlyLabel').innerHTML =
                      `<i class='${this.checked ? 'fa-solid fa-circle-check' : 'fa-regular fa-circle-xmark'} me-2'></i>US Only Callsigns`;
@@ -593,6 +622,7 @@ <h5>Responding Station Settings</h5>
                       class="btn-check"
                       id="1x1"
                       autocomplete="off"
+                      data-persist="true"
                     />
                     <label class="btn btn-outline-primary" for="1x1">1x1</label>
 
@@ -601,6 +631,7 @@ <h5>Responding Station Settings</h5>
                       class="btn-check"
                       id="1x2"
                       autocomplete="off"
+                      data-persist="true"
                       checked
                     />
                     <label class="btn btn-outline-primary" for="1x2">1x2</label>
@@ -610,6 +641,7 @@ <h5>Responding Station Settings</h5>
                       class="btn-check"
                       id="2x1"
                       autocomplete="off"
+                      data-persist="true"
                       checked
                     />
                     <label class="btn btn-outline-primary" for="2x1">2x1</label>
@@ -619,6 +651,7 @@ <h5>Responding Station Settings</h5>
                       class="btn-check"
                       id="2x2"
                       autocomplete="off"
+                      data-persist="true"
                       checked
                     />
                     <label class="btn btn-outline-primary" for="2x2">2x2</label>
@@ -628,6 +661,7 @@ <h5>Responding Station Settings</h5>
                       class="btn-check"
                       id="1x3"
                       autocomplete="off"
+                      data-persist="true"
                       checked
                     />
                     <label class="btn btn-outline-primary" for="1x3">1x3</label>
@@ -637,6 +671,7 @@ <h5>Responding Station Settings</h5>
                       class="btn-check"
                       id="2x3"
                       autocomplete="off"
+                      data-persist="true"
                       checked
                     />
                     <label class="btn btn-outline-primary" for="2x3">2x3</label>
@@ -655,6 +690,7 @@ <h5>Responding Station Settings</h5>
                     type="checkbox"
                     class="btn-check"
                     autocomplete="off"
+                    data-persist="true"
                     id="enableCutNumbers"
                     onchange="document.getElementById('enableCutNumbersLabel').innerHTML =
                             `<i class='${this.checked ? 'fa-solid fa-circle-check' : 'fa-regular fa-circle-xmark'} me-2'></i>Enable Cut Numbers`;
@@ -684,6 +720,7 @@ <h5>Responding Station Settings</h5>
                       class="btn-check"
                       id="cutT"
                       autocomplete="off"
+                      data-persist="true"
                       checked
                     />
                     <label
@@ -698,6 +735,7 @@ <h5>Responding Station Settings</h5>
                       class="btn-check"
                       id="cutA"
                       autocomplete="off"
+                      data-persist="true"
                     />
                     <label
                       class="btn btn-responsive btn-outline-primary"
@@ -711,6 +749,7 @@ <h5>Responding Station Settings</h5>
                       class="btn-check"
                       id="cutU"
                       autocomplete="off"
+                      data-persist="true"
                     />
                     <label
                       class="btn btn-responsive btn-outline-primary"
@@ -724,6 +763,7 @@ <h5>Responding Station Settings</h5>
                       class="btn-check"
                       id="cutV"
                       autocomplete="off"
+                      data-persist="true"
                     />
                     <label
                       class="btn btn-responsive btn-outline-primary"
@@ -737,6 +777,7 @@ <h5>Responding Station Settings</h5>
                       class="btn-check"
                       id="cutE"
                       autocomplete="off"
+                      data-persist="true"
                     />
                     <label
                       class="btn btn-responsive btn-outline-primary"
@@ -750,6 +791,7 @@ <h5>Responding Station Settings</h5>
                       class="btn-check"
                       id="cutG"
                       autocomplete="off"
+                      data-persist="true"
                     />
                     <label
                       class="btn btn-responsive btn-outline-primary"
@@ -763,6 +805,7 @@ <h5>Responding Station Settings</h5>
                       class="btn-check"
                       id="cutD"
                       autocomplete="off"
+                      data-persist="true"
                     />
                     <label
                       class="btn btn-responsive btn-outline-primary"
@@ -776,6 +819,7 @@ <h5>Responding Station Settings</h5>
                       class="btn-check"
                       id="cutN"
                       autocomplete="off"
+                      data-persist="true"
                       checked
                     />
                     <label
@@ -827,6 +871,7 @@ <h5>Effects Settings</h5>
                       name="qrn"
                       id="qrnOff"
                       value="off"
+                      data-persist="true"
                     />
                     <label class="btn btn-outline-primary" for="qrnOff"
                       >Off</label
@@ -838,6 +883,7 @@ <h5>Effects Settings</h5>
                       name="qrn"
                       id="qrnNormal"
                       value="normal"
+                      data-persist="true"
                       checked
                     />
                     <label class="btn btn-outline-primary" for="qrnNormal"
@@ -850,6 +896,7 @@ <h5>Effects Settings</h5>
                       name="qrn"
                       id="qrnModerate"
                       value="moderate"
+                      data-persist="true"
                     />
                     <label class="btn btn-outline-primary" for="qrnModerate"
                       >Moderate</label
@@ -861,6 +908,7 @@ <h5>Effects Settings</h5>
                       name="qrn"
                       id="qrnHeavy"
                       value="heavy"
+                      data-persist="true"
                     />
                     <label class="btn btn-outline-primary" for="qrnHeavy"
                       >Heavy</label
@@ -878,6 +926,7 @@ <h5>Effects Settings</h5>
                         class="btn-check"
                         id="qsb"
                         autocomplete="off"
+                        data-persist="true"
                         onchange="
                          document.getElementById('qsbLabel').innerHTML =
                            `<i class='${this.checked ? 'fa-solid fa-circle-check' : 'fa-regular fa-circle-xmark'} me-2'></i>QSB (Fading)`;
@@ -906,6 +955,7 @@ <h5>Effects Settings</h5>
                         min="0"
                         max="100"
                         value="50"
+                        data-persist="true"
                         disabled
                         oninput="document.getElementById('qsbValue').textContent = this.value + '%';"
                       />
diff --git a/src/js/app.js b/src/js/app.js
index a9411b5..8d62c1c 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -85,64 +85,20 @@ document.addEventListener('DOMContentLoaded', () => {
   const yourSpeed = document.getElementById('yourSpeed');
   const yourSidetone = document.getElementById('yourSidetone');
   const yourVolume = document.getElementById('yourVolume');
+  const resetSettingsButton = document.getElementById('resetSettingsButton');
 
-  // Event Listeners
+  // Event Listeners for game actions
   cqButton.addEventListener('click', cq);
   sendButton.addEventListener('click', send);
   tuButton.addEventListener('click', tu);
   resetButton.addEventListener('click', reset);
   stopButton.addEventListener('click', stop);
+
   modeRadios.forEach((radio) => {
     radio.addEventListener('change', changeMode);
   });
 
-  // QSB
-  const qsbCheckbox = document.getElementById('qsb');
-  const qsbPercentage = document.getElementById('qsbPercentage');
-  // Initially set the slider state based on the checkbox
-  qsbPercentage.disabled = !qsbCheckbox.checked;
-  // Add event listener to update the slider state when checkbox changes
-  qsbCheckbox.addEventListener('change', () => {
-    qsbPercentage.disabled = !qsbCheckbox.checked;
-  });
-
-  // Farnsworth elements
-  const enableFarnsworthCheckbox = document.getElementById('enableFarnsworth');
-  const farnsworthSpeedInput = document.getElementById('farnsworthSpeed');
-  // Set initial state based on whether Farnsworth is enabled
-  farnsworthSpeedInput.disabled = !enableFarnsworthCheckbox.checked;
-  // Toggle the Farnsworth speed input when the checkbox changes
-  enableFarnsworthCheckbox.addEventListener('change', () => {
-    farnsworthSpeedInput.disabled = !enableFarnsworthCheckbox.checked;
-  });
-
-  // Cut Number elements
-  const enableCutNumbersCheckbox = document.getElementById('enableCutNumbers');
-  const cutNumberIds = [
-    'cutT',
-    'cutA',
-    'cutU',
-    'cutV',
-    'cutE',
-    'cutG',
-    'cutD',
-    'cutN',
-  ];
-
-  // Set initial state based on whether Cut Numbers is enabled
-  cutNumberIds.forEach((id) => {
-    const checkbox = document.getElementById(id);
-    checkbox.disabled = !enableCutNumbersCheckbox.checked;
-  });
-
-  // Toggle the cut-number checkboxes when "Enable Cut Numbers" changes
-  enableCutNumbersCheckbox.addEventListener('change', () => {
-    cutNumberIds.forEach((id) => {
-      const checkbox = document.getElementById(id);
-      checkbox.disabled = !enableCutNumbersCheckbox.checked;
-    });
-  });
-
+  // Responsive button size handler
   function updateResponsiveButtons() {
     const responsiveButtons = document.querySelectorAll('.btn-responsive');
     responsiveButtons.forEach((button) => {
@@ -153,25 +109,18 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     });
   }
-
-  // Run on initial load
   updateResponsiveButtons();
-  // Run on every window resize
   window.addEventListener('resize', updateResponsiveButtons);
 
-  // Add hotkey for CQ (Ctrl + Shift + C)
-  // Add an event listener for keydown events
+  // Hotkey: Ctrl + Shift + C to trigger CQ
   document.addEventListener('keydown', (event) => {
-    // Check if Ctrl and Shift are pressed and the key is 'C'
     if (event.ctrlKey && event.shiftKey && event.key === 'C') {
-      // Prevent default behavior to avoid browser conflicts
       event.preventDefault();
-
-      // Call the CQ function
       cq();
     }
   });
 
+  // Send on Enter key
   responseField.addEventListener('keydown', (event) => {
     if (event.key === 'Enter') {
       event.preventDefault();
@@ -193,77 +142,44 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
+  // Focus response field after CQ
   cqButton.addEventListener('click', () => {
     responseField.focus();
   });
 
-  // Local Storage keys for user settings
-  const keys = {
-    yourCallsign: 'yourCallsign',
-    yourName: 'yourName',
-    yourState: 'yourState', // Added yourState
-    yourSpeed: 'yourSpeed',
-    yourSidetone: 'yourSidetone',
-    yourVolume: 'yourVolume',
-  };
-
-  /**
-   * Local storage handling for user settings.
-   *
-   * - Loads saved values from local storage into input fields during initialization.
-   * - Saves updated input field values to local storage whenever they change.
-   * - Ensures persistence of user preferences across sessions.
-   */
-  yourCallsign.value =
-    localStorage.getItem(keys.yourCallsign) || yourCallsign.value;
-  yourName.value = localStorage.getItem(keys.yourName) || yourName.value;
-  yourState.value = localStorage.getItem(keys.yourState) || yourState.value; // Load yourState
-  yourSpeed.value = localStorage.getItem(keys.yourSpeed) || yourSpeed.value;
-  yourSidetone.value =
-    localStorage.getItem(keys.yourSidetone) || yourSidetone.value;
-  yourVolume.value = localStorage.getItem(keys.yourVolume) || yourVolume.value;
-
-  // Save user settings to localStorage on input change
-  yourCallsign.addEventListener('input', () => {
-    localStorage.setItem(keys.yourCallsign, yourCallsign.value);
-  });
-  yourName.addEventListener('input', () => {
-    localStorage.setItem(keys.yourName, yourName.value);
-  });
-  yourState.addEventListener('input', () => {
-    // Save yourState
-    localStorage.setItem(keys.yourState, yourState.value);
-  });
-  yourSpeed.addEventListener('input', () => {
-    localStorage.setItem(keys.yourSpeed, yourSpeed.value);
-  });
-  yourSidetone.addEventListener('input', () => {
-    localStorage.setItem(keys.yourSidetone, yourSidetone.value);
-  });
-  yourVolume.addEventListener('input', () => {
-    localStorage.setItem(keys.yourVolume, yourVolume.value);
-  });
+  // Setup persistence and toggles
+  setupDynamicPersistence();
+  setupTogglesAndLabels();
+  setupQRNGroup();
+
+  // Reset settings button
+  if (resetSettingsButton) {
+    resetSettingsButton.addEventListener('click', () => {
+      if (confirm('Are you sure you want to reset all settings?')) {
+        resetDynamicPersistence();
+        setupTogglesAndLabels();
+        setupQRNGroup();
+      }
+    });
+  }
 
-  // Handle QRN intensity changes
+  // QRN intensity updating
   const qrnRadioButtons = document.querySelectorAll('input[name="qrn"]');
   qrnRadioButtons.forEach((radio) => {
     radio.addEventListener('change', updateStaticIntensity);
   });
 
-  // Determine mode from local storage or default to single
+  // Load saved mode
   const savedMode = localStorage.getItem('mode') || 'single';
-  // Check the corresponding radio button based on savedMode
   const savedModeRadio = document.querySelector(
     `input[name="mode"][value="${savedMode}"]`
   );
   if (savedModeRadio) {
     savedModeRadio.checked = true;
   }
-
-  // Set currentMode to the saved or default mode
   currentMode = savedMode;
 
-  // Update basic stats on page load
+  // Submit initial stats if callsign is present
   if (yourCallsign.value !== '') {
     fetch(`https://stats.${window.location.hostname}/api/submit`, {
       method: 'POST',
@@ -274,13 +190,168 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
-  // Reset state to ensure no leftover stations when loading
+  // Initialize game
   resetGameState();
-
-  // Apply mode settings now that currentMode matches the dropdown and local storage
   applyModeSettings(currentMode);
 });
 
+
+/**
+ * Handles loading and saving of all fields marked with data-persist="true"
+ * Automatically binds based on their ID as the storage key.
+ */
+
+function setupDynamicPersistence() {
+  const persistElements = document.querySelectorAll('[data-persist="true"]');
+
+  persistElements.forEach(el => {
+    const key = el.id;
+    if (!key) return; // Skip if no ID (cannot persist)
+
+    // Load saved value
+    const savedValue = localStorage.getItem(key);
+    if (savedValue !== null) {
+      if (el.type === 'checkbox' || el.type === 'radio') {
+        el.checked = savedValue === 'true';
+      } else {
+        el.value = savedValue;
+      }
+    }
+
+    // Save on change/input
+    const eventType = (el.type === 'checkbox' || el.type === 'radio') ? 'change' : 'input';
+    el.addEventListener(eventType, () => {
+      const valueToStore = (el.type === 'checkbox' || el.type === 'radio') ? el.checked : el.value;
+      localStorage.setItem(key, valueToStore);
+    });
+  });
+}
+
+/**
+ * Clears all persisted fields and resets them to default values.
+ */
+function resetDynamicPersistence() {
+  const persistElements = document.querySelectorAll('[data-persist="true"]');
+
+  persistElements.forEach(el => {
+    const key = el.id;
+    if (!key) return;
+
+    localStorage.removeItem(key);
+
+    if (el.type === 'checkbox' || el.type === 'radio') {
+      el.checked = el.defaultChecked;
+    } else {
+      el.value = el.defaultValue || '';
+    }
+
+    // Dispatch event to trigger any UI updates
+    el.dispatchEvent(new Event('change'));
+  });
+}
+
+/**
+ * Automatically updates button labels and toggles dependent elements
+ * based on checkbox or radio states.
+ */
+function setupTogglesAndLabels() {
+  // Map each main toggle to its label ID and optional dependent fields
+  const toggleConfig = [
+    {
+      controlId: 'enableContinuous',
+      labelId: 'enableContinuousLabel',
+      labelText: 'Continuous Mode',
+      dependents: [] // no dependent fields
+    },
+    {
+      controlId: 'enableFarnsworth',
+      labelId: 'enableFarnsworthLabel',
+      labelText: 'Farnsworth',
+      dependents: ['farnsworthSpeed']
+    },
+    {
+      controlId: 'usOnly',
+      labelId: 'usOnlyLabel',
+      labelText: 'US Only Callsigns',
+      dependents: []
+    },
+    {
+      controlId: 'qsb',
+      labelId: 'qsbLabel',
+      labelText: 'QSB (Fading)',
+      dependents: ['qsbPercentage']
+    },
+    {
+      controlId: 'enableCutNumbers',
+      labelId: 'enableCutNumbersLabel',
+      labelText: 'Enable Cut Numbers',
+      dependents: ['cutT', 'cutA', 'cutU', 'cutV', 'cutE', 'cutG', 'cutD', 'cutN']
+    }
+  ];
+
+  toggleConfig.forEach(({ controlId, labelId, labelText, dependents }) => {
+    const control = document.getElementById(controlId);
+    const label = document.getElementById(labelId);
+
+    if (!control) return;
+
+    function updateUI() {
+      const enabled = control.checked;
+
+      // Update label icon
+      if (label) {
+        label.innerHTML = `<i class='${enabled ? 'fa-solid fa-circle-check' : 'fa-regular fa-circle-xmark'} me-2'></i>${labelText}`;
+      }
+
+      // Enable or disable dependent fields
+      dependents.forEach(dependentId => {
+        const dependent = document.getElementById(dependentId);
+        if (dependent) {
+          dependent.disabled = !enabled;
+        }
+      });
+
+      // Special: if qsbPercentage (range), also update value display
+      if (controlId === 'qsb') {
+        const qsbValue = document.getElementById('qsbValue');
+        const qsbPercentage = document.getElementById('qsbPercentage');
+        if (qsbValue && qsbPercentage) {
+          qsbValue.textContent = qsbPercentage.value + '%';
+        }
+      }
+    }
+
+    // Update once on load
+    updateUI();
+
+    // Update when user interacts
+    control.addEventListener('change', updateUI);
+  });
+}
+
+/**
+ * Handle QRN button states after settings loading  
+ */
+function setupQRNGroup() {
+  const savedQrn = localStorage.getItem('qrn');
+  if (savedQrn) {
+    const qrnRadio = document.querySelector(`input[name="qrn"][value="${savedQrn}"]`);
+    if (qrnRadio) {
+      qrnRadio.checked = true;
+    }
+  }
+
+  const qrnRadios = document.querySelectorAll('input[name="qrn"]');
+  qrnRadios.forEach(radio => {
+    radio.addEventListener('change', () => {
+      if (radio.checked) {
+        localStorage.setItem('qrn', radio.value);
+      }
+    });
+  });
+}
+
+
 /**
  * Retrieves the logic configuration for the current mode.
  *

From 3fab863ff29526d86f24a0cf618c7d5d70bd1dbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ph=C3=B6nix=2064?= <piosbenni@gmail.com>
Date: Wed, 23 Apr 2025 11:58:10 +0200
Subject: [PATCH 3/3] Reimplemented settings save for all input fields and
 reset button

---
 src/index.html |  9 ++++++---
 src/js/app.js  | 49 +++++++++++++++++++++++++++++++------------------
 2 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/index.html b/src/index.html
index 61d181d..e6e80e1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -197,9 +197,11 @@ <h3 class="mb-2 mb-sm-0 text-center text-sm-start me-sm-3">Mode</h3>
         </div>
       </div>
       <div
-      class="col-12 col-lg-3 d-flex justify-content-lg-end align-items-center"
+        class="col-12 col-lg-3 d-flex justify-content-lg-end align-items-center"
       >
-      <button id="resetSettingsButton" class="btn btn-secondary mb-2">Reset Settings</button>
+        <button id="resetSettingsButton" class="btn btn-secondary mb-2">
+          Reset Settings
+        </button>
       </div>
     </div>
 
@@ -396,7 +398,8 @@ <h5>Responding Station Settings</h5>
                     for="enableContinuous"
                     id="enableContinuousLabel"
                   >
-                    <i class="fa-regular fa-circle-xmark me-2"></i>Continuous Mode
+                    <i class="fa-regular fa-circle-xmark me-2"></i>Continuous
+                    Mode
                   </label>
                 </div>
 
diff --git a/src/js/app.js b/src/js/app.js
index 8d62c1c..e2d2ff1 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -195,7 +195,6 @@ document.addEventListener('DOMContentLoaded', () => {
   applyModeSettings(currentMode);
 });
 
-
 /**
  * Handles loading and saving of all fields marked with data-persist="true"
  * Automatically binds based on their ID as the storage key.
@@ -204,7 +203,7 @@ document.addEventListener('DOMContentLoaded', () => {
 function setupDynamicPersistence() {
   const persistElements = document.querySelectorAll('[data-persist="true"]');
 
-  persistElements.forEach(el => {
+  persistElements.forEach((el) => {
     const key = el.id;
     if (!key) return; // Skip if no ID (cannot persist)
 
@@ -219,9 +218,11 @@ function setupDynamicPersistence() {
     }
 
     // Save on change/input
-    const eventType = (el.type === 'checkbox' || el.type === 'radio') ? 'change' : 'input';
+    const eventType =
+      el.type === 'checkbox' || el.type === 'radio' ? 'change' : 'input';
     el.addEventListener(eventType, () => {
-      const valueToStore = (el.type === 'checkbox' || el.type === 'radio') ? el.checked : el.value;
+      const valueToStore =
+        el.type === 'checkbox' || el.type === 'radio' ? el.checked : el.value;
       localStorage.setItem(key, valueToStore);
     });
   });
@@ -233,7 +234,7 @@ function setupDynamicPersistence() {
 function resetDynamicPersistence() {
   const persistElements = document.querySelectorAll('[data-persist="true"]');
 
-  persistElements.forEach(el => {
+  persistElements.forEach((el) => {
     const key = el.id;
     if (!key) return;
 
@@ -261,32 +262,41 @@ function setupTogglesAndLabels() {
       controlId: 'enableContinuous',
       labelId: 'enableContinuousLabel',
       labelText: 'Continuous Mode',
-      dependents: [] // no dependent fields
+      dependents: [], // no dependent fields
     },
     {
       controlId: 'enableFarnsworth',
       labelId: 'enableFarnsworthLabel',
       labelText: 'Farnsworth',
-      dependents: ['farnsworthSpeed']
+      dependents: ['farnsworthSpeed'],
     },
     {
       controlId: 'usOnly',
       labelId: 'usOnlyLabel',
       labelText: 'US Only Callsigns',
-      dependents: []
+      dependents: [],
     },
     {
       controlId: 'qsb',
       labelId: 'qsbLabel',
       labelText: 'QSB (Fading)',
-      dependents: ['qsbPercentage']
+      dependents: ['qsbPercentage'],
     },
     {
       controlId: 'enableCutNumbers',
       labelId: 'enableCutNumbersLabel',
       labelText: 'Enable Cut Numbers',
-      dependents: ['cutT', 'cutA', 'cutU', 'cutV', 'cutE', 'cutG', 'cutD', 'cutN']
-    }
+      dependents: [
+        'cutT',
+        'cutA',
+        'cutU',
+        'cutV',
+        'cutE',
+        'cutG',
+        'cutD',
+        'cutN',
+      ],
+    },
   ];
 
   toggleConfig.forEach(({ controlId, labelId, labelText, dependents }) => {
@@ -304,7 +314,7 @@ function setupTogglesAndLabels() {
       }
 
       // Enable or disable dependent fields
-      dependents.forEach(dependentId => {
+      dependents.forEach((dependentId) => {
         const dependent = document.getElementById(dependentId);
         if (dependent) {
           dependent.disabled = !enabled;
@@ -330,19 +340,21 @@ function setupTogglesAndLabels() {
 }
 
 /**
- * Handle QRN button states after settings loading  
+ * Handle QRN button states after settings loading
  */
 function setupQRNGroup() {
   const savedQrn = localStorage.getItem('qrn');
   if (savedQrn) {
-    const qrnRadio = document.querySelector(`input[name="qrn"][value="${savedQrn}"]`);
+    const qrnRadio = document.querySelector(
+      `input[name="qrn"][value="${savedQrn}"]`
+    );
     if (qrnRadio) {
       qrnRadio.checked = true;
     }
   }
 
   const qrnRadios = document.querySelectorAll('input[name="qrn"]');
-  qrnRadios.forEach(radio => {
+  qrnRadios.forEach((radio) => {
     radio.addEventListener('change', () => {
       if (radio.checked) {
         localStorage.setItem('qrn', radio.value);
@@ -351,7 +363,6 @@ function setupQRNGroup() {
   });
 }
 
-
 /**
  * Retrieves the logic configuration for the current mode.
  *
@@ -565,7 +576,6 @@ function send() {
           stn.farnsworthSpeed = Math.max(
             5,
             stn.farnsworthSpeed - farnsworthLowerBy
-
           );
         } else {
           stn.enableFarnsworth = true;
@@ -903,7 +913,10 @@ function tu() {
   responseField.focus();
 
   // Chance of a new station joining
-  if (Math.random() < 0.4 || document.getElementById('enableContinuous').checked) {
+  if (
+    Math.random() < 0.4 ||
+    document.getElementById('enableContinuous').checked
+  ) {
     addStations(currentStations, inputs);
   }