giteaadmin/justice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minigame 1 add more design 1.1

Browse Source
This commit is contained in:
giteaadmin
2026-05-04 07:37:25 +00:00
parent 7e3e935e2d
commit 9e33dd0ca2
5 changed files with 114 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/html/Game/public/img/QUESTION/README.txt
+1
View File
@@ -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 ถ้าไม่มีไฟล์จะใช้ข้อความล้วน
www/html/Game/public/js/play.js
+58 -25
View File
@@ -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;
www/html/Game/public/js/version.js
+1 -1
View File
@@ -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;
www/html/Game/public/play.html
+47 -41
View File
@@ -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 @@
<div id="quiz-carry-embed-countdown-inner">
<p id="quiz-carry-embed-countdown-kicker" class="quiz-carry-embed-countdown-kicker">คำถาม · Question</p>
<p id="quiz-carry-embed-countdown-q" class="quiz-carry-embed-countdown-q"></p>
<span id="quiz-carry-embed-countdown-num">3</span>
<img id="quiz-carry-embed-countdown-num" src="/Game/img/QUESTION/3.png" width="200" height="200" alt="3" decoding="async" />
</div>
</div>
<div id="quiz-carry-embed-q-strip" class="is-hidden" role="status" aria-live="polite" aria-atomic="true" aria-hidden="true">
@@ -1944,8 +1951,7 @@
</div>
<div id="gauntlet-crown-countdown" class="is-hidden" role="alert" aria-live="assertive" aria-atomic="true">
<div class="gcc-panel">
<p class="gcc-kicker">ภารกิจเริ่ม · Mission start</p>
<span id="gauntlet-crown-countdown-num" class="gcc-num">3</span>
<img id="gauntlet-crown-countdown-num" class="gcc-num" src="/Game/img/QUESTION/3.png" width="240" height="240" alt="" decoding="async" />
</div>
</div>
<div id="gauntlet-crown-mission-overlay" class="is-hidden" role="dialog" aria-modal="true" aria-labelledby="gcm-heading">
@@ -2008,8 +2014,8 @@
</div>
</div>
<script src="/Game/socket.io/socket.io.js"></script>
<script src="js/version.js?v=0.0184"></script>
<script src="js/play.js?v=0.297"></script>
<script src="js/version.js?v=0.0191"></script>
<script src="js/play.js?v=0.0191"></script>
<div class="version-tag">v —</div>
</body>
</html>
www/html/Game/server.js
+7 -7
View File
@@ -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,
};
}