Transforme les sélecteurs en zones bouton

app.js

@@ -116,6 +116,7 @@ function initSetupPage() {
   const loadDemoButton = document.querySelector("#loadDemoButton");
   const resumeCard = document.querySelector("#resumeCard");
   const refreshAppButton = document.querySelector("#refreshAppButton");
+  const optionCards = Array.from(document.querySelectorAll(".option-card"));
   const competitionModeInput = document.querySelector("#competitionMode");
   const competitionFields = Array.from(document.querySelectorAll("[data-competition-field]"));
   const moveSecondsField = document.querySelector("#moveSecondsField");
@@ -151,6 +152,21 @@ function initSetupPage() {
     });
   };
 
+  const syncOptionCardStates = () => {
+    optionCards.forEach((card) => {
+      if (!(card instanceof HTMLElement)) {
+        return;
+      }
+
+      const input = card.querySelector('input[type="radio"], input[type="checkbox"]');
+      if (!(input instanceof HTMLInputElement)) {
+        return;
+      }
+
+      card.classList.toggle("is-selected", input.checked);
+    });
+  };
+
   const renderSummary = () => {
     const mode = getRadioValue(form, "mode") || "twice";
     const preset = getRadioValue(form, "preset") || "fast";
@@ -195,6 +211,7 @@ function initSetupPage() {
     }
 
     syncCompetitionFields();
+    syncOptionCardStates();
 
     summary.innerHTML = `
       <strong>${MODES[mode].label}</strong>
@@ -246,6 +263,24 @@ function initSetupPage() {
 
   form.addEventListener("input", renderSummary);
   loadDemoButton.addEventListener("click", () => loadDemo(form, renderSummary));
+  optionCards.forEach((card) => {
+    if (!(card instanceof HTMLElement)) {
+      return;
+    }
+
+    const input = card.querySelector('input[type="radio"], input[type="checkbox"]');
+    if (!(input instanceof HTMLInputElement)) {
+      return;
+    }
+
+    input.addEventListener("focus", () => {
+      card.classList.add("is-focused");
+    });
+
+    input.addEventListener("blur", () => {
+      card.classList.remove("is-focused");
+    });
+  });
   refreshAppButton?.addEventListener("click", async () => {
     if (!(refreshAppButton instanceof HTMLButtonElement)) {
       return;