From 9e33dd0ca27c3d060f49d7de0249857b127f7fc2 Mon Sep 17 00:00:00 2001 From: giteaadmin Date: Mon, 4 May 2026 07:37:25 +0000 Subject: [PATCH] minigame 1 add more design 1.1 --- www/html/Game/public/img/QUESTION/README.txt | 1 + www/html/Game/public/js/play.js | 83 ++++++++++++------ www/html/Game/public/js/version.js | 2 +- www/html/Game/public/play.html | 88 +++++++++++--------- www/html/Game/server.js | 14 ++-- 5 files changed, 114 insertions(+), 74 deletions(-) diff --git a/www/html/Game/public/img/QUESTION/README.txt b/www/html/Game/public/img/QUESTION/README.txt index ab00c91..5d41ba8 100644 --- a/www/html/Game/public/img/QUESTION/README.txt +++ b/www/html/Game/public/img/QUESTION/README.txt @@ -11,6 +11,7 @@ QUESTION — รูปสำหรับฉาก / อัปโหลด - **score+.png** — เอฟเฟกต์ “+10” กลางโซนคำตอบที่ถูก (SAFE หรือ SCAM) เมื่อมีผู้เล่นตอบถูก · คะแนนต่อข้อ = 10 แต้ม (สอดคล้อง `QUIZ_TF_POINTS_PER_CORRECT` บนเซิร์ฟเวอร์) - **result-Lose_stamp.png** — แสตมป์ทับอวาตาร์ในหน้าสรุปภารกิจ (ฉาก quiz แบบ mission) สำหรับผู้เล่นที่เคยตอบผิดในรอบนั้น · ถ้าไฟล์หายระบบ fallback ไป `/Game/img/gauntlet-assets/result-Lose_stamp.png` - **admin-tab-minigame-1.png** — ไอคอนแท็บ Admin «Minigame-1-จริงหรือไม่» (เครื่องหมายถูก neon เขียวบนพื้นดำ) + - **3.png**, **2.png**, **1.png** — รูปนับถอยหลังก่อนเริ่มข้อ (ภารกิจ + quiz_carry embed) · URL ในเบราว์เซอร์ = **`/Game/img/QUESTION/3.png`** ฯลฯ (ไม่ใช่ `/Game/public/img/...`) ถ้าไฟล์หาย ระบบ fallback ไป `/Game/img/gauntlet-assets/` ชื่อเดียวกัน (เฉพาะ popup-*) · แผ่น HUD ถ้าไม่มีไฟล์จะใช้ข้อความล้วน diff --git a/www/html/Game/public/js/play.js b/www/html/Game/public/js/play.js index 6629aff..b23c27c 100644 --- a/www/html/Game/public/js/play.js +++ b/www/html/Game/public/js/play.js @@ -1,5 +1,7 @@ (function () { const BASE = '/Game'; + /** รูปเลข 3–2–1 — เสิร์ฟที่ /Game/img/QUESTION/ (nginx alias /Game/ → public; อย่าใช้ /Game/public/img/) */ + const COUNTDOWN_321_IMG_BASE = BASE + '/img/QUESTION/'; /** แผงคำถามบนแมป quiz_carry — ไฟล์อยู่ public/img/quiz-carry */ const QUIZ_CARRY_MAP_FEEDBACK_IMG = { correct: BASE + '/img/quiz-carry/icon-Correct.png', @@ -2083,17 +2085,17 @@ function defaultCarryEmbedCountdownThemePlay() { return { - overlayBackdrop: 'rgba(8, 10, 20, 0.42)', - innerBg: 'rgba(12, 14, 28, 0.82)', - innerBorder: 'rgba(122, 162, 247, 0.45)', + overlayBackdrop: 'rgba(6, 8, 14, 0.52)', + innerBg: 'rgba(0, 0, 0, 0.78)', + innerBorder: 'rgba(94, 234, 212, 0.82)', innerBorderWpx: 1, - innerRadiusPx: 12, + innerRadiusPx: 14, digitColor: '#ffe066', mapDigitCqmin: 78, mapDigitCqh: 82, - mapDigitMaxPx: 200, - screenDigitVw: 28, - screenDigitMaxPx: 132, + mapDigitMaxPx: 220, + screenDigitVw: 32, + screenDigitMaxPx: 200, }; } @@ -2175,8 +2177,21 @@ const smx = Math.max(48, Math.min(220, Math.round(Number(th.screenDigitMaxPx) || 132))); root.style.setProperty('--carry-ecd-screen-vw', `${vw}vw`); root.style.setProperty('--carry-ecd-screen-max', `${smx}px`); - if (numEl) { + if (numEl && String(numEl.tagName || '').toUpperCase() !== 'IMG') { numEl.style.textShadow = '0 0 0.45em currentColor, 0 4px 14px rgba(0,0,0,0.55)'; + } else if (numEl) { + try { numEl.style.removeProperty('text-shadow'); } catch (e) { /* ignore */ } + } + } + + function setCountdown321QuestionAssetGraphic(numEl, n) { + if (!numEl) return; + const d = Math.max(1, Math.min(3, n)); + if (String(numEl.tagName || '').toUpperCase() === 'IMG') { + numEl.src = COUNTDOWN_321_IMG_BASE + d + '.png'; + numEl.alt = String(d); + } else { + numEl.textContent = String(d); } } @@ -3684,11 +3699,11 @@ } cd.classList.remove('is-hidden'); let n = 3; - numEl.textContent = String(n); + setCountdown321QuestionAssetGraphic(numEl, n); const step = function () { n--; if (n > 0) { - numEl.textContent = String(n); + setCountdown321QuestionAssetGraphic(numEl, n); stackTowerMissionCountdownTimer = setTimeout(step, 1000); } else { stackTowerMissionCountdownTimer = null; @@ -3997,11 +4012,11 @@ } cd.classList.remove('is-hidden'); let n = 3; - numEl.textContent = String(n); + setCountdown321QuestionAssetGraphic(numEl, n); const step = function () { n--; if (n > 0) { - numEl.textContent = String(n); + setCountdown321QuestionAssetGraphic(numEl, n); jumperMissionCountdownTimer = setTimeout(step, 1000); } else { jumperMissionCountdownTimer = null; @@ -4360,11 +4375,11 @@ } cd.classList.remove('is-hidden'); let n = 3; - numEl.textContent = String(n); + setCountdown321QuestionAssetGraphic(numEl, n); const step = function () { n--; if (n > 0) { - numEl.textContent = String(n); + setCountdown321QuestionAssetGraphic(numEl, n); spaceShooterMissionCountdownTimer = setTimeout(step, 1000); } else { spaceShooterMissionCountdownTimer = null; @@ -4667,7 +4682,7 @@ return BASE + '/img/QUESTION/' + String(file || '').replace(/^\//, ''); } - /** HUD กลางจอ (เวลา / แผ่นคำถาม) — ชื่อไฟล์คู่กับ public/img/QUESTION */ + /** HUD กลางจอ (เวลา / แผ่นคำถาม) — ชื่อไฟล์คู่กับ public/img/QUESTION บนดิสก์ → URL /Game/img/QUESTION */ function questionMissionHudAssetUrl(file) { return questionMissionAssetUrl(file); } @@ -4770,11 +4785,11 @@ } cd.classList.remove('is-hidden'); let n = 3; - numEl.textContent = String(n); + setCountdown321QuestionAssetGraphic(numEl, n); const step = function () { n--; if (n > 0) { - numEl.textContent = String(n); + setCountdown321QuestionAssetGraphic(numEl, n); quizQuestionMissionCountdownTimer = setTimeout(step, 1000); } else { quizQuestionMissionCountdownTimer = null; @@ -5764,15 +5779,33 @@ quizCarryAfterRoundResolved(); } - /** นับ 3–2–1: ไม่โชว์ข้อความคำถามใน overlay — มีแค่เลข */ - function hideQuizCarryEmbedCountdownQuestionChrome() { + function resetQuizCarryEmbedCountdownOverlayInners() { const cq = document.getElementById('quiz-carry-embed-countdown-q'); const ck = document.getElementById('quiz-carry-embed-countdown-kicker'); if (cq) { cq.textContent = ''; cq.style.display = 'none'; } - if (ck) ck.style.display = 'none'; + if (ck) { + ck.textContent = 'คำถาม · Question'; + ck.style.display = 'none'; + ck.classList.remove('quiz-carry-embed-countdown-kicker--mission'); + } + } + + /** นับ 3–2–1: ซ่อนคำถามและหัวข้อ — เหลือแค่รูปเลขจาก /Game/img/QUESTION */ + function showQuizCarryEmbedCountdownDigitsOnlyChrome() { + const cq = document.getElementById('quiz-carry-embed-countdown-q'); + const ck = document.getElementById('quiz-carry-embed-countdown-kicker'); + if (cq) { + cq.textContent = ''; + cq.style.display = 'none'; + } + if (ck) { + ck.textContent = ''; + ck.style.display = 'none'; + ck.classList.remove('quiz-carry-embed-countdown-kicker--mission'); + } } function hideQuizCarryEmbedCountdownOverlay() { @@ -5782,7 +5815,7 @@ ov.classList.add('is-hidden'); ov.setAttribute('aria-hidden', 'true'); } - hideQuizCarryEmbedCountdownQuestionChrome(); + resetQuizCarryEmbedCountdownOverlayInners(); } function tickQuizCarryEmbedCountdown() { @@ -5814,13 +5847,13 @@ } const elapsed = now - quizCarryEmbedCountdownStartAt; const n = 3 - Math.min(2, Math.floor(elapsed / 1000)); - if (numEl) numEl.textContent = String(Math.max(1, Math.min(3, n))); + setCountdown321QuestionAssetGraphic(numEl, Math.max(1, Math.min(3, n))); if (ov) { ov.classList.remove('is-hidden'); ov.setAttribute('aria-hidden', 'false'); } syncQuizCarryEmbedCountdownLayout(); - hideQuizCarryEmbedCountdownQuestionChrome(); + showQuizCarryEmbedCountdownDigitsOnlyChrome(); syncQuizCarryEmbedQuestionStrip(); } @@ -8167,11 +8200,11 @@ } cd.classList.remove('is-hidden'); let n = 3; - numEl.textContent = String(n); + setCountdown321QuestionAssetGraphic(numEl, n); const step = () => { n--; if (n > 0) { - numEl.textContent = String(n); + setCountdown321QuestionAssetGraphic(numEl, n); gauntletCrownCountdownTimer = setTimeout(step, 1000); } else { gauntletCrownCountdownTimer = null; diff --git a/www/html/Game/public/js/version.js b/www/html/Game/public/js/version.js index bcdaec7..fad0f59 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.0186'; +window.APP_VERSION = '0.0191'; 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 96ae998..4c927b9 100644 --- a/www/html/Game/public/play.html +++ b/www/html/Game/public/play.html @@ -326,19 +326,24 @@ flex-direction: column; align-items: center; justify-content: center; - gap: 0.5rem; + gap: 0.55rem; max-width: min(94vw, 760px); - padding: 0 14px; + padding: 0; text-align: center; + box-sizing: border-box; + border-radius: 0; + background: transparent; + border: none; + box-shadow: none; } #quiz-carry-embed-countdown-inner.quiz-carry-embed-countdown-inner--map-rect { max-width: none; - padding: clamp(6px, 1.2vmin, 12px); + padding: 0; box-sizing: border-box; - border-radius: var(--carry-ecd-inner-radius, 12px); - background: var(--carry-ecd-inner-bg, rgba(12, 14, 28, 0.82)); - border: var(--carry-ecd-inner-border-w, 1px) solid var(--carry-ecd-inner-border, rgba(122, 162, 247, 0.45)); - box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); + border-radius: 0; + background: transparent; + border: none; + box-shadow: none; } #quiz-carry-embed-countdown-kicker { display: none; @@ -349,6 +354,14 @@ color: #7aa2f7; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); } + #quiz-carry-embed-countdown-kicker.quiz-carry-embed-countdown-kicker--mission { + font-weight: 600; + font-size: clamp(0.72rem, 2vmin, 0.9rem); + letter-spacing: 0.04em; + text-transform: none; + color: #f8fafc; + text-shadow: 0 1px 14px rgba(0, 0, 0, 0.65); + } #quiz-carry-embed-countdown-q { display: none; margin: 0; @@ -369,23 +382,24 @@ height: 0; } #quiz-carry-embed-countdown-num { - font: 800 min(var(--carry-ecd-screen-vw, 28vw), var(--carry-ecd-screen-max, 132px)) / 1.05 system-ui, "Kanit", sans-serif; - color: var(--carry-ecd-digit-color, #ffe066); - text-shadow: 0 0 48px rgba(255, 224, 102, 0.55), 0 4px 24px rgba(0, 0, 0, 0.65); - letter-spacing: -0.04em; + display: block; + width: min(var(--carry-ecd-screen-vw, 32vw), var(--carry-ecd-screen-max, 200px)); + max-width: min(78vw, 420px); + height: auto; + object-fit: contain; + filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55)); } /* ยึดกล่องบนแมป (ทอง / กลาง / กริด 321): ตัวเลขตามขนาดกล่องช่อง — ไม่ใช้ vw เต็มจอ */ #quiz-carry-embed-countdown.quiz-carry-embed-countdown--map-anchor #quiz-carry-embed-countdown-inner.quiz-carry-embed-countdown-inner--map-rect { container-type: size; } #quiz-carry-embed-countdown.quiz-carry-embed-countdown--map-anchor #quiz-carry-embed-countdown-inner.quiz-carry-embed-countdown-inner--map-rect #quiz-carry-embed-countdown-num { - font-weight: 800; - font-size: var(--carry-ecd-map-digit-fs, clamp(14px, min(78cqmin, 82cqh), 200px)); - line-height: 1; - font-family: system-ui, "Kanit", sans-serif; - color: var(--carry-ecd-digit-color, #ffe066); - letter-spacing: -0.02em; - text-shadow: 0 0 clamp(6px, 3cqmin, 18px) rgba(255, 224, 102, 0.5), 0 2px clamp(4px, 1.5cqh, 12px) rgba(0, 0, 0, 0.6); + width: auto; + height: min(72cqh, 88cqmin); + max-height: 78%; + max-width: 92%; + object-fit: contain; + filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.55)); } /* ด้านบน: ไม่ชน HUD ล่างบนแคนวาส + เห็นชัดกว่าแถบล่าง */ #quiz-carry-embed-q-strip { @@ -958,27 +972,20 @@ #gauntlet-crown-countdown.is-hidden { display: none !important; } .gcc-panel { text-align: center; - padding: clamp(16px, 4vw, 28px); - border-radius: 16px; - border: 2px solid rgba(0, 255, 240, 0.75); - box-shadow: 0 0 28px rgba(0, 255, 240, 0.22), 0 0 40px rgba(255, 0, 200, 0.12); - background: rgba(8, 10, 22, 0.88); - } - .gcc-kicker { - margin: 0 0 12px; - font-size: clamp(0.85rem, 2.4vw, 1rem); - font-weight: 700; - color: #7af8ff; - letter-spacing: 0.04em; + padding: 0; + border-radius: 0; + border: none; + box-shadow: none; + background: transparent; } .gcc-num { display: block; - font-size: clamp(3rem, 14vw, 5.5rem); - font-weight: 900; - line-height: 1; - color: #fff; - text-shadow: 0 0 18px rgba(0, 255, 240, 0.55), 0 0 28px rgba(255, 0, 200, 0.35); - font-variant-numeric: tabular-nums; + width: min(42vw, 280px); + max-width: min(88vw, 360px); + height: auto; + margin: 0 auto; + object-fit: contain; + filter: drop-shadow(0 4px 22px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(0, 255, 240, 0.35)); } .gch-backdrop, .gcm-backdrop { @@ -1858,7 +1865,7 @@

คำถาม · Question

- 3 + 3
- - + +
v —
diff --git a/www/html/Game/server.js b/www/html/Game/server.js index 4d3d73d..d483a3e 100644 --- a/www/html/Game/server.js +++ b/www/html/Game/server.js @@ -330,17 +330,17 @@ function sanitizeCarryChoiceImageUrl(input) { function defaultCarryEmbedCountdownTheme() { return { - overlayBackdrop: 'rgba(8, 10, 20, 0.42)', - innerBg: 'rgba(12, 14, 28, 0.82)', - innerBorder: 'rgba(122, 162, 247, 0.45)', + overlayBackdrop: 'rgba(6, 8, 14, 0.52)', + innerBg: 'rgba(0, 0, 0, 0.78)', + innerBorder: 'rgba(94, 234, 212, 0.82)', innerBorderWpx: 1, - innerRadiusPx: 12, + innerRadiusPx: 14, digitColor: '#ffe066', mapDigitCqmin: 78, mapDigitCqh: 82, - mapDigitMaxPx: 200, - screenDigitVw: 28, - screenDigitMaxPx: 132, + mapDigitMaxPx: 220, + screenDigitVw: 32, + screenDigitMaxPx: 200, }; }