É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>

templates/play.html

@@ -155,6 +155,7 @@
 <script src="{{ asset_url('js/play/actions.js') }}"></script>
 <script src="{{ asset_url('js/play/triggers.js') }}"></script>
 <script src="{{ asset_url('js/play/personnage-controller.js') }}"></script>
+<script src="{{ asset_url('js/play/collision-rules-controller.js') }}"></script>
 <script src="{{ asset_url('js/play/bindings.js') }}"></script>
 <script src="{{ asset_url('js/play/flow-engine.js') }}"></script>
 <script>

templates/scene_edit.html

@@ -93,6 +93,7 @@
   <div class="builderCanvasArea">
     <div class="builderTabs" id="builderTabs">
       <button type="button" class="builderTabBtn active" data-tab="screen" onclick="switchBuilderTab('screen')">🖥️ Scène</button>
+      <button type="button" class="builderTabBtn" data-tab="collision-rules" onclick="switchBuilderTab('collision-rules')">🧩 Collision</button>
       <button type="button" class="builderTabBtn" data-tab="events" onclick="switchBuilderTab('events')">📣 Événements</button>
     </div>
 
@@ -125,6 +126,41 @@
       <p class="hint" style="text-align:center;">Glisse pour déplacer, tire le coin pour redimensionner, clique pour sélectionner. Positions en pixels (scène à taille fixe).</p>
     </div>
 
+    <!-- Éditeur de collision (voir screens/rendering/collision_rules.py) :
+         une carte par objet ÉLIGIBLE (jamais un "fond", jamais le
+         personnage "joueur" — ce sont toujours les AUTRES objets qui
+         réagissent à SA présence), listant ses règles "déclencheur ->
+         action" déjà posées + un bouton "+ Action" qui ouvre l'assistant
+         (modale plus bas). Rendu ENTIÈREMENT en JS (voir
+         static/js/scenes/collision-rules-editor.js) à partir de
+         COLLISION_RULE_OBJECTS/CUSTOM_EVENTS_MAP — jamais en Jinja, pour
+         pouvoir se redessiner à chaud après chaque ajout/suppression de
+         règle sans recharger la page. -->
+    <div class="builderTabPanel" id="collisionRulesTabPanel" data-tab-panel="collision-rules">
+      <div class="dashPanelHeader">
+        <h2>🧩 Collision</h2>
+      </div>
+      <p class="hint">Pour chaque objet (jamais le joueur lui-même), choisis ce qui doit se passer à son contact — la carte se construit au fil de tes choix, comme des pièces qui s'emboîtent.</p>
+      <div id="collisionRulesCards" class="collisionRulesCards"></div>
+    </div>
+
+    <!-- Assistant "+ Action" — un seul écran affiché à la fois
+         (#collisionRuleModalBody, reconstruit à chaque étape), jamais un
+         vrai formulaire à plusieurs pages : chaque clic choisit une
+         option et avance directement à la suivante. -->
+    <div class="modal" id="collisionRuleModal">
+      <div class="modal-background" onclick="closeCollisionRuleModal()"></div>
+      <div class="modal-content">
+        <div class="box">
+          <div class="fieldRow" style="align-items:center; justify-content:space-between;">
+            <h2 class="title is-5" style="margin:0;">Nouvelle règle</h2>
+            <button type="button" class="button is-small" onclick="closeCollisionRuleModal()">✕</button>
+          </div>
+          <div id="collisionRuleModalBody"></div>
+        </div>
+      </div>
+    </div>
+
     <div class="builderTabPanel" id="eventsTabPanel" data-tab-panel="events">
       <div class="dashPanelHeader">
         <h2>Événements personnalisés</h2>
@@ -403,6 +439,10 @@
   var SPRITE_LIBRARY = {{ sprite_library_json|safe }};
   var ELEMENT_ANIMATIONS_MAP = {{ element_animations_map_json|safe }};
   var PERSONNAGE_COMMANDS_EXTRA = {{ (personnage_commands.extra if personnage_commands else [])|tojson }};
+  var COLLISION_RULE_OBJECTS = {{ collision_rule_objects_json|safe }};
+  var COLLISION_ACTION_TYPES = {{ collision_action_types|tojson }};
+  var COLLISION_TRIGGER_TYPES = {{ collision_trigger_types|tojson }};
+  var COLLISION_DEFAULT_PERIMETRE_PX = {{ collision_default_perimetre_px }};
 </script>
 <script src="{{ url_for('static', filename='js/screen_edit/tree-panels.js') }}"></script>
 <script src="{{ url_for('static', filename='js/screen_edit/panel-init.js') }}"></script>
@@ -410,4 +450,5 @@
 <script src="{{ url_for('static', filename='js/screen_edit/builder-tabs.js') }}"></script>
 <script src="{{ url_for('static', filename='js/screen_edit/personnage-preview.js') }}"></script>
 <script src="{{ url_for('static', filename='js/scenes/scene-editor.js') }}"></script>
+<script src="{{ url_for('static', filename='js/scenes/collision-rules-editor.js') }}"></script>
 {% endblock %}