minigame 6 add more design 1.1

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,

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);
+}

www/html/Game/public/editor.html

@@ -6,7 +6,11 @@
   <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
   <meta http-equiv="Pragma" content="no-cache" />
   <title>Editor ฉาก — Game</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Share+Tech+Mono&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/style.css?v=20260427-canvas-pixel">
+  <link rel="stylesheet" href="css/editor-stack-hud-mock.css?v=0.0001">
 </head>
 <body>
   <div class="container editor-page">
@@ -357,12 +361,46 @@
     </section>
     </div>
     <div class="editor-workspace">
-    <div class="canvas-wrap"><canvas id="editor-canvas"></canvas></div>
+    <div class="canvas-wrap">
+      <canvas id="editor-canvas"></canvas>
+      <div id="editor-stack-hud-mock" class="is-hidden" aria-hidden="true">
+        <aside class="editor-stack-hud-mock__score" aria-label="SCORE">
+          <div class="editor-stack-hud-mock__score-title">SCORE</div>
+          <ul class="editor-stack-hud-mock__score-list">
+            <li class="editor-stack-hud-mock__score-row">
+              <div class="editor-stack-hud-mock__score-left">
+                <span class="editor-stack-hud-mock__av-wrap"><img class="editor-stack-hud-mock__av" src="/Game/img/characters/1_down.png" alt=""></span>
+                <span class="editor-stack-hud-mock__name">ผู้เล่นทดสอบ</span>
+              </div>
+              <span class="editor-stack-hud-mock__points">0</span>
+            </li>
+          </ul>
+        </aside>
+        <div class="editor-stack-hud-mock__center">
+          <div class="editor-stack-hud-mock__time-label">TIME</div>
+          <div class="editor-stack-hud-mock__time-val">0</div>
+          <div class="editor-stack-hud-mock__time-sub">TOWER STACK · DECRYPT — TIME (sec) · เหลือเวลาถอดรหัส</div>
+        </div>
+        <div class="editor-stack-hud-mock__right">
+          <div class="editor-stack-hud-mock__integrity">
+            <div class="editor-stack-hud-mock__integrity-title">SYSTEM INTEGRITY:</div>
+            <div class="editor-stack-hud-mock__hearts" aria-hidden="true"><span class="editor-stack-hud-mock__bracket">[</span><span class="editor-stack-hud-mock__heart">♥</span><span class="editor-stack-hud-mock__heart">♥</span><span class="editor-stack-hud-mock__heart">♥</span><span class="editor-stack-hud-mock__bracket">]</span></div>
+            <div class="editor-stack-hud-mock__meta">P1 • ผู้เล่นทดสอบ • TEAM 0 • COMBO x0</div>
+          </div>
+          <div class="editor-stack-hud-mock__avatar-col">
+            <div class="editor-stack-hud-mock__avatar-frame">
+              <img class="editor-stack-hud-mock__avatar-img" src="/Game/img/characters/1_down.png" alt="">
+            </div>
+            <div class="editor-stack-hud-mock__link-chip" title="LINK">O</div>
+          </div>
+        </div>
+      </div>
+    </div>
     <p class="legend" id="editor-status">บันทึกแล้วจะได้รหัสฉาก ใช้รหัสนี้ตอนสร้างห้องในล็อบบี้</p>
     </div>
   </div>
   <script src="js/version.js?v=0.0258"></script>
-  <script src="js/editor.js?v=0.0319"></script>
+  <script src="js/editor.js?v=0.0320"></script>
   <div class="version-tag">v —</div>
 </body>
 </html>

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(); }
 })();

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, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
   /** แถบ 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({

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 @@
   </div>
   <script src="/Game/socket.io/socket.io.js"></script>
     <script src="js/version.js?v=0.0306"></script>
-    <script src="js/play.js?v=0.0323"></script>
+    <script src="js/play.js?v=0.0327"></script>
   <div class="version-tag">v —</div>
 </body>
 </html>