From 82a14fcb2be0a23d684613d4a65499da7601e412 Mon Sep 17 00:00:00 2001
From: william <you@example.com>
Date: Thu, 27 Aug 2026 14:56:03 +0200
Subject: [PATCH] Panneau valeur variable Objet/Tableau : bouton +Ajouter
 visible et sauvegarde auto
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Deux retours utilisateur sur le panneau "Configurer la valeur" ajouté au
commit précédent :
- le bouton "+ Ajouter" (style is-outlined) se voyait mal dans le panneau
  sombre -> repassé en bouton "primary" pleine largeur, et déplacé sous la
  liste des lignes (là où on l'attend pour ajouter une ligne de plus,
  plutôt qu'au-dessus, hors du flux de lecture) ;
- le bouton "OK - utiliser cette valeur" était un aller-retour inutile :
  supprimé. Chaque changement (texte tapé, clé, type, ajout ou retrait
  d'une ligne) réécrit désormais tout de suite le JSON dans le champ
  cible via saveVarValuePanel(), écoutée sur les événements input/change
  du conteneur des lignes - exactement comme si on tapait directement
  dans le champ, sans étape de validation séparée.

Aucun changement Python (127 tests toujours au vert) ; vérifié la syntaxe
du <script> rendu de l'onglet Variables via node --check.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 templates/game_dashboard.html | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/templates/game_dashboard.html b/templates/game_dashboard.html
index 43a0f41c..1fce0814 100644
--- a/templates/game_dashboard.html
+++ b/templates/game_dashboard.html
@@ -219,9 +219,8 @@
   </div>
   <div class="floatPanelBody">
     <p class="hint mb-2" id="varValuePanelHint"></p>
-    <button type="button" class="button is-outlined is-fullwidth mb-2" onclick="addVarValueRow()">+ Ajouter</button>
     <div id="varValueRows"></div>
-    <div class="actionsRow"><button type="button" class="primary" onclick="applyVarValuePanel()">OK — utiliser cette valeur</button></div>
+    <button type="button" class="button primary is-fullwidth mt-2" onclick="addVarValueRow()">+ Ajouter une ligne</button>
   </div>
   <div class="floatPanelResizeHandle" id="varValuePanelResizeHandle"></div>
 </div>
@@ -1014,8 +1013,9 @@ function switchObjectPanelTab(btn, tab) {
 // Un seul panneau partagé (voir le commentaire sur son HTML) : à
 // l'ouverture, mémorise vers quel <input> (targetId) le JSON reconstruit
 // devra être réécrit, construit une ligne par clé/élément déjà présent
-// dans le JSON actuel de cet <input>, puis "OK" sérialise les lignes et
-// referme.
+// dans le JSON actuel de cet <input>. Pas de bouton "OK" : chaque
+// changement de ligne réécrit tout de suite le JSON (saveVarValuePanel),
+// exactement comme si on tapait directement dans le champ cible.
 (function () {
   var panel = document.getElementById('varValuePanel');
   var rowsWrap = document.getElementById('varValueRows');
@@ -1050,14 +1050,21 @@ function switchObjectPanelTab(btn, tab) {
     if (key !== null) row.querySelector('.varValueKey').value = key;
     row.querySelector('.varValueType').value = type;
     row.querySelector('.varValueValue').value = valueTextOf(value, type);
-    row.querySelector('.varValueRemoveBtn').addEventListener('click', function () { row.remove(); });
+    row.querySelector('.varValueRemoveBtn').addEventListener('click', function () { row.remove(); saveVarValuePanel(); });
     rowsWrap.appendChild(clone);
   }
 
   window.addVarValueRow = function () {
     addRowFrom(panel.dataset.mode === 'tableau' ? null : '', '');
+    saveVarValuePanel();
   };
 
+  // Enregistrement automatique : pas de bouton "OK" — chaque changement
+  // (clé, type, valeur, ajout/retrait de ligne) réécrit tout de suite le
+  // JSON dans le champ cible, comme si on tapait directement dedans.
+  rowsWrap.addEventListener('input', saveVarValuePanel);
+  rowsWrap.addEventListener('change', saveVarValuePanel);
+
   window.openVarValuePanel = function (targetInputId, mode) {
     var input = document.getElementById(targetInputId);
     if (!input) return;
@@ -1084,7 +1091,8 @@ function switchObjectPanelTab(btn, tab) {
     panel.classList.add('hidden');
   };
 
-  window.applyVarValuePanel = function () {
+  function saveVarValuePanel() {
+    if (panel.classList.contains('hidden')) return;
     var mode = panel.dataset.mode;
     var result = mode === 'tableau' ? [] : {};
     rowsWrap.querySelectorAll('.varValueRow').forEach(function (row) {
@@ -1102,8 +1110,7 @@ function switchObjectPanelTab(btn, tab) {
       input.value = JSON.stringify(result);
       input.dispatchEvent(new Event('input', { bubbles: true }));
     }
-    closeVarValuePanel();
-  };
+  }
 })();
 </script>
 {% endblock %}