From 2de3539f4fc474a41ce379a9ecef10359b846614 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 21 Mar 2026 00:40:14 +0000
Subject: [PATCH] Fix trainer sprites by adding front pic display from
 trainers/front_pics

The previous fix only changed object event sprite paths. The actual issue
was that trainer cards and the trainer edit modal had no sprite display at
all. Added getTrainerPicUrl/getTrainerPicHtml functions that map trainer
pic names (e.g. "Aqua Admin F") to graphics/trainers/front_pics/ PNGs,
and wired them into the trainer card grid and edit modal.

https://claude.ai/code/session_018zt8hfr7cTT6cbZmZC8thT
---
 editor/app.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/editor/app.js b/editor/app.js
index 639a58c48f..1c7162e3bb 100644
--- a/editor/app.js
+++ b/editor/app.js
@@ -1044,6 +1044,7 @@ async function renderTrainers() {
         grid.innerHTML += `
             <div class="trainer-card">
                 <div class="trainer-card-header">
+                    ${getTrainerPicHtml(t.pic, 48)}
                     <div>
                         <h3>${escHtml(t.name || '(unnamed)')}</h3>
                         <div class="trainer-id">${escHtml(t.id)}</div>
@@ -1125,6 +1126,13 @@ function openTrainerModal(trainer, isNew) {
     function renderModalBody() {
         const body = $('#trainer-modal-body');
         body.innerHTML = `
+            <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px;background:var(--bg);border-radius:6px;border:1px solid var(--border)">
+                ${getTrainerPicHtml(trainer.pic, 64)}
+                <div>
+                    <div style="font-size:14px;font-weight:600">${escHtml(trainer.name || '(unnamed)')}</div>
+                    <div style="font-size:12px;color:var(--text-dim)">${escHtml(trainer.pic || 'No pic set')}</div>
+                </div>
+            </div>
             <div class="form-row">
                 <div class="form-group">
                     <label>Trainer ID</label>
@@ -2133,6 +2141,20 @@ function getSpriteHtml(graphicsId, size = 32) {
     </div>`;
 }
 
+function getTrainerPicUrl(pic) {
+    const name = (pic || '').toLowerCase().replace(/\s+/g, '_');
+    return `../graphics/trainers/front_pics/${name}.png`;
+}
+
+function getTrainerPicHtml(pic, size = 64) {
+    const url = getTrainerPicUrl(pic);
+    const name = pic || '';
+    return `<div class="sprite-container" style="width:${size}px;height:${size}px">
+        <img src="${url}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" style="width:${size}px;height:${size}px;image-rendering:pixelated" alt="${escAttr(name)}">
+        <div class="sprite-fallback" style="display:none;width:${size}px;height:${size}px">${escHtml((name || '??').substring(0, 2).toUpperCase())}</div>
+    </div>`;
+}
+
 function getPreviewUrl(dirName) {
     return `previews/${encodeURIComponent(dirName)}.png`;
 }