feat(02-05): add avatar images to welcome screen with emoji fallback

- Extend CompanionDefinition with avatarUrl field using Vite static imports
- Replace emoji-only companion cards with avatar img + onerror emoji fallback
- Add companion-card__avatar CSS (80px round) and companion-area styles (48px)
- Add vite-env.d.ts for PNG import type declarations

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-29 12:14:28 +02:00
co-authored by Claude Opus 4.6
parent 4538f392ef
commit 2cf7687d51
4 changed files with 56 additions and 5 deletions
+3 -1
View File
@@ -30,7 +30,9 @@ export function initWelcomeScreen(
card.className = "companion-card";
card.dataset.companion = c.type;
card.innerHTML = `
<span class="companion-card__emoji">${c.emoji}</span>
<img class="companion-card__avatar" src="${c.avatarUrl}" alt="${c.name}"
onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
<span class="companion-card__emoji" style="display:none">${c.emoji}</span>
<span class="companion-card__name">${c.name}</span>
`;
card.addEventListener("click", () => {