From 1ea368025ca2ae48d9df3623e23e3b56b23af988 Mon Sep 17 00:00:00 2001 From: giteaadmin Date: Fri, 12 Jun 2026 18:54:59 +0000 Subject: [PATCH] update minigame 1.2 --- www/html/Game/public/css/game-hud.css | 938 +++ www/html/Game/public/css/howto.css | 81 + .../Game/public/img/mg-hud/score-avartar.png | Bin 0 -> 2810 bytes www/html/Game/public/img/mg-hud/score-bar.png | Bin 0 -> 8294 bytes www/html/Game/public/play.html | 188 +- www/html/Game/public/play.html.bak-css | 5158 ++++++++++++++++ .../play.html.bak-gch-howto-size-fix-184730 | 5239 +++++++++++++++++ .../Game/public/play.html.bak-qcfix-183405 | 5158 ++++++++++++++++ 8 files changed, 16759 insertions(+), 3 deletions(-) create mode 100644 www/html/Game/public/css/game-hud.css create mode 100644 www/html/Game/public/css/howto.css create mode 100644 www/html/Game/public/img/mg-hud/score-avartar.png create mode 100644 www/html/Game/public/img/mg-hud/score-bar.png create mode 100644 www/html/Game/public/play.html.bak-css create mode 100644 www/html/Game/public/play.html.bak-gch-howto-size-fix-184730 create mode 100644 www/html/Game/public/play.html.bak-qcfix-183405 diff --git a/www/html/Game/public/css/game-hud.css b/www/html/Game/public/css/game-hud.css new file mode 100644 index 0000000..5f81488 --- /dev/null +++ b/www/html/Game/public/css/game-hud.css @@ -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 (หรือรูปใน ) */ +.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); +} diff --git a/www/html/Game/public/css/howto.css b/www/html/Game/public/css/howto.css new file mode 100644 index 0000000..30aa574 --- /dev/null +++ b/www/html/Game/public/css/howto.css @@ -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)); +} diff --git a/www/html/Game/public/img/mg-hud/score-avartar.png b/www/html/Game/public/img/mg-hud/score-avartar.png new file mode 100644 index 0000000000000000000000000000000000000000..a4ffad9c32fa1802637f7106df812fb6e6fad6ba GIT binary patch literal 2810 zcmVs&B?ke zw5?#0MzTit4O-Uup-lU;4bUu@0EH)xwC7+V00T4!XA%tOATZM&0*OgGE|4|J9Gnyk zPs7;cZj1KpLqZ^W>=Qtfa2hZZP&znvL2LFI3;`4dI6a=v;5aZdP`Uu6gX{J=sdg|N z70N7}ZBeNK^V$1!?Xkby`NGA6gAcl^W+|Nqzua$1_;UY^d#@Z^Ieg){HGMz1yq~Jb z&3r*)R5Mm3Z@#adxpn9HM=m||`Ile(#p>qIe@Vx${)4#O!mJf&En@)(FT@-nvHRqu z4Bu2%JqUR>BIOzxRbX?x`rhmG#K%6;uhwt+^RM1|`NLp!C-uBTB3Yom7NXW#rDJvhF94k@$NCcpEKc zrr-SFCtZJZ=Q9bEChf9T8gBgCt=k8x&_iuKmC+>A4i$i)H8dL*tWv5g5(@HpUt(W| zzoMyw>5MW6m7|R3gtc0sjymdjtm^3IA8B=PaA{(?k%#LfR7YvmomTTvC=)kn#~GSr z6v57A4q5#JoRxypV1QGQ;(kOOh75xw>Ia!o$gHm}&6!e@OdFhL@aQjs=gwfcyk&Zg z(JrrtD|j~$qgk>eAkzdU((d~)5N=s?wENOYuF)t)ry@N=FMLS%ozpaGMA01fQ!oiy z=iv9U_5b* zK3vq@MkPW~Z35qvPxPQ`swsm8p!dco=GTf1oZ`$RG1YBpxyFG0qLZ)A&_jt}+-IjW z+%^Q!%WI3*l4?o;4p(`EnU>&L2nMtS&B%2$f#S}2FlL@@V}lcA^f4U5w}x|W7^1k% z_g&JWs8o$fyyLaVBsmlpo!ZER0ZOa)&NiA&)tcd7faM%9k&~fqXgV!6CF_dXy=#vr zpv;4b;o5~`(2^L1DjaJ33k4suG@b0Zl4=D=fj%aM;-VEg-_|qMP_3S%RT>FJ51G5iAY~H3oeQY6&7<;9uxuQK@c^xwb%K$e9ttck<;F<~G<4 z%w0@NVC9S(Qelj|)^Lz*$FyKc5Q3^UCUxqqw&SKIl}iJw(HcmtqXjtRU6Yi;OlwT? zC9(P>ri6|W3!|%GSgUCE+LLUB>byhz_5{L#%gl_Zn6damgICSzyiBQ7&Y^MOQFp~P z<}eiD8H;Rnj=_mTO+N>_VJs_y#u};E%eZS=?qdW-jq8Xt^ARVIcfb~<$ZHSjve4!( zH3YkdK48W+lYtAWm?xxi+V^8JpQD1+Lci0*P~6OngBQh!BkT*UEZHt?HwBlkA{Xu8 zxwNGrb|mlwgYQA-td6L(4xLaz>I=+ zIddW#2nTW@o5f)2$fIy&FAY?{%mf5#cG|oJx(?!-3M9cX!&65yx6C0q3(6eUblMq= zj+N6C1VG4%y?Mhmsc6+HxiZnCfc5~LQJZ}5a=r)5SkB$Yn5veg0gkdcSMLbxoU~5! z{mMDOF>N6i#sz_(a~AKMO*)+di#Ox52LpWELNam2(YbO2mDzn}3JQa0+N7ekR11fS zCiOKN*nc2Dsf^@S&QoLJLoj%QsRaV2k{!|H(d-%*lK>%dCREF7K=962quE3wrv^hXDh5RwU}D=% zIh>gEeHK5Y7?m(e#kmbYF&|UIk67BeZG2tccRtge@kLgh(+s|5v!3%#Mgm)Hb~v6)W2`nF-rC;0 zqS)C9o^`k`0u?wcwyOhDw<_YbhMi_uL>hY54Gvux>y<^z0s|A=K-5xjymgf_&ON$8 ztX?ISgdV$1?W=H$X+@71iB?mK;h8rKf`q)2(=s-B4&b#?|*+9~;@o)iL#urGV(UqrR(IhR@t&Ny=PiypHPka>RB-k3|Np zTZZd9o8!FiQy=d)zg;T*>gP0O3XH^j=lJ-mpLqVpgTr^d(?-BXiMuLD$K@?19&MjT z;WpQp;03Px9y8ZW?t52qZAXgT3c|4Zh}I8ZqK`iPMY{0ji?_-Tx+H<)04@3<*Vk^} z{oLWBk9_y{KYfwz-aaz-t2dJx2>TkHHJs+5Sh^VwWw-}XqU8GFhv?lO{=mOzwR-v2 zhi`f6G(Y6hZZiCs%l-84?SFsmlds=CdK^2NyNOdk*g56%6D>NpxW3oDr`Ap z&USp!f5miyU$^XC+I90`+2fNr)!QRz%XVJ!bSD2t)maI%H;IV;4GbXiVyFDa{r~^~ M07*qoM6N<$g2H@Ro&W#< literal 0 HcmV?d00001 diff --git a/www/html/Game/public/img/mg-hud/score-bar.png b/www/html/Game/public/img/mg-hud/score-bar.png new file mode 100644 index 0000000000000000000000000000000000000000..4eca97d5436915304521888954d893e9f8ea674c GIT binary patch literal 8294 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 F{{z^2sM`Pl literal 0 HcmV?d00001 diff --git a/www/html/Game/public/play.html b/www/html/Game/public/play.html index df98d78..351b165 100644 --- a/www/html/Game/public/play.html +++ b/www/html/Game/public/play.html @@ -22,8 +22,8 @@ - - + + + diff --git a/www/html/Game/public/play.html.bak-css b/www/html/Game/public/play.html.bak-css new file mode 100644 index 0000000..df98d78 --- /dev/null +++ b/www/html/Game/public/play.html.bak-css @@ -0,0 +1,5158 @@ + + + + + + + เล่น — Game + + + + + + + + + + + + +
+
+ + +
+
+
+ + + +
+ + + + + + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
v —
+ + diff --git a/www/html/Game/public/play.html.bak-gch-howto-size-fix-184730 b/www/html/Game/public/play.html.bak-gch-howto-size-fix-184730 new file mode 100644 index 0000000..f5f690d --- /dev/null +++ b/www/html/Game/public/play.html.bak-gch-howto-size-fix-184730 @@ -0,0 +1,5239 @@ + + + + + + + เล่น — Game + + + + + + + + + + + + +
+
+ + +
+
+
+ + + +
+ + + + + + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
v —
+ + + diff --git a/www/html/Game/public/play.html.bak-qcfix-183405 b/www/html/Game/public/play.html.bak-qcfix-183405 new file mode 100644 index 0000000..11eaab0 --- /dev/null +++ b/www/html/Game/public/play.html.bak-qcfix-183405 @@ -0,0 +1,5158 @@ + + + + + + + เล่น — Game + + + + + + + + + + + + +
+
+ + +
+
+
+ + + +
+ + + + + + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
v —
+ +