giteaadmin/justice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

vote design

Browse Source
This commit is contained in:
giteaadmin
2026-05-22 09:14:36 +00:00
parent 3909464d9e
commit b6ef8b8cbe
5 changed files with 19845 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/html/Game/public/js/room-lobby.js
+81 -44
View File
@@ -3900,11 +3900,9 @@
var hint = document.getElementById('suspect-pick-hint');
if (hint) hint.textContent = 'กำลังสรุปผล...';
appendLobbySystemChat('— เปิดเผยผล: คนร้ายคือผู้ต้องสงสัยหมายเลข ' + (culprit + 1) + ' · ผู้ตอบถูก: ' + names);
// โชว์คะแนนโหวตสักครู่ แล้วไปหน้าผลเต็ม (ถูก = เรือนจำไซเบอร์ / ผิด = ภารกิจล้มเหลว)
if (anyVotes) {
if (trialFinalTimer) clearTimeout(trialFinalTimer);
trialFinalTimer = setTimeout(function () { showFinalResult(correct, culprit); }, 2800);
}
// โชว์คะแนนโหวตสักครู่ แล้วไปหน้าผลเต็มเสมอ (ถูก = เรือนจำไซเบอร์ / ผิด/ไม่โหวต = ภารกิจล้มเหลว)
if (trialFinalTimer) clearTimeout(trialFinalTimer);
trialFinalTimer = setTimeout(function () { showFinalResult(correct, culprit); }, 2600);
}
var trialFinalTimer = null;
@@ -3962,32 +3960,47 @@
st.id = 'testimony-style';
var SC = '/Main-Lobby/IMAGE/Showcard/';
st.textContent =
'#testimony-overlay{position:fixed;inset:0;z-index:9000;background:linear-gradient(rgba(4,8,18,.55),rgba(4,8,18,.7)),url(' + SC + 'bg-showcard.png) center/cover no-repeat,#04081a;display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 16px;overflow:auto;font-family:Kanit,system-ui,sans-serif;color:#e7ecff}' +
'#testimony-overlay{position:fixed;inset:0;z-index:9000;background:#04060c center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-family:Kanit,system-ui,sans-serif;color:#e7ecff;overflow:hidden}' +
'#testimony-overlay.is-hidden{display:none}' +
'.tm-head{text-align:center}.tm-head h2{margin:0;color:#fff;font:800 32px/1.2 Kanit;text-shadow:0 0 16px rgba(34,211,238,.6)}.tm-head .tm-sub{margin:4px 0 0;color:#9fe7ff;font:600 16px/1.3 Kanit}' +
'.tm-members{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:1200px}' +
'.tm-member{min-width:130px;border:2px solid #1e6f8c;border-radius:14px;padding:10px 12px;text-align:center;background:rgba(8,20,38,.78)}' +
'.tm-member .tm-mname{font:700 14px/1 Kanit;color:#bfe9ff;margin-bottom:8px;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:5px}' +
'.tm-member .tm-mstat{font:600 13px/1.2 Kanit;color:#8aa0c0;display:flex;align-items:center;justify-content:center;gap:6px;min-height:26px}' +
'.tm-member .tm-mstat img{height:22px;width:auto}' +
'.tm-member.tm-ready{border-color:#22c55e;box-shadow:0 0 16px rgba(34,197,94,.55)}.tm-member.tm-ready .tm-mstat{color:#22c55e}' +
'.tm-stage{position:relative;width:min(96vw,1560px);aspect-ratio:16/9;max-height:97vh}' +
// ---- กรอบบน box-1 (title baked) ----
'.tm-top{position:absolute;left:6%;top:2.5%;width:88%;aspect-ratio:1685/560;background:url(' + SC + 'box-1.png) center/100% 100% no-repeat}' +
'.tm-title{position:absolute;left:50%;top:14%;transform:translateX(-50%);white-space:nowrap;font:800 clamp(15px,2.1vw,30px)/1 Kanit;color:#fff;text-shadow:0 0 14px rgba(34,211,238,.6)}' +
'.tm-sub2{position:absolute;left:50%;top:25%;transform:translateX(-50%);font:600 clamp(10px,1.1vw,16px)/1 Kanit;color:#9fe7ff;white-space:nowrap;max-width:80%;overflow:hidden;text-overflow:ellipsis}' +
'.tm-suspect{position:absolute;left:3.5%;top:30%;width:12%}' +
'.tm-sus-frame{position:relative;width:100%;aspect-ratio:291/289;background:url(' + SC + 'suspect-bg.png) center/contain no-repeat;display:flex;align-items:center;justify-content:center}' +
'.tm-sus-frame img{width:78%;height:78%;object-fit:cover;object-position:center 16%;border-radius:10px}' +
'.tm-sus-name{text-align:center;margin-top:2px;font:700 clamp(10px,1vw,15px)/1.1 Kanit;color:#bfe9ff}' +
'.tm-members{position:absolute;left:23%;right:3.5%;top:40%;bottom:12%;display:flex;gap:1.4%;align-items:flex-start;justify-content:flex-start}' +
'.tm-member{flex:0 0 15%;width:15%;border:2px solid #1e6f8c;border-radius:12px;padding:8px 4px;text-align:center;background:rgba(8,20,38,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}' +
'.tm-member .tm-mname{font:700 clamp(9px,0.85vw,14px)/1 Kanit;color:#bfe9ff;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:4px}' +
'.tm-member .tm-mstat{font:600 clamp(9px,0.8vw,13px)/1.1 Kanit;color:#8aa0c0;display:flex;flex-direction:column;align-items:center;gap:4px}' +
'.tm-member .tm-mstat img{height:26%;max-height:34px;width:auto}' +
'.tm-member.tm-ready{border-color:#22c55e;box-shadow:0 0 14px rgba(34,197,94,.5)}.tm-member.tm-ready .tm-mstat{color:#22c55e}' +
'.tm-member.tm-me{outline:2px solid #22d3ee;outline-offset:2px}' +
'.tm-crown img{height:18px;width:auto;vertical-align:middle}' +
'.tm-count{color:#ffd54a;font:700 18px/1 Kanit}' +
'.tm-cards{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:1100px}' +
'.tm-cards .lobby-evidence-card{cursor:pointer;transition:transform .12s,box-shadow .12s}' +
'.tm-cards .lobby-evidence-card.tm-sel{outline:3px solid #22d3ee;outline-offset:2px;transform:translateY(-4px);box-shadow:0 8px 26px rgba(34,211,238,.5)}' +
'.tm-actions{display:flex;gap:18px;align-items:center}' +
'.tm-imgbtn{background:center/contain no-repeat;border:none;cursor:pointer;font-size:0;color:transparent;padding:0;display:inline-block}' +
'.tm-crown img{height:14px;width:auto;vertical-align:middle}' +
// ---- กรอบล่าง tab-0N (แท็บ baked) ----
'.tm-bottom{position:absolute;left:6%;right:6%;top:52%;bottom:2.5%;background:top center/100% 100% no-repeat}' +
'.tm-bhead{position:absolute;left:3%;top:17%;font:600 clamp(11px,1.2vw,18px)/1.2 Kanit;color:#cfe9ff}' +
'.tm-count{position:absolute;right:3%;top:17%;color:#ffd54a;font:700 clamp(12px,1.3vw,20px)/1 Kanit}' +
'.tm-cards{position:absolute;left:3%;right:3%;top:22%;bottom:6%;display:flex;gap:1.5%;align-items:stretch;justify-content:center}' +
'.tm-cards .lobby-evidence-card{cursor:pointer;transition:transform .12s,box-shadow .12s;max-height:100%;height:100%;flex:0 1 178px;overflow:hidden}' +
'#testimony-overlay .lobby-evidence-card-art{height:clamp(28px,5vh,52px);min-height:26px;font-size:18px;margin:2px 0}' +
'#testimony-overlay .tm-cards .lobby-evidence-card-body{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}' +
'.tm-cards .lobby-evidence-card.tm-sel{outline:3px solid #22d3ee;outline-offset:2px;transform:translateY(-6px);box-shadow:0 8px 26px rgba(34,211,238,.55)}' +
'.tm-status{position:absolute;left:3%;bottom:6%;text-align:left;color:#ffd54a;font:600 clamp(11px,1.1vw,16px)/1.3 Kanit}' +
'.tm-actions{position:absolute;right:3%;bottom:4%;display:flex;gap:1.2%;align-items:center;z-index:4}' +
'.tm-imgbtn{background:center/contain no-repeat;border:none;cursor:pointer;font-size:0;color:transparent;padding:0}' +
'.tm-imgbtn:disabled{filter:grayscale(.65) opacity(.45);cursor:not-allowed}' +
'#tm-submit{width:351px;height:151px;background-image:url(' + SC + 'btn-send.png)}' +
'#tm-force-reveal{width:421px;height:126px;background-image:url(' + SC + 'btn-open-card.png)}' +
'#tm-ready{width:321px;height:126px;background-image:url(' + SC + 'btn-ready.png)}' +
'.tm-reveal-grid{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;max-width:1200px}' +
'.tm-rev-col{display:flex;flex-direction:column;align-items:center;gap:8px}' +
'.tm-rev-col .tm-rev-name{font:700 15px/1 Kanit;color:#bfe9ff;display:flex;align-items:center;gap:5px}' +
'.tm-rev-col .lobby-evidence-card{transform:scale(.82);margin:-14px 0}' +
'.tm-status{color:#ffd54a;font:600 15px/1.3 Kanit;text-align:center}';
'#tm-submit{width:clamp(150px,15vw,234px);height:clamp(64px,6.5vw,100px);background-image:url(' + SC + 'btn-send.png)}' +
'#tm-force-reveal{width:clamp(170px,17vw,280px);height:clamp(50px,5vw,84px);background-image:url(' + SC + 'btn-open-card.png)}' +
// ---- โหมดเปิดเผย (reveal) ----
'.tm-reveal-grid{position:absolute;left:2%;right:2%;top:5%;bottom:22%;display:flex;gap:1.4%;align-items:flex-start;justify-content:center;overflow:hidden}' +
'.tm-rev-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;max-width:19.5%}' +
'.tm-rev-col .tm-rev-name{font:700 clamp(9px,0.9vw,14px)/1 Kanit;color:#bfe9ff;display:flex;align-items:center;gap:4px}' +
'.tm-rev-col .lobby-evidence-card{width:100%;max-width:118px;transform:none;font-size:10px}' +
'.tm-rev-col .lobby-evidence-card .lobby-evidence-card-body{display:none}' +
'#tm-ready{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);width:clamp(160px,15vw,240px);height:clamp(62px,6vw,94px);background-image:url(' + SC + 'btn-ready.png)}';
document.head.appendChild(st);
}
@@ -4025,23 +4038,35 @@
var ov = document.getElementById('testimony-overlay');
if (ov) return ov;
injectTestimonyStyle();
var SC = '/Main-Lobby/IMAGE/Showcard/';
ov = document.createElement('div');
ov.id = 'testimony-overlay';
ov.className = 'is-hidden';
ov.innerHTML =
'<div class="tm-head"><h2 id="tm-title"></h2><p class="tm-sub" id="tm-sub"></p></div>' +
'<div class="tm-members" id="tm-members"></div>' +
'<div id="tm-select-wrap" style="display:flex;flex-direction:column;align-items:center;gap:12px;width:100%">' +
'<div style="display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center"><span class="tm-sub">[เลือกพยานหลักฐาน 2 ชิ้น เพื่อประกอบสำนวนคดีนี้]</span><span class="tm-count" id="tm-count">เลือกหลักฐาน 0/2</span></div>' +
'<div class="tm-cards" id="tm-cards"></div>' +
'<div class="tm-status" id="tm-status"></div>' +
'<div class="tm-actions"><button type="button" class="tm-imgbtn" id="tm-submit" disabled aria-label="ส่งหลักฐาน">ส่งหลักฐาน</button><button type="button" class="tm-imgbtn" id="tm-force-reveal" style="display:none" aria-label="เปิดหลักฐานทั้งหมด">เปิดหลักฐานทั้งหมด</button></div>' +
'</div>' +
'<div id="tm-reveal-wrap" style="display:none;flex-direction:column;align-items:center;gap:14px;width:100%">' +
'<div class="tm-reveal-grid" id="tm-reveal-grid"></div>' +
'<button type="button" class="tm-imgbtn" id="tm-ready" aria-label="READY">READY</button>' +
'<div class="tm-stage" id="tm-stage">' +
'<div class="tm-top">' +
'<div class="tm-title" id="tm-title"></div>' +
'<div class="tm-sub2" id="tm-sub2"></div>' +
'<div class="tm-suspect"><div class="tm-sus-frame"><img id="tm-sus-img" alt=""></div><div class="tm-sus-name" id="tm-sus-name"></div></div>' +
'<div class="tm-members" id="tm-members"></div>' +
'</div>' +
'<div class="tm-bottom" id="tm-bottom">' +
'<div id="tm-select-wrap">' +
'<div class="tm-bhead">[เลือกพยานหลักฐาน 2 ชิ้น เพื่อประกอบสำนวนคดีนี้]</div>' +
'<div class="tm-count" id="tm-count">เลือกหลักฐาน 0/2</div>' +
'<div class="tm-cards" id="tm-cards"></div>' +
'<div class="tm-status" id="tm-status"></div>' +
'<div class="tm-actions"><button type="button" class="tm-imgbtn" id="tm-submit" disabled aria-label="ส่งหลักฐาน"></button><button type="button" class="tm-imgbtn" id="tm-force-reveal" style="display:none" aria-label="เปิดหลักฐานทั้งหมด"></button></div>' +
'</div>' +
'<div id="tm-reveal-wrap" style="display:none">' +
'<div class="tm-reveal-grid" id="tm-reveal-grid"></div>' +
'<button type="button" class="tm-imgbtn" id="tm-ready" aria-label="READY"></button>' +
'</div>' +
'</div>' +
'</div>';
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 idx = parseInt(card.getAttribute('data-card-index'), 10);
@@ -4100,10 +4125,19 @@
tmState.picks = [];
tmState.submitted = false;
tmState.mode = 'select';
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-sub').textContent = 'ห้องสรุปหลักฐาน';
document.getElementById('tm-select-wrap').style.display = 'flex';
document.getElementById('tm-sub2').textContent = '';
// avatar ผู้ต้องสงสัย + ชื่อ
var susImg = document.getElementById('tm-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';
@@ -4127,16 +4161,19 @@
ov.classList.remove('is-hidden');
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 = 'flex';
document.getElementById('tm-sub').textContent = 'วิเคราะห์พยานหลักฐานกับทีม ก่อนไปปากคำถัดไป';
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 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 ? '<span class="tm-crown">♔</span> ' : '') + (m.nickname || '');
nm.innerHTML = (m.isHost ? '<span class="tm-crown"><img src="' + SC + 'host-icon.png" alt=""></span> ' : '') + (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); }
www/html/Game/public/js/room-lobby.js.bak-20260522-121544
+4914
View File
File diff suppressed because it is too large Load Diff
www/html/Game/public/js/room-lobby.js.bak-20260522-123453
+4950
View File
File diff suppressed because it is too large Load Diff
www/html/Game/public/js/room-lobby.js.bak-20260522-124526
+4949
View File
File diff suppressed because it is too large Load Diff
www/html/Game/public/js/room-lobby.js.bak-20260522-125809
+4951
View File
File diff suppressed because it is too large Load Diff