Éditeur de collision (jeu 2D) : règles trigger -> action par objet
Build and deploy / test-python (push) Successful in 6m31s
Build and deploy / test-js (push) Successful in 50s
Build and deploy / build-and-push (push) Skipped
Build and deploy / deploy (push) Skipped

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>
This commit is contained in:
william
2026-09-02 17:11:42 +02:00
co-authored by Claude Sonnet 5
parent dfaf85fac1
commit ee270d0286
15 changed files with 989 additions and 0 deletions
+41
View File
@@ -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 %}