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/play/actions.js

@@ -76,6 +76,19 @@ function applyElementProperty(targetEl, property, value) {
     }
     return;
   }
+  if (property === 'orientation') {
+    // Phase 7 — retourne le personnage en miroir (voir .forgeFlipped dans
+    // play.html) plutôt que de nécessiter une 2e feuille de sprites "vue
+    // de dos" pour chaque sens de déplacement.
+    if (value === 'toggle') {
+      targetEl.classList.toggle('forgeFlipped');
+    } else if (value === 'gauche') {
+      targetEl.classList.add('forgeFlipped');
+    } else {
+      targetEl.classList.remove('forgeFlipped');
+    }
+    return;
+  }
   if (property === 'pos_x_relatif' || property === 'pos_y_relatif') {
     // Phase 5 — AJOUTE la valeur à la position actuelle plutôt que de
     // l'écraser (contrairement à pos_x/pos_y, "absolus") : combiné à un
@@ -227,7 +240,62 @@ function runActionNode(node) {
     // Fire-and-forget : ne bloque jamais la suite du graphe.
     if (node.data_value) new Audio(node.data_value).play().catch(function() {});
     return Promise.resolve();
+  } else if (node.action_type === 'jouer_animation_sprite' && node.target_element_id) {
+    const targetEl = document.querySelector('[data-element-id="' + node.target_element_id + '"]');
+    if (targetEl) {
+      let spriteData = {};
+      try { spriteData = JSON.parse(node.data_value || '{}'); } catch (e) { /* data_value invalide : rien à jouer */ }
+      runSpriteAnimation(targetEl, spriteData);
+    }
+    return Promise.resolve();
   }
   // 'rien' : aucune action volontairement.
   return Promise.resolve();
 }
+
+// ---------- Phase 7 — animation de sprites (poses/images successives) ----------
+// Premier état actif PAR ÉLÉMENT du moteur (contrairement à
+// activeTimerTriggerIntervals dans triggers.js et currentBackgroundAudio
+// dans screens.js, qui sont par-écran/singleton) : plusieurs personnages
+// peuvent animer indépendamment en même temps. Clé = le NŒUD DOM lui-même
+// (pas element_id) : un clip posé sur un écran-modèle peut viser plusieurs
+// instances à la fois (ex. chaque ligne d'un Répéteur utilisant ce modèle),
+// toutes partageant le même element_id — les indexer par élément DOM réel
+// évite qu'une nouvelle instance n'arrête l'animation d'une autre. Alimenté
+// par deux entrées équivalentes — l'action de flow "jouer_animation_sprite"
+// ci-dessus (événementiel) ET un clip de la Timeline d'animation de kind
+// "sprite" (déclaratif, voir applyAnimationClip() dans screens.js) — les
+// deux partagent ce même moteur, aucune logique dupliquée.
+var activeSpriteAnimations = new Map();
+
+function runSpriteAnimation(targetEl, spriteData) {
+  var frames = spriteData.frames || [];
+  var fps = spriteData.fps > 0 ? spriteData.fps : 8;
+  var loop = !!spriteData.loop;
+  if (activeSpriteAnimations.has(targetEl)) {
+    clearInterval(activeSpriteAnimations.get(targetEl));
+    activeSpriteAnimations.delete(targetEl);
+  }
+  if (!frames.length) return;
+  var frameIndex = 0;
+  targetEl.src = frames[0];
+  if (frames.length === 1) return;
+  var intervalId = setInterval(function() {
+    frameIndex++;
+    if (frameIndex >= frames.length) {
+      if (!loop) { clearInterval(intervalId); activeSpriteAnimations.delete(targetEl); return; }
+      frameIndex = 0;
+    }
+    targetEl.src = frames[frameIndex];
+  }, 1000 / fps);
+  activeSpriteAnimations.set(targetEl, intervalId);
+}
+
+// Appelée depuis showScreen() (screens.js) à chaque changement d'écran —
+// encapsule activeSpriteAnimations ici plutôt que de le manipuler
+// directement depuis screens.js, même patron que runScreenTimerTriggers()
+// dans triggers.js (l'appelant ne connaît jamais la structure interne).
+function stopAllSpriteAnimations() {
+  activeSpriteAnimations.forEach(function(intervalId) { clearInterval(intervalId); });
+  activeSpriteAnimations.clear();
+}

static/js/play/screens.js

@@ -38,6 +38,11 @@ function showScreen(id) {
     window.currentScreenId = id;
     applyScreenAspect(el.dataset.aspect || '9/16');
   }
+  // Phase 7 — nettoie les animations de sprites de l'écran quitté (sinon
+  // une boucle setInterval reste active sur un élément désormais caché,
+  // mirroring le nettoyage déjà fait pour activeTimerTriggerIntervals
+  // dans triggers.js).
+  stopAllSpriteAnimations();
   runScreenShowTriggers(id);
   runScreenTimerTriggers(id);
   runAnimationTimeline(id);
@@ -141,6 +146,15 @@ function applyAnimationClip(clip) {
           target.removeEventListener('animationend', handler);
         });
       }
+    } else if (clip.kind === 'sprite') {
+      // Phase 7 — même moteur que l'action de flow "jouer_animation_sprite"
+      // (voir runSpriteAnimation() dans actions.js) : custom_keyframes
+      // stocke ici {frames, fps} en JSON plutôt que des images-clés CSS
+      // (réutilise la colonne générique existante, pas de nouveau champ).
+      var spriteData = {};
+      try { spriteData = JSON.parse(clip.custom_keyframes || '{}'); } catch (e) { /* invalide : rien à jouer */ }
+      spriteData.loop = infinite;
+      setTimeout(function() { runSpriteAnimation(target, spriteData); }, delay * 1000);
     } else {
       var animClass = 'animate__' + clip.animate_name;
       target.style.setProperty('--animate-duration', duration + 's');