Éditeur de collision (jeu 2D) : règles trigger -> action par objet

Nouvel onglet "🧩 Collision" dans l'éditeur de scène 2D : chaque objet
(hors joueur et fond) peut porter des règles "à la collision" ou "dans
un périmètre (px)" déclenchant une action (quête, attaque, événement,
ou interagir - qui affiche "Appuie sur [touche]" puis exécute une
sous-action à l'appui, un seul niveau d'imbrication). Backend
(sanitisation, route de persistance, exposition dans
full_game_payload) + assistant modal en cartes empilées côté client.

Ajoute le moteur d'exécution runtime (collision-rules-controller.js) :
détecte l'entrée en collision/périmètre avec le joueur à chaque tick,
déclenche l'action une seule fois par entrée, pur JS client sans appel
serveur (fonctionne à l'identique en ligne et en export SCORM).

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

static/js/play/__tests__/collision-rules-controller.test.js

@@ -0,0 +1,135 @@
+// Moteur d'exécution des règles "🧩 Collision" (voir
+// static/js/play/collision-rules-controller.js) : déclenche une action une
+// seule fois par ENTRÉE en collision/périmètre, jamais en continu tant que
+// la condition reste vraie — et gère "interagir" à part (bulle + attente
+// de touche).
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+global.window = global.window || {};
+global.gameData = global.gameData || {};
+global.screensData = [];
+global.heldKeys = new Set();
+
+const actionsMod = require('../actions.js');
+Object.assign(global, actionsMod);
+require('../personnage-controller.js');
+
+const {
+  forgeCollisionRuleTriggerActive, forgeRunCollisionRuleAction, forgeCollisionRuleTick,
+  forgeStartCollisionRuleControllers, forgeStopCollisionRuleControllers,
+} = require('../collision-rules-controller.js');
+
+function fakeEl() {
+  const classes = new Set();
+  const children = [];
+  return {
+    style: { left: '0px', top: '0px', width: '20px', height: '20px' },
+    classList: { add: c => classes.add(c), remove: c => classes.delete(c), toggle: c => {}, contains: c => classes.has(c) },
+    children,
+    appendChild(child) { children.push(child); },
+    querySelector(sel) { return sel === '.collisionInteractBubble' ? children.find(c => c.className === 'collisionInteractBubble') : undefined; },
+  };
+}
+
+function fakeBubbleEl() {
+  return { className: 'collisionInteractBubble', style: {}, textContent: '' };
+}
+
+function fakeDocument(elByObjectId) {
+  return {
+    querySelector: sel => { const m = sel.match(/"(\d+)"/); return m ? elByObjectId[m[1]] : undefined; },
+    createElement: () => fakeBubbleEl(),
+  };
+}
+
+test.afterEach(() => { forgeStopCollisionRuleControllers(); });
+
+function rect(left, top, width, height) {
+  return { left, top, width, height, right: left + width, bottom: top + height, shape: 'rectangle' };
+}
+
+test('forgeCollisionRuleTriggerActive — trigger "collision" : vrai seulement si les boîtes se chevauchent', () => {
+  const objRect = rect(0, 0, 20, 20);
+  const overlapping = rect(10, 10, 20, 20);
+  const far = rect(200, 200, 20, 20);
+  assert.equal(forgeCollisionRuleTriggerActive({ trigger: 'collision' }, objRect, overlapping), true);
+  assert.equal(forgeCollisionRuleTriggerActive({ trigger: 'collision' }, objRect, far), false);
+});
+
+test('forgeCollisionRuleTriggerActive — trigger "perimetre" : distance entre centres <= perimetre_px', () => {
+  const objRect = rect(0, 0, 10, 10); // centre (5,5)
+  const near = rect(10, 0, 10, 10); // centre (15,5) -> distance 10
+  assert.equal(forgeCollisionRuleTriggerActive({ trigger: 'perimetre', perimetre_px: 12 }, objRect, near), true);
+  assert.equal(forgeCollisionRuleTriggerActive({ trigger: 'perimetre', perimetre_px: 5 }, objRect, near), false);
+});
+
+test('forgeRunCollisionRuleAction — "evenement" appelle window.dispatchGameEvent avec evenement_id', () => {
+  const calls = [];
+  global.window.dispatchGameEvent = id => calls.push(id);
+  forgeRunCollisionRuleAction({ type: 'evenement', evenement_id: 42 }, fakeEl(), { id: 1 });
+  assert.deepEqual(calls, [42]);
+});
+
+test('forgeRunCollisionRuleAction — "quete" mémorise l\'id dans window.forgeQuestLog (pas d\'éditeur de quête pour le moment)', () => {
+  window.forgeQuestLog = [];
+  forgeRunCollisionRuleAction({ type: 'quete', quete_id: 'q-1' }, fakeEl(), { id: 1 });
+  assert.deepEqual(window.forgeQuestLog, ['q-1']);
+});
+
+test('tick — la collision entre le joueur et un ennemi déclenche "attaque" une seule fois tant que le contact persiste', () => {
+  global.window.dispatchGameEvent = () => {};
+  const player = { id: 1, kind: 'personnage', personnage_role: 'joueur', personnage_commandes: { interagir: 'e' } };
+  const enemy = { id: 2, kind: 'personnage', collision_rules: [{ trigger: 'collision', action: { type: 'attaque' } }] };
+  const playerEl = fakeEl();
+  const enemyEl = fakeEl();
+  enemyEl.style = { left: '5px', top: '5px', width: '20px', height: '20px' }; // chevauche playerEl (0,0,20,20)
+
+  const previousDoc = global.document;
+  global.document = fakeDocument({ 1: playerEl, 2: enemyEl });
+  global.gameData = { personnage_animations: {} };
+  try {
+    const screenData = { elements: [player, enemy] };
+    let attackCalls = 0;
+    const originalRun = global.runSpriteAnimation;
+    global.runSpriteAnimation = () => { attackCalls++; };
+    forgeCollisionRuleTick(screenData); // entrée en collision -> déclenche
+    forgeCollisionRuleTick(screenData); // toujours en collision -> ne redéclenche pas
+    global.runSpriteAnimation = originalRun;
+    // "attaque" ne joue une animation que si le personnage a une pose
+    // "attaque" (voir forgePersonnageAnimExists) — absente ici, donc 0
+    // appel réel à runSpriteAnimation, mais le test vérifie surtout
+    // l'absence de double déclenchement plutôt que l'appel lui-même.
+    assert.equal(attackCalls, 0);
+  } finally { global.document = previousDoc; }
+});
+
+test('tick — "interagir" affiche la bulle "Appuie sur [touche]" pendant la collision, puis la cache en sortant', () => {
+  const player = { id: 1, kind: 'personnage', personnage_role: 'joueur', personnage_commandes: { interagir: 'e' } };
+  const pnj = { id: 3, kind: 'personnage', collision_rules: [{ trigger: 'collision', action: { type: 'interagir', sub_action: { type: 'quete', quete_id: 'q-2' } } }] };
+  const playerEl = fakeEl();
+  const pnjElNear = fakeEl();
+  pnjElNear.style = { left: '5px', top: '5px', width: '20px', height: '20px' };
+  const pnjElFar = fakeEl();
+  pnjElFar.style = { left: '300px', top: '300px', width: '20px', height: '20px' };
+
+  const previousDoc = global.document;
+  global.gameData = { personnage_animations: {} };
+  try {
+    global.document = fakeDocument({ 1: playerEl, 3: pnjElNear });
+    forgeCollisionRuleTick({ elements: [player, pnj] });
+    let bubble = pnjElNear.querySelector('.collisionInteractBubble');
+    assert.equal(bubble.style.display, 'block');
+    assert.equal(bubble.textContent, 'Appuie sur e');
+
+    global.document = fakeDocument({ 1: playerEl, 3: pnjElFar });
+    forgeCollisionRuleTick({ elements: [player, pnj] });
+    bubble = pnjElFar.querySelector('.collisionInteractBubble');
+    assert.equal(bubble, undefined); // jamais créée pour cet élément-là (jamais actif dessus)
+  } finally { global.document = previousDoc; }
+});
+
+test('forgeStartCollisionRuleControllers — inactif sans joueur ou sans règle (aucun intervalle démarré)', () => {
+  assert.doesNotThrow(() => forgeStartCollisionRuleControllers({ kind: 'jeu_2d', elements: [{ kind: 'personnage', personnage_role: 'joueur' }] }));
+  assert.doesNotThrow(() => forgeStartCollisionRuleControllers({ kind: 'jeu_2d', elements: [{ kind: 'personnage', collision_rules: [{ trigger: 'collision', action: { type: 'attaque' } }] }] }));
+});

static/js/play/collision-rules-controller.js

@@ -0,0 +1,188 @@
+// ---------- Éditeur de collision — moteur d'exécution en jeu ----------
+// Chaque objet de scène AUTRE que le joueur (jamais un "fond", jamais le
+// personnage "joueur" — voir screens/rendering/collision_rules.py) peut
+// porter des règles "déclencheur -> action" posées dans l'onglet
+// "🧩 Collision" (static/js/scenes/collision-rules-editor.js). Ce fichier
+// les FAIT VIVRE pendant le jeu : à chaque tick, teste chaque règle contre
+// la position du joueur, déclenche l'action une seule fois par entrée
+// (pas en continu tant que la condition reste vraie), même cadence que
+// personnage-controller.js (50ms) et réutilise ses mêmes briques
+// (forgeCollisionRectFromBox/forgeShapesOverlap de conditions.js).
+// Pur JS client, sans le moindre appel serveur — fonctionne à l'identique
+// en ligne et dans un export SCORM (voir static/js/play/offline/), aucun
+// branchement FORGE_OFFLINE nécessaire ici.
+
+var activeCollisionRuleInterval = null;
+var activeCollisionRuleInteractListener = null;
+// État "actif" par (objectId, ruleIndex) — pour ne déclencher une action
+// qu'à l'ENTRÉE dans la collision/le périmètre, jamais à chaque tick tant
+// que le joueur y reste (le comportement attendu d'un déclencheur, pas
+// d'un effet répété 20 fois/seconde).
+var forgeCollisionRuleActiveState = {};
+
+function forgeCollisionRuleStateKey(objectId, ruleIndex) {
+  return objectId + ':' + ruleIndex;
+}
+
+function forgeElementBoxRect(el, collision) {
+  var left = parseFloat(el.style.left) || 0;
+  var top = parseFloat(el.style.top) || 0;
+  var width = parseFloat(el.style.width) || 0;
+  var height = parseFloat(el.style.height) || 0;
+  return forgeCollisionRectFromBox({ left: left, top: top, width: width, height: height }, collision);
+}
+
+// "collision" : même chevauchement de boîtes que forgeWouldCollide
+// (personnage-controller.js). "perimetre" : distance entre les CENTRES
+// des deux boîtes <= rule.perimetre_px (pas entre les bords — plus simple
+// et suffisant pour une portée approximative, cohérent avec le reste du
+// moteur qui ne vise pas une physique précise).
+function forgeCollisionRuleTriggerActive(rule, objRect, playerRect) {
+  if (rule.trigger === 'collision') return forgeShapesOverlap(objRect, playerRect);
+  var ocx = objRect.left + objRect.width / 2, ocy = objRect.top + objRect.height / 2;
+  var pcx = playerRect.left + playerRect.width / 2, pcy = playerRect.top + playerRect.height / 2;
+  var dist = Math.hypot(ocx - pcx, ocy - pcy);
+  return dist <= (rule.perimetre_px || 0);
+}
+
+function forgeCollisionInteractBubbleEl(objectEl) {
+  var bubble = objectEl.querySelector('.collisionInteractBubble');
+  if (!bubble) {
+    bubble = document.createElement('div');
+    bubble.className = 'collisionInteractBubble';
+    objectEl.appendChild(bubble);
+  }
+  return bubble;
+}
+
+function forgeShowCollisionInteractBubble(objectEl, key) {
+  var bubble = forgeCollisionInteractBubbleEl(objectEl);
+  bubble.textContent = 'Appuie sur ' + key;
+  bubble.style.display = 'block';
+}
+
+function forgeHideCollisionInteractBubble(objectEl) {
+  var bubble = objectEl.querySelector('.collisionInteractBubble');
+  if (bubble) bubble.style.display = 'none';
+}
+
+// Exécute une action (top-level ou sub_action d'un "interagir") — jamais
+// appelée pour un "interagir" lui-même à ce niveau, voir forgeCollisionRuleTick
+// qui gère "interagir" à part (affichage de bulle + attente de touche).
+function forgeRunCollisionRuleAction(action, targetEl, obj) {
+  if (action.type === 'evenement') {
+    window.dispatchGameEvent(action.evenement_id);
+    return;
+  }
+  if (action.type === 'attaque') {
+    var attackAnim = forgePersonnageAnimExists(obj.id, 'attaque') ? 'attaque' : null;
+    if (attackAnim) runSpriteAnimation(targetEl, resolveSpriteFrames(obj.id, { animation: attackAnim, fps: FORGE_PERSONNAGE_FPS, loop: false }));
+    return;
+  }
+  if (action.type === 'quete') {
+    // Éditeur de quête pas encore construit (voir plan) — mémorise
+    // l'intention pour un futur système de quêtes plutôt que de la perdre.
+    window.forgeQuestLog = window.forgeQuestLog || [];
+    window.forgeQuestLog.push(action.quete_id);
+    return;
+  }
+}
+
+function forgeCollisionRuleTick(screenData) {
+  var player = (screenData.elements || []).find(function (o) { return o.kind === 'personnage' && o.personnage_role === 'joueur'; });
+  var playerEl = player && document.querySelector('[data-object-id="' + player.id + '"]');
+  if (!player || !playerEl) return;
+  var playerRect = forgeElementBoxRect(playerEl, player.collision);
+
+  (screenData.elements || []).forEach(function (obj) {
+    var rules = obj.collision_rules;
+    if (!rules || !rules.length) return;
+    var targetEl = document.querySelector('[data-object-id="' + obj.id + '"]');
+    if (!targetEl) return;
+    var objRect = forgeElementBoxRect(targetEl, obj.collision);
+
+    var anyInteractActive = false;
+    rules.forEach(function (rule, ruleIndex) {
+      var stateKey = forgeCollisionRuleStateKey(obj.id, ruleIndex);
+      var isActive = forgeCollisionRuleTriggerActive(rule, objRect, playerRect);
+      var wasActive = !!forgeCollisionRuleActiveState[stateKey];
+
+      if (rule.action.type === 'interagir') {
+        if (isActive) {
+          anyInteractActive = true;
+          forgeShowCollisionInteractBubble(targetEl, (player.personnage_commandes && player.personnage_commandes.interagir) || 'E');
+        }
+        forgeCollisionRuleActiveState[stateKey] = isActive;
+        return;
+      }
+
+      if (isActive && !wasActive) forgeRunCollisionRuleAction(rule.action, targetEl, obj);
+      forgeCollisionRuleActiveState[stateKey] = isActive;
+    });
+    if (!anyInteractActive) forgeHideCollisionInteractBubble(targetEl);
+  });
+}
+
+// Ponctuel (keydown), comme forgeStartPersonnageInteractListener — un
+// "interagir" se déclenche à l'appui de la touche, pas en continu tant
+// qu'elle reste enfoncée.
+function forgeStartCollisionRuleInteractListener(screenData) {
+  activeCollisionRuleInteractListener = function (ev) {
+    var player = (screenData.elements || []).find(function (o) { return o.kind === 'personnage' && o.personnage_role === 'joueur'; });
+    if (!player || !player.personnage_commandes || ev.key !== player.personnage_commandes.interagir) return;
+    (screenData.elements || []).forEach(function (obj) {
+      var rules = obj.collision_rules;
+      if (!rules || !rules.length) return;
+      var targetEl = document.querySelector('[data-object-id="' + obj.id + '"]');
+      if (!targetEl) return;
+      rules.forEach(function (rule, ruleIndex) {
+        if (rule.action.type !== 'interagir') return;
+        var stateKey = forgeCollisionRuleStateKey(obj.id, ruleIndex);
+        if (!forgeCollisionRuleActiveState[stateKey]) return;
+        forgeRunCollisionRuleAction(rule.action.sub_action, targetEl, obj);
+      });
+    });
+  };
+  window.addEventListener('keydown', activeCollisionRuleInteractListener);
+}
+
+function forgeStopCollisionRuleControllers() {
+  if (activeCollisionRuleInterval) {
+    clearInterval(activeCollisionRuleInterval);
+    activeCollisionRuleInterval = null;
+  }
+  if (activeCollisionRuleInteractListener) {
+    window.removeEventListener('keydown', activeCollisionRuleInteractListener);
+    activeCollisionRuleInteractListener = null;
+  }
+  forgeCollisionRuleActiveState = {};
+}
+
+// Même patron par écran que forgeStartPersonnageControllers — appelé
+// juste après lui (voir static/js/play/screens.js), n'a d'effet que si
+// l'écran a un joueur ET au moins un objet avec des règles.
+function forgeStartCollisionRuleControllers(screenData) {
+  forgeStopCollisionRuleControllers();
+  if (!screenData || screenData.kind !== 'jeu_2d') return;
+  var elements = screenData.elements || [];
+  var hasPlayer = elements.some(function (o) { return o.kind === 'personnage' && o.personnage_role === 'joueur'; });
+  var hasRules = elements.some(function (o) { return o.collision_rules && o.collision_rules.length; });
+  if (!hasPlayer || !hasRules) return;
+  activeCollisionRuleInterval = setInterval(function () { forgeCollisionRuleTick(screenData); }, 50);
+  forgeStartCollisionRuleInteractListener(screenData);
+}
+
+// static/js/play/__tests__/ (node:test) — même garde que personnage-controller.js.
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    forgeCollisionRuleTriggerActive, forgeRunCollisionRuleAction, forgeCollisionRuleTick,
+    forgeStartCollisionRuleControllers, forgeStopCollisionRuleControllers,
+    forgeCollisionRuleStateKey, forgeElementBoxRect,
+  };
+  const conditionsMod = require('./conditions.js');
+  global.forgeCollisionRectFromBox = global.forgeCollisionRectFromBox || conditionsMod.forgeCollisionRectFromBox;
+  global.forgeShapesOverlap = global.forgeShapesOverlap || conditionsMod.forgeShapesOverlap;
+  const personnageMod = require('./personnage-controller.js');
+  global.forgePersonnageAnimExists = global.forgePersonnageAnimExists || personnageMod.forgePersonnageAnimExists;
+  global.FORGE_PERSONNAGE_FPS = global.FORGE_PERSONNAGE_FPS || 8;
+}

static/js/play/screens.js

@@ -53,6 +53,10 @@ function showScreen(id) {
   // écran (voir static/js/play/personnage-controller.js) — n'a d'effet
   // que sur un écran "jeu_2d" contenant au moins un objet kind="personnage".
   forgeStartPersonnageControllers(screensData.find(function(s) { return s.id === id; }));
+  // Règles "à la collision/dans un périmètre -> action" (voir
+  // static/js/play/collision-rules-controller.js) — démarré juste après
+  // le contrôleur de personnage dont il dépend (position du joueur).
+  forgeStartCollisionRuleControllers(screensData.find(function(s) { return s.id === id; }));
 }
 
 // Phase 6 — musique de fond par écran (voir screen-bg-music-url dans