Panneau scène simplifié + boîte de collision + rôle joueur/ennemi/pnj

Trois retours utilisateur sur l'éditeur de scène 2D :

- Retire l'arborescence "Objets de cette scène" (un objet reste
  sélectionnable en cliquant dessus sur le canevas) et le bouton
  "+ Ajouter un décor" (le type "decor" reste supporté côté serveur,
  juste plus accessible depuis ce menu).

- Chaque objet de scène a désormais une boîte de collision AUTOMATIQUE
  (= sa propre boîte, comportement inchangé pour une condition de
  collision déjà posée) réglable dans un nouveau panneau "🧱 Collision" :
  activée/désactivée, forme (rectangle/cercle), taille et décalage —
  utile pour un sprite très paddé (CraftPix) dont la silhouette réelle
  est bien plus petite que son canevas. elementsOverlap() (conditions.js)
  applique ces réglages en restant identique par défaut.

- Nouveau champ "🏷️ Rôle" (Joueur/Ennemi/PNJ) sur un personnage : SEUL un
  personnage "Joueur" est désormais déplacé/animé au clavier et suivi
  par la caméra (personnage-controller.js) — "Ennemi"/"PNJ" restent
  immobiles tant qu'aucune logique de flow ne les pilote (déplacement
  ennemi automatique/apparition, dialogue de PNJ... hors scope de ce
  réglage, qui ne fait qu'identifier "quel objet est le joueur").

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

static/js/play/conditions.js

@@ -101,19 +101,68 @@ function resolveVariablePath(rawValue, path) {
 // comportement historique), soit une VARIABLE GLOBALE (source
 // "variable" — voir ensure_flow_schema.py pour cond_source/cond_variable/
 // cond_variable_chemin).
-// Phase 5 — condition de collision : chevauchement des rectangles de
-// deux éléments (getBoundingClientRect, donc leur position RÉELLE à
-// l'écran — reflète les déplacements posés via "Modifier un élément →
-// Position", voir static/js/play/actions.js). Aucun élément trouvé (id
-// invalide, élément masqué avec display:none — getBoundingClientRect
-// renvoie alors une boîte de largeur/hauteur nulles) => pas de
-// chevauchement plutôt que de planter.
+// Boîte de collision (voir screens/rendering/collision_settings.py) :
+// centrée par défaut sur le rectangle VISUEL (getBoundingClientRect),
+// réduite/décalée si réglée dans le panneau de propriétés — un sprite
+// très paddé (ex. les frames CraftPix) peut ainsi avoir une silhouette de
+// collision bien plus petite que son canevas. `collision` absent (élément
+// de l'éditeur document, ou objet de scène posé avant l'ajout de ce
+// réglage) => le rectangle visuel EXACT, comportement inchangé. Fonction
+// PURE (aucun accès DOM) — testée par static/js/play/__tests__/
+// conditions.test.js, contrairement à elementsOverlap() ci-dessous.
+function forgeCollisionRectFromBox(box, collision) {
+  const width = (collision && collision.width) || box.width;
+  const height = (collision && collision.height) || box.height;
+  const offsetX = (collision && collision.offset_x) || 0;
+  const offsetY = (collision && collision.offset_y) || 0;
+  const left = box.left + (box.width - width) / 2 + offsetX;
+  const top = box.top + (box.height - height) / 2 + offsetY;
+  return { left, top, right: left + width, bottom: top + height, width, height };
+}
+
+function forgeRectanglesOverlap(a, b) {
+  return a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top;
+}
+
+// Cercle-cercle uniquement (rayon = le plus petit des deux côtés/2) — une
+// paire rectangle/cercle retombe sur un chevauchement de rectangles (repli
+// volontairement approximatif plutôt qu'une vraie intersection cercle-
+// rectangle, hors scope de ce premier réglage).
+function forgeCirclesOverlap(a, b) {
+  const acx = a.left + a.width / 2, acy = a.top + a.height / 2, ar = Math.min(a.width, a.height) / 2;
+  const bcx = b.left + b.width / 2, bcy = b.top + b.height / 2, br = Math.min(b.width, b.height) / 2;
+  const dx = acx - bcx, dy = acy - bcy;
+  return Math.sqrt(dx * dx + dy * dy) < (ar + br);
+}
+
+// Phase 5 — condition de collision : chevauchement des BOÎTES DE
+// COLLISION (voir forgeCollisionRectFromBox ci-dessus) de deux éléments,
+// positionnées sur leur rectangle RÉEL à l'écran (getBoundingClientRect —
+// reflète les déplacements posés via "Modifier un élément"/"Modifier un
+// objet de scène", voir static/js/play/actions.js, ET la caméra qui suit
+// le personnage, voir personnage-controller.js : un décalage de caméra
+// est un simple transform CSS, déjà reflété par getBoundingClientRect).
+// Aucun élément trouvé (id invalide, élément masqué avec display:none —
+// getBoundingClientRect renvoie alors une boîte de largeur/hauteur
+// nulles), ou collision explicitement désactivée => pas de chevauchement
+// plutôt que de planter.
 function elementsOverlap(elementIdA, elementIdB) {
   const a = document.querySelector('[data-element-id="' + elementIdA + '"]');
   const b = document.querySelector('[data-element-id="' + elementIdB + '"]');
   if (!a || !b) return false;
-  const r1 = a.getBoundingClientRect(), r2 = b.getBoundingClientRect();
-  return r1.left < r2.right && r1.right > r2.left && r1.top < r2.bottom && r1.bottom > r2.top;
+  const screenData = (typeof screensData !== 'undefined' && typeof window !== 'undefined')
+    && screensData.find(function (s) { return s.id === window.currentScreenId; });
+  const objA = screenData && (screenData.elements || []).find(function (o) { return o.id === elementIdA; });
+  const objB = screenData && (screenData.elements || []).find(function (o) { return o.id === elementIdB; });
+  if ((objA && objA.collision && objA.collision.enabled === false) || (objB && objB.collision && objB.collision.enabled === false)) {
+    return false;
+  }
+  const rectA = forgeCollisionRectFromBox(a.getBoundingClientRect(), objA && objA.collision);
+  const rectB = forgeCollisionRectFromBox(b.getBoundingClientRect(), objB && objB.collision);
+  const shapeA = (objA && objA.collision && objA.collision.shape) || 'rectangle';
+  const shapeB = (objB && objB.collision && objB.collision.shape) || 'rectangle';
+  if (shapeA === 'cercle' && shapeB === 'cercle') return forgeCirclesOverlap(rectA, rectB);
+  return forgeRectanglesOverlap(rectA, rectB);
 }
 
 function evaluateConditionClause(clause) {
@@ -156,5 +205,8 @@ function evaluateConditionNode(node) {
 // require() — pas de risque en navigateur : `module` n'existe pas là-bas,
 // cette branche ne s'exécute jamais côté client.
 if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { readFieldValue, compareValues, readVariableValue, resolveVariablePath, evaluateConditionClause, evaluateConditionNode };
+  module.exports = {
+    readFieldValue, compareValues, readVariableValue, resolveVariablePath, evaluateConditionClause, evaluateConditionNode,
+    forgeCollisionRectFromBox, forgeRectanglesOverlap, forgeCirclesOverlap,
+  };
 }