Personnages : toutes les animations, tous les personnages ; retrait de l'import de sprites personnalisés
À la demande de l'utilisateur (validation de la refonte visuelle du widget Personnage), deux ajustements : - Bibliothèque de sprites Forge étendue aux 6 personnages du pack Kenney "Toon Characters" (aventurier/aventurière, personnage homme/femme, robot, zombie), avec TOUTES leurs poses (45 par personnage) plutôt que 3 — regroupées en 31 animations nommées par personnage (poses numérotées type walk0..walk7 fusionnées en un seul cycle "walk", les autres restant des poses figées à une image). ~1,2 Mo au total, toujours un sous-ensemble curé du pack source (assets/characters/, non versionné) — HD/Parts/Tilesheet/Vector toujours exclus. - Import de sprites personnalisés retiré pour le moment : plus de tuile "➕ Sprite personnalisé" dans la galerie d'ajout, plus de section d'import dans les propriétés d'un personnage — seuls les personnages Forge restent proposés. La résolution serveur de _personnage_data garde son support générique de la source "custom" (aucune migration requise si cette possibilité revient plus tard), mais plus aucune UI ne permet de la créer. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
9e076f8cf9
commit
5ead091c75
@@ -3,7 +3,9 @@
|
||||
// générique via #propsForm — chaque changement s'enregistre en AJAX vers
|
||||
// POST /game/<slug>/elements/<id>/personnage (element_set_personnage_data.py),
|
||||
// qui renvoie les animations résolues pour relancer immédiatement l'aperçu
|
||||
// animé (voir personnage-preview.js) sans recharger la page.
|
||||
// animé (voir personnage-preview.js) sans recharger la page. L'import de
|
||||
// sprites personnalisés est retiré pour le moment — seuls les personnages
|
||||
// Forge (SPRITE_LIBRARY) sont proposés.
|
||||
|
||||
function _personnageElementId() {
|
||||
var body = document.getElementById('personnagePanelBody');
|
||||
@@ -29,83 +31,9 @@ function _savePersonnageData(data) {
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Source Forge : changer de personnage ----------
|
||||
function swapPersonnageCharacter(forgeCharacter) {
|
||||
document.querySelectorAll('#personnageGallerySwap .iconGalleryTile').forEach(function (tile) {
|
||||
tile.classList.toggle('selected', tile.getAttribute('onclick') === "swapPersonnageCharacter('" + forgeCharacter + "')");
|
||||
});
|
||||
_savePersonnageData({ source: 'forge', forge_character: forgeCharacter });
|
||||
}
|
||||
|
||||
// ---------- Source personnalisée : animations importées ----------
|
||||
function _collectPersonnageAnimations() {
|
||||
var animations = {};
|
||||
document.querySelectorAll('#personnageAnimationsList .personnageAnimRow').forEach(function (row) {
|
||||
var name = row.querySelector('.personnageAnimName').value.trim();
|
||||
if (!name) return;
|
||||
var frames = Array.prototype.map.call(row.querySelectorAll('.personnageFrameThumb'), function (img) { return img.src; });
|
||||
animations[name] = frames;
|
||||
});
|
||||
return animations;
|
||||
}
|
||||
|
||||
function _saveCustomAnimations() {
|
||||
return _savePersonnageData({ source: 'custom', animations: _collectPersonnageAnimations() });
|
||||
}
|
||||
|
||||
function addPersonnageAnimation() {
|
||||
var list = document.getElementById('personnageAnimationsList');
|
||||
var row = document.createElement('div');
|
||||
row.className = 'personnageAnimRow box';
|
||||
row.style.marginBottom = '8px';
|
||||
row.style.padding = '8px';
|
||||
row.innerHTML =
|
||||
'<div class="fieldRow" style="align-items:center; gap:6px;">' +
|
||||
'<input type="text" class="input is-small personnageAnimName" placeholder="ex. idle, marche, saut" style="flex:1;">' +
|
||||
'<button type="button" class="button is-small is-danger" onclick="removePersonnageAnimation(this)">🗑</button>' +
|
||||
'</div>' +
|
||||
'<div class="personnageAnimFrames" style="display:flex; flex-wrap:wrap; gap:4px; margin-top:6px;"></div>' +
|
||||
'<input type="file" class="personnageFrameUpload input is-small" accept="image/*" multiple style="margin-top:6px;">' +
|
||||
'<span class="uploadStatus" style="font-size:12px; color:var(--text-dim);"></span>';
|
||||
list.appendChild(row);
|
||||
}
|
||||
|
||||
function removePersonnageAnimation(btn) {
|
||||
btn.closest('.personnageAnimRow').remove();
|
||||
_saveCustomAnimations();
|
||||
}
|
||||
|
||||
// Délégation d'événements : les lignes d'animation sont ajoutées
|
||||
// dynamiquement (addPersonnageAnimation ci-dessus), un bindage statique au
|
||||
// chargement de la page ne les couvrirait pas.
|
||||
document.addEventListener('change', function (ev) {
|
||||
if (ev.target.classList.contains('personnageAnimName')) {
|
||||
_saveCustomAnimations();
|
||||
} else if (ev.target.classList.contains('personnageFrameUpload')) {
|
||||
var input = ev.target;
|
||||
if (!input.files.length) return;
|
||||
var row = input.closest('.personnageAnimRow');
|
||||
var framesWrap = row.querySelector('.personnageAnimFrames');
|
||||
var status = row.querySelector('.uploadStatus');
|
||||
status.textContent = 'Envoi en cours...';
|
||||
var uploads = Array.prototype.map.call(input.files, function (file) {
|
||||
var data = new FormData();
|
||||
data.append('file', file);
|
||||
return fetch('/game/' + GAME_SLUG + '/upload', { method: 'POST', body: data }).then(function (r) { return r.json(); });
|
||||
});
|
||||
Promise.all(uploads).then(function (results) {
|
||||
results.forEach(function (json) {
|
||||
if (!json.url) return;
|
||||
var img = document.createElement('img');
|
||||
img.className = 'personnageFrameThumb';
|
||||
img.alt = '';
|
||||
img.style.cssText = 'width:32px; height:32px; object-fit:contain; background:var(--panel2); border-radius:4px;';
|
||||
img.src = json.url;
|
||||
framesWrap.appendChild(img);
|
||||
});
|
||||
status.textContent = results.every(function (j) { return j.url; }) ? 'Fichier(s) envoyé(s) ✓' : "Échec de l'envoi pour certains fichiers.";
|
||||
input.value = '';
|
||||
_saveCustomAnimations();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -193,9 +193,8 @@ function addIconElement(iconClass) {
|
||||
}
|
||||
|
||||
// Phase 8 — galerie "🎭 Personnages" (panneau gauche) : mirror exact
|
||||
// d'addIconElement() ci-dessus, "__custom__" pose un sprite personnalisé
|
||||
// vide (voir element_add.py) dont les animations s'importent ensuite dans
|
||||
// ses propriétés (panneau droit, personnage-panel.js).
|
||||
// d'addIconElement() ci-dessus, pose un personnage Forge déjà configuré
|
||||
// (voir element_add.py).
|
||||
function addPersonnageElement(forgeCharacter) {
|
||||
var form = document.createElement('form');
|
||||
form.method = 'post';
|
||||
|
||||
Reference in New Issue
Block a user