diff --git a/www/html/Game/public/js/play.js b/www/html/Game/public/js/play.js index 2c503b2..2c8e661 100644 --- a/www/html/Game/public/js/play.js +++ b/www/html/Game/public/js/play.js @@ -367,6 +367,34 @@ }; var EVIDENCE_RARITY_LABEL = { common: 'การ์ดธรรมดา', rare: 'การ์ด Rare', legendary: 'การ์ดชี้คนร้าย' }; + /** กล่องดูการ์ดหลักฐานแบบขยาย (zoom) — ปิดด้วยปุ่ม ×, คลิกพื้นหลัง, หรือ Esc */ + function openEvidenceCardLightboxPlay(imageUrl, label, rarity) { + if (!imageUrl) return; + var rar = String(rarity || 'common').toLowerCase(); + var glow = EVIDENCE_RARITY_GLOW[rar] || EVIDENCE_RARITY_GLOW.common; + var ov = document.getElementById('evidence-card-lightbox'); + if (!ov) { + ov = document.createElement('div'); + ov.id = 'evidence-card-lightbox'; + ov.style.cssText = 'position:fixed;inset:0;z-index:100001;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(5,8,18,.88);backdrop-filter:blur(4px)'; + ov.innerHTML = + '' + + '
' + + '' + + '
' + + '
'; + document.body.appendChild(ov); + var closeFn = function () { ov.style.display = 'none'; }; + ov.addEventListener('click', function (e) { if (e.target === ov || (e.target.classList && e.target.classList.contains('ecl-close'))) closeFn(); }); + document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && ov.style.display !== 'none') closeFn(); }); + } + var img = ov.querySelector('.ecl-img'); + var cap = ov.querySelector('.ecl-cap'); + if (img) { img.style.boxShadow = '0 0 44px ' + glow + ',0 22px 60px rgba(0,0,0,.6)'; img.src = imageUrl; } + if (cap) cap.textContent = label || ''; + ov.style.display = 'flex'; + } + function showInSceneEvidenceReveal(res, onDone) { var done = false; var finish = function () { if (done) return; done = true; onDone(); }; @@ -414,7 +442,9 @@ var img = document.createElement('img'); img.src = c.imageUrl; img.alt = EVIDENCE_RARITY_LABEL[rar] || 'หลักฐาน'; - img.style.cssText = 'display:block;width:min(34vw,260px);height:auto;border-radius:14px;box-shadow:0 0 36px ' + glow + ',0 18px 50px rgba(0,0,0,.6)'; + img.style.cssText = 'display:block;width:min(34vw,260px);height:auto;border-radius:14px;box-shadow:0 0 36px ' + glow + ',0 18px 50px rgba(0,0,0,.6);cursor:zoom-in'; + img.title = 'แตะเพื่อดูใหญ่'; + img.addEventListener('click', function () { openEvidenceCardLightboxPlay(c.imageUrl, EVIDENCE_RARITY_LABEL[rar] || '', rar); }); img.onerror = function () { this.onerror = null; this.style.width = '200px'; this.style.height = '300px'; this.style.background = '#1b2240'; this.removeAttribute('src'); }; var tag = document.createElement('div'); tag.style.cssText = 'font:800 14px/1 Kanit,system-ui,sans-serif;color:#fff;opacity:.92'; diff --git a/www/html/Game/public/js/room-lobby.js b/www/html/Game/public/js/room-lobby.js index 5091be0..755ed68 100644 --- a/www/html/Game/public/js/room-lobby.js +++ b/www/html/Game/public/js/room-lobby.js @@ -5042,6 +5042,21 @@ img.onerror = function () { this.onerror = null; buildEs3HtmlCard(card, c, linkName, cardIndex); }; img.src = c.imageUrl; card.appendChild(img); + /* ปุ่มแว่นขยายมุมการ์ด — ดูใหญ่ได้โดยไม่ชนกับการเลือกการ์ด (stopPropagation) */ + var zb = document.createElement('button'); + zb.type = 'button'; + zb.className = 'es3-card-zoom'; + zb.setAttribute('aria-label', 'ดูใหญ่'); + zb.textContent = '🔍'; + zb.style.cssText = 'position:absolute;top:6px;right:6px;z-index:3;width:30px;height:30px;border:none;border-radius:50%;cursor:zoom-in;font-size:15px;line-height:1;background:rgba(8,12,28,.78);color:#ffd666;box-shadow:0 2px 8px rgba(0,0,0,.5)'; + zb.addEventListener('click', function (e) { + e.stopPropagation(); + var label = (c.titleTh || '') + (c.titleEn ? ' · ' + c.titleEn : ''); + if (!label && linkName) label = linkName; + openEvidenceCardLightbox(c.imageUrl, label, c.rarity); + }); + card.style.position = 'relative'; + card.appendChild(zb); return card; } buildEs3HtmlCard(card, c, linkName, cardIndex); diff --git a/www/html/Game/public/play.html b/www/html/Game/public/play.html index c305f94..6a31c60 100644 --- a/www/html/Game/public/play.html +++ b/www/html/Game/public/play.html @@ -5152,7 +5152,7 @@ - +
v —
diff --git a/www/html/Game/public/room-lobby.html b/www/html/Game/public/room-lobby.html index 06a6712..bc0a4eb 100644 --- a/www/html/Game/public/room-lobby.html +++ b/www/html/Game/public/room-lobby.html @@ -1613,7 +1613,7 @@ - +
v —