' +
+ '
' +
+ '
' +
+ '' +
- '
' +
- '
' +
- '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
'
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
เลือกหลักฐาน 0/2
' +
+ '
' +
+ '
Status : กำลังรอ..ผู้เล่นเลือกหลักฐาน
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '' +
+ '
' +
+ '
' +
+ '
' +
+ '' +
+ '
' +
+ '
' +
+ '' +
+ '' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
'
' +
'
';
document.body.appendChild(ov);
- var stg = ov.querySelector('#tm-stage');
- if (stg) stg.style.background = 'url(' + SC + 'bg-showcard.png) center/cover no-repeat #04060c';
- ov.querySelector('#tm-cards').addEventListener('click', function (e) {
- var card = e.target.closest('.lobby-evidence-card'); if (!card || tmState.submitted) return;
+ var cardsEl = ov.querySelector('#es3-cards');
+ if (cardsEl) cardsEl.addEventListener('click', function (e) {
+ var card = e.target.closest('.es3-card'); if (!card || tmState.submitted) return;
var idx = parseInt(card.getAttribute('data-card-index'), 10);
if (!(idx >= 0)) return;
var pos = tmState.picks.indexOf(idx);
- if (pos >= 0) { tmState.picks.splice(pos, 1); card.classList.remove('tm-sel'); }
- else { if (tmState.picks.length >= 2) return; tmState.picks.push(idx); card.classList.add('tm-sel'); }
- tmUpdateCount();
+ if (pos >= 0) { tmState.picks.splice(pos, 1); card.classList.remove('is-selected'); }
+ else { if (tmState.picks.length >= 2) return; tmState.picks.push(idx); card.classList.add('is-selected'); }
+ es3UpdateCount();
});
- ov.querySelector('#tm-submit').addEventListener('click', function () {
+ var submitEl = ov.querySelector('#es3BtnSubmit');
+ if (submitEl) submitEl.addEventListener('click', function () {
if (tmState.picks.length !== 2 || tmState.submitted) return;
socket.emit('testimony-submit', { picks: tmState.picks.slice(0, 2) }, function (res) {
- if (res && res.ok) { tmState.submitted = true; tmSetStatus('ส่งหลักฐานแล้ว — รอผู้เล่นอื่น...'); document.getElementById('tm-submit').disabled = true; }
- else appendLobbySystemChat('— ส่งหลักฐานไม่สำเร็จ' + (res && res.error ? (' · ' + res.error) : ''));
+ if (res && res.ok) {
+ tmState.submitted = true;
+ es3SetStatus('ส่งหลักฐานแล้ว — รอผู้เล่นอื่น...');
+ var sub = document.getElementById('es3BtnSubmit'); if (sub) sub.disabled = true;
+ } else appendLobbySystemChat('— ส่งหลักฐานไม่สำเร็จ' + (res && res.error ? (' · ' + res.error) : ''));
});
});
- ov.querySelector('#tm-force-reveal').addEventListener('click', function () {
- socket.emit('testimony-reveal', {}, function (res) { if (!(res && res.ok)) appendLobbySystemChat('— เปิดเผยไม่สำเร็จ' + (res && res.error ? (' · ' + res.error) : '')); });
- });
- ov.querySelector('#tm-ready').addEventListener('click', function () {
+ var openEl = ov.querySelector('#es3BtnOpen');
+ if (openEl) {
+ openEl.addEventListener('click', function () {
+ socket.emit('testimony-reveal', {}, function (res) { if (!(res && res.ok)) appendLobbySystemChat('— เปิดเผยไม่สำเร็จ' + (res && res.error ? (' · ' + res.error) : '')); });
+ });
+ openEl.addEventListener('keydown', function (e) {
+ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.click(); }
+ });
+ }
+ var readyEl = ov.querySelector('#esBtnReady');
+ if (readyEl) readyEl.addEventListener('click', function () {
+ if (this.disabled) return;
+ this.classList.add('is-active');
this.disabled = true;
- socket.emit('testimony-ready-next', {}, function (res) { if (!(res && res.ok)) { document.getElementById('tm-ready').disabled = false; appendLobbySystemChat('— READY ไม่สำเร็จ' + (res && res.error ? (' · ' + res.error) : '')); } });
+ socket.emit('testimony-ready-next', {}, function (res) {
+ if (!(res && res.ok)) {
+ var rd = document.getElementById('esBtnReady');
+ if (rd) { rd.disabled = false; rd.classList.remove('is-active'); }
+ appendLobbySystemChat('— READY ไม่สำเร็จ' + (res && res.error ? (' · ' + res.error) : ''));
+ }
+ });
});
return ov;
}
- function tmSetStatus(txt) { var el = document.getElementById('tm-status'); if (el) el.textContent = txt || ''; }
- function tmUpdateCount() {
- var el = document.getElementById('tm-count'); if (el) el.textContent = 'เลือกหลักฐาน ' + tmState.picks.length + '/2';
- var sub = document.getElementById('tm-submit'); if (sub) sub.disabled = (tmState.picks.length !== 2 || tmState.submitted);
+ function es3SetStatus(txt) {
+ var el = document.getElementById('es3-status');
+ if (el) el.textContent = 'Status : ' + (txt || 'กำลังรอ..ผู้เล่นเลือกหลักฐาน');
}
- function tmRenderMembers(submittedIds, readyIds, revealMode) {
- var root = document.getElementById('tm-members'); if (!root) return;
+ function es3UpdateCount() {
+ var el = document.getElementById('es3-count'); if (el) el.textContent = 'เลือกหลักฐาน ' + tmState.picks.length + '/2';
+ var sub = document.getElementById('es3BtnSubmit'); if (sub) sub.disabled = (tmState.picks.length !== 2 || tmState.submitted);
+ }
+
+ function esRevealCardEl(c, linkName, cardIdx) {
+ var rar = String(c.rarity || 'common').toLowerCase();
+ if (!LOBBY_EVIDENCE_RARITY[rar]) rar = 'common';
+ var nm = linkName || '?';
+ var icon = LOBBY_EVIDENCE_CARD_ICONS[cardIdx] || '🔎';
+ var card = document.createElement('div');
+ card.className = 'es-card rarity-' + rar;
+ card.innerHTML =
+ '
' +
+ '
◆
' +
+ '
' +
+ '
';
+ card.querySelector('.ico').textContent = icon;
+ card.querySelector('.th').textContent = c.titleTh || '';
+ card.querySelector('.en').textContent = c.titleEn ? '(' + c.titleEn + ')' : '';
+ card.querySelector('.es-card-desc').textContent = c.body || '';
+ card.querySelector('.avatar').textContent = nm.charAt(0);
+ card.querySelector('.sname').textContent = nm;
+ return card;
+ }
+
+ function esRenderRevealPlayers(members, picks, suspectData) {
+ var root = document.getElementById('es-players');
+ if (!root) return;
root.textContent = '';
+ var sd = suspectData || { linkName: '?', cards: [] };
+ (members || []).forEach(function (m) {
+ var col = document.createElement('div');
+ col.className = 'es-player';
+ col.setAttribute('data-member-id', m.id || '');
+ var crown = m.isHost ? '
' : '';
+ var nick = String(m.nickname || '').toUpperCase();
+ var nameEl = document.createElement('div');
+ nameEl.className = 'es-player-name';
+ nameEl.innerHTML = crown + nick;
+ col.appendChild(nameEl);
+ var sel = (picks && picks[m.id]) || [];
+ if (!sel.length) {
+ var none = document.createElement('div');
+ none.className = 'es-rev-none';
+ none.textContent = '(ไม่ได้ส่ง)';
+ col.appendChild(none);
+ } else {
+ sel.forEach(function (ci) {
+ var c = (sd.cards || [])[ci];
+ if (c) col.appendChild(esRevealCardEl(c, sd.linkName, ci));
+ });
+ }
+ root.appendChild(col);
+ });
+ }
+
+ function es3RenderMembers(submittedIds, readyIds, revealMode) {
+ if (revealMode) {
+ var ready = readyIds || [];
+ document.querySelectorAll('#es-players .es-player').forEach(function (col) {
+ var mid = col.getAttribute('data-member-id');
+ var watching = !!(mid && ready.indexOf(mid) < 0);
+ col.classList.toggle('is-watching', watching);
+ var badge = col.querySelector('.es-watch-badge');
+ if (watching) {
+ if (!badge) {
+ badge = document.createElement('div');
+ badge.className = 'es-watch-badge';
+ badge.textContent = 'กำลังดู..';
+ var anchor = col.querySelector('.es-card, .es-rev-none');
+ if (anchor) col.insertBefore(badge, anchor);
+ else col.appendChild(badge);
+ }
+ } else if (badge) badge.remove();
+ });
+ return;
+ }
+ var root = document.getElementById('es3-ps-row'); if (!root) return;
+ root.textContent = '';
+ var SC = '/Main-Lobby/IMAGE/Showcard/';
(tmState.members || []).forEach(function (m) {
- var d = document.createElement('div');
- d.className = 'tm-member' + (m.id === socket.id ? ' tm-me' : '');
+ var wrap = document.createElement('div');
+ wrap.className = 'es3-ps' + (m.id === socket.id ? ' is-me' : '');
var done = revealMode ? (readyIds && readyIds.indexOf(m.id) >= 0) : (submittedIds && submittedIds.indexOf(m.id) >= 0);
- if (done) d.classList.add('tm-ready');
- var SC = '/Main-Lobby/IMAGE/Showcard/';
- var crown = m.isHost ? '
' : '';
- var stat = done
- ? '
พร้อม'
- : '
' + (revealMode ? 'กำลังดู..' : 'กำลังเลือก..');
- d.innerHTML = '
' + crown + (m.nickname || '') + '
' + stat + '
';
- root.appendChild(d);
+ var crown = m.isHost ? '
' : '';
+ var nick = String(m.nickname || '').toUpperCase();
+ if (done) {
+ wrap.innerHTML =
+ '
' + crown + nick + '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
';
+ } else {
+ wrap.innerHTML =
+ '
' + crown + nick + '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
';
+ }
+ root.appendChild(wrap);
});
}
@@ -4454,68 +4613,76 @@
var SC = '/Main-Lobby/IMAGE/Showcard/';
var CS = '/Main-Lobby/IMAGE/Choose%20a%20suspect/';
var sd = tmSuspectData(tmState.round);
- document.getElementById('tm-title').textContent = 'การไต่สวน : ปากคำที่ ' + (tmState.round + 1) + ' - ' + (sd.linkName || ('ผู้ต้องสงสัย ' + (tmState.round + 1)));
- document.getElementById('tm-sub2').textContent = '';
- // avatar ผู้ต้องสงสัย + ชื่อ
- var susImg = document.getElementById('tm-sus-img');
+ document.getElementById('es3-title').textContent = 'การไต่สวน : ปากคำที่ ' + (tmState.round + 1) + ' - ' + (sd.linkName || ('ผู้ต้องสงสัย ' + (tmState.round + 1)));
+ var susImg = document.getElementById('es3-sus-img');
if (susImg) susImg.src = CS + 'suspect-' + (tmState.round + 1) + '.png';
- var susName = document.getElementById('tm-sus-name'); if (susName) susName.textContent = sd.linkName || '';
- // กรอบล่าง = tab ของผู้ต้องสงสัยปัจจุบัน
- var bottom = document.getElementById('tm-bottom');
- if (bottom) { bottom.classList.remove('tm-bottom--reveal'); bottom.style.backgroundImage = 'url(' + SC + 'tab-0' + (tmState.round + 1) + '.png)'; }
- document.getElementById('tm-select-wrap').style.display = 'block';
- document.getElementById('tm-reveal-wrap').style.display = 'none';
- var fr = document.getElementById('tm-force-reveal');
- if (fr) fr.style.display = ((data && data.hostId) === socket.id) ? 'inline-block' : 'none';
- tmSetStatus('');
- // การ์ดของผู้ต้องสงสัยปัจจุบัน (ทุกคนเห็นครบ)
- var cardsRoot = document.getElementById('tm-cards'); cardsRoot.textContent = '';
- (sd.cards || []).forEach(function (c, i) { cardsRoot.appendChild(tmEvidenceCardEl(c, sd.linkName, i, true)); });
- tmUpdateCount();
- tmRenderMembers([], [], false);
+ var susName = document.getElementById('es3-sus-name'); if (susName) susName.textContent = sd.linkName || '';
+ var stage = ov.querySelector('.es3-stage');
+ if (stage) stage.classList.remove('es3-stage--reveal');
+ var revealWrap = document.getElementById('es-reveal-wrap'); if (revealWrap) revealWrap.hidden = true;
+ var readyBtn = document.getElementById('esBtnReady');
+ if (readyBtn) { readyBtn.disabled = false; readyBtn.classList.remove('is-active'); }
+ var tabImg = document.querySelector('#es3-bottom-box img');
+ if (tabImg) tabImg.src = SC + 'tab-0' + (tmState.round + 1) + '.png';
+ var btnOpen = document.getElementById('es3BtnOpen');
+ if (btnOpen) {
+ var isHost = (data && data.hostId) === socket.id;
+ btnOpen.classList.toggle('is-hidden', !isHost);
+ btnOpen.style.display = isHost ? '' : 'none';
+ }
+ es3SetStatus('กำลังรอ..ผู้เล่นเลือกหลักฐาน');
+ var cardsRoot = document.getElementById('es3-cards'); cardsRoot.textContent = '';
+ (sd.cards || []).forEach(function (c, i) { cardsRoot.appendChild(es3EvidenceCardEl(c, sd.linkName, i, true)); });
+ es3UpdateCount();
+ es3RenderMembers([], [], false);
ov.classList.remove('is-hidden');
+ ov.setAttribute('aria-hidden', 'false');
+ requestAnimationFrame(syncTestimonyScale);
}
function testimonyStatusUpdate(data) {
if (!data) return;
- tmRenderMembers(data.submitted || [], [], false);
+ es3RenderMembers(data.submitted || [], [], false);
+ if (data.submitted && data.submitted.length) es3SetStatus('กำลังรอ..ผู้เล่นเลือกหลักฐาน');
}
function testimonyReveal(data) {
tmState.mode = 'reveal';
var ov = ensureTestimonyOverlay();
ov.classList.remove('is-hidden');
+ ov.setAttribute('aria-hidden', 'false');
if (data && Array.isArray(data.members)) tmState.members = data.members;
- document.getElementById('tm-select-wrap').style.display = 'none';
- document.getElementById('tm-reveal-wrap').style.display = 'block';
- var bottom = document.getElementById('tm-bottom');
- if (bottom) { bottom.classList.add('tm-bottom--reveal'); bottom.style.backgroundImage = 'none'; }
- document.getElementById('tm-sub2').textContent = '[วิเคราะห์พยานหลักฐานกับทีม ก่อนไปปากคำถัดไป]';
- var rd = document.getElementById('tm-ready'); if (rd) rd.disabled = false;
- var sd = tmSuspectData(tmState.round);
var SC = '/Main-Lobby/IMAGE/Showcard/';
- var grid = document.getElementById('tm-reveal-grid'); grid.textContent = '';
+ var CS = '/Main-Lobby/IMAGE/Choose%20a%20suspect/';
+ var sd = tmSuspectData(tmState.round);
+ var stage = ov.querySelector('.es3-stage');
+ if (stage) stage.classList.add('es3-stage--reveal');
+ var revealWrap = document.getElementById('es-reveal-wrap');
+ if (revealWrap) revealWrap.hidden = false;
+ var titleEl = document.getElementById('es-popup-title');
+ if (titleEl) titleEl.textContent = 'การไต่สวน : ปากคำที่ ' + (tmState.round + 1) + ' - ' + (sd.linkName || ('ผู้ต้องสงสัย ' + (tmState.round + 1)));
+ var susImg = document.getElementById('es-popup-sus-img');
+ if (susImg) susImg.src = CS + 'suspect-' + (tmState.round + 1) + '.png';
+ var susName = document.getElementById('es-popup-sus-name');
+ if (susName) susName.textContent = sd.linkName || '';
+ var rd = document.getElementById('esBtnReady');
+ if (rd) { rd.disabled = false; rd.classList.remove('is-active'); }
var picks = (data && data.picks) || {};
- (tmState.members || []).forEach(function (m) {
- var col = document.createElement('div'); col.className = 'tm-rev-col';
- var nm = document.createElement('div'); nm.className = 'tm-rev-name';
- nm.innerHTML = (m.isHost ? '
' : '') + (m.nickname || '');
- col.appendChild(nm);
- var sel = picks[m.id] || [];
- if (!sel.length) { var none = document.createElement('div'); none.className = 'tm-status'; none.textContent = '(ไม่ได้ส่ง)'; col.appendChild(none); }
- sel.forEach(function (ci) { var c = (sd.cards || [])[ci]; if (c) col.appendChild(tmEvidenceCardEl(c, sd.linkName, ci, false)); });
- grid.appendChild(col);
- });
- tmRenderMembers([], [], true);
+ esRenderRevealPlayers(tmState.members, picks, sd);
+ es3RenderMembers([], (data && data.ready) || [], true);
+ requestAnimationFrame(syncTestimonyScale);
}
function testimonyReadyUpdate(data) {
- tmRenderMembers([], (data && data.ready) || [], true);
+ es3RenderMembers([], (data && data.ready) || [], true);
}
function hideTestimonyOverlay() {
var ov = document.getElementById('testimony-overlay');
- if (ov) ov.classList.add('is-hidden');
+ if (ov) {
+ ov.classList.add('is-hidden');
+ ov.setAttribute('aria-hidden', 'true');
+ }
}
function applySuspectSelectionVisual(idx) {
diff --git a/www/html/Game/public/play.html b/www/html/Game/public/play.html
index a39e7c1..2cfdb9b 100644
--- a/www/html/Game/public/play.html
+++ b/www/html/Game/public/play.html
@@ -3214,7 +3214,7 @@
-
+
v —
' +
+ '
' +
+ '
' +
+ '' +
+ '' +
+ '' +
+ '
