Refonte : vrai widget "Personnage" visuel (remplace l'UI de la Phase 7)
Build and deploy / test-python (push) Successful in 1m26s
Build and deploy / test-js (push) Successful in 6s
Build and deploy / build-and-push (push) Skipped
Build and deploy / deploy (push) Skipped

L'utilisateur a testé la Phase 7 (sprites pilotés via un menu déroulant
+ zone de texte dans la logique de flow) et l'a rejetée à raison : ce
n'est pas comme ça qu'un moteur de jeu (Phaser, Unity) gère un
personnage. Cette refonte remplace tout le flux d'AUTEURING par un vrai
widget visuel — le moteur d'exécution de la Phase 7 (runSpriteAnimation,
activeSpriteAnimations, orientation, kind="sprite" de la Timeline) reste
inchangé.

Nouveau widget "personnage" (screens/widgets/registry.py) :
- Rendu serveur dédié (special_render, screens/rendering/render_personnage.py)
  qui affiche la pose "idle" dès le HTML généré — jamais une image
  cassée à configurer après coup.
- Toutes ses données (source Forge ou sprites propres au créateur, quel
  personnage/quelles animations) vivent dans une seule clé JSON
  _personnage_data (screens/rendering/personnage_data.py), sans aucune
  migration de schéma (même patron que c_clause_list).
- Nouvelle échappatoire "custom_panel", symétrique à "special_render" mais
  pour le panneau de propriétés : ce widget affiche une galerie/un import
  de sprites sur-mesure plutôt que les contrôles génériques.

Galerie visuelle de personnages Forge (VRAIES miniatures, pas un emoji) :
- Panneau gauche "🎭 Personnages" : pose un personnage déjà configuré,
  animé immédiatement.
- Panneau droit (propriétés) : change le personnage Forge de l'élément
  sélectionné, ou importe les animations d'un sprite personnalisé.
- static/js/screen_edit/personnage-preview.js : lance l'aperçu animé de
  CHAQUE personnage du canevas dès le chargement de la page et après
  toute sauvegarde — le cœur de la demande ("je dois voir ça bouger").

Sélecteur d'animation à miniatures (nœud de flow "Jouer une animation" et
clip de Timeline "sprite") : remplace le menu déroulant/la zone de texte
par une grille de vraies miniatures, scopée aux SEULES animations du
personnage réellement ciblé (ELEMENT_ANIMATIONS_MAP, résolu côté serveur
à partir des propriétés de cet élément précis) — jamais un catalogue
global. Le format stocké sur le nœud/le clip ({frames, fps, loop}) est
inchangé, seule l'UI d'édition change.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-08-30 20:26:39 +02:00
co-authored by Claude Sonnet 5
parent d2c2f20b65
commit 9e076f8cf9
21 changed files with 660 additions and 159 deletions
-49
View File
@@ -70,55 +70,6 @@ function initBuilderPanel() {
});
});
// Phase 7 — sprites propres au créateur : contrairement aux autres
// champs d'upload (qui REMPLACENT la valeur d'un champ texte unique),
// chaque fichier envoyé ici AJOUTE une ligne à la zone de frames — un
// personnage animé a besoin de plusieurs images, pas d'une seule.
var spriteUploadInput = document.getElementById('nf-action-sprite-upload');
if (spriteUploadInput) {
spriteUploadInput.addEventListener('change', function () {
if (!spriteUploadInput.files.length) return;
var status = document.getElementById('nf-action-sprite-upload-status');
var framesField = document.getElementById('nf-action-sprite-frames');
status.textContent = 'Envoi en cours...';
var data = new FormData();
data.append('file', spriteUploadInput.files[0]);
fetch("/game/" + GAME_SLUG + "/upload", { method: 'POST', body: data })
.then(function (r) { return r.json(); })
.then(function (json) {
if (json.url) {
framesField.value = framesField.value ? (framesField.value + '\n' + json.url) : json.url;
status.textContent = 'Fichier envoyé ✓';
} else { status.textContent = "Échec de l'envoi."; }
})
.catch(function () { status.textContent = "Échec de l'envoi."; });
});
}
// Phase 7 — même mécanisme d'upload que nf-action-sprite-upload
// ci-dessus (ajoute une ligne plutôt que de remplacer), pour le
// formulaire de clip de la Timeline d'animation.
var animClipSpriteUploadInput = document.getElementById('anim-clip-sprite-upload');
if (animClipSpriteUploadInput) {
animClipSpriteUploadInput.addEventListener('change', function () {
if (!animClipSpriteUploadInput.files.length) return;
var status = document.getElementById('anim-clip-sprite-upload-status');
var framesField = document.getElementById('anim-clip-sprite-frames');
status.textContent = 'Envoi en cours...';
var data = new FormData();
data.append('file', animClipSpriteUploadInput.files[0]);
fetch("/game/" + GAME_SLUG + "/upload", { method: 'POST', body: data })
.then(function (r) { return r.json(); })
.then(function (json) {
if (json.url) {
framesField.value = framesField.value ? (framesField.value + '\n' + json.url) : json.url;
status.textContent = 'Fichier envoyé ✓';
} else { status.textContent = "Échec de l'envoi."; }
})
.catch(function () { status.textContent = "Échec de l'envoi."; });
});
}
bindPropsAutosave();
bindJaugeDefinitionSelect();
bindDefinitionFieldSelects('field-definition_id', ['field-filtre_champ', 'field-filtre2_champ']);