GaCySR/Gacy-Srtool
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(i18n): provide comprehensive 13-language translations for synergy analysis, gm console, and server modes

Browse Source
This commit is contained in:
CAtlas0784 committed 2026-10-17 11:22:50 +07:00
1 parent 707071c502
commit ffaa0100e7
3 files changed
+1402 -86
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+23 -23
View File
@@ -45,7 +45,7 @@
🔄 รีเฟรช 🔄 รีเฟรช
</button> </button>
<button class="btn btn-secondary btn-sm" id="btn-header-gachabase-sync" title="ซิงค์และอัปเดตข้อมูลเกม/รูปภาพจาก Gachabase เมื่อเกมอัปเดต" style="border-color: rgba(245, 158, 11, 0.4); color: #fbbf24;"> <button class="btn btn-secondary btn-sm" id="btn-header-gachabase-sync" title="ซิงค์และอัปเดตข้อมูลเกม/รูปภาพจาก Gachabase เมื่อเกมอัปเดต" style="border-color: rgba(245, 158, 11, 0.4); color: #fbbf24;" data-i18n="btnGachabaseSync">
🌐 ซิงค์ Gachabase 🌐 ซิงค์ Gachabase
</button> </button>
</div> </div>
@@ -144,15 +144,15 @@
<div class="card-title" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;"> <div class="card-title" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
<span style="display: flex; align-items: center; gap: 0.5rem;"> <span style="display: flex; align-items: center; gap: 0.5rem;">
<span>⚔️</span> <span>⚔️</span>
<span>วิเคราะห์ Synergy ทีม & จุดอ่อน</span> <span data-i18n="synergyTitle">วิเคราะห์ Synergy ทีม & จุดอ่อน</span>
</span> </span>
<span class="badge-super-tag" id="badge-synergy-coverage" style="background: rgba(56, 189, 248, 0.15); color: var(--accent-cyan); font-weight: 800;">ครอบคลุม 0/7 ธาตุ</span> <span class="badge-super-tag" id="badge-synergy-coverage" style="background: rgba(56, 189, 248, 0.15); color: var(--accent-cyan); font-weight: 800;">ครอบคลุม 0/7 ธาตุ</span>
</div> </div>
<p class="card-subtitle" style="margin-bottom: 0.85rem;">วิเคราะห์การครอบคลุม Weakness Break, ความสมดุลของบทบาท และความพร้อมของทีม</p> <p class="card-subtitle" style="margin-bottom: 0.85rem;" data-i18n="synergySubtitle">วิเคราะห์การครอบคลุม Weakness Break, ความสมดุลของบทบาท และความพร้อมของทีม</p>
<!-- A. Weakness Break Coverage 7 Elements --> <!-- A. Weakness Break Coverage 7 Elements -->
<div style="margin-bottom: 1rem;"> <div style="margin-bottom: 1rem;">
<div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;"> <div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;" data-i18n="synergyBreakCoverage">
🎯 การทำลายจุดอ่อน (Weakness Break Coverage) 🎯 การทำลายจุดอ่อน (Weakness Break Coverage)
</div> </div>
<div class="synergy-elements-grid" id="synergy-elements-container"> <div class="synergy-elements-grid" id="synergy-elements-container">
@@ -162,7 +162,7 @@
<!-- B. Team Role Balance --> <!-- B. Team Role Balance -->
<div style="margin-bottom: 1rem;"> <div style="margin-bottom: 1rem;">
<div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;"> <div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;" data-i18n="synergyRoleBalance">
🛡️ การกระจายบทบาทในทีม (Team Composition & Roles) 🛡️ การกระจายบทบาทในทีม (Team Composition & Roles)
</div> </div>
<div id="synergy-roles-container" style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem;"> <div id="synergy-roles-container" style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem;">
@@ -175,25 +175,25 @@
<!-- C. Equipment Readiness & Stats Overview --> <!-- C. Equipment Readiness & Stats Overview -->
<div> <div>
<div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;"> <div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;" data-i18n="synergyEquipmentTitle">
📊 ความพร้อมของอุปกรณ์และเลเวลเฉลี่ย 📊 ความพร้อมของอุปกรณ์และเลเวลเฉลี่ย
</div> </div>
<div class="synergy-metrics-grid"> <div class="synergy-metrics-grid">
<div class="synergy-metric-box"> <div class="synergy-metric-box">
<div class="synergy-metric-val" id="synergy-avg-level">-</div> <div class="synergy-metric-val" id="synergy-avg-level">-</div>
<div class="synergy-metric-lbl">เลเวลเฉลี่ย</div> <div class="synergy-metric-lbl" data-i18n="synergyAvgLevel">เลเวลเฉลี่ย</div>
</div> </div>
<div class="synergy-metric-box"> <div class="synergy-metric-box">
<div class="synergy-metric-val" id="synergy-avg-eidolon">-</div> <div class="synergy-metric-val" id="synergy-avg-eidolon">-</div>
<div class="synergy-metric-lbl">Eidolon เฉลี่ย</div> <div class="synergy-metric-lbl" data-i18n="synergyAvgEidolon">Eidolon เฉลี่ย</div>
</div> </div>
<div class="synergy-metric-box"> <div class="synergy-metric-box">
<div class="synergy-metric-val" id="synergy-lc-ready">-</div> <div class="synergy-metric-val" id="synergy-lc-ready">-</div>
<div class="synergy-metric-lbl">สวมกรวยแสง</div> <div class="synergy-metric-lbl" data-i18n="synergyLcEquipped">สวมกรวยแสง</div>
</div> </div>
<div class="synergy-metric-box"> <div class="synergy-metric-box">
<div class="synergy-metric-val" id="synergy-relic-ready">-</div> <div class="synergy-metric-val" id="synergy-relic-ready">-</div>
<div class="synergy-metric-lbl">รีลิกส์ครบชุด</div> <div class="synergy-metric-lbl" data-i18n="synergyRelicFull">รีลิกส์ครบชุด</div>
</div> </div>
</div> </div>
</div> </div>
@@ -205,22 +205,22 @@
<div class="card-title" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;"> <div class="card-title" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
<span style="display: flex; align-items: center; gap: 0.5rem;"> <span style="display: flex; align-items: center; gap: 0.5rem;">
<span>💻</span> <span>💻</span>
<span>คอนโซลคำสั่ง GM & Log สด</span> <span data-i18n="consoleTitle">คอนโซลคำสั่ง GM & Log สด</span>
</span> </span>
<div style="display: flex; gap: 0.35rem;"> <div style="display: flex; gap: 0.35rem;">
<button type="button" class="btn btn-sm btn-secondary" id="btn-console-copy-log" title="คัดลอก Log ทั้งหมด" style="padding: 0.2rem 0.6rem; font-size: 0.75rem;"> <button type="button" class="btn btn-sm btn-secondary" id="btn-console-copy-log" title="คัดลอก Log ทั้งหมด" style="padding: 0.2rem 0.6rem; font-size: 0.75rem;" data-i18n="consoleCopyLog">
📋 คัดลอก 📋 คัดลอก
</button> </button>
<button type="button" class="btn btn-sm btn-secondary" id="btn-console-clear-log" title="ล้างหน้าจอ Terminal" style="padding: 0.2rem 0.6rem; font-size: 0.75rem;"> <button type="button" class="btn btn-sm btn-secondary" id="btn-console-clear-log" title="ล้างหน้าจอ Terminal" style="padding: 0.2rem 0.6rem; font-size: 0.75rem;" data-i18n="consoleClearLog">
🗑️ ล้าง Log 🗑️ ล้าง Log
</button> </button>
</div> </div>
</div> </div>
<p class="card-subtitle" style="margin-bottom: 0.25rem;">ส่งคำสั่ง GM / Server commands แบบเรียลไทม์ พร้อมติดตามสถานะและ Packet Log</p> <p class="card-subtitle" style="margin-bottom: 0.25rem;" data-i18n="consoleSubtitle">ส่งคำสั่ง GM / Server commands แบบเรียลไทม์ พร้อมติดตามสถานะและ Packet Log</p>
<!-- Quick GM Command Pills --> <!-- Quick GM Command Pills -->
<div> <div>
<div style="font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.35rem;"> <div style="font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.35rem;" data-i18n="consoleQuickTitle">
⚡ คำสั่งด่วนที่ใช้บ่อย (Quick Commands) ⚡ คำสั่งด่วนที่ใช้บ่อย (Quick Commands)
</div> </div>
<div class="console-quick-pills"> <div class="console-quick-pills">
@@ -251,14 +251,14 @@
<form id="form-console-cmd" style="display: flex; gap: 0.5rem; align-items: center; margin-top: 0.25rem;"> <form id="form-console-cmd" style="display: flex; gap: 0.5rem; align-items: center; margin-top: 0.25rem;">
<div class="console-input-wrap" style="flex: 1; display: flex; align-items: center; background: rgba(0,0,0,0.4); border: 1px solid var(--border-color); border-radius: 6px; padding: 0 0.75rem;"> <div class="console-input-wrap" style="flex: 1; display: flex; align-items: center; background: rgba(0,0,0,0.4); border: 1px solid var(--border-color); border-radius: 6px; padding: 0 0.75rem;">
<span style="color: var(--accent-cyan); font-family: monospace; font-weight: 800; font-size: 1.1rem; margin-right: 0.5rem;">&gt;</span> <span style="color: var(--accent-cyan); font-family: monospace; font-weight: 800; font-size: 1.1rem; margin-right: 0.5rem;">&gt;</span>
<input type="text" id="console-cmd-input" class="form-input" placeholder="พิมพ์คำสั่ง GM เช่น /heal, /max, /teleport 20411, /give 102 1000..." style="background: transparent; border: none; padding: 0.6rem 0; font-family: monospace; font-size: 0.85rem; box-shadow: none;" autocomplete="off"> <input type="text" id="console-cmd-input" class="form-input" data-i18n-placeholder="consolePlaceholder" placeholder="พิมพ์คำสั่ง GM เช่น /heal, /max, /teleport 20411, /give 102 1000..." style="background: transparent; border: none; padding: 0.6rem 0; font-family: monospace; font-size: 0.85rem; box-shadow: none;" autocomplete="off">
</div> </div>
<button type="submit" class="btn btn-primary" id="btn-console-cmd-send" style="padding: 0.6rem 1.25rem; font-weight: 700; white-space: nowrap;"> <button type="submit" class="btn btn-primary" id="btn-console-cmd-send" data-i18n="consoleSend" style="padding: 0.6rem 1.25rem; font-weight: 700; white-space: nowrap;">
ส่งคำสั่ง ส่งคำสั่ง
</button> </button>
</form> </form>
<div style="font-size: 0.725rem; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center;"> <div style="font-size: 0.725rem; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center;">
<span>💡 รองรับกด <kbd style="background: rgba(255,255,255,0.1); padding: 0.1rem 0.35rem; border-radius: 3px; font-family: monospace;">↑</kbd> <kbd style="background: rgba(255,255,255,0.1); padding: 0.1rem 0.35rem; border-radius: 3px; font-family: monospace;">↓</kbd> เพื่อเลือกประวัติคำสั่งก่อนหน้า</span> <span data-i18n="consoleHistoryHint">💡 รองรับกด <kbd style="background: rgba(255,255,255,0.1); padding: 0.1rem 0.35rem; border-radius: 3px; font-family: monospace;">↑</kbd> <kbd style="background: rgba(255,255,255,0.1); padding: 0.1rem 0.35rem; border-radius: 3px; font-family: monospace;">↓</kbd> เพื่อเลือกประวัติคำสั่งก่อนหน้า</span>
<span id="lbl-console-conn-status" style="color: var(--accent-green);">● เซิร์ฟเวอร์ออนไลน์</span> <span id="lbl-console-conn-status" style="color: var(--accent-green);">● เซิร์ฟเวอร์ออนไลน์</span>
</div> </div>
</div> </div>
@@ -1410,7 +1410,7 @@
<div class="modal-overlay" id="modal-select-lightcone"> <div class="modal-overlay" id="modal-select-lightcone">
<div class="modal-content" style="max-width: 720px; max-height: 85vh; display: flex; flex-direction: column;"> <div class="modal-content" style="max-width: 720px; max-height: 85vh; display: flex; flex-direction: column;">
<div class="modal-header"> <div class="modal-header">
<h3 id="modal-lc-picker-title" style="font-weight: 800;"> <h3 id="modal-lc-picker-title" style="font-weight: 800;" data-i18n="lcPickerTitle">
🗡️ เลือกสวมใส่กรวยแสง (Light Cone) 🗡️ เลือกสวมใส่กรวยแสง (Light Cone)
</h3> </h3>
<button type="button" class="btn btn-sm btn-secondary" id="btn-close-lc-picker">✕</button> <button type="button" class="btn btn-sm btn-secondary" id="btn-close-lc-picker">✕</button>
@@ -1446,11 +1446,11 @@
<div style="display: flex; gap: 0.6rem; align-items: center; min-width: 0;"> <div style="display: flex; gap: 0.6rem; align-items: center; min-width: 0;">
<img id="lc-picker-sig-thumb" src="" alt="" style="width: 38px; height: 52px; border-radius: 4px; object-fit: cover; border: 1px solid var(--accent-gold);"> <img id="lc-picker-sig-thumb" src="" alt="" style="width: 38px; height: 52px; border-radius: 4px; object-fit: cover; border: 1px solid var(--accent-gold);">
<div style="min-width: 0;"> <div style="min-width: 0;">
<div style="font-size: 0.7rem; color: var(--accent-gold); font-weight: 800;">⭐ กรวยแสงประจำตัวแนะนำ (Signature)</div> <div style="font-size: 0.7rem; color: var(--accent-gold); font-weight: 800;" data-i18n="lcPickerSigTitle">⭐ กรวยแสงประจำตัวแนะนำ (Signature)</div>
<div id="lc-picker-sig-name" style="font-weight: 700; font-size: 0.875rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">-</div> <div id="lc-picker-sig-name" style="font-weight: 700; font-size: 0.875rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">-</div>
</div> </div>
</div> </div>
<button type="button" class="btn btn-sm btn-gold" id="btn-lc-picker-quick-sig">⚡ สวมใส่ชิ้นนี้</button> <button type="button" class="btn btn-sm btn-gold" id="btn-lc-picker-quick-sig" data-i18n="lcPickerEquipSig">⚡ สวมใส่ชิ้นนี้</button>
</div> </div>
<!-- Lightcones List Grid --> <!-- Lightcones List Grid -->
@@ -1460,8 +1460,8 @@
<!-- Footer Actions --> <!-- Footer Actions -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; border-top: 1px solid var(--border-color); padding-top: 0.75rem;"> <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; border-top: 1px solid var(--border-color); padding-top: 0.75rem;">
<button type="button" class="btn btn-sm btn-secondary" id="btn-lc-picker-unequip" style="color: var(--accent-red);">✕ ถอดกรวยแสงออก</button> <button type="button" class="btn btn-sm btn-secondary" id="btn-lc-picker-unequip" style="color: var(--accent-red);" data-i18n="lcPickerUnequip">✕ ถอดกรวยแสงออก</button>
<button type="button" class="btn btn-sm btn-secondary" id="btn-lc-picker-close">ปิด</button> <button type="button" class="btn btn-sm btn-secondary" id="btn-lc-picker-close" data-i18n="modalBtnClose">ปิด</button>
</div> </div>
</div> </div>
</div> </div>
js/app.js
+29 -22
View File
@@ -398,7 +398,7 @@ function setConnectionStatus(connected, extraText = '') {
el.connectionStatusText.textContent = extraText || t('online'); el.connectionStatusText.textContent = extraText || t('online');
el.connectionStatusText.style.color = 'var(--accent-green)'; el.connectionStatusText.style.color = 'var(--accent-green)';
if (el.lblConsoleConnStatus) { if (el.lblConsoleConnStatus) {
el.lblConsoleConnStatus.textContent = '● เซิร์ฟเวอร์ออนไลน์'; el.lblConsoleConnStatus.textContent = t('consoleOnline');
el.lblConsoleConnStatus.style.color = 'var(--accent-green)'; el.lblConsoleConnStatus.style.color = 'var(--accent-green)';
} }
} else { } else {
@@ -406,7 +406,7 @@ function setConnectionStatus(connected, extraText = '') {
el.connectionStatusText.textContent = extraText || t('offline'); el.connectionStatusText.textContent = extraText || t('offline');
el.connectionStatusText.style.color = 'var(--accent-red)'; el.connectionStatusText.style.color = 'var(--accent-red)';
if (el.lblConsoleConnStatus) { if (el.lblConsoleConnStatus) {
el.lblConsoleConnStatus.textContent = '○ ออฟไลน์ (คำสั่งทำงานผ่านแคชภายใน)'; el.lblConsoleConnStatus.textContent = t('consoleOffline');
el.lblConsoleConnStatus.style.color = 'var(--text-muted)'; el.lblConsoleConnStatus.style.color = 'var(--text-muted)';
} }
} }
@@ -827,6 +827,12 @@ function applyTranslations() {
// Update connection status text with new language // Update connection status text with new language
setConnectionStatus(state.isConnected); setConnectionStatus(state.isConnected);
// Update server mode badges & labels for current language
setupServerModes();
// Re-render team synergy in new language
renderTeamSynergy(state.statusData?.lineups);
renderLineup(state.statusData?.lineups); renderLineup(state.statusData?.lineups);
if (state.statusData?.ex_ranks) { if (state.statusData?.ex_ranks) {
renderExRanks(state.statusData.ex_ranks); renderExRanks(state.statusData.ex_ranks);
@@ -870,7 +876,7 @@ function setupServerModes() {
if (el.lblActiveMode) el.lblActiveMode.textContent = 'GaC-hkrpg-go'; if (el.lblActiveMode) el.lblActiveMode.textContent = 'GaC-hkrpg-go';
if (el.tabBtnPersistent) { if (el.tabBtnPersistent) {
el.tabBtnPersistent.style.display = ''; el.tabBtnPersistent.style.display = '';
el.tabBtnPersistent.textContent = '💾 จัดการเซฟ GaC'; el.tabBtnPersistent.textContent = t('tabPersistentGaC');
} }
if (el.cardPersistentChars) el.cardPersistentChars.style.display = ''; if (el.cardPersistentChars) el.cardPersistentChars.style.display = '';
if (el.cardPersistentGlobal) el.cardPersistentGlobal.style.display = ''; if (el.cardPersistentGlobal) el.cardPersistentGlobal.style.display = '';
@@ -878,12 +884,12 @@ function setupServerModes() {
if (el.btnQuickSyncPersistent) el.btnQuickSyncPersistent.style.display = ''; if (el.btnQuickSyncPersistent) el.btnQuickSyncPersistent.style.display = '';
if (el.btnSelectPersistent) el.btnSelectPersistent.style.display = ''; if (el.btnSelectPersistent) el.btnSelectPersistent.style.display = '';
if (el.btnSelectDatagame) el.btnSelectDatagame.style.display = 'none'; if (el.btnSelectDatagame) el.btnSelectDatagame.style.display = 'none';
if (el.badgePersistenceMode) el.badgePersistenceMode.textContent = 'GaC: persistent.json (/api/persistent)'; if (el.badgePersistenceMode) el.badgePersistenceMode.textContent = t('badgePersistenceGaC');
} else if (mode === 'firefly') { } else if (mode === 'firefly') {
if (el.lblActiveMode) el.lblActiveMode.textContent = 'FireflyGo'; if (el.lblActiveMode) el.lblActiveMode.textContent = 'FireflyGo';
if (el.tabBtnPersistent) { if (el.tabBtnPersistent) {
el.tabBtnPersistent.style.display = ''; el.tabBtnPersistent.style.display = '';
el.tabBtnPersistent.textContent = '👤 ผู้บุกเบิก & March 7th'; el.tabBtnPersistent.textContent = t('tabPersistentFirefly');
} }
if (el.cardPersistentChars) el.cardPersistentChars.style.display = ''; if (el.cardPersistentChars) el.cardPersistentChars.style.display = '';
if (el.cardPersistentGlobal) el.cardPersistentGlobal.style.display = 'none'; // Hide unsupported GaC switches if (el.cardPersistentGlobal) el.cardPersistentGlobal.style.display = 'none'; // Hide unsupported GaC switches
@@ -891,7 +897,7 @@ function setupServerModes() {
if (el.btnQuickSyncPersistent) el.btnQuickSyncPersistent.style.display = 'none'; if (el.btnQuickSyncPersistent) el.btnQuickSyncPersistent.style.display = 'none';
if (el.btnSelectPersistent) el.btnSelectPersistent.style.display = 'none'; if (el.btnSelectPersistent) el.btnSelectPersistent.style.display = 'none';
if (el.btnSelectDatagame) el.btnSelectDatagame.style.display = ''; // Show data-in-game for Firefly if (el.btnSelectDatagame) el.btnSelectDatagame.style.display = ''; // Show data-in-game for Firefly
if (el.badgePersistenceMode) el.badgePersistenceMode.textContent = 'FireflyGo: data-in-game.json & freesr-data.json'; if (el.badgePersistenceMode) el.badgePersistenceMode.textContent = t('badgePersistenceFirefly');
if (state.activeTab === 'tab-exrank') { if (state.activeTab === 'tab-exrank') {
const dashboardBtn = document.querySelector('.tab-btn[data-tab="tab-dashboard"]'); const dashboardBtn = document.querySelector('.tab-btn[data-tab="tab-dashboard"]');
@@ -909,7 +915,7 @@ function setupServerModes() {
if (el.btnQuickSyncPersistent) el.btnQuickSyncPersistent.style.display = 'none'; if (el.btnQuickSyncPersistent) el.btnQuickSyncPersistent.style.display = 'none';
if (el.btnSelectPersistent) el.btnSelectPersistent.style.display = 'none'; if (el.btnSelectPersistent) el.btnSelectPersistent.style.display = 'none';
if (el.btnSelectDatagame) el.btnSelectDatagame.style.display = 'none'; if (el.btnSelectDatagame) el.btnSelectDatagame.style.display = 'none';
if (el.badgePersistenceMode) el.badgePersistenceMode.textContent = 'RobinSR: freesr-data.json (/api/freesr)'; if (el.badgePersistenceMode) el.badgePersistenceMode.textContent = t('badgePersistenceRobin');
if (state.activeTab === 'tab-persistent' || state.activeTab === 'tab-exrank') { if (state.activeTab === 'tab-persistent' || state.activeTab === 'tab-exrank') {
const dashboardBtn = document.querySelector('.tab-btn[data-tab="tab-dashboard"]'); const dashboardBtn = document.querySelector('.tab-btn[data-tab="tab-dashboard"]');
@@ -1303,18 +1309,18 @@ function renderTeamSynergy(lineups) {
// Render Element Chips // Render Element Chips
const coveredCount = Object.keys(coveredElements).length; const coveredCount = Object.keys(coveredElements).length;
if (el.badgeSynergyCoverage) { if (el.badgeSynergyCoverage) {
el.badgeSynergyCoverage.textContent = `ครอบคลุม ${coveredCount}/7 ธาตุ`; el.badgeSynergyCoverage.textContent = t('synergyCoverageBadge', { count: coveredCount });
el.badgeSynergyCoverage.style.color = coveredCount >= 4 ? 'var(--accent-green)' : (coveredCount >= 2 ? 'var(--accent-cyan)' : 'var(--accent-gold)'); el.badgeSynergyCoverage.style.color = coveredCount >= 4 ? 'var(--accent-green)' : (coveredCount >= 2 ? 'var(--accent-cyan)' : 'var(--accent-gold)');
} }
el.synergyElementsContainer.innerHTML = HSR_ELEMENTS.map(elem => { el.synergyElementsContainer.innerHTML = HSR_ELEMENTS.map(elem => {
const isCovered = !!coveredElements[elem.key]; const isCovered = !!coveredElements[elem.key];
const providers = coveredElements[elem.key] || []; const providers = coveredElements[elem.key] || [];
const providerText = isCovered ? providers.join(', ') : 'ไม่มีในทีม'; const providerText = isCovered ? providers.join(', ') : t('synergyNoInTeam');
return ` return `
<div class="synergy-element-chip ${isCovered ? 'active' : 'inactive'}" style="${isCovered ? `border-color: ${elem.color}66; box-shadow: 0 0 8px ${elem.color}22;` : ''}"> <div class="synergy-element-chip ${isCovered ? 'active' : 'inactive'}" style="${isCovered ? `border-color: ${elem.color}66; box-shadow: 0 0 8px ${elem.color}22;` : ''}">
${getElementIconHtml(elem.key, 22)} ${getElementIconHtml(elem.key, 22)}
<span class="synergy-element-name" style="${isCovered ? `color: ${elem.color};` : ''}">${elem.nameTh}</span> <span class="synergy-element-name" style="${isCovered ? `color: ${elem.color};` : ''}">${translateElement(elem.key)}</span>
<span class="synergy-element-chars" title="${providerText}">${providerText}</span> <span class="synergy-element-chars" title="${providerText}">${providerText}</span>
</div> </div>
`; `;
@@ -1324,17 +1330,17 @@ function renderTeamSynergy(lineups) {
if (el.synergyRolesContainer) { if (el.synergyRolesContainer) {
el.synergyRolesContainer.innerHTML = ` el.synergyRolesContainer.innerHTML = `
<div class="badge-super-tag" style="background: rgba(239, 68, 68, 0.15); color: #f87171; font-weight: 700;"> <div class="badge-super-tag" style="background: rgba(239, 68, 68, 0.15); color: #f87171; font-weight: 700;">
🗡️ DPS (${roles.dps.length}): ${roles.dps.join(', ') || '-'} ${t('roleDps')} (${roles.dps.length}): ${roles.dps.join(', ') || '-'}
</div> </div>
<div class="badge-super-tag" style="background: rgba(168, 85, 247, 0.15); color: #c084fc; font-weight: 700;"> <div class="badge-super-tag" style="background: rgba(168, 85, 247, 0.15); color: #c084fc; font-weight: 700;">
⚡ ซัพพอร์ต/ดีบัฟ (${roles.support.length}): ${roles.support.join(', ') || '-'} ${t('roleSupport')} (${roles.support.length}): ${roles.support.join(', ') || '-'}
</div> </div>
<div class="badge-super-tag" style="background: rgba(52, 211, 153, 0.15); color: #34d399; font-weight: 700;"> <div class="badge-super-tag" style="background: rgba(52, 211, 153, 0.15); color: #34d399; font-weight: 700;">
🛡️ Sustain ฮีล/ชิลด์ (${roles.sustain.length}): ${roles.sustain.join(', ') || '-'} ${t('roleSustain')} (${roles.sustain.length}): ${roles.sustain.join(', ') || '-'}
</div> </div>
${roles.specialist.length ? ` ${roles.specialist.length ? `
<div class="badge-super-tag" style="background: rgba(56, 189, 248, 0.15); color: #38bdf8; font-weight: 700;"> <div class="badge-super-tag" style="background: rgba(56, 189, 248, 0.15); color: #38bdf8; font-weight: 700;">
🔮 พิเศษ/FUA (${roles.specialist.length}): ${roles.specialist.join(', ')} ${t('roleSpecialist')} (${roles.specialist.length}): ${roles.specialist.join(', ')}
</div> </div>
` : ''} ` : ''}
`; `;
@@ -1343,18 +1349,19 @@ function renderTeamSynergy(lineups) {
// Dynamic Advice Text // Dynamic Advice Text
if (el.synergyAdviceBox) { if (el.synergyAdviceBox) {
if (activeIds.length === 0) { if (activeIds.length === 0) {
el.synergyAdviceBox.innerHTML = `<span style="color: var(--text-muted);">ยังไม่มีตัวละครในทีม กรุณาเลือกตัวละครในทีมด้านบน</span>`; el.synergyAdviceBox.innerHTML = `<span style="color: var(--text-muted);">${t('adviceEmpty')}</span>`;
el.synergyAdviceBox.style.borderColor = 'rgba(255,255,255,0.08)';
} else if (roles.sustain.length === 0) { } else if (roles.sustain.length === 0) {
el.synergyAdviceBox.innerHTML = `<span style="color: #fbbf24;">⚠️ <strong>ข้อแนะนำ:</strong> ทีมยังขาดตัวละครสายป้องกันหรือรักษา (Preservation / Abundance) แนะนำใส่ 1 ตำแหน่งเพื่อความปลอดภัยในการเล่น</span>`; el.synergyAdviceBox.innerHTML = `<span style="color: #fbbf24;">${t('adviceNoSustain')}</span>`;
el.synergyAdviceBox.style.borderColor = 'rgba(245, 158, 11, 0.4)'; el.synergyAdviceBox.style.borderColor = 'rgba(245, 158, 11, 0.4)';
} else if (roles.dps.length === 0) { } else if (roles.dps.length === 0) {
el.synergyAdviceBox.innerHTML = `<span style="color: #38bdf8;">💡 <strong>ข้อแนะนำ:</strong> ทีมมีแต่ตัวซัพพอร์ต ยังไม่มีตัวทำดาเมจหลัก (Destruction / Hunt / Erudition)</span>`; el.synergyAdviceBox.innerHTML = `<span style="color: #38bdf8;">${t('adviceNoDps')}</span>`;
el.synergyAdviceBox.style.borderColor = 'rgba(56, 189, 248, 0.4)'; el.synergyAdviceBox.style.borderColor = 'rgba(56, 189, 248, 0.4)';
} else if (roles.support.length === 0) { } else if (roles.support.length === 0) {
el.synergyAdviceBox.innerHTML = `<span style="color: #fbbf24;">💡 <strong>ข้อแนะนำ:</strong> ทีมมีตัวดาเมจแต่ยังไม่มีตัวบัฟหรือดีบัฟ (Harmony / Nihility) เสริมตัวซัพพอร์ตจะช่วยเร่งดาเมจได้มหาศาล</span>`; el.synergyAdviceBox.innerHTML = `<span style="color: #fbbf24;">${t('adviceNoSupport')}</span>`;
el.synergyAdviceBox.style.borderColor = 'rgba(245, 158, 11, 0.4)'; el.synergyAdviceBox.style.borderColor = 'rgba(245, 158, 11, 0.4)';
} else { } else {
el.synergyAdviceBox.innerHTML = `<span style="color: #34d399;">✅ <strong>สมดุลยอดเยี่ยม:</strong> ทีมมีโครงสร้างครบเครื่อง ทั้งตัวทำดาเมจ ซัพพอร์ตบัฟ/ดีบัฟ และตัวฮีลเลอร์/ชิลเดอร์ พร้อมลุยทุกคอนเทนต์!</span>`; el.synergyAdviceBox.innerHTML = `<span style="color: #34d399;">${t('adviceBalanced')}</span>`;
el.synergyAdviceBox.style.borderColor = 'rgba(52, 211, 153, 0.4)'; el.synergyAdviceBox.style.borderColor = 'rgba(52, 211, 153, 0.4)';
} }
} }
@@ -1602,9 +1609,9 @@ function setupGMConsoleEvents() {
if (!el.consoleTerminalLog) return; if (!el.consoleTerminalLog) return;
const text = el.consoleTerminalLog.innerText || el.consoleTerminalLog.textContent; const text = el.consoleTerminalLog.innerText || el.consoleTerminalLog.textContent;
navigator.clipboard?.writeText(text).then(() => { navigator.clipboard?.writeText(text).then(() => {
showToast('คัดลอก Log ทั้งหมดลงในคลิปบอร์ดแล้ว', 'success'); showToast(t('consoleLogCopied'), 'success');
}).catch(() => { }).catch(() => {
showToast('ไม่สามารถคัดลอก Log ได้', 'error'); showToast(t('consoleLogCopyFailed'), 'error');
}); });
}); });
} }
@@ -1614,7 +1621,7 @@ function setupGMConsoleEvents() {
el.btnConsoleClearLog.addEventListener('click', () => { el.btnConsoleClearLog.addEventListener('click', () => {
if (el.consoleTerminalLog) { if (el.consoleTerminalLog) {
el.consoleTerminalLog.innerHTML = ''; el.consoleTerminalLog.innerHTML = '';
logToConsole('ล้างหน้าจอ Terminal เรียบร้อย', 'SYS'); logToConsole(t('consoleLogCleared'), 'SYS');
} }
}); });
} }
js/i18n.js
+1350 -41
View File
File diff suppressed because it is too large. Load diff