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 %}