minigame 1 add more design 1.5

www/html/Game/public/js/play.js

@@ -1374,6 +1374,9 @@
   let playQuizText = '';
   let playQuizPhaseEndsAt = 0;
   let playQuizTimerInterval = null;
+  /** เกมถูก/ผิด + ภารกิจ mng8a80o: เลขข้อจากเซิร์ฟเวอร์ (1-based) / จำนวนข้อในรอบ — ใช้บรรทัดเล็กเหนือคำถามบนแผนที่ */
+  let playQuizQuestionIndex = 0;
+  let playQuizQuestionTotal = 0;
   /** Preview-only: real question pool + phased timer (matches server quiz-settings / map quizQuestions). */
   let previewQuizPool = [];
   /** ดัชนีข้อในรอบพรีวิว (0..len-1) — หลังสับแล้วตัดตาม quizRoundQuestionCount เหมือนเซิร์ฟเวอร์ */
@@ -1699,7 +1702,14 @@
 
   function clearQuizMapPanelThemeInline(panel, textEl) {
     if (!panel || !textEl) return;
+    panel.classList.remove('quiz-map-question-panel--has-kicker');
     panel.classList.remove('quiz-map-question-panel--question-mission-live');
+    const qKick = document.getElementById('quiz-map-question-kicker');
+    if (qKick) {
+      qKick.textContent = '';
+      qKick.classList.add('is-hidden');
+      qKick.setAttribute('aria-hidden', 'true');
+    }
     panel.style.removeProperty('background-image');
     panel.style.removeProperty('background-size');
     panel.style.removeProperty('background-position');
@@ -1826,7 +1836,12 @@
     const padB = parseFloat(cs.paddingBottom) || 0;
     const padL = parseFloat(cs.paddingLeft) || 0;
     const padR = parseFloat(cs.paddingRight) || 0;
-    const availH = Math.max(12, panel.clientHeight - padT - padB);
+    let kickerReserve = 0;
+    if (panel.classList.contains('quiz-map-question-panel--question-mission-live')
+      && panel.classList.contains('quiz-map-question-panel--has-kicker')) {
+      kickerReserve = 30;
+    }
+    const availH = Math.max(12, panel.clientHeight - padT - padB - kickerReserve);
     const availW = Math.max(24, panel.clientWidth - padL - padR);
     const themeMin = Math.max(8, Math.floor(Number(minPx) || 8));
     const hardMin = Math.min(themeMin, Math.max(6, Math.floor(availH / 7)));
@@ -2335,7 +2350,6 @@
       : getEffectiveQuizMapPanelThemeForApply();
     const startFontPx = quizMapQuestionFontPxLikeCarryPlaques(thFont, zoom);
     const mnFont = Math.max(8, Math.round(Number(thFont.questionFontMinPx) || 10));
-    fitQuizMapQuestionFontToPanel(panel, textEl, startFontPx, mnFont);
     /* ไม่โหลด hud-question-plaque.png อัตโนมัติ — บนเซิร์ฟมักไม่มีไฟล์ → 404 ใน Network; ใช้คลาส + CSS แทน (อัปโหลด PNG แล้วค่อยผูกทีหลังได้) */
     if (isQuiz() && isQuizQuestionMissionUiMapPlay() && quizQuestionMissionPhase === 'live') {
       panel.classList.add('quiz-map-question-panel--question-mission-live');
@@ -2348,6 +2362,36 @@
         delete panel.dataset.qmPlaqueTry;
       }
     }
+    const kickerEl = document.getElementById('quiz-map-question-kicker');
+    const missionLiveQ = isQuiz() && isQuizQuestionMissionUiMapPlay() && quizQuestionMissionPhase === 'live';
+    const inReadOrAnswer = playQuizPhaseLocal === 'read' || playQuizPhaseLocal === 'answer';
+    if (kickerEl) {
+      let showK = false;
+      let line = '';
+      if (missionLiveQ && inReadOrAnswer) {
+        const qi = Math.max(0, Number(playQuizQuestionIndex) || 0);
+        const qt = Math.max(0, Number(playQuizQuestionTotal) || 0);
+        if (qi > 0 && qt > 0) {
+          line = '- Quiz ' + qi + ' / ' + qt + ' -';
+          showK = true;
+        } else if (qi > 0) {
+          line = '- Quiz ' + qi + ' -';
+          showK = true;
+        }
+      }
+      if (showK && line) {
+        kickerEl.textContent = line;
+        kickerEl.classList.remove('is-hidden');
+        kickerEl.setAttribute('aria-hidden', 'false');
+        panel.classList.add('quiz-map-question-panel--has-kicker');
+      } else {
+        kickerEl.textContent = '';
+        kickerEl.classList.add('is-hidden');
+        kickerEl.setAttribute('aria-hidden', 'true');
+        panel.classList.remove('quiz-map-question-panel--has-kicker');
+      }
+    }
+    fitQuizMapQuestionFontToPanel(panel, textEl, startFontPx, mnFont);
   }
 
   /** โซนเดียวกับแผงคำถามบนแผนที่ — ยึด timeup ให้ตรงกล่อง #quiz-map-question-panel (ห้ามคำนวณซ้ำแล้วคลาด) */
