diff --git a/www/html/Game/data/game-timing.json b/www/html/Game/data/game-timing.json index eb5285c..d4a73d6 100644 --- a/www/html/Game/data/game-timing.json +++ b/www/html/Game/data/game-timing.json @@ -20,20 +20,20 @@ "stackTeamMissesMax": 3, "stackTowerProgressBlocks": 50, "stackBlockNormalImageUrls": [ - "", - "", - "", - "", - "", - "" + "/Game/img/TowerBlock/Block-Code-1-red.png", + "/Game/img/TowerBlock/Block-Code-2-orange.png", + "/Game/img/TowerBlock/Block-Code-3-Yellow.png", + "/Game/img/TowerBlock/Block-Code-4-Green.png", + "/Game/img/TowerBlock/Block-Code-5-Blue.png", + "/Game/img/TowerBlock/Block-Code-6-Navy.png" ], "stackBlockHeavyImageUrls": [ - "", - "", - "", - "", - "", - "" + "/Game/img/TowerBlock/Block-Code-1-red-2.png", + "/Game/img/TowerBlock/Block-Code-2-orange-2.png", + "/Game/img/TowerBlock/Block-Code-3-Yellow-2.png", + "/Game/img/TowerBlock/Block-Code-4-Green-2.png", + "/Game/img/TowerBlock/Block-Code-5-Blue-2.png", + "/Game/img/TowerBlock/Block-Code-6-Navy-2.png" ], "stackHeavyBlockPercent": 35, "jumpSurviveJumpHeightMult": 1.5, diff --git a/www/html/Game/public/css/editor-stack-hud-mock.css b/www/html/Game/public/css/editor-stack-hud-mock.css new file mode 100644 index 0000000..2ea011b --- /dev/null +++ b/www/html/Game/public/css/editor-stack-hud-mock.css @@ -0,0 +1,301 @@ +/** + * Editor embed — Stack mode HUD mock (visual match play.html cyber HUD / mnn93hpi preview). + * Shown only when body.editor-embed-admin + #editor-stack-hud-mock:not(.is-hidden) + */ +body.editor-embed-admin .canvas-wrap { + position: relative; +} + +body.editor-embed-admin #editor-stack-hud-mock { + position: absolute; + inset: 0; + z-index: 3; + pointer-events: none; + font-family: 'Share Tech Mono', ui-monospace, monospace; +} + +body.editor-embed-admin #editor-stack-hud-mock.is-hidden { + display: none !important; +} + +/* —— SCORE (left) — same tokens as #play-cyber-hud.play-cyber-hud--question-mission .play-cyber-scoreboard —— */ +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__score { + position: absolute; + top: max(10px, env(safe-area-inset-top, 0px)); + left: max(8px, env(safe-area-inset-left, 0px)); + width: min(252px, 64vw); + max-width: min(252px, 64vw); + box-sizing: border-box; + padding: 0.48rem 0.62rem 0.52rem; + background: linear-gradient( + 165deg, + rgba(10, 26, 48, 0.92) 0%, + rgba(5, 14, 32, 0.94) 42%, + rgba(8, 20, 40, 0.9) 100% + ); + border: 1px solid rgba(0, 255, 240, 0.38); + border-radius: 2px; + box-shadow: + 0 0 0 1px rgba(0, 0, 0, 0.45), + 0 0 24px rgba(0, 200, 255, 0.16), + inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__score-title { + display: block; + font-family: 'Orbitron', sans-serif; + font-weight: 800; + font-size: clamp(0.82rem, 2.4vmin, 0.95rem); + letter-spacing: 0.22em; + text-transform: uppercase; + color: #8afeff; + text-shadow: + 0 0 16px rgba(0, 240, 255, 0.62), + 0 0 32px rgba(0, 160, 255, 0.32); + margin: 0 0 0.34rem; + padding: 0 0 0.38rem; + border-bottom: 1px solid rgba(0, 255, 240, 0.48); + text-align: left; + line-height: 1.15; +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__score-list { + list-style: none; + margin: 0; + padding: 0; + max-height: 40vh; + overflow: auto; + box-sizing: border-box; + width: 100%; +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__score-row { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 0.42rem; + width: 100%; + min-width: 0; + box-sizing: border-box; + padding: 0.3rem 0; + border-bottom: 1px solid rgba(0, 255, 240, 0.32); +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__score-row:last-child { + border-bottom: none; +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__score-left { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + gap: 0.4rem; + flex: 1 1 auto; + min-width: 0; +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__av-wrap { + display: block; + width: 34px; + height: 34px; + flex-shrink: 0; + overflow: hidden; + border-radius: 2px; + border: 1px solid rgba(0, 255, 240, 0.4); + background: rgba(0, 16, 28, 0.95); +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__av { + display: block; + width: 34px; + height: 34px; + border: none; + object-fit: cover; + object-position: center 4%; + transform: scale(1.38); + transform-origin: center 8%; +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__name { + font-size: 0.58rem; + font-weight: 600; + letter-spacing: 0.04em; + color: rgba(248, 252, 255, 0.95); + text-shadow: 0 1px 5px rgba(0, 0, 0, 0.92); + flex: 1 1 auto; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__points { + flex: 0 0 auto; + font-family: 'Orbitron', sans-serif; + font-size: clamp(1.02rem, 3.5vmin, 1.38rem); + font-weight: 800; + color: #7af8ff; + text-align: right; + line-height: 1; + text-shadow: + 0 0 14px rgba(0, 255, 240, 0.48), + 0 0 26px rgba(0, 160, 255, 0.22); + white-space: nowrap; +} + +/* —— TIME (center) —— */ +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__center { + position: absolute; + top: max(10px, env(safe-area-inset-top, 0px)); + left: 50%; + transform: translateX(-50%); + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + z-index: 2; + max-width: min(92vw, 520px); + pointer-events: none; +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__time-label { + font-family: 'Orbitron', sans-serif; + font-size: 0.62rem; + font-weight: 700; + letter-spacing: 0.28em; + color: rgba(0, 255, 200, 0.55); + margin-bottom: 0.15rem; +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__time-val { + font-family: 'Orbitron', sans-serif; + font-weight: 800; + font-size: clamp(1.35rem, 4vmin, 1.85rem); + line-height: 1; + color: #7fffab; + text-shadow: + 0 0 20px rgba(100, 255, 180, 0.55), + 0 0 40px rgba(0, 255, 140, 0.25); +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__time-sub { + margin-top: 0.28rem; + font-size: 0.52rem; + letter-spacing: 0.1em; + color: rgba(122, 248, 255, 0.52); + max-width: min(88vw, 420px); + line-height: 1.35; +} + +/* —— SYSTEM INTEGRITY + avatar (right) —— */ +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__right { + position: absolute; + top: max(10px, env(safe-area-inset-top, 0px)); + right: max(8px, env(safe-area-inset-right, 0px)); + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 0.45rem; + max-width: min(96vw, 340px); +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__avatar-col { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.35rem; + flex: 0 0 auto; +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__integrity { + flex: 1 1 auto; + min-width: 0; + padding: 0.42rem 0.55rem 0.48rem; + background: linear-gradient( + 155deg, + rgba(8, 22, 42, 0.94) 0%, + rgba(4, 12, 28, 0.96) 100% + ); + border: 1px solid rgba(0, 255, 240, 0.38); + border-radius: 4px; + box-shadow: + 0 0 0 1px rgba(0, 0, 0, 0.45), + 0 0 22px rgba(0, 200, 255, 0.14), + inset 0 1px 0 rgba(255, 255, 255, 0.06); +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__integrity-title { + font-family: 'Orbitron', sans-serif; + font-weight: 800; + font-size: 0.58rem; + letter-spacing: 0.14em; + text-transform: uppercase; + color: #5cf0ff; + text-shadow: 0 0 10px rgba(92, 240, 255, 0.45); + margin-bottom: 0.22rem; +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__hearts { + font-size: 0.72rem; + letter-spacing: 0.18em; + color: rgba(255, 255, 255, 0.95); + text-shadow: 0 0 8px rgba(255, 255, 255, 0.25); + margin-bottom: 0.28rem; +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__bracket { + color: rgba(200, 240, 255, 0.75); + font-weight: 700; +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__heart { + margin: 0 0.12em; + color: #fff; +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__meta { + font-size: 0.52rem; + letter-spacing: 0.08em; + color: rgba(232, 248, 255, 0.88); + line-height: 1.45; + text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85); +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__avatar-frame { + flex: 0 0 auto; + padding: 4px; + background: linear-gradient(145deg, rgba(0, 60, 70, 0.9), rgba(0, 20, 35, 0.95)); + border: 1px solid rgba(0, 255, 240, 0.45); + border-radius: 6px; + box-shadow: + 0 0 24px rgba(0, 200, 255, 0.2), + inset 0 0 20px rgba(0, 255, 240, 0.06); +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__avatar-img { + display: block; + width: 64px; + height: 64px; + object-fit: cover; + object-position: center 6%; + transform: scale(1.15); + transform-origin: center 10%; + image-rendering: pixelated; + background: rgba(0, 8, 16, 0.9); +} + +body.editor-embed-admin #editor-stack-hud-mock .editor-stack-hud-mock__link-chip { + min-width: 1.65rem; + padding: 0.12rem 0.28rem; + font-family: 'Orbitron', sans-serif; + font-size: 0.62rem; + font-weight: 800; + color: #7af8ff; + border: 1px solid rgba(0, 255, 240, 0.4); + border-radius: 3px; + background: rgba(0, 24, 36, 0.92); + text-align: center; + box-shadow: 0 0 12px rgba(0, 200, 255, 0.2); +} diff --git a/www/html/Game/public/editor.html b/www/html/Game/public/editor.html index 56b2733..877374d 100644 --- a/www/html/Game/public/editor.html +++ b/www/html/Game/public/editor.html @@ -6,7 +6,11 @@ Editor ฉาก — Game + + + +
@@ -357,12 +361,46 @@
-
+
+ + +

