diff --git a/www/html/Game/public/js/play.js b/www/html/Game/public/js/play.js index d885237..e022751 100644 --- a/www/html/Game/public/js/play.js +++ b/www/html/Game/public/js/play.js @@ -4019,10 +4019,18 @@ let py = sumCy / ents.length; const minCamX = halfW; const maxCamX = Math.max(minCamX, mapWpx - halfW); - px = Math.max(minCamX, Math.min(maxCamX, px)); const minCamY = halfH; const maxCamY = Math.max(minCamY, mapHpx - halfH); - py = Math.max(minCamY, Math.min(maxCamY, py)); + const viewW = halfW * 2; + const viewH = halfH * 2; + /* + * ถ้ามุมมองกว้าง/สูงกว่าแมป: อย่าใช้ clamp แบบ minCamX (= กล้องชิดซ้ายโลก) — จะดูเหมือนแมปติดมุมซ้ายบน (เด่นใน embed / ซูมออก) + * ให้จัดกลางแมปแทน — ต่างจาก mng8a80o ที่กล้องตาม me อยู่แล้ว + */ + if (viewW >= mapWpx) px = mapWpx * 0.5; + else px = Math.max(minCamX, Math.min(maxCamX, px)); + if (viewH >= mapHpx) py = mapHpx * 0.5; + else py = Math.max(minCamY, Math.min(maxCamY, py)); return { px, py }; } @@ -13538,6 +13546,7 @@ const header = document.querySelector('.game-header'); const headerH = header && header.offsetHeight ? header.offsetHeight : 48; const stage = document.getElementById('play-canvas-stage'); + const stackEl = document.getElementById('play-canvas-stack'); const parent = stage || (canvas && canvas.parentElement); let cw = canvas.clientWidth || 0; let ch = canvas.clientHeight || 0; @@ -13550,8 +13559,20 @@ if (ow > 80) cw = Math.max(cw, ow); if (oh > 80) ch = Math.max(ch, oh); } + /* embed: stage อาจยัง 0 แต่ stack วัดได้แล้ว — อย่าให้ fallback เป็น vw/vh เต็มจอแล้ว CSS ย่อเข้า stage = ดูชิดมุม */ + if (previewMode && editorEmbedReturn && stackEl) { + const sw = Math.max(stackEl.clientWidth || 0, stackEl.offsetWidth || 0); + const sh = Math.max(stackEl.clientHeight || 0, stackEl.offsetHeight || 0); + if (sw > 80) cw = Math.max(cw, sw); + if (sh > 80) ch = Math.max(ch, sh); + } if (ch < 120) ch = Math.max(240, vh - headerH - 6); - if (cw < 120) cw = Math.max(320, vw); + if (cw < 120) { + if (previewMode && editorEmbedReturn && stackEl) { + const sw = Math.max(stackEl.clientWidth || 0, stackEl.offsetWidth || 0); + cw = sw > 80 ? Math.max(320, sw) : Math.max(320, vw); + } else cw = Math.max(320, vw); + } canvas.width = Math.max(320, cw); canvas.height = Math.max(240, ch); syncQuizCarryEmbedCountdownLayout(); diff --git a/www/html/Game/public/js/version.js b/www/html/Game/public/js/version.js index 866681f..ad5a230 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.0286'; +window.APP_VERSION = '0.0292'; 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 987bef7..4d6a154 100644 --- a/www/html/Game/public/play.html +++ b/www/html/Game/public/play.html @@ -5,6 +5,17 @@ เล่น — Game + + @@ -21,21 +32,53 @@ width: 100%; box-sizing: border-box; } - /* พรีวิว editor embed: ให้คอลัมน์แคนวาสเต็มพื้นที่ iframe/หน้าต่าง — กันพื้นดำล้นเมื่อจอใหญ่ */ - html.play-preview-editor-embed, - html.play-preview-editor-embed body { + /* พรีวิว editor embed — ห้าม display:flex บน (จะทำให้ กับ เป็น flex items คู่กัน → ความสูง body/เกมคำนวณผิด แคนวาสชิดซ้ายบน แต่ stack ยังเต็มจอ) */ + html.play-preview-editor-embed { width: 100%; + height: 100%; min-height: 100vh; min-height: 100dvh; + box-sizing: border-box; + display: block; + } + html.play-preview-editor-embed body { + width: 100%; + height: 100%; + margin: 0; + box-sizing: border-box; + min-height: 100vh; + min-height: 100dvh; + display: flex; + flex-direction: column; } html.play-preview-editor-embed .game-wrap { - width: 100%; - min-height: 0; flex: 1 1 auto; + min-height: 0; + width: 100%; + display: flex; + flex-direction: column; + position: relative; } html.play-preview-editor-embed .play-canvas-stack { + flex: 1 1 0% !important; + min-height: 0 !important; + min-width: 0 !important; width: 100%; - min-height: 0; + display: flex !important; + flex-direction: column !important; + position: relative; + } + html.play-preview-editor-embed #play-canvas-stage.play-canvas-stage { + flex: 1 1 0% !important; + min-height: 0 !important; + min-width: 0 !important; + width: 100%; + display: flex !important; + align-items: center !important; + justify-content: center !important; + } + html.play-preview-editor-embed #play-canvas-stage #game-canvas { + align-self: center !important; } html.play-preview-editor-embed .version-tag { display: none !important; @@ -1577,6 +1620,11 @@ pointer-events: none; font-family: 'Share Tech Mono', ui-monospace, monospace; } + /* embed: HUD อยู่ใน .game-wrap — absolute ยึดกรอบเกม ไม่ใช่ viewport ทั้งจอ (แก้ TIME/SCORE หลุดคนละกรอบกับแคนวาสกลาง) */ + html.play-preview-editor-embed #play-cyber-hud.play-cyber-hud { + position: absolute; + inset: 0; + } .play-cyber-hud.is-hidden { display: none !important; } /* mng8a80o — แผง SCORE: มุมคม, หัว SCORE ใหญ่, แถวแนวนอน = [อวาตาร์เล็ก + ชื่อไทย] ซ้าย | คะแนนใหญ่ขวา */ #play-cyber-hud.play-cyber-hud--question-mission .play-cyber-scoreboard { @@ -2778,6 +2826,46 @@ + - - - + +
v —