From c2acb0babe236ca07bf9c1541f09ab14fb996cd4 Mon Sep 17 00:00:00 2001 From: giteaadmin Date: Mon, 4 May 2026 12:59:57 +0000 Subject: [PATCH] minigame 2 add more design 1.1 --- .../img/gauntlet-assets/README-score-hud.txt | 1 + www/html/Game/public/js/play.js | 102 ++++- www/html/Game/public/js/version.js | 2 +- www/html/Game/public/play.html | 407 +++++++++++++++++- 4 files changed, 503 insertions(+), 9 deletions(-) create mode 100644 www/html/Game/public/img/gauntlet-assets/README-score-hud.txt diff --git a/www/html/Game/public/img/gauntlet-assets/README-score-hud.txt b/www/html/Game/public/img/gauntlet-assets/README-score-hud.txt new file mode 100644 index 0000000..35eb6a3 --- /dev/null +++ b/www/html/Game/public/img/gauntlet-assets/README-score-hud.txt @@ -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 diff --git a/www/html/Game/public/js/play.js b/www/html/Game/public/js/play.js index fff4162..7c95837 100644 --- a/www/html/Game/public/js/play.js +++ b/www/html/Game/public/js/play.js @@ -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'; diff --git a/www/html/Game/public/js/version.js b/www/html/Game/public/js/version.js index 7e76ea4..18d72f9 100644 --- a/www/html/Game/public/js/version.js +++ b/www/html/Game/public/js/version.js @@ -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; diff --git a/www/html/Game/public/play.html b/www/html/Game/public/play.html index d027258..8c1661a 100644 --- a/www/html/Game/public/play.html +++ b/www/html/Game/public/play.html @@ -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 @@
+

@@ -2262,8 +2665,8 @@ - - + +
v —