diff --git a/www/html/Game/public/js/play.js b/www/html/Game/public/js/play.js index 2931d7d..0d42334 100644 --- a/www/html/Game/public/js/play.js +++ b/www/html/Game/public/js/play.js @@ -15,6 +15,9 @@ const previewMode = params.get('preview') === '1'; const forceDefaultCharacter = params.get('defaultChar') === '1'; const editorEmbedReturn = params.get('editorEmbed') === '1'; + if (previewMode && editorEmbedReturn) { + try { document.documentElement.classList.add('play-preview-editor-embed'); } catch (e) { /* ignore */ } + } const playMapIdFromQuery = (params.get('map') || '').trim(); /** mapId จาก join / game-start — ใช้จับฉาก crown เมื่อ URL ไม่มี ?map= */ let playSessionMapId = playMapIdFromQuery; diff --git a/www/html/Game/public/play.html b/www/html/Game/public/play.html index 0d50624..57318b6 100644 --- a/www/html/Game/public/play.html +++ b/www/html/Game/public/play.html @@ -551,7 +551,7 @@ z-index: 10120; top: max(52px, calc(env(safe-area-inset-top) + 46px)); } - /* พรีวิว embed quiz_carry: How to play + Ready / START ก่อน 3–2–1 */ + /* พรีวิว embed quiz_carry: How to play — โครง/โกลว์ให้ใกล้ gauntlet-crown-howto (Stack mnn93hpi รูป2) */ #quiz-carry-pregame-overlay { position: fixed; inset: 0; @@ -562,12 +562,15 @@ padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); box-sizing: border-box; } + html.play-preview-editor-embed #quiz-carry-pregame-overlay { + z-index: 10138; + } #quiz-carry-pregame-overlay.is-hidden { display: none !important; } .quiz-carry-pregame-backdrop { position: absolute; inset: 0; - background: rgba(4, 6, 14, 0.78); - backdrop-filter: blur(10px); + background: rgba(6, 8, 18, 0.78); + backdrop-filter: blur(5px); } .quiz-carry-pregame-sr-only { position: absolute; @@ -585,63 +588,74 @@ z-index: 1; display: flex; flex-direction: column; - align-items: stretch; - max-width: min(94vw, 900px); - width: 100%; - max-height: min(94vh, 900px); - overflow: hidden; - background: rgba(10, 12, 26, 0.55); + align-items: center; + width: min(96vw, 920px); + max-width: min(96vw, 920px); + max-height: min(92vh, 640px); + overflow: visible; + padding: clamp(4px, 1.2vw, 10px); + background: transparent; border: none; - border-radius: 4px; + border-radius: 14px; box-shadow: none; pointer-events: auto; } .quiz-carry-pregame-art { - flex: 1 1 auto; + flex: 0 1 auto; + width: 100%; min-height: 0; margin: 0; padding: 0; - overflow: auto; + overflow: visible; background: transparent; display: flex; - align-items: flex-start; + align-items: center; justify-content: center; } .quiz-carry-pregame-howto-img { display: block; width: 100%; height: auto; - max-height: min(62vh, 560px); + max-height: min(88vh, 600px); object-fit: contain; - object-position: top center; + object-position: center center; border: none; outline: none; - box-shadow: none; + pointer-events: none; + filter: drop-shadow(0 0 18px rgba(0, 255, 240, 0.25)) drop-shadow(0 0 22px rgba(255, 0, 200, 0.2)); } .quiz-carry-pregame-footer { + position: absolute; + left: 50%; + bottom: clamp(6px, 1.6vmin, 14px); + transform: translateX(-50%); + width: min(92%, 280px); flex: 0 0 auto; - padding: 0.85rem 1rem 1rem; - background: linear-gradient(180deg, rgba(8, 10, 22, 0.2), rgba(8, 10, 22, 0.96)); - border-top: none; + padding: 0; + background: transparent; + border: none; display: flex; flex-direction: column; align-items: center; - gap: 0.65rem; + gap: 4px; + pointer-events: none; } .quiz-carry-pregame-status { margin: 0; + max-width: 100%; text-align: center; - font: 700 clamp(0.8rem, 2.4vw, 0.95rem) / 1.35 system-ui, "Kanit", sans-serif; - color: #fbcfe8; - text-shadow: 0 0 16px rgba(244, 114, 182, 0.5); + font: 800 clamp(0.75rem, 2vw, 0.9rem) / 1.35 system-ui, "Kanit", sans-serif; + color: #f8fafc; + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.55); letter-spacing: 0.02em; } .quiz-carry-pregame-actions { display: flex; flex-wrap: wrap; - gap: 0.85rem 1.25rem; + gap: 0.5rem 1rem; justify-content: center; align-items: center; + pointer-events: auto; } .quiz-carry-pregame-primary-btn { background: transparent; @@ -654,7 +668,7 @@ } .quiz-carry-pregame-primary-btn:hover:not(:disabled):not(.is-read-only) { transform: scale(1.03); - filter: brightness(1.08); + filter: brightness(1.08) drop-shadow(0 0 10px rgba(0, 255, 240, 0.35)); } .quiz-carry-pregame-primary-btn.is-pressed:not(.is-start-phase) { filter: brightness(1.12) drop-shadow(0 0 12px rgba(94, 234, 212, 0.55)); @@ -668,7 +682,7 @@ } .quiz-carry-pregame-primary-btn img { display: block; - width: min(220px, 42vw); + width: min(240px, 70vw); height: auto; } #play-quiz-scoreboard { @@ -2753,7 +2767,7 @@ - +
v —