diff --git a/www/html/Game/public/js/play.js b/www/html/Game/public/js/play.js index 2bbde9d..fff4162 100644 --- a/www/html/Game/public/js/play.js +++ b/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'; } diff --git a/www/html/Game/public/js/version.js b/www/html/Game/public/js/version.js index ca041ac..7e76ea4 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.0216'; +window.APP_VERSION = '0.0219'; 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 5b89fab..d027258 100644 --- a/www/html/Game/public/play.html +++ b/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 @@ - - + +
v —