minigame 2 add more design 1.1

This commit is contained in:
2026-05-04 12:59:57 +00:00
parent 97677e51aa
commit c2acb0babe
4 changed files with 503 additions and 9 deletions
@@ -0,0 +1 @@
score.png — green "score :" header art for Last Light (mno9kb07) Cyber HUD strip. Path in game: /Game/img/gauntlet-assets/score.png
+96 -6
View File
@@ -6199,6 +6199,15 @@
function showQuizCarryTimeupOnDeskLayer(embedResultOkFn) {
const el = document.getElementById('quiz-carry-timeup-desk-layer');
if (!el) return;
// Last Light (Gauntlet Crown): skip TIME'S UP desk graphic; keep embed 5s → result flow.
if (isGauntletCrownHeistMapPlay()) {
if (previewMode && editorEmbedReturn) {
scheduleEmbedDeskResultAfterDelay(
typeof embedResultOkFn === 'function' ? embedResultOkFn : quizCarryAnyPlayerHasCorrectAnswer
);
}
return;
}
const img = document.getElementById('quiz-carry-timeup-txt-img');
if (img) {
if (isJumpSurviveMissionUiMapPlay()) {
@@ -13514,6 +13523,7 @@
if (gw) gw.classList.toggle('play-cyber-active', !!on);
if (!on || !root) return;
root.classList.toggle('play-cyber-hud--question-mission', !!isQuizQuestionMissionHudActivePlay());
root.classList.toggle('play-cyber-hud--gauntlet-crown-strip', !!(on && isGauntletCrownHeistMapPlay()));
const timeLabelEl = root.querySelector('.play-cyber-time-label');
if (timeLabelEl) timeLabelEl.style.display = isQuizCarry() ? 'none' : '';
const timeVal = document.getElementById('play-cyber-time-val');
@@ -13661,6 +13671,22 @@
statusEl.textContent = 'SPECTATOR · LINK SEVERED';
} else if (isBalloonBoss() && me.balloonBossEliminated) {
statusEl.textContent = 'SPECTATOR · BALLOONS GONE';
} else if (isGauntletCrownHeistMapPlay()) {
statusEl.textContent = '';
const tag = document.createElement('div');
tag.className = 'play-cyber-self-tagline';
tag.textContent = 'QUIZ LINK ·';
const sub = document.createElement('div');
sub.className = 'play-cyber-self-subtag';
sub.textContent = 'ประลองความรู้';
const nm = document.createElement('div');
nm.className = 'play-cyber-self-nick-line';
const raw = String(me.nickname || nick || '').trim();
nm.textContent = raw || 'LINK';
nm.title = raw || '';
statusEl.appendChild(tag);
statusEl.appendChild(sub);
statusEl.appendChild(nm);
} else {
statusEl.textContent = 'OPERATOR ONLINE';
}
@@ -13720,6 +13746,36 @@
const ul = document.getElementById('play-cyber-score-list');
if (!ul) return;
const crownStripHud = isGauntletCrownHeistMapPlay();
const board = ul.closest('.play-cyber-scoreboard');
if (board) board.classList.toggle('play-cyber-scoreboard--crown-strip', !!crownStripHud);
ul.classList.toggle('play-cyber-score-list--crown-strip', !!crownStripHud);
const panelTitle = root.querySelector('.play-cyber-panel-title');
const crownHead = document.getElementById('play-cyber-crown-score-head');
const crownImg = document.getElementById('play-cyber-crown-score-img');
if (panelTitle && crownHead && crownImg) {
if (crownStripHud) {
crownHead.classList.add('is-hidden');
crownHead.setAttribute('aria-hidden', 'true');
crownImg.removeAttribute('src');
delete crownImg.dataset.gauntletScoreSrc;
crownImg.alt = '';
crownImg.onerror = null;
crownImg.onload = null;
panelTitle.textContent = 'SCORE :';
panelTitle.classList.remove('is-hidden');
} else {
crownHead.classList.add('is-hidden');
crownHead.setAttribute('aria-hidden', 'true');
crownImg.removeAttribute('src');
delete crownImg.dataset.gauntletScoreSrc;
crownImg.alt = '';
crownImg.onerror = null;
crownImg.onload = null;
panelTitle.textContent = 'SCORE';
panelTitle.classList.remove('is-hidden');
}
}
const safeYv = (v) => (typeof v === 'number' && !isNaN(v) ? v : 1);
const jumpMissionHud = isJumpSurvive() && isJumpSurviveMissionUiMapPlay();
const quizMissionHud = isQuizQuestionMissionHudActivePlay();
@@ -13790,18 +13846,29 @@
});
ul.innerHTML = '';
const cap = 8;
for (let r = 0; r < Math.min(cap, rows.length); r++) {
const row = rows[r];
const cap = crownStripHud ? 6 : 8;
let hudRows = rows.slice(0, Math.min(cap, rows.length));
if (crownStripHud) {
const mi = hudRows.findIndex((row) => row.isMe);
if (mi >= 0) {
const mine = hudRows.splice(mi, 1)[0];
hudRows.push(mine);
}
}
for (let r = 0; r < hudRows.length; r++) {
const row = hudRows[r];
const li = document.createElement('li');
li.className = 'play-cyber-score-row' + (row.isMe ? ' is-me' : '') + (row.eliminated ? ' is-out' : '')
+ (quizMissionHud ? ' play-cyber-score-row--qm-mock' : '');
+ (quizMissionHud ? ' play-cyber-score-row--qm-mock' : '')
+ (crownStripHud ? ' play-cyber-score-row--crown-strip' : '');
const av = document.createElement('img');
av.className = 'play-cyber-score-av' + (quizMissionHud ? ' play-cyber-score-av--qm' : '');
av.className = 'play-cyber-score-av' + (quizMissionHud ? ' play-cyber-score-av--qm' : '')
+ (crownStripHud ? ' play-cyber-score-av--crown-strip' : '');
av.alt = '';
setCyberHudScoreAvatarImg(av, row);
const sc = document.createElement('span');
sc.className = 'play-cyber-score-val' + (quizMissionHud ? ' play-cyber-qm-score' : '');
sc.className = 'play-cyber-score-val' + (quizMissionHud ? ' play-cyber-qm-score' : '')
+ (crownStripHud ? ' play-cyber-crown-strip-val' : '');
if (isGauntlet() || isSpaceShooter() || isBalloonBoss() || isQuizCarry() || jumpMissionHud || quizMissionHud || stackMissionHud) {
sc.textContent = String(row.score);
} else {
@@ -13827,6 +13894,29 @@
qmLeft.appendChild(qmName);
li.appendChild(qmLeft);
li.appendChild(sc);
} else if (crownStripHud) {
const cell = document.createElement('div');
cell.className = 'play-cyber-crown-strip-cell';
const avWrap = document.createElement('div');
avWrap.className = 'play-cyber-crown-strip-av-wrap';
avWrap.appendChild(av);
const meta = document.createElement('div');
meta.className = 'play-cyber-crown-strip-meta';
const name = document.createElement('span');
name.className = 'play-cyber-crown-strip-name';
if (row.id === leaderId && leaderId != null) {
const crown = document.createElement('span');
crown.className = 'play-cyber-lead-crown';
crown.textContent = '♔';
crown.title = 'Leader';
name.appendChild(crown);
}
name.appendChild(document.createTextNode(String(row.nickname || '').trim().slice(0, 16)));
meta.appendChild(name);
meta.appendChild(sc);
cell.appendChild(avWrap);
cell.appendChild(meta);
li.appendChild(cell);
} else {
const mid = document.createElement('div');
mid.className = 'play-cyber-score-mid';
+1 -1
View File
@@ -1,6 +1,6 @@
// ทุกครั้งที่มีการเพิ่มหรือเปลี่ยน ให้เพิ่ม v +0.0001
// หลังแก้ค่าแล้วต้อง copy ไป path ที่ Nginx ชี้ (หรือรัน copy-frogger-files-only.sh) ถึงจะเห็นบนเว็บ
window.APP_VERSION = '0.0219';
window.APP_VERSION = '0.0232';
document.addEventListener('DOMContentLoaded', function () {
var t = document.querySelector('.version-tag');
if (t) t.textContent = 'v ' + window.APP_VERSION;
+405 -2
View File
@@ -1599,6 +1599,399 @@
#play-cyber-hud.play-cyber-hud--question-mission .play-cyber-preview-line {
display: none !important;
}
/* Last Light (mno9kb07): แถบคะแนนแนวนอน — score.png แล้วตามด้วยสูงสุด 6 ช่อง (อวาตาร์ | ชื่อบน / คะแนนล่าง) */
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-hint {
display: none !important;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-corruption,
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-preview-line {
display: none !important;
}
/* Last Light: แถวบน = SCORE ยืดซ้าย | OPERATOR ขวา — แถวล่าง = TIME ใต้ SCORE */
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
grid-template-areas:
'crownScore crownOp'
'crownTime crownOp';
align-items: start;
column-gap: clamp(10px, 2vw, 20px);
row-gap: 0.35rem;
box-sizing: border-box;
padding-top: max(50px, calc(env(safe-area-inset-top) + 38px));
padding-left: max(6px, env(safe-area-inset-left));
padding-right: max(8px, env(safe-area-inset-right));
padding-bottom: max(6px, env(safe-area-inset-bottom));
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-center-stack {
grid-area: crownTime;
position: static;
left: auto;
top: auto;
transform: none;
width: 100%;
min-width: 0;
max-width: none;
padding: 0;
align-items: flex-start;
justify-self: stretch;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-time-block {
min-width: 0;
text-align: left;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-time-head {
align-items: flex-start;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-time-sub {
max-width: min(100%, 320px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-self {
grid-area: crownOp;
grid-row: 1 / -1;
justify-self: end;
align-self: start;
position: static;
top: auto;
right: auto;
margin-left: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.32rem;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-scoreboard.play-cyber-scoreboard--crown-strip {
grid-area: crownScore;
width: 100%;
min-width: 0;
max-width: none;
position: static;
left: auto;
right: auto;
top: auto;
padding: 0.28rem 0.2rem 0.32rem 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 0.55rem;
box-sizing: border-box;
background: transparent;
border: none;
box-shadow: none;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-panel-title {
flex: 0 0 auto;
align-self: center;
margin: 0 0.15rem 0 0;
padding: 0;
border-bottom: none;
font-family: 'Orbitron', sans-serif;
font-weight: 800;
font-size: clamp(0.68rem, 1.9vmin, 0.86rem);
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8afeff;
text-shadow:
0 0 14px rgba(0, 240, 255, 0.55),
0 0 28px rgba(0, 160, 255, 0.28),
0 1px 10px rgba(0, 0, 0, 0.75);
white-space: nowrap;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-crown-score-head {
flex: 0 0 auto;
align-self: center;
margin: 0;
line-height: 0;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-crown-score-head img {
display: block;
height: clamp(16px, 3.2vmin, 26px);
width: auto;
max-width: min(42vw, 200px);
object-fit: contain;
object-position: left center;
image-rendering: auto;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-crown-score-head.is-hidden {
display: none !important;
margin: 0;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-score-list.play-cyber-score-list--crown-strip {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: clamp(6px, 1vw, 12px);
flex: 1 1 auto;
min-width: 0;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
scrollbar-width: thin;
scrollbar-color: rgba(0, 210, 255, 0.5) rgba(0, 0, 0, 0.28);
padding: 0 0.2rem 0.2rem 0;
box-sizing: border-box;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-score-list.play-cyber-score-list--crown-strip::-webkit-scrollbar {
height: 5px;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-score-list.play-cyber-score-list--crown-strip::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, rgba(0, 200, 255, 0.55), rgba(0, 255, 220, 0.4));
border-radius: 4px;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-score-list.play-cyber-score-list--crown-strip::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.22);
border-radius: 4px;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-score-row--crown-strip {
display: flex;
flex: 0 0 auto;
flex-shrink: 0;
min-width: 7.1rem;
padding: 0.12rem 0.12rem 0.12rem 0;
box-sizing: border-box;
margin: 0;
border-bottom: none;
grid-template-columns: unset;
grid-template: none;
border-right: none;
background: transparent;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-crown-strip-cell {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.36rem;
width: auto;
min-width: 0;
max-width: none;
flex-shrink: 0;
box-sizing: border-box;
background: transparent;
}
/* คอขึ้นไป — โฟกัสใบหน้า+ไหล่ (ไม่ซูมจนเหลือแต่หน้าผาก) */
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-crown-strip-av-wrap {
flex: 0 0 auto;
width: 36px;
height: 36px;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid rgba(0, 255, 240, 0.42);
background: rgba(0, 6, 12, 0.92);
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-score-av--crown-strip {
display: block;
position: relative;
left: auto;
top: auto;
width: 40px;
height: 40px;
max-width: none;
margin: 0;
border: none;
flex-shrink: 0;
object-fit: cover;
object-position: 50% 28%;
transform: scale(1.12);
transform-origin: 50% 42%;
image-rendering: pixelated;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-crown-strip-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 0.12rem;
flex: 0 1 auto;
min-width: 3.75rem;
max-width: 9.5rem;
background: transparent;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-crown-strip-name {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 0.46rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-score-row--crown-strip.is-me .play-cyber-crown-strip-name {
color: #f2ffff;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-crown-strip-val {
font-family: 'Orbitron', sans-serif;
font-size: clamp(0.72rem, 2.2vmin, 0.9rem);
font-weight: 800;
color: #7af8ff;
text-shadow:
0 0 14px rgba(122, 248, 255, 0.55),
0 0 26px rgba(0, 200, 255, 0.28),
0 1px 8px rgba(0, 0, 0, 0.88);
line-height: 1;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-time-val {
color: #7fffab;
text-shadow:
0 0 20px rgba(100, 255, 180, 0.55),
0 0 40px rgba(0, 255, 140, 0.25),
0 2px 12px rgba(0, 0, 0, 0.88);
}
/* Last Light: OPERATOR + ไมค์ / สถานะ */
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-self-frame {
padding: 3px;
border-radius: 12px;
background: rgba(0, 12, 22, 0.55);
border: 1px solid rgba(0, 255, 240, 0.55);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.45),
0 0 22px rgba(0, 230, 255, 0.42),
inset 0 0 18px rgba(0, 255, 240, 0.07);
overflow: hidden;
width: 58px;
height: 58px;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: center;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-self-frame img {
width: 64px;
height: 64px;
max-width: none;
margin: 0;
border-radius: 9px;
object-fit: cover;
object-position: 50% 0%;
transform: scale(1.38);
transform-origin: 50% 14%;
background: rgba(0, 6, 14, 0.75);
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-self-status {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.1rem;
max-width: min(200px, 42vw);
width: max-content;
font-size: 0;
letter-spacing: 0.08em;
line-height: 1.22;
text-align: left;
}
/* โทนเดียวกับแผง user embed คำถาม (editor mng8a80o): QUIZ LINK · + ประลองความรู้ */
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-self-tagline {
font-family: 'Orbitron', sans-serif;
font-size: clamp(0.44rem, 1.35vmin, 0.56rem);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7af8ff;
text-shadow:
0 0 12px rgba(122, 248, 255, 0.55),
0 0 22px rgba(0, 200, 255, 0.28),
0 1px 8px rgba(0, 0, 0, 0.85);
white-space: nowrap;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-self-subtag {
font-family: 'Sarabun', 'Noto Sans Thai', system-ui, sans-serif;
font-size: clamp(0.48rem, 1.5vmin, 0.62rem);
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(122, 248, 255, 0.92);
text-shadow:
0 0 10px rgba(0, 240, 255, 0.35),
0 1px 6px rgba(0, 0, 0, 0.82);
white-space: nowrap;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-self-nick-line {
font-family: 'Sarabun', 'Noto Sans Thai', 'Share Tech Mono', ui-monospace, monospace;
font-size: clamp(0.42rem, 1.35vmin, 0.52rem);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: none;
color: rgba(232, 250, 255, 0.9);
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.82);
margin-top: 0.06rem;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.play-cyber-op-widgets {
display: none;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0.25rem;
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-op-widgets {
display: flex;
align-self: center;
margin-top: 0.06rem;
}
.play-cyber-link-status {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
box-sizing: border-box;
border: 1px solid rgba(0, 255, 240, 0.48);
background: linear-gradient(180deg, rgba(0, 48, 58, 0.75), rgba(0, 12, 22, 0.92));
box-shadow:
0 0 14px rgba(0, 220, 255, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
font-family: 'Orbitron', sans-serif;
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.92);
line-height: 1;
}
.play-cyber-voice-chip {
display: none;
width: 30px;
height: 30px;
border-radius: 8px;
box-sizing: border-box;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 255, 240, 0.48);
background: linear-gradient(180deg, rgba(0, 48, 58, 0.75), rgba(0, 12, 22, 0.92));
box-shadow:
0 0 14px rgba(0, 220, 255, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-voice-chip {
display: flex;
}
.play-cyber-voice-chip::after {
content: '';
display: block;
width: 9px;
height: 12px;
border: 2px solid rgba(255, 255, 255, 0.88);
border-radius: 4px 4px 5px 5px;
box-shadow: 0 4px 0 -2px rgba(255, 255, 255, 0.35);
}
#play-cyber-hud.play-cyber-hud--question-mission .play-cyber-time-head {
display: flex;
flex-direction: row;
@@ -1700,6 +2093,9 @@
padding-bottom: 0.25rem;
border-bottom: 1px solid rgba(0, 255, 240, 0.2);
}
.play-cyber-panel-title.is-hidden {
display: none !important;
}
.play-cyber-score-list {
list-style: none;
margin: 0;
@@ -2129,6 +2525,9 @@
</div>
<div id="play-cyber-hud" class="play-cyber-hud is-hidden" aria-hidden="true">
<aside class="play-cyber-scoreboard" aria-label="SCORE">
<div id="play-cyber-crown-score-head" class="play-cyber-crown-score-head is-hidden" aria-hidden="true">
<img id="play-cyber-crown-score-img" alt="" width="120" height="32" decoding="async" />
</div>
<div class="play-cyber-panel-title">SCORE</div>
<ul id="play-cyber-score-list" class="play-cyber-score-list"></ul>
</aside>
@@ -2152,6 +2551,10 @@
<img id="play-cyber-portrait-img" alt="" width="72" height="72" />
</div>
<div id="play-cyber-self-status" class="play-cyber-self-status"></div>
<div id="play-cyber-op-widgets" class="play-cyber-op-widgets" aria-hidden="true">
<div id="play-cyber-voice-chip" class="play-cyber-voice-chip"></div>
<div class="play-cyber-link-status" title="LINK">O</div>
</div>
</div>
<p id="play-cyber-hint" class="play-cyber-hint"></p>
<p id="play-cyber-preview-line" class="play-cyber-preview-line is-hidden"></p>
@@ -2262,8 +2665,8 @@
</div>
</div>
<script src="/Game/socket.io/socket.io.js"></script>
<script src="js/version.js?v=0.0219"></script>
<script src="js/play.js?v=0.0219"></script>
<script src="js/version.js?v=0.0232"></script>
<script src="js/play.js?v=0.0232"></script>
<div class="version-tag">v —</div>
</body>
</html>