@@ -2617,6 +2661,8 @@
     previewQuizCurrent = q;
     playQuizText = q.text;
     playQuizPhaseEndsAt = Date.now() + previewQuizTiming.readMs;
+    playQuizQuestionIndex = previewQuizQIndex + 1;
+    playQuizQuestionTotal = Math.max(0, Number(poolLen) || 0);
     const phaseEl = document.getElementById('quiz-game-phase-label');
     if (phaseEl) {
       phaseEl.textContent = '[ทดสอบ] อ่านคำถาม · ข้อ ' + (previewQuizQIndex + 1) + ' / ' + poolLen;
@@ -3266,6 +3312,8 @@
       previewQuizStep = 'read';
       playQuizText = 'ยังไม่มีคำถามในชุด — ตั้งคำถามใน Admin → คำถามเกม หรือในแมป (quizQuestions)';
       playQuizPhaseEndsAt = 0;
+      playQuizQuestionIndex = 0;
+      playQuizQuestionTotal = 0;
       const phaseEl = document.getElementById('quiz-game-phase-label');
       if (phaseEl) phaseEl.textContent = '[ทดสอบ] ไม่มีคำถามในระบบ';
       const qEl = document.getElementById('quiz-game-question');
@@ -3310,6 +3358,8 @@
     playQuizPlayerLocal = { cannotTrue: false, cannotFalse: false, eliminated: false, score: 0 };
     playQuizText = '';
     playQuizPhaseEndsAt = 0;
+    playQuizQuestionIndex = 0;
+    playQuizQuestionTotal = 0;
     previewQuizPool = [];
     previewQuizQIndex = 0;
     previewQuizCurrent = null;
@@ -3377,6 +3427,8 @@
       playQuizPhaseLocal = null;
       playQuizText = 'รอคำถามจากโฮสต์…';
       playQuizPhaseEndsAt = 0;
+      playQuizQuestionIndex = 0;
+      playQuizQuestionTotal = 0;
       const phaseEl = document.getElementById('quiz-game-phase-label');
       if (phaseEl) phaseEl.textContent = 'แมพตอบคำถาม';
       const qEl = document.getElementById('quiz-game-question');
@@ -3415,6 +3467,8 @@
     if (p.text) playQuizText = p.text;
     playQuizPhaseLocal = p.phase;
     playQuizPhaseEndsAt = p.endsAt || 0;
+    playQuizQuestionIndex = Math.max(0, Number(p.questionIndex) || 0);
+    playQuizQuestionTotal = Math.max(0, Number(p.questionTotal) || 0);
     const phaseEl = document.getElementById('quiz-game-phase-label');
     const qEl = document.getElementById('quiz-game-question');
     if (phaseEl) {
@@ -3434,6 +3488,9 @@
     updatePlayQuizTimerDisplay();
     if (!previewMode && isQuiz() && !Object.keys(playLiveQuizScores).length) initPlayLiveQuizScoresZeros();
     if (!previewMode && isQuiz() && p.phase === 'read' && Number(p.questionIndex) === 1) playQuizEverWrong = {};
+    try {
+      syncPlayQuizMapPanel();
+    } catch (eQm) { /* ignore */ }
   }
 
   function isFrogger() { return mapData && mapData.gameType === 'frogger'; }

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.0216';
+window.APP_VERSION = '0.0219';
 document.addEventListener('DOMContentLoaded', function () {
   var t = document.querySelector('.version-tag');
   if (t) t.textContent = 'v ' + window.APP_VERSION;

www/html/Game/public/play.html

@@ -240,6 +240,30 @@
         inset 0 0 0 1px rgba(0, 255, 240, 0.14),
         0 0 32px rgba(0, 200, 255, 0.1);
     }
+    /* บรรทัดเล็กเหนือข้อความคำถาม — หมายเลขข้อ (เทียบ mock - Quiz 3) */
+    #quiz-map-question-panel .quiz-map-question-kicker {
+      position: relative;
+      z-index: 1;
+      flex: 0 0 auto;
+      width: 100%;
+      box-sizing: border-box;
+      margin: 0 0 0.28rem;
+      padding: 0 2px;
+      font-family: 'Orbitron', 'Share Tech Mono', ui-monospace, sans-serif;
+      font-size: clamp(0.52rem, 1.35vw, 0.66rem);
+      font-weight: 600;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      line-height: 1.25;
+      text-align: center;
+      color: rgba(236, 252, 255, 0.95);
+      text-shadow:
+        0 0 10px rgba(0, 240, 255, 0.42),
+        0 1px 8px rgba(0, 0, 0, 0.88);
+    }
+    #quiz-map-question-panel .quiz-map-question-kicker.is-hidden {
+      display: none !important;
+    }
     #quiz-map-question-panel.is-hidden { display: none !important; }
     #quiz-map-question-panel::-webkit-scrollbar {
       display: none;
