@@ -1471,6 +1469,20 @@ function checkCheckpoints() {
}
}
+// ===== PORTRAIT FULLSCREEN =====
+function openPortraitOverlay(imgSrc, name, event) {
+ event.stopPropagation();
+ const overlay = document.getElementById('portrait-overlay');
+ document.getElementById('portrait-overlay-img').src = imgSrc;
+ document.getElementById('portrait-overlay-name').textContent = name;
+ overlay.classList.add('active');
+ document.body.style.overflow = 'hidden';
+}
+function closePortraitOverlay() {
+ document.getElementById('portrait-overlay').classList.remove('active');
+ document.body.style.overflow = '';
+}
+
// ===== NAVIGATION =====
function navTo(screen) {
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
@@ -1503,15 +1515,22 @@ function switchRef(id, btn) {
// ===== BUILD NPC CARDS =====
function buildNPCs() {
const container = document.getElementById('npc-list');
- container.innerHTML = NPCS.map((npc, i) => `
+ container.innerHTML = NPCS.map((npc, i) => {
+ // Extract img src from portrait HTML for the fullscreen handler
+ const srcMatch = npc.portrait ? npc.portrait.match(/src="([^"]+)"/) : null;
+ const imgSrc = srcMatch ? srcMatch[1] : '';
+ const tapHandler = imgSrc
+ ? `onclick="openPortraitOverlay('${imgSrc}', '${npc.name}', event)"`
+ : '';
+ return `
@@ -1523,10 +1542,10 @@ function buildNPCs() {
What They Know
${npc.knows}
Stat Block
-
${npc.stats}
+
${npc.stats}
-