บันทึกแล้วจะได้รหัสฉาก ใช้รหัสนี้ตอนสร้างห้องในล็อบบี้

- +
v —
diff --git a/www/html/Game/public/js/editor.js b/www/html/Game/public/js/editor.js index c104890..c7111ea 100644 --- a/www/html/Game/public/js/editor.js +++ b/www/html/Game/public/js/editor.js @@ -600,6 +600,16 @@ block.hidden = !show; } + /** Admin embed: แสดง HUD จำลองแบบ play (mnn93hpi / cyber SCORE + TIME + SYSTEM INTEGRITY) เมื่อโหมด Stack */ + function syncEditorStackHudMock() { + const el = document.getElementById('editor-stack-hud-mock'); + if (!el || !editorEmbed) return; + const gt = gameTypeEl ? gameTypeEl.value : gameType; + const show = gt === 'stack'; + el.classList.toggle('is-hidden', !show); + el.setAttribute('aria-hidden', show ? 'false' : 'true'); + } + function editorGauntletRunwayBgEligibleFromMap(m) { const gt = (m && m.gameType != null && m.gameType !== '') ? m.gameType : (gameTypeEl ? gameTypeEl.value : gameType); return mapId === EDITOR_GAUNTLET_RUNWAY_BG_MAP_ID && gt === 'gauntlet'; @@ -3284,6 +3294,7 @@ })(); syncEditorGauntletRunwayBgBlockVisibility(); + syncEditorStackHudMock(); if (isEditorScrollBgMap()) applyEditorBgScrollFromMap({}); if (isEditorGauntletRunwayBgMap()) applyGauntletCrownRunwayBgFromMap({}); if (isEditorStackTowerMissionMap()) applyStackTowerCameraFollowFromMap({}); @@ -3398,6 +3409,7 @@ if (drawModeEl && (drawModeEl.value === 'quizBattleDome' || drawModeEl.value === 'quizBattlePath') && gameType !== 'quiz_battle') drawModeEl.value = 'wall'; if (drawModeEl && drawModeEl.value === 'lobbyPlayerSpawn' && !supportsLobbySpawnPaint(gameType)) drawModeEl.value = 'wall'; toggleFroggerUI(); + syncEditorStackHudMock(); syncGridImageBrushInputCaps(); syncDrawModeAuxUi(); }); @@ -3958,6 +3970,7 @@ gameType = m.gameType || 'zep'; if (gameTypeEl) gameTypeEl.value = gameType; syncEditorGauntletRunwayBgBlockVisibility(); + syncEditorStackHudMock(); applyGauntletCrownRunwayBgFromMap(m); applyStackTowerCameraFollowFromMap(m); lanes = (m.lanes && m.lanes.length) ? m.lanes.map(l => ({ ...l })) : []; @@ -3972,5 +3985,5 @@ toggleFroggerUI(); }) .catch(() => initGrid()); - } else { initGrid(); toggleFroggerUI(); } + } else { initGrid(); toggleFroggerUI(); syncEditorStackHudMock(); } })(); diff --git a/www/html/Game/public/js/play.js b/www/html/Game/public/js/play.js index 98de0e6..a2899c9 100644 --- a/www/html/Game/public/js/play.js +++ b/www/html/Game/public/js/play.js @@ -4138,6 +4138,11 @@ return isJumpSurviveMissionUiMapPlay() && jumpSurviveMissionPhase === 'live'; } + /** Space Shooter mnpz6rkp — ช่วงเล่นจริง: HUD เดียวกับ Stack mission (คลาส question-mission + TIME plaque) */ + function isSpaceShooterMissionHudActivePlay() { + return isSpaceShooterMissionUiMapPlay() && spaceShooterMissionPhase === 'live'; + } + function stackTowerAssetUrl(file) { return BASE + '/img/TowerBlock/' + String(file || '').replace(/^\/+/, ''); } @@ -15163,7 +15168,8 @@ const qText = document.getElementById('play-cyber-quiz-mission-q-text'); const qPlaque = document.getElementById('play-cyber-quiz-mission-q-plaque'); const tb = root ? root.querySelector('.play-cyber-time-block') : null; - const on = isQuizQuestionMissionHudActivePlay() || isStackTowerMissionHudActivePlay() || isJumpSurviveMissionHudActivePlay(); + const on = isQuizQuestionMissionHudActivePlay() || isStackTowerMissionHudActivePlay() || isJumpSurviveMissionHudActivePlay() + || isSpaceShooterMissionHudActivePlay(); if (isQuizQuestionMissionUiMapPlay()) { if (qBand) { qBand.classList.add('is-hidden'); @@ -15232,6 +15238,14 @@ } } + function playCyberHudEsc(t) { + return String(t == null ? '' : t) + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"'); + } + /** แถบ Cyber SCORE — ใช้ tint เดียวกับในเกม (ไม่ใช้ PNG รวมซิลูเอตขาวจาก getCharacterImg อย่างเดียว) */ function setCyberHudScoreAvatarImg(avImg, row) { const cid = row.characterId ? String(row.characterId) : ''; @@ -15297,6 +15311,7 @@ root.classList.remove('play-cyber-hud--question-mission'); root.classList.remove('play-cyber-hud--score-flush-left'); root.classList.remove('play-cyber-hud--jump-mission-hide-score'); + root.classList.remove('play-cyber-hud--ss-self-integrity-left'); } } if (stackEl) stackEl.classList.toggle('play-cyber-vignette', !!on); @@ -15305,12 +15320,14 @@ if (!on || !root) return; root.classList.toggle( 'play-cyber-hud--question-mission', - !!(isQuizQuestionMissionHudActivePlay() || isStackTowerMissionHudActivePlay() || isJumpSurviveMissionHudActivePlay()), + !!(isQuizQuestionMissionHudActivePlay() || isStackTowerMissionHudActivePlay() || isJumpSurviveMissionHudActivePlay() + || isSpaceShooterMissionHudActivePlay()), ); root.classList.toggle( 'play-cyber-hud--stack-tower-canvas-hud', !!(previewFillBots && stackMini && isStack() && isStackTowerMissionUiMapPlay()), ); + root.classList.toggle('play-cyber-hud--ss-self-integrity-left', !!isSpaceShooterMissionHudActivePlay()); /** แถบ SCORE แนวนอน (mno9kb07) — ใช้รูปแบบเดียวกับ quiz_carry / พรีวิว editor */ root.classList.toggle( 'play-cyber-hud--gauntlet-crown-strip', @@ -15332,14 +15349,16 @@ ? (playQuizPhaseLocal === 'read' ? 'READ · อ่านคำถาม' : (playQuizPhaseLocal === 'answer' ? 'ANSWER · เดินไปโซน จริง / เท็จ' : 'QUIZ MISSION · ประลองความรู้')) - : (isStackTowerMissionHudActivePlay() - ? 'TOWER STACK · DECRYPT — TIME (sec) · เหลือเวลาถอดรหัส' - : (isQuizCarry() - ? 'QUIZ CARRY · COURT — หยิบป้ายถูกแล้วส่งที่ฮับ (F / Grab)' - : (isGauntlet() ? 'GAUNTLET · SURVIVAL RUN' - : (isSpaceShooter() ? 'SPACE SHOOTER · ARCADE' - : (isBalloonBoss() ? 'BALLOON BOSS · MEGA VIRUS' - : (isJumpSurviveMissionUiMapPlay() ? 'JUMPER · SURVIVE — เหลือเวลา (วินาที) · TIME (sec)' : 'JUMP SURVIVE · NODE UPLINK')))))); + : (isSpaceShooterMissionHudActivePlay() + ? 'SPACE SHOOTER · ARCADE — TIME (sec) · ภารกิจยิงยาน' + : (isStackTowerMissionHudActivePlay() + ? 'TOWER STACK · DECRYPT — TIME (sec) · เหลือเวลาถอดรหัส' + : (isQuizCarry() + ? 'QUIZ CARRY · COURT — หยิบป้ายถูกแล้วส่งที่ฮับ (F / Grab)' + : (isGauntlet() ? 'GAUNTLET · SURVIVAL RUN' + : (isSpaceShooter() ? 'SPACE SHOOTER · ARCADE' + : (isBalloonBoss() ? 'BALLOON BOSS · MEGA VIRUS' + : (isJumpSurviveMissionUiMapPlay() ? 'JUMPER · SURVIVE — เหลือเวลา (วินาที) · TIME (sec)' : 'JUMP SURVIVE · NODE UPLINK'))))))); } if (timeVal) { if (isQuiz() && isQuizQuestionMissionUiMapPlay()) { @@ -15437,7 +15456,9 @@ if (portrait) { const cid = me.characterId || getPlayCharacterId(); - const dir = (isGauntletFaceRightMapMno9kb07() ? 'right' : (me.direction || 'down')); + const dir = isSpaceShooter() + ? 'down' + : (isGauntletFaceRightMapMno9kb07() ? 'right' : (me.direction || 'down')); const nowT = Date.now(); const walk = !!me.isWalking; const rawImg = getAvatarImg(cid, dir, nowT, walk); @@ -15458,7 +15479,47 @@ } } if (statusEl) { - if (isQuizQuestionMissionHudActivePlay()) { + if (isSpaceShooterMissionHudActivePlay()) { + ensureStackTowerLifeHudImagesPlay(); + const nn = String((me.nickname || nick || 'PILOT')).trim().slice(0, 24); + const hits = Math.max(0, Math.min(SPACE_SHOOTER_MISSION_MAX_ASTEROID_HITS, Number(me.spaceShooterHits) || 0)); + const rem = SPACE_SHOOTER_MISSION_MAX_ASTEROID_HITS - hits; + const esc = playCyberHudEsc(nn); + const W = 220; + const H = 58; + const dpr = Math.min(2, Math.max(1, typeof window !== 'undefined' && window.devicePixelRatio ? window.devicePixelRatio : 1)); + let canv = statusEl.querySelector('canvas.play-cyber-ss-integrity-canvas'); + let metaEl = statusEl.querySelector('.play-cyber-ss-meta'); + if (!canv || !metaEl) { + statusEl.textContent = ''; + canv = document.createElement('canvas'); + canv.className = 'play-cyber-ss-integrity-canvas'; + canv.setAttribute('aria-hidden', 'true'); + metaEl = document.createElement('div'); + metaEl.className = 'play-cyber-ss-meta'; + statusEl.appendChild(canv); + statusEl.appendChild(metaEl); + } + canv.width = Math.max(1, Math.floor(W * dpr)); + canv.height = Math.max(1, Math.floor(H * dpr)); + canv.style.width = W + 'px'; + canv.style.height = H + 'px'; + const ctxSs = canv.getContext('2d'); + if (ctxSs) { + ctxSs.setTransform(dpr, 0, 0, dpr, 0, 0); + ctxSs.clearRect(0, 0, W + 2, H + 2); + drawStackTowerLifeIntegrityBarPlay( + ctxSs, + 2, + 2, + W - 4, + H - 4, + SPACE_SHOOTER_MISSION_MAX_ASTEROID_HITS, + rem, + ); + } + metaEl.textContent = 'P1 · ' + esc + ' · TEAM 0 · COMBO x0'; + } else if (isQuizQuestionMissionHudActivePlay()) { statusEl.textContent = 'QUIZ LINK · ประลองความรู้'; } else if (isStackTowerMissionHudActivePlay()) { statusEl.textContent = 'DECRYPT UPLINK · TOWER'; @@ -15574,8 +15635,9 @@ const quizMissionHud = isQuizQuestionMissionHudActivePlay(); const stackMissionHud = isStackTowerMissionHudActivePlay(); const jumpMissionLiveHud = isJumpSurviveMissionHudActivePlay(); - /** แถบ SCORE แบบ mock mng8a80o (แนวนอน อวาตาร์+ชื่อ | คะแนน) — ภารกิจคำถาม + Stack Tower + Jumper mnptfts2 */ - const cyberQmMockHud = quizMissionHud || stackMissionHud || jumpMissionLiveHud; + const spaceMissionLiveHud = isSpaceShooterMissionHudActivePlay(); + /** แถบ SCORE แบบ mock mng8a80o (แนวนอน อวาตาร์+ชื่อ | คะแนน) — ภารกิจคำถาม + Stack Tower + Jumper mnptfts2 + Space mnpz6rkp */ + const cyberQmMockHud = quizMissionHud || stackMissionHud || jumpMissionLiveHud || spaceMissionLiveHud; const stackTeamPts = Math.max(0, Number(stackMini && stackMini.score) || 0); const rows = []; rows.push({ diff --git a/www/html/Game/public/play.html b/www/html/Game/public/play.html index f45a4ab..751ce6e 100644 --- a/www/html/Game/public/play.html +++ b/www/html/Game/public/play.html @@ -1806,6 +1806,55 @@ #play-cyber-hud.play-cyber-hud--question-mission .play-cyber-preview-line { display: none !important; } + /* Space Shooter mnpz6rkp — แผงขวา: life-bar + life-full/hit เหมือน drawStackTowerLifeIntegrityBarPlay */ + #play-cyber-hud.play-cyber-hud--question-mission .play-cyber-self-status { + max-width: min(230px, 48vw); + text-align: left; + letter-spacing: 0.05em; + line-height: 1.38; + font-size: 0.52rem; + color: rgba(232, 248, 255, 0.94); + } + /* Space Shooter integrity — canvas วาดด้วย drawStackTowerLifeIntegrityBarPlay (เส้นทางเดียวกับ Stack) */ + #play-cyber-hud.play-cyber-hud--question-mission .play-cyber-ss-integrity-canvas { + display: block; + width: 220px; + max-width: 100%; + image-rendering: pixelated; + margin-bottom: 0.28rem; + } + #play-cyber-hud.play-cyber-hud--question-mission .play-cyber-ss-meta { + font-size: 0.5rem; + letter-spacing: 0.06em; + color: rgba(232, 248, 255, 0.88); + text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85); + } + /* Space Shooter live: แถบ integrity + meta อยู่ซ้ายของกรอบอวตาร */ + #play-cyber-hud.play-cyber-hud--ss-self-integrity-left .play-cyber-self { + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: flex-end; + gap: 0.42rem; + max-width: min(96vw, 380px); + } + #play-cyber-hud.play-cyber-hud--ss-self-integrity-left .play-cyber-self-status { + order: 1; + flex: 1 1 auto; + min-width: 0; + } + #play-cyber-hud.play-cyber-hud--ss-self-integrity-left .play-cyber-self-frame { + order: 2; + flex-shrink: 0; + } + #play-cyber-hud.play-cyber-hud--ss-self-integrity-left .play-cyber-op-widgets { + order: 3; + flex-basis: 100%; + align-items: flex-end; + } + #play-cyber-hud.play-cyber-hud--ss-self-integrity-left .play-cyber-ss-integrity-canvas { + width: min(220px, 48vw); + } /* Stack Tower: แผงโปรไฟล์วาดบน canvas — ซ่อนกล่อง portrait DOM ขวา ไม่ให้ซ้ำกับอวตารในแผง SYSTEM INTEGRITY */ #play-cyber-hud.play-cyber-hud--stack-tower-canvas-hud .play-cyber-self { display: none !important; @@ -3026,7 +3075,7 @@ - +
v —