fix(showcase): responsive card, full localization, in-game stat icons and clean PNG export #3

2026-11-01T14:56:44+07:00

GaCy commented

2026-11-01 14:56:44 +07:00

Summary

ปรับ Showcase Card ให้ยืดหยุ่นตามพื้นที่จริง, แปลครบทุกภาษา, ใช้ไอคอน stat จากเกม และแก้ปัญหา export PNG ตกกรอบ/ภาพ splash art ถูกบีบ

Branch: test-gay → commit 76986ee

Changes

Layout / Responsive

.showcase-card-layout เปลี่ยนเป็น width: 100%, max-width: 1200px, min-width: 0, overflow: visible
Grid ปรับตามความกว้างอัตโนมัติ: 3 คอลัมน์ → 2 → 1 (1100px / 720px) ไม่เกิด horizontal scrollbar
เพิ่ม .showcase-export-mode ที่ pin ขนาดโปสเตอร์คงที่ (1200px, padding 1.5rem, gap 1.25rem, 3 คอลัมน์) เพื่อให้ export ได้องค์ประกอบเดิมทุกขนาดหน้าต่าง

Localization

เพิ่มคีย์ th/en ใน js/i18n.js สำหรับ modal ทุกแท็บ, showcase, console, command assistant, copy-text, camera
locale อื่น ๆ fallback เป็นภาษาอังกฤษผ่าน t() → ไม่มีข้อความไทยหลงเหลือเมื่อสลับภาษา (ตรวจ fr/ko/de/ru/ja)
ชื่อตัวละคร / light cone / relic ใช้ลำดับ fallback names[lang] || names.en || names.th
TRAILBLAZER_DEFAULT_NAMES รองรับ {NICKNAME} ตามภาษา
command assistant มี setCommandLanguage() / ข้อความ EN สำหรับ metadata คำสั่ง
รวม import i18n ให้เป็นเวอร์ชันเดียวกัน (./i18n.js?v=2.16) กัน duplicate module instance

Showcase icons

เปลี่ยน emoji (❤️⚔️🛡️…) เป็นไอคอน property จากเกมชุดเดียวกับแท็บ Overview
(IconMaxHP, IconAttack, IconDefence, IconSpeed, IconCriticalChance, IconCriticalDamage, IconBreakUp, IconStatusResistance, IconEnergyRecovery, IconStatusProbability, IconHealRatio, Icon*AddedRatio โดย Lightning → IconThunderAddedRatio)
ครอบคลุมทั้งแถว LC (HP/ATK/DEF) และ 12 แถว combat stats

Export PNG

capture จาก clone ขนาดคงที่ 1200px แทน element บนหน้าจอ
prepareExportSplashCover() pre-render splash art แบบ cover-crop ลง canvas 2× (html2canvas 1.4.1 ไม่รองรับ object-fit → ภาพเดิมถูกยืดให้เต็มกรอบ)
backgroundColor: null + holder โปร่งใส → มุมโค้งของการ์ดไม่มีลิ่มสีเข้ม (alpha = 0)
วัดขนาดซ้ำใน iframe ของ html2canvas (onclone) แล้ว re-render ถ้าขนาดต่างเกิน 1px → การ์ดไม่ถูกตัดขอบล่าง
pin font-size ของ html/body ใน clone และรอ document.fonts.ready
ชื่อไฟล์รักษาตัวอักษรทุกภาษา (ไทย/CJK) ด้วย \p{L}\p{N}

Testing

node --check js/app.js / js/i18n.js ผ่าน
node --test tests/damage-order.test.cjs tests/item-catalog.test.cjs → 7/7 pass
Responsive: 1920 / 1366 / 1024 / 768 / 480 → 3/2/1 คอลัมน์ ไม่มี scrollbar แนวนอน
Language sweep (fr/ko/de/ru/ja): ไม่พบข้อความไทยหลงเหลือ
Export (Fire Trailblazer, 2400×1144): เห็นครบ 3 คอลัมน์ + การ์ด relic ทั้ง 6 ใบ + E1–E6, splash ไม่ถูกบีบ, มุมทั้ง 4 โปร่งใส (alpha 0)
Stress test: บังคับให้ layout ใน iframe สูงกว่าหน้าจอ → canvas ขยายเป็น 2400×1666 แทนการตัดขอบ

Notes

ไม่แตะ README.md และ docs/ (การแก้เดิมที่ไม่เกี่ยวกับ PR นี้)
ต้อง bump ?v= ของ app.js (3.14) และ styles.css (2.21) เพื่อกัน cache

