Phase 7 : personnage animé par sprites (poses/images successives)

Ajoute une nouvelle action de flow "jouer_animation_sprite" qui joue une
séquence de PNG sur un élément image (cycle en boucle type marche, ou
une fois type saut) — réutilise target_element_id (déjà whitelisté) et
data_value en JSON {frames, fps, loop}, exactement le patron déjà établi
par "jouer_son" (Phase 6) et "alea" (Phase 2) : aucune nouvelle colonne,
aucune migration de schéma.

Ajoute une propriété d'élément "orientation" (Modifier un élément) pour
retourner un personnage en miroir (gauche/droite/bascule) sans nécessiter
une 2e feuille de sprites "vue de dos" — même patron que "surbrillance"/
"désactivé".

Étend aussi la Timeline d'animation existante (kind="sprite", aux côtés
de "animate_css"/"custom") pour qu'un personnage puisse animer tout seul
dès l'affichage de l'écran (ex. idle en boucle perpétuelle), pas
seulement en réaction à un événement — réutilise la colonne générique
custom_keyframes (JSON) et le réglage iteration_count déjà là pour la
boucle, aucune migration non plus. Les deux entrées (action de flow et
clip de timeline) partagent le même moteur côté client
(runSpriteAnimation()/activeSpriteAnimations dans static/js/play/
actions.js, indexé par nœud DOM plutôt que par id d'élément pour
supporter plusieurs instances d'un même écran-modèle animées
indépendamment).

Une bibliothèque de sprites Forge (2 personnages Kenney CC0, sous-
ensemble curé idle/marche/saut copié dans static/characters/) est
proposée dans l'éditeur, mais un créateur peut tout aussi bien utiliser
ses propres sprites uploadés (même route d'upload générique que le son
de la Phase 6).

Périmètre volontairement limité à ce qui a été demandé : pas d'avatar
modulable en couches (assemblage cheveux/haut/bas par le joueur),
écarté du plan initial à la demande de l'utilisateur.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

static/js/screen_edit/flow-editor.js

@@ -91,6 +91,8 @@ function nodeLabel(node) {
       base += ' = ' + (ELEMENT_SURBRILLANCE_LABELS_MAP[node.element_value] || node.element_value);
     } else if (node.element_property === 'desactive') {
       base += ' = ' + (ELEMENT_DESACTIVE_LABELS_MAP[node.element_value] || node.element_value);
+    } else if (node.element_property === 'orientation') {
+      base += ' = ' + (ELEMENT_ORIENTATION_LABELS_MAP[node.element_value] || node.element_value);
     } else if (node.element_value && node.element_value.indexOf('||') !== -1) {
       var vparts = node.element_value.split('||');
       base += ' = ' + vparts[0] + ' ↔ ' + vparts[1] + ' (va-et-vient)';
@@ -115,6 +117,12 @@ function nodeLabel(node) {
     base += ' → ' + (DEFINITIONS_NAMES[node.target_definition_id] || '?');
   } else if (node.action_type === 'jouer_son') {
     base += ' « ' + (node.data_value || '?') + ' »';
+  } else if (node.action_type === 'jouer_animation_sprite') {
+    base += ' → ' + (ELEMENTS_LABELS[node.target_element_id] || '?');
+    try {
+      var spriteData = JSON.parse(node.data_value || '{}');
+      base += ' (' + (spriteData.frames ? spriteData.frames.length : 0) + ' images, ' + (spriteData.fps || '?') + ' i/s' + (spriteData.loop ? ', boucle' : '') + ')';
+    } catch (e) { /* data_value invalide : pas de détail affiché */ }
   }
   return base;
 }
