Phase A (2/2) : éditeur de scène 2D — route, template, runtime jouable
Deuxième et dernier commit de la Phase A du plan "Fondations d'une
plateforme multi-éditeurs" (le premier, efa7d1d, posait le schéma et le
CRUD des objets de scène). Ce commit branche l'éditeur et le mode
jouable sur ces fondations, en réutilisant TEL QUEL tout ce qui est déjà
générique côté moteur de logique.
Éditeur (routes/scenes/, templates/scene_edit.html,
static/js/scenes/scene-editor.js) :
- routes/screens/screen_edit.py délègue à render_scene_edit() dès que
game_type == "jeu_2d" — même endpoint Flask "screen_edit" pour les
deux éditeurs, aucune route dupliquée.
- Nouveau template scene_edit.html : canevas à taille FIXE en pixels
(scene_width/scene_height) avec glisser-déposer/redimensionnement en
pixels (scene-editor.js, mirror pixel de tree-panels.js), galerie
personnages/décors. Les onglets "Blocs de logique"/"Timeline
d'animation"/"Événements" réutilisent tels quels flow-editor.js,
tabs-and-blocks.js et animation-timeline.js.
- flow-editor.js : nouveau flag FLOW_TARGETS_OBJECTS (false par défaut,
true dans scene_edit.html) qui fait écrire submitNodeForm() vers
trigger_object_id/target_object_id au lieu de trigger_element_id/
target_element_id, plus une branche "Modifier un objet de scène"
(position px, visibilité, orientation) et des gardes null partout
(le DOM de scene_edit.html n'a pas tous les champs de l'éditeur
document).
- blocks_view.py étend l'ensemble d'ids d'éléments concernés par un
bloc pour inclure aussi trigger_object_id/target_object_id.
Runtime jouable (templates/play.html, static/js/play/actions.js,
screens/payload/full_game_payload.py) :
- full_game_payload() construit les écrans d'un jeu jeu_2d à partir de
_scene_objects (render_scene_object) au lieu de _screen_elements, et
récupère les animations de personnage sur les objets de scène.
- play.html : #playFrame occupe tout le viewport pour une scène jeu_2d
(pas de ratio fluide) ; la scène se centre via .playScreen.playScene,
qui réutilise tel quel showScreen() (déjà indexé par id d'écran, pas
par forme DOM) — aucun fichier "scenes.js" séparé n'a été nécessaire.
- actions.js : jouer_animation_sprite retombe sur target_object_id si
target_element_id est absent ; nouvelle action modifier_objet_scene
avec applyObjectProperty() (positions en px, contrairement aux % de
applyElementProperty()).
Un bug de gabarit a été découvert et corrigé pendant la vérification :
le commentaire CSS de play.html contenait littéralement "{% for %}"
comme texte français, que Jinja interprétait comme une vraie balise et
faisait planter le rendu — reformulé. render_scene_object() n'était en
outre jamais appelé par la vue de l'éditeur (les objets de scène
s'affichaient sans image) — scene_edit_view.py attache maintenant
rendered_html à chaque objet avant de les passer au template.
Nouveaux tests (tests/test_scene_edit_view.py, 10 cas) : dispatch
document vs jeu_2d, rendu d'un personnage sélectionné, CRUD géométrie/
suppression d'objet, nœuds de flow ciblant un objet de scène (action et
condition de collision), payload et page /play pour un jeu jeu_2d,
présence des nouveaux helpers JS. Suite complète : 309 tests passent
(299 existants + 10 nouveaux, aucune régression). node --check et
node --test (13 tests JS) passent également.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
efa7d1d9b0
commit
f0070faced
@@ -6,6 +6,17 @@
|
||||
// Jinja) — voir static/js/play/ pour le même patron déjà en place côté
|
||||
// moteur de jeu.
|
||||
var FLOW_SCREEN_ID = SCREEN_ID;
|
||||
// Fondations multi-éditeurs — ce même fichier (moteur de logique de flow
|
||||
// partagé, voir le plan "Fondations d'une plateforme multi-éditeurs")
|
||||
// sert aussi bien à l'éditeur document (cible trigger_element_id/
|
||||
// target_element_id, vers _screen_elements) qu'à l'éditeur de scène 2D
|
||||
// (cible trigger_object_id/target_object_id, vers _scene_objects) : posé
|
||||
// à `true` par templates/scene_edit.html, sinon absent (donc falsy) sur
|
||||
// templates/screen_edit.html — décide quelle paire de colonnes remplir à
|
||||
// l'enregistrement d'un nœud (voir submitNodeForm()).
|
||||
var FLOW_TARGETS_OBJECTS = typeof FLOW_TARGETS_OBJECTS !== 'undefined' ? FLOW_TARGETS_OBJECTS : false;
|
||||
var FLOW_TRIGGER_ID_FIELD = FLOW_TARGETS_OBJECTS ? 'trigger_object_id' : 'trigger_element_id';
|
||||
var FLOW_TARGET_ID_FIELD = FLOW_TARGETS_OBJECTS ? 'target_object_id' : 'target_element_id';
|
||||
// Blocs de logique (voir screens/flow/blocks/) : ALL_FLOW porte TOUS les
|
||||
// nœuds/arêtes de cet écran, tous blocs confondus (chargement inchangé) ;
|
||||
// un seul bloc est ouvert à la fois (modale unique, à la Unity) — pas
|
||||
@@ -44,7 +55,7 @@ function nodeLabel(node) {
|
||||
return '⏱️ Toutes les ' + (node.trigger_interval_ms || '?') + ' ms';
|
||||
}
|
||||
return '🖱️ ' + (TRIGGER_LABELS_MAP[node.trigger_event] || 'Au clic') + ' sur ' +
|
||||
(ELEMENTS_LABELS[node.trigger_element_id] || '?');
|
||||
(ELEMENTS_LABELS[node.trigger_element_id || node.trigger_object_id] || '?');
|
||||
}
|
||||
if (node.node_type === 'condition') {
|
||||
var clauseSubject = function(c, field, variable) {
|
||||
@@ -83,6 +94,18 @@ function nodeLabel(node) {
|
||||
base += ' → ' + (SCREENS_MAP[node.target_screen_id] || '?') + ' (ligne cliquée)';
|
||||
} else if (node.action_type === 'activer_onglet') {
|
||||
base += ' → ' + (ELEMENTS_LABELS[node.target_element_id] || '?') + ' (masque ses frères)';
|
||||
} else if (node.action_type === 'modifier_objet_scene') {
|
||||
// Fondations multi-éditeurs — équivalent scène de "modifier_element"
|
||||
// ci-dessous, palette réduite (visibilité/position en pixels/
|
||||
// orientation seulement).
|
||||
base += ' → ' + (ELEMENTS_LABELS[node.target_element_id || node.target_object_id] || '?') + ' : ' + (ELEMENT_PROPERTY_LABELS_MAP[node.element_property] || node.element_property);
|
||||
if (node.element_property === 'visibilite') {
|
||||
base += ' = ' + (ELEMENT_VISIBILITY_LABELS_MAP[node.element_value] || node.element_value);
|
||||
} else if (node.element_property === 'orientation') {
|
||||
base += ' = ' + (ELEMENT_ORIENTATION_LABELS_MAP[node.element_value] || node.element_value);
|
||||
} else {
|
||||
base += ' = ' + node.element_value;
|
||||
}
|
||||
} else if (node.action_type === 'modifier_element') {
|
||||
base += ' → ' + (ELEMENTS_LABELS[node.target_element_id] || '?') + ' : ' + (ELEMENT_PROPERTY_LABELS_MAP[node.element_property] || node.element_property);
|
||||
if (node.element_property === 'visibilite') {
|
||||
@@ -118,7 +141,7 @@ function nodeLabel(node) {
|
||||
} else if (node.action_type === 'jouer_son') {
|
||||
base += ' « ' + (node.data_value || '?') + ' »';
|
||||
} else if (node.action_type === 'jouer_animation_sprite') {
|
||||
base += ' → ' + (ELEMENTS_LABELS[node.target_element_id] || '?');
|
||||
base += ' → ' + (ELEMENTS_LABELS[node.target_element_id || node.target_object_id] || '?');
|
||||
try {
|
||||
var spriteData = JSON.parse(node.data_value || '{}');
|
||||
base += ' « ' + (spriteData.animation || '?') + ' » (' + (spriteData.fps || '?') + ' i/s' + (spriteData.loop ? ', boucle' : '') + ')';
|
||||
@@ -502,6 +525,7 @@ function toggleFlowActionFields() {
|
||||
var typeSel = document.getElementById('nf-action-type');
|
||||
var screenSel = document.getElementById('nf-action-target-screen');
|
||||
var elementFields = document.getElementById('nf-action-element-fields');
|
||||
var objectFields = document.getElementById('nf-action-object-fields');
|
||||
var dataFields = document.getElementById('nf-action-data-fields');
|
||||
var variableFields = document.getElementById('nf-action-variable-fields');
|
||||
var waitFields = document.getElementById('nf-action-wait-fields');
|
||||
@@ -510,24 +534,53 @@ function toggleFlowActionFields() {
|
||||
var soundFields = document.getElementById('nf-action-sound-fields');
|
||||
var spriteFields = document.getElementById('nf-action-sprite-fields');
|
||||
var isOnglet = typeSel.value === 'activer_onglet';
|
||||
soundFields.style.display = typeSel.value === 'jouer_son' ? 'block' : 'none';
|
||||
spriteFields.style.display = typeSel.value === 'jouer_animation_sprite' ? 'block' : 'none';
|
||||
// Champs propres à l'éditeur document ci-dessous (nf-action-element-*/
|
||||
// -onglet-*) : absents du DOM de l'éditeur de scène (templates/
|
||||
// scene_edit.html), d'où les gardes "if (x)" partout — même
|
||||
// #nodeForm/flow-editor.js réutilisé pour les deux éditeurs (voir
|
||||
// FLOW_TARGETS_OBJECTS en tête de ce fichier).
|
||||
if (soundFields) soundFields.style.display = typeSel.value === 'jouer_son' ? 'block' : 'none';
|
||||
if (spriteFields) spriteFields.style.display = typeSel.value === 'jouer_animation_sprite' ? 'block' : 'none';
|
||||
if (typeSel.value === 'jouer_animation_sprite') onSpriteTargetElementChange();
|
||||
screenSel.style.display = (typeSel.value === 'aller_a' || typeSel.value === 'ouvrir_ligne') ? 'block' : 'none';
|
||||
elementFields.style.display = (typeSel.value === 'modifier_element' || isOnglet) ? 'block' : 'none';
|
||||
dataFields.style.display = typeSel.value === 'modifier_donnee' ? 'block' : 'none';
|
||||
variableFields.style.display = typeSel.value === 'modifier_variable' ? 'block' : 'none';
|
||||
waitFields.style.display = typeSel.value === 'attendre' ? 'block' : 'none';
|
||||
if (screenSel) screenSel.style.display = (typeSel.value === 'aller_a' || typeSel.value === 'ouvrir_ligne') ? 'block' : 'none';
|
||||
if (elementFields) elementFields.style.display = (typeSel.value === 'modifier_element' || isOnglet) ? 'block' : 'none';
|
||||
if (objectFields) objectFields.style.display = typeSel.value === 'modifier_objet_scene' ? 'block' : 'none';
|
||||
if (dataFields) dataFields.style.display = typeSel.value === 'modifier_donnee' ? 'block' : 'none';
|
||||
if (variableFields) variableFields.style.display = typeSel.value === 'modifier_variable' ? 'block' : 'none';
|
||||
if (waitFields) waitFields.style.display = typeSel.value === 'attendre' ? 'block' : 'none';
|
||||
if (eventFields) eventFields.style.display = typeSel.value === 'declencher_evenement' ? 'block' : 'none';
|
||||
if (addRowFields) addRowFields.style.display = typeSel.value === 'ajouter_ligne' ? 'block' : 'none';
|
||||
document.getElementById('nf-action-onglet-hint').style.display = isOnglet ? 'block' : 'none';
|
||||
document.getElementById('nf-action-element-property-wrap').style.display = isOnglet ? 'none' : 'block';
|
||||
var ongletHint = document.getElementById('nf-action-onglet-hint');
|
||||
if (ongletHint) ongletHint.style.display = isOnglet ? 'block' : 'none';
|
||||
var elementPropertyWrap = document.getElementById('nf-action-element-property-wrap');
|
||||
if (elementPropertyWrap) elementPropertyWrap.style.display = isOnglet ? 'none' : 'block';
|
||||
if (typeSel.value === 'modifier_element') toggleFlowElementPropertyValue();
|
||||
if (typeSel.value === 'modifier_objet_scene') toggleFlowObjectPropertyValue();
|
||||
if (typeSel.value === 'modifier_donnee') onFlowDefinitionChange('action');
|
||||
updateDataValuePlaceholder('nf-action-data-operation', 'nf-action-data-value');
|
||||
updateDataValuePlaceholder('nf-action-variable-operation', 'nf-action-variable-value');
|
||||
}
|
||||
|
||||
// Fondations multi-éditeurs — équivalent de toggleFlowElementPropertyValue()
|
||||
// pour l'action "Modifier un objet de scène" (palette réduite : pas de
|
||||
// contenu/couleur/largeur/hauteur, juste visibilité/position en pixels/
|
||||
// orientation — voir screens/scenes/flow_palette.py OBJECT_ACTION_PROPERTIES).
|
||||
function toggleFlowObjectPropertyValue() {
|
||||
var propSel = document.getElementById('nf-action-object-property');
|
||||
if (!propSel) return;
|
||||
var visSel = document.getElementById('nf-action-object-value-visibility');
|
||||
var orientSel = document.getElementById('nf-action-object-value-orientation');
|
||||
var numInp = document.getElementById('nf-action-object-value-number');
|
||||
[visSel, orientSel, numInp].forEach(function(el) { if (el) el.style.display = 'none'; });
|
||||
if (propSel.value === 'visibilite' && visSel) {
|
||||
visSel.style.display = 'block';
|
||||
} else if (propSel.value === 'orientation' && orientSel) {
|
||||
orientSel.style.display = 'block';
|
||||
} else if (numInp) {
|
||||
numInp.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// "alea" (Phase 2 — hasard) attend "min,max" dans data_value (voir
|
||||
// screens/data_actions/compute_operation.py) plutôt qu'un seul nombre
|
||||
// comme les autres opérations — indice visuel dans le champ plutôt que
|
||||
@@ -635,7 +688,7 @@ function submitNodeForm() {
|
||||
} else if (payload.trigger_event === 'minuteur') {
|
||||
payload.trigger_interval_ms = parseInt(document.getElementById('nf-trigger-interval').value, 10);
|
||||
} else if (payload.trigger_event !== 'affichage') {
|
||||
payload.trigger_element_id = parseInt(document.getElementById('nf-trigger-element').value, 10);
|
||||
payload[FLOW_TRIGGER_ID_FIELD] = parseInt(document.getElementById('nf-trigger-element').value, 10);
|
||||
}
|
||||
} else if (currentNodeFormType === 'condition') {
|
||||
var condSource = document.getElementById('nf-cond-source').value;
|
||||
@@ -717,6 +770,22 @@ function submitNodeForm() {
|
||||
payload.element_value = v1;
|
||||
}
|
||||
}
|
||||
} else if (actionType === 'modifier_objet_scene') {
|
||||
// Fondations multi-éditeurs — équivalent scène de "modifier_element"
|
||||
// ci-dessus, palette réduite (voir OBJECT_ACTION_PROPERTIES) : pas
|
||||
// de va-et-vient/couleur, juste visibilité/position en pixels/
|
||||
// orientation. FLOW_TARGET_ID_FIELD vaut "target_object_id" ici
|
||||
// (voir tête de fichier).
|
||||
payload[FLOW_TARGET_ID_FIELD] = parseInt(document.getElementById('nf-action-target-object').value, 10);
|
||||
var objProp = document.getElementById('nf-action-object-property').value;
|
||||
payload.element_property = objProp;
|
||||
if (objProp === 'visibilite') {
|
||||
payload.element_value = document.getElementById('nf-action-object-value-visibility').value;
|
||||
} else if (objProp === 'orientation') {
|
||||
payload.element_value = document.getElementById('nf-action-object-value-orientation').value;
|
||||
} else {
|
||||
payload.element_value = document.getElementById('nf-action-object-value-number').value;
|
||||
}
|
||||
} else if (actionType === 'modifier_donnee') {
|
||||
payload.target_definition_id = parseInt(document.getElementById('nf-action-data-definition').value, 10);
|
||||
payload.target_row_id = parseInt(document.getElementById('nf-action-data-row').value, 10) || null;
|
||||
@@ -754,7 +823,7 @@ function submitNodeForm() {
|
||||
// logique, qui continuaient à jouer les frames de l'ancien
|
||||
// personnage indéfiniment (bug signalé par l'utilisateur).
|
||||
var elementId = document.getElementById('nf-action-sprite-target-element').value;
|
||||
payload.target_element_id = parseInt(elementId, 10);
|
||||
payload[FLOW_TARGET_ID_FIELD] = parseInt(elementId, 10);
|
||||
payload.data_value = JSON.stringify({
|
||||
animation: document.getElementById('nf-action-sprite-animation-name').value,
|
||||
fps: parseInt(document.getElementById('nf-action-sprite-fps').value, 10) || 8,
|
||||
|
||||
Reference in New Issue
Block a user