## Summary ปรับ Showcase Card ให้ยืดหยุ่นตามพื้นที่จริง, แปลครบทุกภาษา, ใช้ไอคอน stat จากเกม และแก้ปัญหา export PNG ตกกรอบ/ภาพ splash art ถูกบีบ Branch: `test-gay` → commit `76986ee` ## Changes ### Layout / Responsive - `.showcase-card-layout` เปลี่ยนเป็น `width: 100%`, `max-width: 1200px`, `min-width: 0`, `overflow: visible` - Grid ปรับตามความกว้างอัตโนมัติ: 3 คอลัมน์ → 2 → 1 (1100px / 720px) ไม่เกิด horizontal scrollbar - เพิ่ม `.showcase-export-mode` ที่ pin ขนาดโปสเตอร์คงที่ (1200px, padding `1.5rem`, gap `1.25rem`, 3 คอลัมน์) เพื่อให้ export ได้องค์ประกอบเดิมทุกขนาดหน้าต่าง ### Localization - เพิ่มคีย์ th/en ใน `js/i18n.js` สำหรับ modal ทุกแท็บ, showcase, console, command assistant, copy-text, camera - locale อื่น ๆ fallback เป็นภาษาอังกฤษผ่าน `t()` → ไม่มีข้อความไทยหลงเหลือเมื่อสลับภาษา (ตรวจ fr/ko/de/ru/ja) - ชื่อตัวละคร / light cone / relic ใช้ลำดับ fallback `names[lang] || names.en || names.th` - `TRAILBLAZER_DEFAULT_NAMES` รองรับ `{NICKNAME}` ตามภาษา - command assistant มี `setCommandLanguage()` / ข้อความ EN สำหรับ metadata คำสั่ง - รวม import i18n ให้เป็นเวอร์ชันเดียวกัน (`./i18n.js?v=2.16`) กัน duplicate module instance ### Showcase icons - เปลี่ยน emoji (❤️⚔️🛡️…) เป็นไอคอน property จากเกมชุดเดียวกับแท็บ Overview (`IconMaxHP`, `IconAttack`, `IconDefence`, `IconSpeed`, `IconCriticalChance`, `IconCriticalDamage`, `IconBreakUp`, `IconStatusResistance`, `IconEnergyRecovery`, `IconStatusProbability`, `IconHealRatio`, `Icon*AddedRatio` โดย Lightning → `IconThunderAddedRatio`) - ครอบคลุมทั้งแถว LC (HP/ATK/DEF) และ 12 แถว combat stats ### Export PNG - capture จาก clone ขนาดคงที่ 1200px แทน element บนหน้าจอ - `prepareExportSplashCover()` pre-render splash art แบบ cover-crop ลง canvas 2× (html2canvas 1.4.1 ไม่รองรับ `object-fit` → ภาพเดิมถูกยืดให้เต็มกรอบ) - `backgroundColor: null` + holder โปร่งใส → มุมโค้งของการ์ดไม่มีลิ่มสีเข้ม (alpha = 0) - วัดขนาดซ้ำใน iframe ของ html2canvas (`onclone`) แล้ว re-render ถ้าขนาดต่างเกิน 1px → การ์ดไม่ถูกตัดขอบล่าง - pin font-size ของ `html/body` ใน clone และรอ `document.fonts.ready` - ชื่อไฟล์รักษาตัวอักษรทุกภาษา (ไทย/CJK) ด้วย `\p{L}\p{N}` ## Testing - `node --check js/app.js` / `js/i18n.js` ผ่าน - `node --test tests/damage-order.test.cjs tests/item-catalog.test.cjs` → **7/7 pass** - Responsive: 1920 / 1366 / 1024 / 768 / 480 → 3/2/1 คอลัมน์ ไม่มี scrollbar แนวนอน - Language sweep (fr/ko/de/ru/ja): ไม่พบข้อความไทยหลงเหลือ - Export (Fire Trailblazer, 2400×1144): เห็นครบ 3 คอลัมน์ + การ์ด relic ทั้ง 6 ใบ + E1–E6, splash ไม่ถูกบีบ, มุมทั้ง 4 โปร่งใส (alpha 0) - Stress test: บังคับให้ layout ใน iframe สูงกว่าหน้าจอ → canvas ขยายเป็น 2400×1666 แทนการตัดขอบ ## Notes - ไม่แตะ `README.md` และ `docs/` (การแก้เดิมที่ไม่เกี่ยวกับ PR นี้) - ต้อง bump `?v=` ของ `app.js` (3.14) และ `styles.css` (2.21) เพื่อกัน cache

GaCy added 2 commits 2026-11-01 14:56:44 +07:00

fix(avatars): isolate King Pom-Pom to CW metadata to prevent showing in player roster d9b7a4ce1b

fix(showcase): responsive card, full localization, in-game stat icons and clean PNG export 76986eed4a

Layout: card now fills its container (3/2/1 columns) with no horizontal scrollbar.

i18n: every modal/showcase/console string follows the selected language, named fallbacks for th/en plus English fallback for other locales, localized character names and light-cone passive text.

Showcase stats use the official in-game property icons (same set as the overview tab) instead of emoji, including the element DMG icon.

Export: fixed 1200px clone with poster metrics, cover-cropped splash art (html2canvas ignores object-fit), transparent background so the rounded corners have no dark wedges, and a two-pass measurement inside the capture iframe so the PNG is never cropped.

GaCy merged commit 3da3ea0dcd into Main

2026-11-01 14:57:18 +07:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: GaCySR/Gacy-Srtool#3