@@ -500,8 +508,10 @@ function toggleFlowActionFields() {
   var eventFields = document.getElementById('nf-action-event-fields');
   var addRowFields = document.getElementById('nf-action-add-row-fields');
   var soundFields = document.getElementById('nf-action-sound-fields');
+  var spriteFields = document.getElementById('nf-action-sprite-fields');
   var isOnglet = typeSel.value === 'activer_onglet';
   soundFields.style.display = typeSel.value === 'jouer_son' ? 'block' : 'none';
+  spriteFields.style.display = typeSel.value === 'jouer_animation_sprite' ? 'block' : 'none';
   screenSel.style.display = (typeSel.value === 'aller_a' || typeSel.value === 'ouvrir_ligne') ? 'block' : 'none';
   elementFields.style.display = (typeSel.value === 'modifier_element' || isOnglet) ? 'block' : 'none';
   dataFields.style.display = typeSel.value === 'modifier_donnee' ? 'block' : 'none';
@@ -528,16 +538,44 @@ function updateDataValuePlaceholder(operationSelectId, valueInputId) {
   valueInp.placeholder = opSel.value === 'alea' ? 'min,max (ex. 1,6)' : 'Valeur / montant';
 }
 
+// Phase 7 — bibliothèque de sprites Forge (SPRITE_LIBRARY, injecté par
+// screen_edit.html) : choisir un personnage puis une de ses animations
+// pré-remplit la zone de frames — un créateur qui préfère ses propres
+// sprites laisse simplement ce sélecteur sur "— Choisir —" et remplit/
+// uploade directement dans la zone de frames.
+function onSpriteLibraryCharacterChange() {
+  var charSel = document.getElementById('nf-action-sprite-library-character');
+  var animSel = document.getElementById('nf-action-sprite-library-animation');
+  var slug = charSel.value;
+  animSel.innerHTML = '';
+  if (!slug || !SPRITE_LIBRARY[slug]) { animSel.style.display = 'none'; return; }
+  Object.keys(SPRITE_LIBRARY[slug].animations).forEach(function(name) {
+    var opt = document.createElement('option');
+    opt.value = name; opt.textContent = name;
+    animSel.appendChild(opt);
+  });
+  animSel.style.display = 'block';
+  applySpriteLibraryAnimation();
+}
+
+function applySpriteLibraryAnimation() {
+  var slug = document.getElementById('nf-action-sprite-library-character').value;
+  var name = document.getElementById('nf-action-sprite-library-animation').value;
+  if (!slug || !name || !SPRITE_LIBRARY[slug]) return;
+  document.getElementById('nf-action-sprite-frames').value = SPRITE_LIBRARY[slug].animations[name].join('\n');
+}
+
 function toggleFlowElementPropertyValue() {
   var propSel = document.getElementById('nf-action-element-property');
   var visSel = document.getElementById('nf-action-element-value-visibility');
   var surbrillanceSel = document.getElementById('nf-action-element-value-surbrillance');
   var desactiveSel = document.getElementById('nf-action-element-value-desactive');
+  var orientationSel = document.getElementById('nf-action-element-value-orientation');
   var colorInp = document.getElementById('nf-action-element-value-color');
   var numInp = document.getElementById('nf-action-element-value-number');
   var textInp = document.getElementById('nf-action-element-value-text');
   var toggleRow = document.getElementById('nf-action-element-toggle-row');
-  [visSel, surbrillanceSel, desactiveSel, colorInp, numInp, textInp].forEach(function(el){ el.style.display = 'none'; });
+  [visSel, surbrillanceSel, desactiveSel, orientationSel, colorInp, numInp, textInp].forEach(function(el){ el.style.display = 'none'; });
   if (propSel.value === 'visibilite') {
     visSel.style.display = 'block';
     toggleRow.style.display = 'none';
@@ -550,6 +588,10 @@ function toggleFlowElementPropertyValue() {
     desactiveSel.style.display = 'block';
     toggleRow.style.display = 'none';
     document.getElementById('nf-action-element-toggle').checked = false;
+  } else if (propSel.value === 'orientation') {
+    orientationSel.style.display = 'block';
+    toggleRow.style.display = 'none';
+    document.getElementById('nf-action-element-toggle').checked = false;
   } else if (propSel.value === 'contenu') {
     textInp.style.display = 'block';
     toggleRow.style.display = 'none';
@@ -646,13 +688,15 @@ function submitNodeForm() {
       var prop = document.getElementById('nf-action-element-property').value;
       payload.element_property = prop;
       var isColorProp = prop === 'bg_color' || prop === 'border_color';
-      var toggleOn = prop !== 'visibilite' && prop !== 'surbrillance' && prop !== 'desactive' && document.getElementById('nf-action-element-toggle').checked;
+      var toggleOn = prop !== 'visibilite' && prop !== 'surbrillance' && prop !== 'desactive' && prop !== 'orientation' && document.getElementById('nf-action-element-toggle').checked;
       if (prop === 'visibilite') {
         payload.element_value = document.getElementById('nf-action-element-value-visibility').value;
       } else if (prop === 'surbrillance') {
         payload.element_value = document.getElementById('nf-action-element-value-surbrillance').value;
       } else if (prop === 'desactive') {
         payload.element_value = document.getElementById('nf-action-element-value-desactive').value;
+      } else if (prop === 'orientation') {
+        payload.element_value = document.getElementById('nf-action-element-value-orientation').value;
       } else if (prop === 'contenu') {
         payload.element_value = document.getElementById('nf-action-element-value-text').value;
       } else {
@@ -695,6 +739,17 @@ function submitNodeForm() {
       // sur le nœud action, comme pour "attendre") plutôt qu'une nouvelle
       // colonne dédiée.
       payload.data_value = document.getElementById('nf-action-sound-url').value;
+    } else if (actionType === 'jouer_animation_sprite') {
+      // Phase 7 — réutilise target_element_id (déjà whitelisté) +
+      // data_value en JSON {frames, fps, loop}, même patron que jouer_son.
+      payload.target_element_id = parseInt(document.getElementById('nf-action-sprite-target-element').value, 10);
+      var frames = document.getElementById('nf-action-sprite-frames').value
+        .split('\n').map(function(s) { return s.trim(); }).filter(Boolean);
+      payload.data_value = JSON.stringify({
+        frames: frames,
+        fps: parseInt(document.getElementById('nf-action-sprite-fps').value, 10) || 8,
+        loop: document.getElementById('nf-action-sprite-loop').checked,
+      });
     }
   }