feat: Add custom avatar upload for NPCs in Present Characters panel

- Add npcAvatars storage to extension settings for custom NPC images
- Implement getCharacterAvatar() to check custom avatars first
- Add uploadNpcAvatar() function with file validation (2MB max, images only)
- Make character avatars clickable with visual feedback
- Support left-click to upload and right-click to remove custom avatars
- Add camera icon overlay on hover with smooth animations
- Store avatars as base64 data URIs for persistence across sessions
This commit is contained in:
Spicy_Marinara
2025-12-18 14:14:49 +01:00
parent 5bc7bfe22f
commit ab7dfeaf8b
3 changed files with 210 additions and 61 deletions
+43
View File
@@ -1881,6 +1881,49 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
display: block; /* Prevent inline spacing issues */
}
/* Uploadable avatar - make it clickable */
.rpg-avatar-upload {
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.rpg-avatar-upload::after {
content: '📷';
position: absolute;
bottom: -2px;
right: -2px;
font-size: clamp(10px, 1.5vh, 14px);
background: var(--rpg-bg);
border: 1px solid var(--rpg-highlight);
border-radius: 50%;
width: clamp(18px, 2.5vh, 22px);
height: clamp(18px, 2.5vh, 22px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.rpg-avatar-upload:hover::after {
opacity: 1;
}
.rpg-avatar-upload:hover {
transform: scale(1.05);
}
.rpg-avatar-upload:hover img {
opacity: 0.8;
border-color: var(--rpg-text);
}
.rpg-avatar-upload:active {
transform: scale(0.98);
}
/* Relationship badge in top-right corner */
.rpg-relationship-badge {
position: absolute;