Ajoute un mode competition a la configuration

app.js

@@ -114,6 +114,8 @@ function initSetupPage() {
   const summary = document.querySelector("#setupSummary");
   const loadDemoButton = document.querySelector("#loadDemoButton");
   const resumeCard = document.querySelector("#resumeCard");
+  const competitionModeInput = document.querySelector("#competitionMode");
+  const competitionFields = Array.from(document.querySelectorAll("[data-competition-field]"));
   const moveSecondsField = document.querySelector("#moveSecondsField");
   const timeInitialField = document.querySelector("#timeInitialField");
   const blockSecondsLabel = document.querySelector("#blockSecondsLabel");
@@ -124,6 +126,29 @@ function initSetupPage() {
     return;
   }
 
+  const syncCompetitionFields = () => {
+    const competitionMode = competitionModeInput instanceof HTMLInputElement && competitionModeInput.checked;
+
+    competitionFields.forEach((field) => {
+      if (!(field instanceof HTMLElement)) {
+        return;
+      }
+
+      field.hidden = !competitionMode;
+      field
+        .querySelectorAll("input, textarea, select")
+        .forEach((input) => {
+          if (
+            input instanceof HTMLInputElement ||
+            input instanceof HTMLTextAreaElement ||
+            input instanceof HTMLSelectElement
+          ) {
+            input.disabled = !competitionMode;
+          }
+        });
+    });
+  };
+
   const renderSummary = () => {
     const mode = getRadioValue(form, "mode") || "twice";
     const preset = getRadioValue(form, "preset") || "fast";
@@ -167,6 +192,8 @@ function initSetupPage() {
         blockLabel === "Block" ? "Temps du Block (secondes)" : "Temps partie (secondes)";
     }
 
+    syncCompetitionFields();
+
     summary.innerHTML = `
       <strong>${MODES[mode].label}</strong>
       <span>${PRESETS[preset].description}</span>
@@ -223,6 +250,7 @@ function initSetupPage() {
     const data = new FormData(form);
     const config = {
       matchLabel: sanitizeText(data.get("matchLabel")) || "Rencontre ChessCubing",
+      competitionMode: isCheckboxChecked(form, "competitionMode"),
       mode: getRadioValue(form, "mode") || "twice",
       preset: getRadioValue(form, "preset") || "fast",
       blockDurationMs: getDurationInputMs(form, "blockSeconds", DEFAULT_BLOCK_DURATION_MS),
@@ -1782,6 +1810,7 @@ function toggleModal(element, open) {
 }
 
 function loadDemo(form, onRender) {
+  setCheckboxValue(form, "competitionMode", true);
   setInputValue(form, "matchLabel", "Demo officielle ChessCubing");
   setRadioValue(form, "mode", "twice");
   setRadioValue(form, "preset", "freeze");
@@ -1815,6 +1844,18 @@ function setRadioValue(form, name, value) {
   }
 }
 
+function setCheckboxValue(form, name, checked) {
+  const input = form.querySelector(`input[name="${name}"]`);
+  if (input instanceof HTMLInputElement) {
+    input.checked = checked;
+  }
+}
+
+function isCheckboxChecked(form, name) {
+  const input = form.querySelector(`input[name="${name}"]`);
+  return input instanceof HTMLInputElement ? input.checked : false;
+}
+
 function getDurationInputMs(form, name, fallbackMs) {
   const input = form.querySelector(`[name="${name}"]`);
   const seconds = Number.parseInt(String(input?.value || ""), 10);

application.html

@@ -65,7 +65,16 @@
           </div>
 
           <form id="setupForm" class="setup-form">
-            <label class="field span-2">
+            <label class="option-card competition-option span-2">
+              <input id="competitionMode" name="competitionMode" type="checkbox" />
+              <strong>Mode compétition</strong>
+              <span>
+                Affiche le nom de la rencontre, l'arbitre, le club ou l'événement
+                et les notes d'organisation.
+              </span>
+            </label>
+
+            <label class="field span-2" id="matchLabelField" data-competition-field hidden>
               <span>Nom de la rencontre</span>
               <input
                 name="matchLabel"
@@ -167,7 +176,7 @@
               <input name="blackName" type="text" maxlength="40" placeholder="Noir" value="Noir" />
             </label>
 
-            <label class="field">
+            <label class="field" id="arbiterField" data-competition-field hidden>
               <span>Arbitre</span>
               <input
                 name="arbiterName"
@@ -177,7 +186,7 @@
               />
             </label>
 
-            <label class="field">
+            <label class="field" id="eventField" data-competition-field hidden>
               <span>Club / événement</span>
               <input
                 name="eventName"
@@ -187,7 +196,7 @@
               />
             </label>
 
-            <label class="field span-2">
+            <label class="field span-2" id="notesField" data-competition-field hidden>
               <span>Notes</span>
               <textarea
                 name="notes"

styles.css

@@ -452,6 +452,13 @@ textarea:focus {
   box-shadow: none;
 }
 
+.competition-option {
+  min-height: 0;
+  gap: 0.25rem;
+  padding-top: 0.95rem;
+  padding-bottom: 0.95rem;
+}
+
 .setup-summary {
   display: grid;
   gap: 0.38rem;