From e012f87052480881148ec064ca80814a12ffee82 Mon Sep 17 00:00:00 2001 From: giteaadmin Date: Mon, 4 May 2026 18:59:16 +0000 Subject: [PATCH] minigame 4add more design 1.1 --- www/html/Game/public/js/play.js | 32 ++++++++++------- www/html/Game/public/play.html | 61 ++++++++++++++++++++++++++++++++- 2 files changed, 80 insertions(+), 13 deletions(-) diff --git a/www/html/Game/public/js/play.js b/www/html/Game/public/js/play.js index 0d42334..8ba511d 100644 --- a/www/html/Game/public/js/play.js +++ b/www/html/Game/public/js/play.js @@ -14640,7 +14640,10 @@ if (root) { root.classList.toggle('is-hidden', !on); root.setAttribute('aria-hidden', on ? 'false' : 'true'); - if (!on) root.classList.remove('play-cyber-hud--question-mission'); + if (!on) { + root.classList.remove('play-cyber-hud--question-mission'); + root.classList.remove('play-cyber-hud--score-flush-left'); + } } if (stackEl) stackEl.classList.toggle('play-cyber-vignette', !!on); const gw = document.querySelector('.game-wrap'); @@ -14654,7 +14657,12 @@ 'play-cyber-hud--stack-tower-canvas-hud', !!(previewFillBots && stackMini && isStack() && isStackTowerMissionUiMapPlay()), ); - root.classList.toggle('play-cyber-hud--gauntlet-crown-strip', !!(on && isGauntletCrownHeistMapPlay())); + /** แถบ SCORE แนวนอน (mno9kb07) — ใช้รูปแบบเดียวกับ quiz_carry / พรีวิว editor */ + root.classList.toggle( + 'play-cyber-hud--gauntlet-crown-strip', + !!(on && (isGauntletCrownHeistMapPlay() || isQuizCarry())), + ); + root.classList.toggle('play-cyber-hud--score-flush-left', !!(on && isQuizCarry())); const timeLabelEl = root.querySelector('.play-cyber-time-label'); if (timeLabelEl) timeLabelEl.style.display = isQuizCarry() ? 'none' : ''; const timeVal = document.getElementById('play-cyber-time-val'); @@ -14877,15 +14885,15 @@ const ul = document.getElementById('play-cyber-score-list'); if (!ul) return; - const crownStripHud = isGauntletCrownHeistMapPlay(); + const stripScoreHud = isGauntletCrownHeistMapPlay() || isQuizCarry(); 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); + if (board) board.classList.toggle('play-cyber-scoreboard--crown-strip', !!stripScoreHud); + ul.classList.toggle('play-cyber-score-list--crown-strip', !!stripScoreHud); 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) { + if (stripScoreHud) { crownHead.classList.add('is-hidden'); crownHead.setAttribute('aria-hidden', 'true'); crownImg.removeAttribute('src'); @@ -14979,9 +14987,9 @@ }); ul.innerHTML = ''; - const cap = crownStripHud ? 6 : 8; + const cap = stripScoreHud ? (isQuizCarry() ? 8 : 6) : 8; let hudRows = rows.slice(0, Math.min(cap, rows.length)); - if (crownStripHud) { + if (stripScoreHud) { const mi = hudRows.findIndex((row) => row.isMe); if (mi >= 0) { const mine = hudRows.splice(mi, 1)[0]; @@ -14993,15 +15001,15 @@ const li = document.createElement('li'); li.className = 'play-cyber-score-row' + (row.isMe ? ' is-me' : '') + (row.eliminated ? ' is-out' : '') + (cyberQmMockHud ? ' play-cyber-score-row--qm-mock' : '') - + (crownStripHud ? ' play-cyber-score-row--crown-strip' : ''); + + (stripScoreHud ? ' play-cyber-score-row--crown-strip' : ''); const av = document.createElement('img'); av.className = 'play-cyber-score-av' + (cyberQmMockHud ? ' play-cyber-score-av--qm' : '') - + (crownStripHud ? ' play-cyber-score-av--crown-strip' : ''); + + (stripScoreHud ? ' play-cyber-score-av--crown-strip' : ''); av.alt = ''; setCyberHudScoreAvatarImg(av, row); const sc = document.createElement('span'); sc.className = 'play-cyber-score-val' + (cyberQmMockHud ? ' play-cyber-qm-score' : '') - + (crownStripHud ? ' play-cyber-crown-strip-val' : ''); + + (stripScoreHud ? ' play-cyber-crown-strip-val' : ''); if (isGauntlet() || isSpaceShooter() || isBalloonBoss() || isQuizCarry() || jumpMissionHud || quizMissionHud || stackMissionHud) { sc.textContent = String(row.score); } else { @@ -15027,7 +15035,7 @@ qmLeft.appendChild(qmName); li.appendChild(qmLeft); li.appendChild(sc); - } else if (crownStripHud) { + } else if (stripScoreHud) { const cell = document.createElement('div'); cell.className = 'play-cyber-crown-strip-cell'; const avWrap = document.createElement('div'); diff --git a/www/html/Game/public/play.html b/www/html/Game/public/play.html index 57318b6..f33272d 100644 --- a/www/html/Game/public/play.html +++ b/www/html/Game/public/play.html @@ -1717,6 +1717,65 @@ 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-hud--score-flush-left .play-cyber-scoreboard.play-cyber-scoreboard--crown-strip { + padding-left: 0; + } + #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-score-list.play-cyber-score-list--crown-strip { + padding-left: 0; + } + /* quiz_carry: TIME แถวบนเต็มจอ — SCORE ชิดโปรไฟล์ขวาบน (ไม่ใช้ grid ซ้าย | ขวา) */ + #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left { + padding-left: env(safe-area-inset-left, 0px); + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-end; + align-items: flex-start; + align-content: flex-start; + column-gap: 0.45rem; + row-gap: 0.35rem; + } + #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-center-stack { + grid-area: unset; + order: 1; + flex: 1 0 100%; + width: 100%; + max-width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + } + #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-scoreboard.play-cyber-scoreboard--crown-strip { + grid-area: unset; + order: 2; + flex: 0 1 auto; + width: auto; + min-width: 0; + max-width: min(70vw, calc(100vw - 9rem)); + margin-left: auto; + margin-right: 0; + } + #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-self { + grid-area: unset; + grid-row: unset; + order: 3; + flex: 0 0 auto; + justify-self: unset; + } + #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-time-block { + text-align: center; + max-width: 100%; + } + #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-time-head { + align-items: center; + } + #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-time-sub { + text-align: center; + max-width: min(92vw, 520px); + margin-left: auto; + margin-right: auto; + } #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-center-stack { grid-area: crownTime; position: static; @@ -2767,7 +2826,7 @@ - +
v —