update minigame 1.2
This commit is contained in:
@@ -0,0 +1,938 @@
|
||||
/* game HUD + summary — built from design (variant A + mg2 of B + summary) */
|
||||
/* =========================================================
|
||||
|
||||
game-hud.css – Shared HUD สำหรับทุกหน้า in-game
|
||||
|
||||
• Top-left : SCORE panel (score-bar.png + 5 players)
|
||||
|
||||
• Top-center: TIME counter
|
||||
|
||||
• Top-right : Host avatar frame + mic button
|
||||
|
||||
• Background: BG.png (1920x1080)
|
||||
|
||||
========================================================= */
|
||||
|
||||
|
||||
|
||||
.mg-stage {
|
||||
|
||||
background: #04050d;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ---------------- พื้นหลัง BG เต็มจอ ---------------- */
|
||||
|
||||
.mg-bg {
|
||||
|
||||
left: 0;
|
||||
|
||||
top: 0;
|
||||
|
||||
width: 1920px;
|
||||
|
||||
height: 1080px;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
}
|
||||
|
||||
.mg-bg img {
|
||||
|
||||
width: 100%;
|
||||
|
||||
height: 100%;
|
||||
|
||||
object-fit: cover;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* =========================================================
|
||||
|
||||
มุมซ้ายบน : SCORE Panel (score-bar.png + 5 players)
|
||||
|
||||
========================================================= */
|
||||
|
||||
.mg-score-panel {
|
||||
|
||||
left: 2px;
|
||||
|
||||
top: 16px;
|
||||
|
||||
width: 156px;
|
||||
|
||||
height: 433px;
|
||||
|
||||
padding: 0;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
background: url("/Game/img/mg-hud/score-bar.png") no-repeat left top / 156px 433px;
|
||||
|
||||
border: none;
|
||||
|
||||
border-radius: 0;
|
||||
|
||||
box-shadow: none;
|
||||
|
||||
z-index: 8;
|
||||
|
||||
}
|
||||
|
||||
.mg-score-title {
|
||||
|
||||
/* ข้อความ SCORE อยู่ใน score-bar.png แล้ว */
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 1px;
|
||||
|
||||
height: 1px;
|
||||
|
||||
padding: 0;
|
||||
|
||||
margin: -1px;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
clip: rect(0, 0, 0, 0);
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
border: 0;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mg-score-list {
|
||||
|
||||
position: absolute;
|
||||
|
||||
left: 16px;
|
||||
|
||||
top: 60px;
|
||||
|
||||
width: 136px;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
gap: 5px;
|
||||
|
||||
}
|
||||
|
||||
.mg-score-row {
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
gap: 10px;
|
||||
|
||||
height: 70px;
|
||||
|
||||
}
|
||||
|
||||
.mg-score-row .av {
|
||||
|
||||
position: relative;
|
||||
|
||||
width: 70px;
|
||||
|
||||
height: 70px;
|
||||
|
||||
flex: 0 0 70px;
|
||||
|
||||
border-radius: 0;
|
||||
|
||||
overflow: visible;
|
||||
|
||||
background: transparent;
|
||||
|
||||
}
|
||||
|
||||
.mg-score-row .av::after {
|
||||
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
|
||||
inset: 0;
|
||||
|
||||
background: url("/Game/img/mg-hud/score-avartar.png") no-repeat center / contain;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
z-index: 2;
|
||||
|
||||
}
|
||||
|
||||
.mg-score-row .av img {
|
||||
|
||||
position: absolute;
|
||||
|
||||
inset: 4px;
|
||||
|
||||
width: calc(100% - 8px);
|
||||
|
||||
height: calc(100% - 8px);
|
||||
|
||||
object-fit: cover;
|
||||
|
||||
border-radius: 6px;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
}
|
||||
|
||||
/* ไม่ใช้ placeholder สี — แสดงเฉพาะกรอบ score-avartar.png (หรือรูปใน <img>) */
|
||||
.mg-score-row .av .ph {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
.mg-score-row .meta {
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
gap: 1px;
|
||||
|
||||
line-height: 1.05;
|
||||
|
||||
flex: 1;
|
||||
|
||||
min-width: 0;
|
||||
|
||||
}
|
||||
|
||||
.mg-score-row .nm {
|
||||
|
||||
font-family: "NotoSansThai", sans-serif;
|
||||
|
||||
font-weight: 700;
|
||||
|
||||
font-size: 11px;
|
||||
|
||||
color: #e8f4ff;
|
||||
|
||||
letter-spacing: 0.2px;
|
||||
|
||||
text-transform: uppercase;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.mg-score-row .sc {
|
||||
|
||||
font-family: "NotoSansThai", sans-serif;
|
||||
|
||||
font-weight: 900;
|
||||
|
||||
font-size: 22px;
|
||||
|
||||
color: #ffffff;
|
||||
|
||||
line-height: 1;
|
||||
|
||||
text-shadow: 0 0 8px rgba(120, 220, 255, 0.6);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* =========================================================
|
||||
|
||||
ตรงกลางบน : TIME : XX
|
||||
|
||||
========================================================= */
|
||||
|
||||
.mg-time {
|
||||
|
||||
left: 50%;
|
||||
|
||||
top: 23px;
|
||||
|
||||
transform: translateX(-50%);
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
gap: 10px;
|
||||
|
||||
z-index: 8;
|
||||
|
||||
}
|
||||
|
||||
.mg-time-label {
|
||||
|
||||
width: 131px;
|
||||
|
||||
height: 71px;
|
||||
|
||||
flex: 0 0 131px;
|
||||
|
||||
}
|
||||
|
||||
.mg-time .num {
|
||||
|
||||
font-family: "NotoSansThai", sans-serif;
|
||||
|
||||
font-weight: 900;
|
||||
|
||||
font-size: 42px;
|
||||
|
||||
height: 71px;
|
||||
|
||||
line-height: 71px;
|
||||
|
||||
color: #e6f6ff;
|
||||
|
||||
letter-spacing: 1px;
|
||||
|
||||
font-variant-numeric: tabular-nums;
|
||||
|
||||
text-shadow:
|
||||
|
||||
0 0 10px rgba(120, 220, 255, 0.85),
|
||||
|
||||
0 0 22px rgba(80, 180, 240, 0.55);
|
||||
|
||||
}
|
||||
|
||||
.mg-time.is-warning .num {
|
||||
|
||||
color: #ff7a7a;
|
||||
|
||||
text-shadow:
|
||||
|
||||
0 0 12px rgba(255, 90, 90, 0.85),
|
||||
|
||||
0 0 24px rgba(255, 60, 60, 0.5);
|
||||
|
||||
}
|
||||
|
||||
.mg-time.is-warning {
|
||||
|
||||
animation: mg-pulse 0.9s ease-in-out infinite;
|
||||
|
||||
}
|
||||
|
||||
@keyframes mg-pulse {
|
||||
|
||||
0%, 100% { transform: translateX(-50%) scale(1); }
|
||||
|
||||
50% { transform: translateX(-50%) scale(1.08); }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* =========================================================
|
||||
|
||||
มุมขวาบน : Host avatar (Avartar.png) + mic
|
||||
|
||||
========================================================= */
|
||||
|
||||
.mg-host {
|
||||
|
||||
left: 1729px;
|
||||
|
||||
top: 21px;
|
||||
|
||||
width: 201px;
|
||||
|
||||
height: 201px;
|
||||
|
||||
z-index: 8;
|
||||
|
||||
}
|
||||
|
||||
.mg-host-frame {
|
||||
|
||||
position: absolute;
|
||||
|
||||
inset: 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
height: 100%;
|
||||
|
||||
z-index: 2;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
.mg-host-face {
|
||||
|
||||
position: absolute;
|
||||
|
||||
left: 49px;
|
||||
|
||||
top: 49px;
|
||||
|
||||
width: 104px;
|
||||
|
||||
height: 104px;
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
object-fit: cover;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
}
|
||||
|
||||
.mg-host-face:not([src]),
|
||||
|
||||
.mg-host-face[src=""] {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
.mg-host .host-ph {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mg-mic {
|
||||
|
||||
left: 1796px;
|
||||
|
||||
top: 205px;
|
||||
|
||||
width: 121px;
|
||||
|
||||
height: 121px;
|
||||
|
||||
z-index: 8;
|
||||
|
||||
}
|
||||
|
||||
.mg-mic img {
|
||||
|
||||
width: 100%;
|
||||
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===== variant B (M2/4/7) mg2-* additions ===== */
|
||||
/* ---------- SCORE bar แนวนอน (Mockup/02–07) ---------- */
|
||||
/* อ้างอิง Mockup/02: SCORE เริ่ม x≈50 · ผู้เล่น 5 คนห่าง center-to-center ≈155px */
|
||||
.mg2-score-bar{left: 50px;
|
||||
top: 30px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
z-index: 8;}
|
||||
.mg2-score-label{width: 144px;
|
||||
height: 71px;
|
||||
flex: 0 0 144px;
|
||||
margin: 0 1px 0 0;
|
||||
transform: translateY(11px);}
|
||||
.mg2-players{display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 85px;}
|
||||
.mg2-player{width: 70px;
|
||||
text-align: center;
|
||||
flex: 0 0 70px;}
|
||||
.mg2-player .nm{font-family: "NotoSansThai", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
color: #e8f4ff;
|
||||
letter-spacing: 0.2px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1;}
|
||||
.mg2-player .av{position: relative;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 0 auto 4px;}
|
||||
.mg2-player .av::after{content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url("/Game/img/mg-hud/score-avartar.png") no-repeat center / contain;
|
||||
pointer-events: none;
|
||||
z-index: 2;}
|
||||
.mg2-player .av img{position: absolute;
|
||||
inset: 4px;
|
||||
width: calc(100% - 8px);
|
||||
height: calc(100% - 8px);
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
z-index: 1;}
|
||||
.mg2-player .sc{font-family: "NotoSansThai", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 8px rgba(120, 220, 255, 0.6);}
|
||||
.mg2-player.is-zero .sc{color: #ff8a8a;
|
||||
text-shadow: 0 0 8px rgba(255, 90, 90, 0.55);}
|
||||
/* ---------- JUMP button (มุมขวาล่าง) ---------- */
|
||||
.mg2-jump{left: 1648px;
|
||||
top: 818px;
|
||||
width: 231px;
|
||||
height: 231px;
|
||||
z-index: 8;}
|
||||
.mg2-jump img{width: 100%;
|
||||
height: 100%;
|
||||
filter: drop-shadow(0 0 18px rgba(255, 110, 220, 0.45));}
|
||||
.mg2-jump.btn:hover{transform: translateY(-3px);}
|
||||
.mg2-jump.btn:hover img{filter: drop-shadow(0 0 28px rgba(255, 110, 220, 0.75));}
|
||||
.mg2-jump.btn:active{transform: translateY(1px);}
|
||||
|
||||
/* ===== summary (ผลสรุป) ===== */
|
||||
/* =========================================================
|
||||
summary.css – หน้า 06 สรุปผลภารกิจ
|
||||
อ้างอิง Mockup/06.png + ขนาด asset จริง (1920×1080)
|
||||
popup-result.png 1451×851 @ 234,114
|
||||
popup-result-Line1 938×3
|
||||
popup-result-Line2 4×270
|
||||
player-frame.png 137×137
|
||||
mission-complete-select 271×90
|
||||
btn-done.png 351×141
|
||||
card-5 (Bail Coin) 287×383
|
||||
========================================================= */
|
||||
|
||||
.sm-overlay {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: rgba(4, 6, 18, 0.45);
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
/* ---------- popup-result.png ---------- */
|
||||
.sm-popup {
|
||||
left: 234px;
|
||||
top: 114px;
|
||||
width: 1451px;
|
||||
height: 851px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.sm-popup img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ---------- content layer (พิกัดเดียวกับ popup) ---------- */
|
||||
.sm-content {
|
||||
left: 234px;
|
||||
top: 114px;
|
||||
width: 1451px;
|
||||
height: 851px;
|
||||
z-index: 11;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
แถวอันดับ 5 คน
|
||||
mockup: 5 ช่อง × 137px + gap 30px กึ่งกลาง (ไม่ space-between)
|
||||
รวมความกว้าง = 5×137 + 4×30 = 805px
|
||||
========================================================= */
|
||||
.sm-ranks {
|
||||
position: absolute;
|
||||
left: 323px;
|
||||
top: 168px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 30px;
|
||||
width: 805px;
|
||||
}
|
||||
|
||||
.sm-rank {
|
||||
flex: 0 0 137px;
|
||||
width: 137px;
|
||||
min-width: 137px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sm-rank .pos {
|
||||
display: block;
|
||||
width: 41px;
|
||||
height: 21px;
|
||||
margin: 0 auto 6px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* กรอบ avatar = player-frame.png เท่านั้น (สีตัวละครอยู่ใน portrait) */
|
||||
.sm-rank .av {
|
||||
position: relative;
|
||||
width: 137px;
|
||||
height: 137px;
|
||||
margin: 0 auto 8px;
|
||||
background: transparent;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sm-rank .portrait {
|
||||
position: absolute;
|
||||
inset: 10px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ตัวละคร placeholder — จัดกึ่งกลางในกรอบ 117×117 */
|
||||
.sm-rank .chibi {
|
||||
position: relative;
|
||||
width: 86px;
|
||||
height: 92px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sm-rank .ch-body {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: 86px;
|
||||
height: 52px;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
background: var(--body, #6a6f96);
|
||||
box-shadow: inset 0 6px 8px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.sm-rank .ch-head {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 34px;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
background: var(--skin, #f5d6b3);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sm-rank .ch-hair {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 52px;
|
||||
width: 62px;
|
||||
height: 36px;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50% 50% 16px 16px / 80% 80% 28% 28%;
|
||||
background: var(--hair, #2a2a2a);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* ทุกอันดับใช้ player-frame.png ตรง asset — ไม่ hue-rotate */
|
||||
.sm-rank .av .frame {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* ผู้เสียสละ — จางลง + stamp */
|
||||
.sm-rank.is-out .av,
|
||||
.sm-rank.is-out .portrait,
|
||||
.sm-rank.is-out .chibi,
|
||||
.sm-rank.is-out .ch-body,
|
||||
.sm-rank.is-out .ch-head,
|
||||
.sm-rank.is-out .ch-hair,
|
||||
.sm-rank.is-out .av .frame {
|
||||
filter: opacity(0.5);
|
||||
}
|
||||
|
||||
.sm-rank .nm {
|
||||
font-family: "NotoSansThai", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 17px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0.6px;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.sm-rank .sc {
|
||||
font-family: "NotoSansThai", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 30px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 10px rgba(120, 220, 255, 0.4);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sm-rank .sc .bonus {
|
||||
font-size: 18px;
|
||||
color: #ffd047;
|
||||
margin-left: 2px;
|
||||
text-shadow: 0 0 8px rgba(255, 200, 80, 0.45);
|
||||
}
|
||||
|
||||
.sm-rank .av .stamp {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-8deg);
|
||||
width: 114px;
|
||||
height: auto;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
คะแนนรวม
|
||||
========================================================= */
|
||||
.sm-total {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
right: 0;
|
||||
top: 398px;
|
||||
z-index: 4;
|
||||
text-align: center;
|
||||
font-family: "NotoSansThai", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
color: #ffd047;
|
||||
text-shadow:
|
||||
0 0 10px rgba(255, 200, 80, 0.45),
|
||||
0 2px 4px rgba(0, 0, 0, 0.6);
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.sm-total .num {
|
||||
font-weight: 900;
|
||||
font-size: 40px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 14px rgba(120, 220, 255, 0.55);
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
/* เส้นแนวนอน บน + ล่าง "คะแนนรวม" (popup-result-Line1.png 938×3) */
|
||||
.sm-line-1 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 938px;
|
||||
height: 3px;
|
||||
display: block;
|
||||
object-fit: fill;
|
||||
z-index: 4;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sm-line-above {
|
||||
top: 394px;
|
||||
}
|
||||
|
||||
.sm-line-below {
|
||||
top: 452px;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
โซนล่าง — ระดับความสำเร็จ | โบนัสพิเศษ (Mockup/06)
|
||||
grid 3 คอลัมน์: 1fr | เส้น 4px | 1fr ภายใน padding 72px
|
||||
========================================================= */
|
||||
.sm-bottom {
|
||||
position: absolute;
|
||||
left: 72px;
|
||||
right: 72px;
|
||||
top: 460px;
|
||||
height: 270px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4px 1fr;
|
||||
align-items: start;
|
||||
column-gap: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sm-bottom > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.sm-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
text-align: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sm-col-grade {
|
||||
margin-left: 173px;
|
||||
margin-right: 14px;
|
||||
margin-top: 41px;
|
||||
height: 174px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sm-col .head {
|
||||
font-family: "NotoSansThai", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
color: #ffffff;
|
||||
margin: 0 0 12px;
|
||||
padding: 0;
|
||||
letter-spacing: 0.3px;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.sm-col-grade .head {
|
||||
height: 40px;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.sm-grade {
|
||||
margin: 0;
|
||||
padding: 7px 6px;
|
||||
font-family: "NotoSansThai", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 96px;
|
||||
color: #ffffff;
|
||||
text-shadow:
|
||||
0 0 16px rgba(120, 220, 255, 0.65),
|
||||
0 0 32px rgba(80, 180, 240, 0.4);
|
||||
line-height: 0.95;
|
||||
}
|
||||
|
||||
/* เส้นแบ่งแนวตั้ง (popup-result-Line2.png 4×270) */
|
||||
.sm-vrule {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
height: 270px;
|
||||
}
|
||||
|
||||
.sm-line-2 {
|
||||
width: 4px;
|
||||
height: 270px;
|
||||
display: block;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
/* โบนัส: ซ้าย = หัวข้อ + ภารกิจสำเร็จ | ขวา = Bail Coin สูงเท่ากลุ่มซ้าย */
|
||||
.sm-col-bonus {
|
||||
align-items: center;
|
||||
width: 486px;
|
||||
}
|
||||
|
||||
.sm-bonus {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
gap: 14px;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.sm-bonus-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
width: 271px;
|
||||
height: 272px;
|
||||
flex-shrink: 0;
|
||||
font-size: 15px;
|
||||
padding-top: 42px;
|
||||
padding-bottom: 42px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sm-bonus-left .head {
|
||||
width: 100%;
|
||||
height: 53px;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
font-size: 40px;
|
||||
line-height: 1.2;
|
||||
padding-left: 23px;
|
||||
padding-right: 23px;
|
||||
}
|
||||
|
||||
.sm-bonus .complete {
|
||||
display: block;
|
||||
width: 271px;
|
||||
height: 90px;
|
||||
flex-shrink: 0;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 0 10px rgba(91, 255, 141, 0.45));
|
||||
}
|
||||
|
||||
.sm-bonus-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
height: 258px;
|
||||
}
|
||||
|
||||
.sm-bonus .bail-card {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 258px;
|
||||
max-width: 152px;
|
||||
flex-shrink: 0;
|
||||
object-fit: contain;
|
||||
object-position: center center;
|
||||
filter: drop-shadow(0 0 14px rgba(120, 220, 255, 0.55));
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
ปุ่ม "รับหลักฐาน" – กึ่งกลางจอ ทับขอบล่าง popup
|
||||
========================================================= */
|
||||
.sm-btn-done {
|
||||
left: 784px;
|
||||
top: 818px;
|
||||
width: 351px;
|
||||
height: 141px;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
.sm-btn-done img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 0 14px rgba(120, 220, 255, 0.45));
|
||||
}
|
||||
|
||||
.sm-btn-done.btn:hover {
|
||||
transform: none;
|
||||
filter: brightness(1.12) drop-shadow(0 0 18px rgba(120, 220, 255, 0.6));
|
||||
}
|
||||
|
||||
.sm-btn-done.btn:active {
|
||||
transform: none;
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
/* game howto — built from design (shared M1, ครอบคลุม M1/3/4/5/6/7) */
|
||||
/* =========================================================
|
||||
howto.css – หน้า 01 + 01-2 (HOW TO PLAY popup)
|
||||
ใช้ popup-Howto.png เป็น content หลัก
|
||||
+ ปุ่ม READY/START และ status text ใต้ popup
|
||||
========================================================= */
|
||||
|
||||
/* ---------- dark overlay ทับ BG ---------- */
|
||||
.mg-overlay {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: rgba(4, 6, 18, 0.45);
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
/* ---------- popup HOW TO PLAY ---------- */
|
||||
.howto-popup {
|
||||
/* popup-Howto.png native 1451x851 (aspect 1.706)
|
||||
ใน mockup กินพื้นที่เกือบทั้งจอ → ขยายให้ใหญ่ขึ้น แต่ยังคง aspect ratio */
|
||||
left: 50%;
|
||||
top: 50px;
|
||||
transform: translateX(-50%);
|
||||
width: 1500px;
|
||||
height: 880px;
|
||||
z-index: 10;
|
||||
}
|
||||
.howto-popup img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ---------- ปุ่ม READY/START + status text ---------- */
|
||||
.howto-status {
|
||||
/* "Ready Status : 4/5" อยู่เหนือปุ่ม READY (ตาม mockup 01.png) */
|
||||
left: 50%;
|
||||
top: 808px;
|
||||
transform: translateX(-50%);
|
||||
font-family: "NotoSansThai", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
color: #f067e8;
|
||||
text-shadow: 0 0 10px rgba(240, 103, 232, 0.6),
|
||||
0 0 22px rgba(237, 86, 224, 0.35);
|
||||
letter-spacing: 0.5px;
|
||||
text-align: center;
|
||||
z-index: 13;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
.howto-status #hwRatio {
|
||||
color: #f067e8;
|
||||
}
|
||||
|
||||
.howto-btn {
|
||||
/* btn-ready.png / btn-start.png native 351x141 (aspect 2.49)
|
||||
ใน mockup ปุ่มอยู่ตรงเส้นกรอบล่าง popup (กึ่งกลาง) */
|
||||
left: 957px;
|
||||
top: 885px;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 120px;
|
||||
width: auto;
|
||||
z-index: 12;
|
||||
}
|
||||
.howto-btn img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
filter: drop-shadow(0 0 18px rgba(120, 220, 255, 0.65));
|
||||
}
|
||||
|
||||
/* ---------- hover effect บนปุ่ม ---------- */
|
||||
.howto-btn.btn:hover {
|
||||
transform: translate(-50%, calc(-50% - 3px));
|
||||
}
|
||||
.howto-btn.btn:hover img {
|
||||
filter: drop-shadow(0 0 28px rgba(120, 220, 255, 0.95));
|
||||
}
|
||||
.howto-btn.btn:active {
|
||||
transform: translate(-50%, calc(-50% + 2px));
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
@@ -22,8 +22,8 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css?v=20260506-stack-tower-cover">
|
||||
<!-- Minigame-2 HOW TO PLAY mock (01-howto) — layer positions / popup / status / btn -->
|
||||
<link rel="stylesheet" href="/onlydesign/Cut%20[Justice%20Game]_full1.1/Minigame-2/assets/css/game-hud.css">
|
||||
<link rel="stylesheet" href="/onlydesign/Cut%20[Justice%20Game]_full1.1/Minigame-2/assets/css/howto.css">
|
||||
<link rel="stylesheet" href="/onlydesign/Cut%20[Justice%20Game]_full1.1/Minigame-2/assets/css/game-hud.css?v=0.006130015">
|
||||
<link rel="stylesheet" href="/onlydesign/Cut%20[Justice%20Game]_full1.1/Minigame-2/assets/css/howto.css?v=0.006130015">
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
@@ -2311,7 +2311,7 @@
|
||||
#play-cyber-hud.play-cyber-hud--stack-tower-canvas-hud .play-cyber-self {
|
||||
display: none !important;
|
||||
}
|
||||
/* ===== MG3 Stack Tower live HUD — DOM overlay: 1920×1080 design plane scale+center ตาม stage (coords ตรง design game.css/game-hud.css) ===== */
|
||||
/* ===== MG3 Stack Tower live HUD — DOM overlay: 1920×1080 design plane scale+center ตาม stage (coords ตรง design game.css/game-hud.css?v=0.006130015) ===== */
|
||||
.mg3-tower-hud {
|
||||
position: fixed;
|
||||
width: 1920px; height: 1080px;
|
||||
@@ -5154,5 +5154,187 @@
|
||||
<script src="js/version.js?v=0.0306"></script>
|
||||
<script src="js/play.js?v=0.00610200052"></script>
|
||||
<div class="version-tag">v —</div>
|
||||
<style id="qc-howto-mg2-fix">
|
||||
/* HOW TO PLAY ของ quiz_carry (Minigame-4) -> ให้เหมือน Minigame-2 (gch-mg2-mock)
|
||||
popup ใหญ่ top-anchored, backdrop จาง (โชว์ฉากหลัง), Ready Status สีชมพูบนกรอบ,
|
||||
ปุ่ม READY คร่อมกรอบล่าง. พิกัดอ้างอิง mg2 บนเวที 1920x1080 -> % ของกล่อง 16:9 */
|
||||
#quiz-carry-pregame-overlay {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
#quiz-carry-pregame-overlay .quiz-carry-pregame-backdrop {
|
||||
background: rgba(4, 6, 18, 0.45);
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
#quiz-carry-pregame-overlay .quiz-carry-pregame-card {
|
||||
position: relative;
|
||||
width: min(100vw, 177.78vh);
|
||||
height: auto;
|
||||
aspect-ratio: 1920 / 1080;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
overflow: visible;
|
||||
display: block;
|
||||
}
|
||||
#quiz-carry-pregame-overlay .quiz-carry-pregame-art {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 4.63%;
|
||||
transform: translateX(-50%);
|
||||
width: 78.125%;
|
||||
height: 81.48%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#quiz-carry-pregame-overlay .quiz-carry-pregame-howto-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
object-fit: fill;
|
||||
}
|
||||
#quiz-carry-pregame-overlay .quiz-carry-pregame-footer {
|
||||
display: contents;
|
||||
}
|
||||
#quiz-carry-pregame-overlay .quiz-carry-pregame-status {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 74.8%;
|
||||
transform: translateX(-50%);
|
||||
margin: 0;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
font-family: NotoSansThai, "Kanit", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: min(2.04vh, 1.146vw);
|
||||
color: #f067e8;
|
||||
text-shadow: 0 0 10px rgba(240, 103, 232, 0.6), 0 0 22px rgba(237, 86, 224, 0.35);
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
#quiz-carry-pregame-overlay .quiz-carry-pregame-actions {
|
||||
position: absolute;
|
||||
left: 49.84%;
|
||||
top: 81.94%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 4;
|
||||
gap: 0;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
#quiz-carry-pregame-overlay .quiz-carry-pregame-primary-btn img {
|
||||
height: min(11.1vh, 6.25vw);
|
||||
width: auto;
|
||||
filter: drop-shadow(0 0 18px rgba(120, 220, 255, 0.65));
|
||||
}
|
||||
</style>
|
||||
<style id="gch-howto-size-fix">
|
||||
/* HOW TO PLAY: เกมที่ใช้ #gauntlet-crown-howto-overlay แต่ไม่ได้ติด class popup ใหญ่
|
||||
(mg3 stack, mg5 jump, mg6 space_shooter, mg7 mega_virus) -> ตกไปใช้ img.gch-bg.gch-legacy-only
|
||||
ขนาดเล็ก. บังคับให้ size เท่า mg1/mg2 (popup 1500x880 @ 50px) ด้วยกล่อง 16:9 fit viewport.
|
||||
scope :not(.gch-quiz-tf-mock):not(.gch-mg2-mock) จึงไม่กระทบ mg1/mg2 */
|
||||
#gauntlet-crown-howto-overlay:not(.gch-quiz-tf-mock):not(.gch-mg2-mock):not(.is-hidden) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
#gauntlet-crown-howto-overlay:not(.gch-quiz-tf-mock):not(.gch-mg2-mock) .gch-shell {
|
||||
position: relative;
|
||||
width: min(100vw, 177.78vh);
|
||||
height: auto;
|
||||
aspect-ratio: 1920 / 1080;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
transform: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
#gauntlet-crown-howto-overlay:not(.gch-quiz-tf-mock):not(.gch-mg2-mock) .gch-bg.gch-legacy-only {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 4.63%;
|
||||
transform: translateX(-50%);
|
||||
width: 78.125%;
|
||||
height: 81.48%;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
object-fit: fill;
|
||||
filter: none;
|
||||
}
|
||||
#gauntlet-crown-howto-overlay:not(.gch-quiz-tf-mock):not(.gch-mg2-mock) .gch-inner.gch-inner--art {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: none;
|
||||
padding: 0;
|
||||
}
|
||||
#gauntlet-crown-howto-overlay:not(.gch-quiz-tf-mock):not(.gch-mg2-mock) .gch-inner--art .gch-art-footer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: none;
|
||||
display: block;
|
||||
gap: 0;
|
||||
}
|
||||
#gauntlet-crown-howto-overlay:not(.gch-quiz-tf-mock):not(.gch-mg2-mock) .gch-inner--art .gch-status {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 74.8%;
|
||||
transform: none;
|
||||
margin: 0 auto;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
font-family: 'NotoSansThai', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: min(2.04vh, 1.146vw);
|
||||
letter-spacing: 0.5px;
|
||||
color: #f067e8;
|
||||
text-shadow: 0 0 10px rgba(240, 103, 232, 0.6), 0 0 22px rgba(237, 86, 224, 0.35);
|
||||
}
|
||||
#gauntlet-crown-howto-overlay:not(.gch-quiz-tf-mock):not(.gch-mg2-mock) .gch-inner--art .btn-gch-ready {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 76.4%;
|
||||
transform: none;
|
||||
width: 15.57%;
|
||||
height: 11.11%;
|
||||
margin: 0 auto;
|
||||
background-image: url('/Game/img/QUESTION/btn-ready.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
filter: drop-shadow(0 0 18px rgba(120, 220, 255, 0.65));
|
||||
font-size: 0;
|
||||
color: transparent;
|
||||
border: none;
|
||||
}
|
||||
#gauntlet-crown-howto-overlay:not(.gch-quiz-tf-mock):not(.gch-mg2-mock) .gch-inner--art .btn-gch-ready.is-start-phase {
|
||||
background-image: url('/Game/img/QUESTION/btn-start.png');
|
||||
}
|
||||
#gauntlet-crown-howto-overlay:not(.gch-quiz-tf-mock):not(.gch-mg2-mock) .gch-inner--art .btn-gch-ready:hover {
|
||||
transform: translateY(-3px);
|
||||
filter: drop-shadow(0 0 28px rgba(120, 220, 255, 0.95));
|
||||
}
|
||||
#gauntlet-crown-howto-overlay:not(.gch-quiz-tf-mock):not(.gch-mg2-mock) .gch-inner--art .btn-gch-ready:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user