@@ -1568,6 +1592,13 @@
     #play-cyber-hud.play-cyber-hud--question-mission .play-cyber-hint {
       display: none !important;
     }
+    /* โหมดคำถาม: ซ่อนแถบ glitch แดง (RAM ERROR…) และบรรทัด SIM พรีวิวด้านล่าง */
+    #play-cyber-hud.play-cyber-hud--question-mission .play-cyber-corruption {
+      display: none !important;
+    }
+    #play-cyber-hud.play-cyber-hud--question-mission .play-cyber-preview-line {
+      display: none !important;
+    }
     #play-cyber-hud.play-cyber-hud--question-mission .play-cyber-time-head {
       display: flex;
       flex-direction: row;
@@ -1886,25 +1917,6 @@
       text-shadow: 0 0 10px rgba(255, 180, 80, 0.35);
     }
     .play-cyber-preview-line.is-hidden { display: none !important; }
-    .play-cyber-mic {
-      position: absolute;
-      bottom: max(96px, calc(env(safe-area-inset-bottom) + 80px));
-      right: max(12px, env(safe-area-inset-right));
-      width: 44px;
-      height: 44px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: rgba(0, 30, 40, 0.88);
-      border: 1px solid rgba(0, 255, 240, 0.4);
-      border-radius: 8px;
-      box-shadow: 0 0 20px rgba(0, 200, 255, 0.18);
-    }
-    .play-cyber-mic-icon {
-      font-size: 1.1rem;
-      color: #7af8ff;
-      text-shadow: 0 0 12px rgba(0, 255, 240, 0.5);
-    }
     .play-cyber-corruption {
       position: absolute;
       bottom: 0;
@@ -2056,6 +2068,7 @@
       </button>
       <div id="quiz-map-question-panel" class="is-hidden" aria-hidden="true">
         <img id="quiz-map-q-feedback-icon" class="quiz-map-q-feedback-icon is-hidden" alt="" width="64" height="64" decoding="async" />
+        <div id="quiz-map-question-kicker" class="quiz-map-question-kicker is-hidden" aria-hidden="true"></div>
         <p id="quiz-map-question-text"></p>
         <div id="quiz-map-q-feedback-score-wrap" class="is-hidden" aria-hidden="true">
           <img id="quiz-map-q-feedback-score" alt="" width="120" height="48" decoding="async" />
@@ -2142,9 +2155,6 @@
     </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>
-    <div class="play-cyber-mic" title="Voice channel (placeholder)">
-      <span class="play-cyber-mic-icon" aria-hidden="true">🎙</span>
-    </div>
     <div class="play-cyber-corruption" aria-hidden="true">
       <div class="play-cyber-corruption-scanlines"></div>
       <div class="play-cyber-corruption-text">RAM ERROR · CORRUPTING · DELETE INITIATED · 01001101 01110011 01100101 01100011</div>
@@ -2252,8 +2262,8 @@
     </div>
   </div>
   <script src="/Game/socket.io/socket.io.js"></script>
-  <script src="js/version.js?v=0.0216"></script>
-  <script src="js/play.js?v=0.0216"></script>
+  <script src="js/version.js?v=0.0219"></script>
+  <script src="js/play.js?v=0.0219"></script>
   <div class="version-tag">v —</div>
 </body>
 </html>