1679 lines
111 KiB
HTML
1679 lines
111 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>[test-gay] GaC-Srtool — Ultimate Star Rail Server & Build Manager</title>
|
|
<link rel="stylesheet" href="css/styles.css?v=2.1">
|
|
<link rel="icon" type="image/png" href="assets/logo.png">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- App Header -->
|
|
<header class="app-header">
|
|
<div class="brand">
|
|
<img src="assets/logo.png" alt="GaC Logo" class="brand-logo-img">
|
|
<div>
|
|
<div class="brand-title" style="display: flex; align-items: center; gap: 0.5rem;">
|
|
<span>GaC-Srtool</span>
|
|
<span class="badge-branch" id="header-branch-badge">test-gay</span>
|
|
</div>
|
|
<div class="brand-subtitle" data-i18n="appSubtitle">Star Rail FreeSR & Server Controller</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-controls">
|
|
<!-- Server Mode Selector -->
|
|
<div class="server-mode-badge" title="โหมดการเชื่อมต่อเซิร์ฟเวอร์">
|
|
<span>🌐</span>
|
|
<select id="server-mode-select" class="server-mode-select">
|
|
<option value="gac" selected>GaC-hkrpg-go</option>
|
|
<option value="firefly">FireflyGo</option>
|
|
<option value="robin">RobinSR</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Language Selector (13 Languages) -->
|
|
<select id="lang-select" class="form-select btn-sm" style="width: auto; padding: 0.4rem 0.75rem; background: var(--bg-secondary); cursor: pointer;" title="Language / ภาษา">
|
|
</select>
|
|
|
|
<!-- Connection Pill -->
|
|
<div class="connection-pill" id="btn-open-settings" title="คลิกเพื่อตั้งค่าการเชื่อมต่อ API">
|
|
<span class="status-dot" id="status-dot"></span>
|
|
<span id="connection-status-text">กำลังตรวจสอบ...</span>
|
|
</div>
|
|
|
|
<button class="btn btn-secondary btn-sm" id="btn-quick-ping" title="รีเฟรชการเชื่อมต่อ" data-i18n="refresh">
|
|
🔄 รีเฟรช
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Navigation Bar -->
|
|
<nav class="nav-tabs">
|
|
<button class="tab-btn active" data-tab="tab-dashboard" data-i18n="tabDashboard">📊 แดชบอร์ด & จัดทีม</button>
|
|
<button class="tab-btn" data-tab="tab-avatars" data-i18n="tabAvatars">👥 ตัวละคร</button>
|
|
<button class="tab-btn" data-tab="tab-equipment" data-i18n="tabEquipment">🗡️ กรวยแสง & รีลิกส์</button>
|
|
<button class="tab-btn" data-tab="tab-inventory" data-i18n="tabInventory">🎒 ไอเทมในกระเป๋า</button>
|
|
<button class="tab-btn" data-tab="tab-damage-analyst" id="tab-btn-damage-analyst" data-i18n="tabDamageAnalyst">💥 Damage Analyst</button>
|
|
<button class="tab-btn" data-tab="tab-persistent" id="tab-btn-persistent" data-i18n="tabPersistent">💾 จัดการเซฟ GaC</button>
|
|
<button class="tab-btn" data-tab="tab-exrank" id="tab-btn-exrank" data-i18n="tabExrank">⚡ สกิลพิเศษ Ex-Rank</button>
|
|
<button class="tab-btn" data-tab="tab-json" data-i18n="tabJson">📝 จัดการไฟล์ JSON</button>
|
|
<button class="tab-btn" data-tab="tab-settings" data-i18n="tabSettings">⚙️ ตั้งค่า</button>
|
|
<div class="nav-branch-pill" id="nav-branch-pill" title="Git Branch ที่ใช้งานอยู่">
|
|
<svg class="branch-icon" viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"></path>
|
|
</svg>
|
|
<span id="nav-branch-name">test-gay</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Container -->
|
|
<main class="main-container">
|
|
|
|
<!-- 1. Dashboard Tab & Party Lineup -->
|
|
<section id="tab-dashboard" class="tab-content active">
|
|
<div class="grid-3" style="margin-bottom: 1.5rem;">
|
|
<div class="card stat-box">
|
|
<div class="stat-number" id="stat-avatars">0</div>
|
|
<div class="stat-label" data-i18n="statAvatars">ตัวละครที่ครอบครอง</div>
|
|
</div>
|
|
<div class="card stat-box">
|
|
<div class="stat-number" id="stat-lightcones">0</div>
|
|
<div class="stat-label" data-i18n="statLightcones">กรวยแสง</div>
|
|
</div>
|
|
<div class="card stat-box">
|
|
<div class="stat-number" id="stat-relics">0</div>
|
|
<div class="stat-label" data-i18n="statRelics">รีลิกส์</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Party Lineup Visualizer -->
|
|
<div class="card" style="margin-bottom: 1.5rem;">
|
|
<div class="card-title" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;">
|
|
<div style="display: flex; align-items: center; gap: 0.6rem;">
|
|
<span data-i18n="currentLineupTitle">🎮 ทีมปัจจุบัน</span>
|
|
<span class="badge-creative" id="badge-creative-mode" style="display: none;" data-i18n="badgeCreative">โหมดสร้างสรรค์</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 0.6rem;">
|
|
<label class="form-label" style="margin: 0; cursor: pointer; text-transform: none; display: flex; align-items: center; gap: 0.45rem;" for="toggle-creative-mode">
|
|
<span data-i18n="lblCreativeMode">🎨 โหมดสร้างสรรค์</span>
|
|
</label>
|
|
<label class="switch">
|
|
<input type="checkbox" id="toggle-creative-mode">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="lineup-grid" id="lineup-container">
|
|
<!-- Rendered by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-2" style="align-items: start;">
|
|
<!-- Column 1: Server Status & Team Combat Synergy -->
|
|
<div style="display: flex; flex-direction: column; gap: 1.5rem;">
|
|
<!-- 1. Server & Map Card -->
|
|
<div class="card">
|
|
<div class="card-title">
|
|
<span data-i18n="serverStatusTitle">📍 สถานะเซิร์ฟเวอร์ & พิกัดปัจจุบัน</span>
|
|
<span class="btn-sm btn-secondary" id="badge-version">API Live</span>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
|
|
<div>
|
|
<span class="form-label" data-i18n="lblServerModeActive">โหมดเซิร์ฟเวอร์ที่ใช้งาน</span>
|
|
<strong id="lbl-active-mode" style="color: var(--accent-cyan);">GaC-hkrpg-go</strong>
|
|
</div>
|
|
<div>
|
|
<span class="form-label" data-i18n="lblApiEndpoint">API Gateway Endpoint</span>
|
|
<code id="lbl-api-url" style="color: var(--accent-cyan); font-size: 0.9rem;">-</code>
|
|
</div>
|
|
<div style="display: flex; gap: 1rem;">
|
|
<div>
|
|
<span class="form-label" data-i18n="lblPlaneId">Plane ID</span>
|
|
<span id="lbl-plane-id" style="font-weight: bold;">-</span>
|
|
</div>
|
|
<div>
|
|
<span class="form-label" data-i18n="lblFloorId">Floor ID</span>
|
|
<span id="lbl-floor-id" style="font-weight: bold;">-</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="form-label" data-i18n="coords">พิกัดตัวละคร XYZ</span>
|
|
<span id="lbl-coordinates" style="color: var(--text-muted); font-size: 0.85rem;">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. Mini Battle Summary & Team Stats -->
|
|
<div class="card" id="card-battle-summary">
|
|
<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>💥</span>
|
|
<span data-i18n="miniBattleTitle">สรุปการต่อสู้ล่าสุด & ดาเมจทีม</span>
|
|
</span>
|
|
<div style="display: flex; align-items: center; gap: 0.4rem;">
|
|
<span class="badge-super-tag" id="badge-mini-battle-status" style="background: rgba(156, 163, 175, 0.12); color: var(--text-muted); font-weight: 800; border: 1px solid rgba(156, 163, 175, 0.25);">
|
|
ยังไม่มีข้อมูลการต่อสู้
|
|
</span>
|
|
<button type="button" class="btn btn-sm btn-secondary" id="btn-mini-view-full-analyst" style="font-size: 0.725rem; padding: 0.2rem 0.55rem; color: var(--accent-cyan); border-color: rgba(56, 189, 248, 0.35); font-weight: 700;" title="เปิดหน้า Damage Analyst ตัวเต็ม" data-i18n="miniViewFullAnalyst">
|
|
Damage Analyst →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p class="card-subtitle" style="margin-bottom: 0.75rem;" data-i18n="miniBattleSubtitle">
|
|
สถิติดาเมจ, DPS และสัดส่วนการทำดาเมจของตัวละครในทีมจากการต่อสู้จริงล่าสุด
|
|
</p>
|
|
|
|
<!-- A. Key Battle Metric Boxes (4 Boxes) -->
|
|
<div class="mini-battle-metrics-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.85rem;">
|
|
<div class="mini-battle-box" style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-sm); padding: 0.5rem 0.4rem; text-align: center;">
|
|
<div class="mini-battle-val" id="mini-total-dmg" style="font-size: 1.15rem; font-weight: 800; color: #f87171; font-family: monospace;">-</div>
|
|
<div class="mini-battle-lbl" style="font-size: 0.675rem; color: var(--text-muted); margin-top: 0.15rem;" data-i18n="miniTotalDmg">ดาเมจรวม</div>
|
|
</div>
|
|
<div class="mini-battle-box" style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-sm); padding: 0.5rem 0.4rem; text-align: center;">
|
|
<div class="mini-battle-val" id="mini-team-dps" style="font-size: 1.15rem; font-weight: 800; color: var(--accent-gold); font-family: monospace;">-</div>
|
|
<div class="mini-battle-lbl" style="font-size: 0.675rem; color: var(--text-muted); margin-top: 0.15rem;" data-i18n="miniTeamDps">DPS รวม</div>
|
|
</div>
|
|
<div class="mini-battle-box" style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-sm); padding: 0.5rem 0.4rem; text-align: center;">
|
|
<div class="mini-battle-val" id="mini-break-dmg" style="font-size: 1.15rem; font-weight: 800; color: var(--accent-cyan); font-family: monospace;">-</div>
|
|
<div class="mini-battle-lbl" style="font-size: 0.675rem; color: var(--text-muted); margin-top: 0.15rem;" data-i18n="miniBreakDmg">Break / Super Break</div>
|
|
</div>
|
|
<div class="mini-battle-box" style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-sm); padding: 0.5rem 0.4rem; text-align: center;">
|
|
<div class="mini-battle-val" id="mini-battle-turns" style="font-size: 1.15rem; font-weight: 800; color: var(--accent-green); font-family: monospace;">-</div>
|
|
<div class="mini-battle-lbl" style="font-size: 0.675rem; color: var(--text-muted); margin-top: 0.15rem;" data-i18n="miniBattleTurns">เทิร์น / เวลา</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- B. Mini Avatar Damage Breakdown (4 Avatars) -->
|
|
<div style="margin-bottom: 0.85rem;">
|
|
<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="miniBreakdownTitle">
|
|
📊 สัดส่วนดาเมจสมาชิกในทีม (Damage Share)
|
|
</div>
|
|
<div id="mini-battle-avatars-list" style="display: flex; flex-direction: column; gap: 0.45rem;">
|
|
<!-- Rendered dynamically by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- C. Equipment Readiness & Stats Overview -->
|
|
<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;" data-i18n="synergyEquipmentTitle">
|
|
🛡️ ความพร้อมของอุปกรณ์และเลเวลเฉลี่ย
|
|
</div>
|
|
<div class="synergy-metrics-grid">
|
|
<div class="synergy-metric-box">
|
|
<div class="synergy-metric-val" id="synergy-avg-level">-</div>
|
|
<div class="synergy-metric-lbl" data-i18n="synergyAvgLevel">เลเวลเฉลี่ย</div>
|
|
</div>
|
|
<div class="synergy-metric-box">
|
|
<div class="synergy-metric-val" id="synergy-avg-eidolon">-</div>
|
|
<div class="synergy-metric-lbl" data-i18n="synergyAvgEidolon">Eidolon เฉลี่ย</div>
|
|
</div>
|
|
<div class="synergy-metric-box">
|
|
<div class="synergy-metric-val" id="synergy-lc-ready">-</div>
|
|
<div class="synergy-metric-lbl" data-i18n="synergyLcEquipped">สวมกรวยแสง</div>
|
|
</div>
|
|
<div class="synergy-metric-box">
|
|
<div class="synergy-metric-val" id="synergy-relic-ready">-</div>
|
|
<div class="synergy-metric-lbl" data-i18n="synergyRelicFull">รีลิกส์ครบชุด</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Column 2: GM Command Dispatcher & Live Log Console -->
|
|
<div class="card" id="card-gm-console" style="display: flex; flex-direction: column; gap: 0.75rem;">
|
|
<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>💻</span>
|
|
<span data-i18n="consoleTitle">คอนโซลคำสั่ง GM & Log สด</span>
|
|
</span>
|
|
<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;" data-i18n="consoleCopyLog">
|
|
📋 คัดลอก
|
|
</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;" data-i18n="consoleClearLog">
|
|
🗑️ ล้าง Log
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p class="card-subtitle" style="margin-bottom: 0.25rem;" data-i18n="consoleSubtitle">ส่งคำสั่ง GM / Server commands แบบเรียลไทม์ พร้อมติดตามสถานะและ Packet Log</p>
|
|
|
|
<!-- Quick GM Command Pills -->
|
|
<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;" data-i18n="consoleQuickTitle">
|
|
⚡ คำสั่งด่วนที่ใช้บ่อย (Quick Commands)
|
|
</div>
|
|
<div class="console-quick-pills">
|
|
<button type="button" class="console-pill-btn" data-cmd="/heal" title="ฟื้นฟู HP/Energy ทั้งทีม" data-i18n="quickCmdHeal">💖 /heal</button>
|
|
<button type="button" class="console-pill-btn" data-cmd="/give 102 100000" title="รับ 100,000 Stellar Jades" data-i18n="quickCmdJades">💎 +100k Jades</button>
|
|
<button type="button" class="console-pill-btn" data-cmd="/give 2 10000000" title="รับ 10,000,000 Credits" data-i18n="quickCmdCredits">💰 +10M Credits</button>
|
|
<button type="button" class="console-pill-btn" data-cmd="/max" title="อัปเต็มเลเวล 80 E6 ทุกตัว" data-i18n="quickCmdMax">⚡ /max</button>
|
|
<button type="button" class="console-pill-btn" data-cmd="/teleport 20001 1" title="วาร์ปไปรถไฟ Astral Express" data-i18n="quickCmdExpress">🚂 รถไฟ Express</button>
|
|
<button type="button" class="console-pill-btn" data-cmd="/clear lineup" title="ล้างตัวละครในทีม" data-i18n="quickCmdClearLineup">🧹 เคลียร์ทีม</button>
|
|
<button type="button" class="console-pill-btn" data-cmd="/help" title="ดูรายการคำสั่งทั้งหมด" data-i18n="quickCmdHelp">❓ /help</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interactive Terminal Screen -->
|
|
<div class="console-terminal-wrapper">
|
|
<div class="console-terminal-header">
|
|
<span class="terminal-dot dot-red"></span>
|
|
<span class="terminal-dot dot-yellow"></span>
|
|
<span class="terminal-dot dot-green"></span>
|
|
<span class="terminal-title">GaC-hkrpg-go Console Session (Interactive GM Dispatcher)</span>
|
|
</div>
|
|
<div class="console-terminal-log" id="console-terminal-log">
|
|
<!-- Logs rendered here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Command Input Bar -->
|
|
<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;">
|
|
<span style="color: var(--accent-cyan); font-family: monospace; font-weight: 800; font-size: 1.1rem; margin-right: 0.5rem;">></span>
|
|
<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>
|
|
<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>
|
|
</form>
|
|
<div style="font-size: 0.725rem; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. Avatars Tab (Build & Eidolon Editor) -->
|
|
<section id="tab-avatars" class="tab-content">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 1rem;">
|
|
<div style="display: flex; gap: 0.75rem; flex: 1; max-width: 680px; flex-wrap: wrap;">
|
|
<input type="text" id="avatar-search" class="form-input" data-i18n-placeholder="searchPlaceholder" placeholder="🔍 ค้นหาชื่อหรือ ID ตัวละคร..." style="min-width: 180px; flex: 1;">
|
|
<select id="avatar-filter-rarity" class="form-select" style="max-width: 130px;">
|
|
<option value="all" data-i18n="filterAllRarity">ทุกระดับดาว</option>
|
|
<option value="5" data-i18n="filter5Star">5 ดาว</option>
|
|
<option value="4" data-i18n="filter4Star">4 ดาว</option>
|
|
</select>
|
|
<select id="avatar-filter-element" class="form-select" style="max-width: 130px;">
|
|
<option value="all" data-i18n="filterAllElements">ทุกธาตุ</option>
|
|
<option value="Fire">ไฟ</option>
|
|
<option value="Ice">น้ำแข็ง</option>
|
|
<option value="Lightning">สายฟ้า</option>
|
|
<option value="Wind">ลม</option>
|
|
<option value="Physical">กายภาพ</option>
|
|
<option value="Quantum">ควอนตัม</option>
|
|
<option value="Imaginary">จินตภาพ</option>
|
|
</select>
|
|
<select id="avatar-filter-path" class="form-select" style="max-width: 130px;">
|
|
<option value="all" data-i18n="filterAllPaths">ทุกประเภท</option>
|
|
<option value="Destruction">ทำลายล้าง</option>
|
|
<option value="Hunt">ล่าสังหาร</option>
|
|
<option value="Erudition">ปัญญา</option>
|
|
<option value="Harmony">ประสาน</option>
|
|
<option value="Nihility">ลบล้าง</option>
|
|
<option value="Preservation">อนุรักษ์</option>
|
|
<option value="Abundance">เฟื่องฟู</option>
|
|
<option value="Remembrance">ความทรงจำ</option>
|
|
<option value="Elation">ปีติ</option>
|
|
</select>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
|
<button class="btn btn-primary" id="btn-all-avatars-e0s1" data-i18n="btnAllE0S1" style="background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); border-color: #38bdf8;">⚡ ปรับ E0S1 ทุกตัว</button>
|
|
<button class="btn btn-gold" id="btn-max-all-avatars" data-i18n="btnMaxAll">⭐ ปรับ Max E6 ทุกตัว</button>
|
|
<button class="btn btn-secondary" id="btn-reload-avatars" data-i18n="btnReload">🔄 รีโหลด</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="avatars-grid" class="grid-4">
|
|
<div style="color: var(--text-muted); grid-column: 1/-1; text-align: center; padding: 2rem;" data-i18n="avatarsLoading">
|
|
กำลังดึงข้อมูลตัวละคร...
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. Equipment Tab (Lightcones & Relics) -->
|
|
<section id="tab-equipment" class="tab-content">
|
|
<!-- Toolbar & Subtabs Card -->
|
|
<div class="card" style="margin-bottom: 1rem; padding: 0.85rem 1rem;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;">
|
|
|
|
<!-- Subtab Buttons: Light Cones vs Relics -->
|
|
<div style="display: flex; gap: 0.4rem; background: var(--bg-card-hover); padding: 0.3rem; border-radius: var(--radius-md); border: 1px solid var(--border-color);">
|
|
<button type="button" class="btn btn-sm btn-primary eq-subtab-btn active" id="btn-eq-subtab-lc" data-subtab="lc" style="display: flex; align-items: center; gap: 0.45rem;">
|
|
<span data-i18n="eqLcTitle">🗡️ กรวยแสง (Light Cones)</span>
|
|
<span class="badge-super-tag" id="badge-total-lc" style="padding: 0.05rem 0.4rem; font-size: 0.75rem;">0</span>
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-secondary eq-subtab-btn" id="btn-eq-subtab-relic" data-subtab="relic" style="display: flex; align-items: center; gap: 0.45rem;">
|
|
<span data-i18n="eqRelicTitle">🛡️ รีลิกส์ (Relics)</span>
|
|
<span class="badge-super-tag" id="badge-total-relics" style="padding: 0.05rem 0.4rem; font-size: 0.75rem;">0</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Search & Filter Controls -->
|
|
<div style="display: flex; gap: 0.4rem; flex: 1; max-width: 620px; flex-wrap: wrap;">
|
|
<input type="text" id="eq-search" class="form-input" placeholder="🔍 ค้นหาชื่อหรือ ID อุปกรณ์..." style="flex: 1; min-width: 160px;">
|
|
<select id="eq-filter-rarity" class="form-select" style="max-width: 110px;">
|
|
<option value="all" data-i18n="filterAllRarity">ทุกดาว</option>
|
|
<option value="5" data-i18n="filter5Star">5 ดาว</option>
|
|
<option value="4" data-i18n="filter4Star">4 ดาว</option>
|
|
<option value="3">3 ดาว</option>
|
|
</select>
|
|
<select id="eq-filter-equipped" class="form-select" style="max-width: 130px;">
|
|
<option value="all">สถานะทั้งหมด</option>
|
|
<option value="equipped">สวมใส่อยู่</option>
|
|
<option value="unequipped">ในกระเป๋า</option>
|
|
</select>
|
|
<select id="eq-filter-extra" class="form-select" style="max-width: 120px;">
|
|
<option value="all">ทุกประเภท</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div style="display: flex; gap: 0.4rem;">
|
|
<button type="button" class="btn btn-sm btn-success" id="btn-open-add-lc" data-i18n="btnAddLc">+ เพิ่ม LC</button>
|
|
<button type="button" class="btn btn-sm btn-success" id="btn-open-add-relic" data-i18n="btnAddRelic" style="display: none;">+ เพิ่มรีลิกส์</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Layout: Tiles Grid + Inspector Side Panel -->
|
|
<div style="display: flex; gap: 1rem; align-items: flex-start;">
|
|
<!-- Left: Inventory Tiles Grid -->
|
|
<div style="flex: 1; min-width: 0;">
|
|
<div id="lightcones-grid" class="eq-tiles-grid">
|
|
<div style="color: var(--text-muted); text-align: center; padding: 2rem; grid-column: 1/-1;" data-i18n="eqLcLoading">กำลังโหลดข้อมูลกรวยแสง...</div>
|
|
</div>
|
|
<div id="relics-grid" class="eq-tiles-grid" style="display: none;">
|
|
<div style="color: var(--text-muted); text-align: center; padding: 2rem; grid-column: 1/-1;" data-i18n="eqRelicLoading">กำลังโหลดข้อมูลรีลิกส์...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Inspector Side Card -->
|
|
<div id="eq-inspector-card" class="eq-inspector-wrapper" style="width: 320px; position: sticky; top: 80px; flex-shrink: 0; display: none;">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Material inventory editor: edits only Client-catalog item quantities. -->
|
|
<section id="tab-inventory" class="tab-content">
|
|
<div class="card" style="margin-bottom: 1rem;">
|
|
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;">
|
|
<div>
|
|
<div class="card-title" data-i18n="inventoryTitle">🎒 จัดการจำนวนไอเทม</div>
|
|
<p class="card-subtitle" data-i18n="inventoryDescription">ค้นหาด้วย Item ID แล้วแก้จำนวนหลายรายการก่อนบันทึกครั้งเดียว รายการมาจาก catalog ของ Client ที่เซิร์ฟเวอร์ใช้ ช่องว่างหมายถึงใช้ค่าเริ่มต้นของเซิร์ฟเวอร์</p>
|
|
</div>
|
|
<div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;">
|
|
<span id="inventory-count" class="badge-super-tag">—</span>
|
|
<span id="inventory-dirty-count" class="badge-super-tag" style="display:none;">0</span>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;margin-top:1rem;">
|
|
<input type="search" id="inventory-search" class="form-input" style="flex:1;min-width:220px;" data-i18n-placeholder="inventorySearchPlaceholder" placeholder="ค้นหา Item ID...">
|
|
<button type="button" class="btn btn-secondary" id="btn-inventory-discard" disabled data-i18n="inventoryDiscard">ทิ้งการแก้ไข</button>
|
|
<button type="button" class="btn btn-success" id="btn-inventory-save" disabled data-i18n="inventorySave">บันทึกการเปลี่ยนแปลง</button>
|
|
</div>
|
|
<div id="inventory-status" role="status" aria-live="polite" style="font-size:.8rem;color:var(--text-muted);margin-top:.7rem;" data-i18n="inventoryLoadHint">กำลังโหลดรายการจากเซิร์ฟเวอร์...</div>
|
|
</div>
|
|
<div class="card" style="padding:0;overflow:hidden;">
|
|
<div style="overflow:auto;max-height:65vh;">
|
|
<table style="width:100%;border-collapse:collapse;min-width:420px;">
|
|
<thead style="position:sticky;top:0;background:var(--bg-card-hover);z-index:1;">
|
|
<tr>
|
|
<th style="text-align:left;padding:.8rem 1rem;" data-i18n="inventoryItemId">Item ID</th>
|
|
<th style="text-align:left;padding:.8rem 1rem;" data-i18n="inventoryDefaultCount">จำนวนในกระเป๋า</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="inventory-materials-body">
|
|
<tr><td colspan="2" style="padding:1.5rem;text-align:center;color:var(--text-muted);" data-i18n="inventoryLoadHint">กำลังโหลดรายการจากเซิร์ฟเวอร์...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem 1rem;border-top:1px solid var(--border-color);">
|
|
<button type="button" class="btn btn-sm btn-secondary" id="btn-inventory-prev" disabled data-i18n="inventoryPrevious">ก่อนหน้า</button>
|
|
<span id="inventory-page-label" style="font-size:.8rem;color:var(--text-muted);"></span>
|
|
<button type="button" class="btn btn-sm btn-secondary" id="btn-inventory-next" disabled data-i18n="inventoryNext">ถัดไป</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3.5. Damage Analyst (In-Game Battle Telemetry & Damage Analysis) -->
|
|
<section id="tab-damage-analyst" class="tab-content">
|
|
<!-- Toolbar & Control Card -->
|
|
<div class="card" style="margin-bottom: 1.25rem;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
|
|
<div>
|
|
<div class="card-title" style="margin-bottom: 0.25rem;">
|
|
<span data-i18n="analystTitle">💥 วิเคราะห์ความเสียหายจากการต่อสู้ (Damage Analyst)</span>
|
|
<span class="badge-super-tag" id="badge-analyst-status" style="background: rgba(34, 197, 94, 0.15); color: #4ade80;">พร้อมรับข้อมูลจากเกม</span>
|
|
</div>
|
|
<p class="card-subtitle" style="margin-bottom: 0;" data-i18n="analystSubtitle">
|
|
ดักจับและวิเคราะห์ดาเมจจากการต่อสู้จริงในเกม Star Rail (ระบบเดียวกับ FireflyGO / Veritas)
|
|
</p>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
|
|
<label style="display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; user-select: none; margin-right: 0.5rem;">
|
|
<input type="checkbox" id="chk-analyst-autosync" checked style="accent-color: var(--accent-cyan); cursor: pointer;">
|
|
<span data-i18n="analystAutoSync">ซิงค์อัตโนมัติ</span>
|
|
</label>
|
|
<button type="button" class="btn btn-primary" id="btn-analyst-fetch" style="background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);">
|
|
<span data-i18n="analystFetchBtn">🔄 ดึงดาเมจล่าสุดจากในเกม</span>
|
|
</button>
|
|
<input type="file" id="input-analyst-file" accept=".json" style="display: none;">
|
|
<button type="button" class="btn btn-secondary" id="btn-analyst-import" data-i18n="analystImportBtn">
|
|
📂 นำเข้า JSON
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" id="btn-analyst-export" data-i18n="analystExportBtn">
|
|
💾 ส่งออก JSON
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" id="btn-analyst-clear" style="color: #f87171;" data-i18n="analystClearBtn">
|
|
🗑️ ล้างข้อมูล
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overview 4 Metrics Cards -->
|
|
<div class="grid-4" style="margin-bottom: 1.25rem;">
|
|
<div class="card" style="padding: 1.2rem; border-left: 4px solid #ef4444; background: linear-gradient(135deg, rgba(239,68,68,0.06) 0%, rgba(20,20,28,0.7) 100%);">
|
|
<div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;" data-i18n="analystTotalDamage">ดาเมจรวมทั้งทีม</div>
|
|
<div style="font-size: 1.85rem; font-weight: 900; color: #f87171; letter-spacing: -0.5px; margin: 0.25rem 0;" id="analyst-team-damage">0</div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);" id="analyst-damage-av">เฉลี่ยต่อรอบ: -</div>
|
|
</div>
|
|
|
|
<div class="card" style="padding: 1.2rem; border-left: 4px solid #f59e0b; background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, rgba(20,20,28,0.7) 100%);">
|
|
<div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;" data-i18n="analystCycles">จำนวนรอบ (Cycles)</div>
|
|
<div style="font-size: 1.85rem; font-weight: 900; color: #fbbf24; letter-spacing: -0.5px; margin: 0.25rem 0;" id="analyst-cycles">0 รอบ</div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);" id="analyst-cycles-note">MoC / PF / AS Standard</div>
|
|
</div>
|
|
|
|
<div class="card" style="padding: 1.2rem; border-left: 4px solid #38bdf8; background: linear-gradient(135deg, rgba(56,189,248,0.06) 0%, rgba(20,20,28,0.7) 100%);">
|
|
<div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;" data-i18n="analystTurns">เทิร์นทั้งหมด</div>
|
|
<div style="font-size: 1.85rem; font-weight: 900; color: #38bdf8; letter-spacing: -0.5px; margin: 0.25rem 0;" id="analyst-total-turns">0 เทิร์น</div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);" id="analyst-auto-turns">เทิร์นอัตโนมัติ: 0</div>
|
|
</div>
|
|
|
|
<div class="card" style="padding: 1.2rem; border-left: 4px solid #34d399; background: linear-gradient(135deg, rgba(52,211,153,0.06) 0%, rgba(20,20,28,0.7) 100%);">
|
|
<div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;" data-i18n="analystDuration">ระยะเวลาการต่อสู้</div>
|
|
<div style="font-size: 1.85rem; font-weight: 900; color: #34d399; letter-spacing: -0.5px; margin: 0.25rem 0;" id="analyst-duration">00:00</div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);" id="analyst-battle-meta">Stage: - | Battle: -</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Damage Share Bar -->
|
|
<div class="card" style="margin-bottom: 1.25rem;">
|
|
<div class="card-title" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
|
|
<span data-i18n="analystDpsShare">สัดส่วนดาเมจของทีม (Team DPS Share)</span>
|
|
<span style="font-size: 0.8rem; color: var(--text-muted);" id="analyst-total-share-label">รวม 100%</span>
|
|
</div>
|
|
<!-- Progress Bar Container -->
|
|
<div id="analyst-share-bar-container" style="height: 18px; width: 100%; border-radius: 9px; background: rgba(255,255,255,0.05); overflow: hidden; display: flex; margin-bottom: 0.85rem; border: 1px solid rgba(255,255,255,0.1);">
|
|
<!-- Dynamic segments filled by JS -->
|
|
</div>
|
|
<!-- Legend Container -->
|
|
<div id="analyst-share-legend" style="display: flex; gap: 1.5rem; flex-wrap: wrap;">
|
|
<!-- Dynamic legend filled by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Character Breakdown Grid -->
|
|
<div id="analyst-characters-container" class="grid-2" style="gap: 1.25rem; margin-bottom: 1.5rem;">
|
|
<!-- Populated dynamically by JS for each avatar in battle -->
|
|
</div>
|
|
|
|
<!-- Target Enemies Encountered -->
|
|
<div class="card" id="analyst-enemies-card" style="margin-bottom: 1.5rem;">
|
|
<div class="card-title" style="margin-bottom: 0.75rem;">
|
|
<span data-i18n="analystEnemyTitle">👾 รายชื่อศัตรูที่ถูกโจมตี (Targets / Enemies)</span>
|
|
</div>
|
|
<div id="analyst-enemies-container" style="display: flex; flex-direction: column; gap: 0.6rem;">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. Persistent Save Settings (Exclusive to GaC-hkrpg-go) -->
|
|
<section id="tab-persistent" class="tab-content">
|
|
<div class="card" style="margin-bottom: 1.5rem;">
|
|
<div class="card-title">
|
|
<span data-i18n="persistentTitle">💾 จัดการไฟล์เซฟ GaC</span>
|
|
<span class="btn-sm btn-success" data-i18n="persistentBadge">เซิร์ฟเวอร์ของเราเอง</span>
|
|
</div>
|
|
<p class="card-subtitle" data-i18n="persistentSubtitle">
|
|
ไฟล์ persistent เก็บการตั้งค่าสถานะผู้เล่นเฉพาะของเซิร์ฟเวอร์ GaC เช่น เพศ/ธาตุตัวเอก, สเตตัส March 7th, สวิตช์ฟังก์ชัน Global ต่างๆ
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid-2">
|
|
<!-- Main Character & March Path -->
|
|
<div class="card" id="card-persistent-chars">
|
|
<div class="card-title" data-i18n="persistentTbM7Title">👤 ผู้บุกเบิก & March 7th</div>
|
|
<form id="form-persistent-chars">
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="lblTbGenderElement">เพศ & ธาตุของตัวเอก</label>
|
|
<select id="persistent-mc-select" class="form-select">
|
|
<option value="MalePhysical">ผู้บุกเบิกชาย - กายภาพ</option>
|
|
<option value="FemalePhysical">ผู้บุกเบิกหญิง - กายภาพ</option>
|
|
<option value="MalePreservation">ผู้บุกเบิกชาย - ไฟ</option>
|
|
<option value="FemalePreservation">ผู้บุกเบิกหญิง - ไฟ</option>
|
|
<option value="MaleHarmony">ผู้บุกเบิกชาย - ประสาน</option>
|
|
<option value="FemaleHarmony">ผู้บุกเบิกหญิง - ประสาน</option>
|
|
<option value="MaleRemembrance">ผู้บุกเบิกชาย - ความทรงจำ</option>
|
|
<option value="FemaleRemembrance">ผู้บุกเบิกหญิง - ความทรงจำ</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="lblM7Path">สายของ March 7th</label>
|
|
<select id="persistent-march-select" class="form-select">
|
|
<option value="MarchHunt">March 7th - ล่าสังหาร</option>
|
|
<option value="MarchPreservation">March 7th - อนุรักษ์</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary" style="width: 100%;" data-i18n="btnSaveCharSettings">
|
|
💾 บันทึกการตั้งค่าตัวละคร
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Global Features & Toggles -->
|
|
<div class="card" id="card-persistent-global">
|
|
<div class="card-title" data-i18n="persistentGlobalTitle">⚙️ สวิตช์ระบบพิเศษของ GaC</div>
|
|
<div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem;">
|
|
<div class="ex-switch-card">
|
|
<div>
|
|
<div style="font-weight: 700;">Silver Wolf Global Feature</div>
|
|
<div style="font-size: 0.8rem; color: var(--text-muted);" data-i18n="swGlobalDesc">เปิดใช้งานฟังก์ชันพิเศษ SW ทั่วทั้งเซิร์ฟเวอร์</div>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="toggle-sw-global">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="ex-switch-card">
|
|
<div>
|
|
<div style="font-weight: 700;">Castorice Global Feature</div>
|
|
<div style="font-size: 0.8rem; color: var(--text-muted);" data-i18n="castoriceGlobalDesc">เปิดใช้งานฟังก์ชันพิเศษ Castorice ทั่วทั้งเซิร์ฟเวอร์</div>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="toggle-castorice-global">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="ex-switch-card">
|
|
<div>
|
|
<div style="font-weight: 700;">Aeon ★ Aha Global Feature</div>
|
|
<div style="font-size: 0.8rem; color: var(--text-muted);" data-i18n="ahaGlobalDesc">เปิดใช้งานฟังก์ชันพิเศษ Aeon ★ Aha ทั่วทั้งเซิร์ฟเวอร์</div>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="toggle-aha-global">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<button class="btn btn-success" id="btn-save-persistent-toggles" data-i18n="btnSaveGlobalSwitch">
|
|
💾 บันทึกสวิตช์ Global
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5. Ex-Rank Tab -->
|
|
<section id="tab-exrank" class="tab-content">
|
|
<div class="card" style="margin-bottom: 1.5rem;">
|
|
<div class="card-title">
|
|
<span data-i18n="exrankTitle">⚡ ระบบปลดล็อค Ex-Rank Skill</span>
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<button class="btn btn-success btn-sm" id="btn-exrank-enable-all" data-i18n="btnEnableAll">เปิด Ex-Rank ทั้งหมด</button>
|
|
<button class="btn btn-secondary btn-sm" id="btn-exrank-disable-all" data-i18n="btnDisableAll">ปิด Ex-Rank ทั้งหมด</button>
|
|
</div>
|
|
</div>
|
|
<p class="card-subtitle" data-i18n="exrankSubtitle">
|
|
เปิดใช้งานพรสวรรค์และกลไกพิเศษ Ex-Rank สำหรับตัวละครเฉพาะใน FreeSR (เช่น Jing Yuan โดน CC ไม่หยุดชะงัก, Dan Heng IL, Acheron)
|
|
</p>
|
|
</div>
|
|
|
|
<div id="exrank-list" style="display: flex; flex-direction: column; gap: 0.75rem;">
|
|
<!-- Rendered by JS -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6. JSON Management Tab -->
|
|
<section id="tab-json" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-title" style="flex-wrap: wrap; gap: 0.75rem;">
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<button class="btn btn-sm btn-primary active" id="btn-select-freesr" data-i18n="btnFreesr">📄 freesr-data.json</button>
|
|
<button class="btn btn-sm btn-secondary" id="btn-select-persistent" data-i18n="btnPersistent">💾 ไฟล์เซฟ persistent</button>
|
|
<button class="btn btn-sm btn-secondary" id="btn-select-datagame" data-i18n="btnDataGame" style="display: none;">🎮 data-in-game.json</button>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<button class="btn btn-sm btn-secondary" id="btn-json-beautify" data-i18n="btnBeautify">✨ จัดรูปแบบ JSON</button>
|
|
<button class="btn btn-sm btn-secondary" id="btn-json-download" data-i18n="btnDownload">📥 ดาวน์โหลด Backup</button>
|
|
<label class="btn btn-sm btn-secondary" style="cursor: pointer; margin: 0;">
|
|
<span data-i18n="btnUpload">📤 อัปโหลดไฟล์</span> <input type="file" id="json-file-input" accept=".json,text/plain" style="display: none;">
|
|
</label>
|
|
<button class="btn btn-sm btn-success" id="btn-json-save" data-i18n="btnSaveServer">💾 บันทึกไปยังเซิร์ฟเวอร์</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="json-editor-wrapper">
|
|
<textarea id="json-editor" class="json-textarea" spellcheck="false" placeholder="..."></textarea>
|
|
<div style="display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted);">
|
|
<span id="json-status-info" data-i18n="jsonStatusReady">พร้อมใช้งาน</span>
|
|
<span data-i18n="jsonTip">คำแนะนำ: สามารถแก้ไขค่าดิบแล้วกด 'บันทึกไปยังเซิร์ฟเวอร์' ได้ทันที</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 8. Settings -->
|
|
<section id="tab-settings" class="tab-content">
|
|
<div style="max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem;">
|
|
|
|
<div class="grid-2">
|
|
<!-- Card 1: Server & Gateway Connection -->
|
|
<div class="card">
|
|
<div class="card-title" data-i18n="settingsConnTitle">⚙️ ตั้งค่าการเชื่อมต่อ API Gateway</div>
|
|
<p class="card-subtitle" data-i18n="settingsConnSubtitle">กำหนด Endpoint และโหมดของเซิร์ฟเวอร์ที่ต้องการสั่งการ</p>
|
|
|
|
<form id="form-settings">
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="lblServerMode">โหมดเซิร์ฟเวอร์</label>
|
|
<select id="setting-server-mode" class="form-select">
|
|
<option value="gac">GaC-hkrpg-go</option>
|
|
<option value="firefly">FireflyGo</option>
|
|
<option value="robin">RobinSR</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="lblApiGatewayUrl">REST API Gateway URL</label>
|
|
<input type="text" id="setting-api-url" class="form-input" placeholder="http://localhost:21000">
|
|
<div style="display: flex; gap: 0.35rem; margin-top: 0.5rem; flex-wrap: wrap;">
|
|
<button type="button" class="btn btn-sm btn-secondary btn-quick-url" data-url="http://localhost:21000">localhost:21000</button>
|
|
<button type="button" class="btn btn-sm btn-secondary btn-quick-url" data-url="http://127.0.0.1:21000">127.0.0.1:21000</button>
|
|
<button type="button" class="btn btn-sm btn-secondary btn-quick-url" data-url="http://localhost:8080">localhost:8080</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 1.25rem;">
|
|
<button type="button" class="btn btn-secondary" id="btn-test-connection" style="display: flex; align-items: center; gap: 0.4rem;">
|
|
<span data-i18n="btnTestPing">⚡ ทดสอบการเชื่อมต่อ</span>
|
|
<span id="ping-latency-badge" class="badge-super-tag" style="display: none; padding: 0.1rem 0.45rem; font-size: 0.75rem;">-</span>
|
|
</button>
|
|
<button type="submit" class="btn btn-success" style="flex: 1;" data-i18n="btnSaveSettings">💾 บันทึกการตั้งค่า</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Card 2: Battle & Gameplay Preferences -->
|
|
<div class="card">
|
|
<div class="card-title" data-i18n="settingsBattleTitle">🎮 ค่าเริ่มต้นการต่อสู้ & FreeSR</div>
|
|
<p class="card-subtitle" data-i18n="settingsBattleSubtitle">ปรับแต่งพฤติกรรมเริ่มต้นของระบบในเกมและการจัดทีม</p>
|
|
|
|
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
|
<!-- Server Persistence Mode Information -->
|
|
<div style="background: rgba(15, 23, 42, 0.45); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.85rem 1rem;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<span style="font-weight: 700; font-size: 0.875rem;" data-i18n="lblPersistenceInfo">ระบบบันทึกทีมและข้อมูล (Lineup Storage)</span>
|
|
<span id="badge-persistence-mode" class="badge-super-tag" style="padding: 0.15rem 0.55rem; font-size: 0.75rem;">Persistent API (GaC)</span>
|
|
</div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem;" id="desc-persistence-mode">
|
|
GaC Server เก็บทีมใน persistent.json (รองรับโหมดสร้างสรรค์) • สำหรับ FireflyGo เก็บใน freesr-data.json
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Auto-Sync Toggle -->
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border-color);">
|
|
<div>
|
|
<div style="font-weight: 700; font-size: 0.9rem;" data-i18n="lblAutoSync">ซิงค์ไปยังเซิร์ฟเวอร์อัตโนมัติ (Auto-Sync)</div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);" data-i18n="descAutoSync">ส่งการเปลี่ยนแปลงไปยังเซิร์ฟเวอร์ทันทีเมื่อแก้ไขตัวละครหรือไอเทม</div>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="setting-auto-sync" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Creative Mode Default -->
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border-color);">
|
|
<div>
|
|
<div style="font-weight: 700; font-size: 0.9rem;" data-i18n="lblDefaultCreative">เปิดโหมดสร้างสรรค์เมื่อเริ่มต้น (Creative Mode)</div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);" data-i18n="descDefaultCreative">อนุญาตให้ใส่ตัวละครซ้ำหรือจัดทีมได้มากกว่า 4 ช่องตลอดเวลา</div>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="setting-default-creative">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-2">
|
|
<!-- Card 3: Showcase Card Display Settings -->
|
|
<div class="card">
|
|
<div class="card-title" data-i18n="settingsShowcaseTitle">🖼️ การแสดงผลการ์ด Showcase</div>
|
|
<p class="card-subtitle" data-i18n="settingsShowcaseSubtitle">ปรับแต่งความสวยงามและรายละเอียดในหน้าการ์ดแสดงผล Build</p>
|
|
|
|
<div style="display: flex; flex-direction: column; gap: 0.85rem;">
|
|
<!-- Show Roll Counts on Relics -->
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div>
|
|
<div style="font-weight: 700; font-size: 0.9rem;" data-i18n="lblShowRolls">แสดงจำนวน Roll ของซับสเตตัสรีลิกส์</div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);" data-i18n="descShowRolls">แสดงแท็กจำนวนครั้งที่สุ่มลงสเตตัสย่อย (Sub-stat Roll Counts)</div>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="setting-showcase-rolls" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Dynamic Element Aura Glow -->
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border-color);">
|
|
<div>
|
|
<div style="font-weight: 700; font-size: 0.9rem;" data-i18n="lblElementAura">เอฟเฟกต์แสงเรืองตามธาตุ (Element Aura Glow)</div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);" data-i18n="descElementAura">เปลี่ยนสีพื้นหลังและการเรืองแสงของการ์ดตามธาตุของตัวละครนั้นๆ</div>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="setting-showcase-aura" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Diagnostics & Cache Reset -->
|
|
<div class="card">
|
|
<div class="card-title" data-i18n="settingsCacheTitle">🧹 จัดการข้อมูลแคช & รีเซ็ตระบบ</div>
|
|
<p class="card-subtitle" data-i18n="settingsCacheSubtitle">ล้างข้อมูลชั่วคราวในเบราว์เซอร์หรือคืนค่าเครื่องมือเป็นค่าเริ่มต้น</p>
|
|
|
|
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem;">
|
|
<span style="color: var(--text-muted);" data-i18n="lblCacheSize">สถานะหน่วยความจำ LocalStorage:</span>
|
|
<strong id="lbl-cache-usage" style="color: var(--accent-cyan); font-family: monospace;">ตรวจวัด...</strong>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 0.75rem; margin-top: 0.5rem; flex-wrap: wrap;">
|
|
<button type="button" class="btn btn-secondary" id="btn-clear-browser-cache" style="flex: 1; min-width: 140px;" data-i18n="btnClearCache">
|
|
🧹 ล้างแคชเบราว์เซอร์
|
|
</button>
|
|
<button type="button" class="btn btn-danger" id="btn-reset-settings" style="flex: 1; min-width: 140px;" data-i18n="btnFactoryReset">
|
|
🔄 คืนค่าเริ่มต้นทั้งหมด
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Character Detail / Build Modal -->
|
|
<div class="modal-overlay" id="modal-avatar-detail">
|
|
<div class="modal-content" style="max-width: 860px;">
|
|
<!-- Modal Header -->
|
|
<div class="modal-header">
|
|
<h3 id="modal-char-title" style="font-weight: 800; font-size: 1.15rem; color: var(--text-highlight);" data-i18n="modalTitleCharEdit">
|
|
ปรับแต่งตัวละคร
|
|
</h3>
|
|
<button class="btn btn-sm btn-secondary" id="btn-close-avatar-modal">✕</button>
|
|
</div>
|
|
|
|
<!-- Character Top Banner & Quick Max All -->
|
|
<div style="display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap;">
|
|
<div class="avatar-image-container" style="width: 76px; height: 76px;">
|
|
<img id="modal-char-img" class="avatar-img" src="" alt="">
|
|
</div>
|
|
<div style="flex: 1; min-width: 180px;">
|
|
<div id="modal-char-name" style="font-size: 1.25rem; font-weight: 800;"></div>
|
|
<div id="modal-char-meta" style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;"></div>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
|
|
<button type="button" class="btn btn-primary" id="btn-modal-e0s1" style="padding: 0.5rem 0.95rem; font-weight: 800;" data-i18n="btnE0S1" title="Lv.80, E0, Max Skills, S1">
|
|
⚡ E0S1
|
|
</button>
|
|
<button type="button" class="btn btn-gold" id="btn-modal-e6s5" style="padding: 0.5rem 0.95rem; font-weight: 800;" data-i18n="btnE6S5" title="Lv.80, E6, Max Skills, S5">
|
|
⭐ E6S5
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sub Tabs Navigation (srtools & neonteam style) -->
|
|
<div class="modal-subtabs" style="display: flex; gap: 0.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; overflow-x: auto;">
|
|
<button type="button" class="modal-subtab-btn active" data-modaltab="modaltab-overview" data-i18n="modalTabOverview">
|
|
📋 ข้อมูลภาพรวม
|
|
</button>
|
|
<button type="button" class="modal-subtab-btn" data-modaltab="modaltab-relics" data-i18n="modalTabRelics">
|
|
🛡️ รีลิกส์ & อุปกรณ์
|
|
</button>
|
|
<button type="button" class="modal-subtab-btn" data-modaltab="modaltab-skills" data-i18n="modalTabSkills">
|
|
⚡ สกิลและร่องรอย
|
|
</button>
|
|
<button type="button" class="modal-subtab-btn" data-modaltab="modaltab-status" data-i18n="modalTabStatus">
|
|
⚙️ เลเวล & Eidolon
|
|
</button>
|
|
<button type="button" class="modal-subtab-btn" data-modaltab="modaltab-showcase" data-i18n="modalTabShowcase">
|
|
🖼️ การ์ดสรุปบิลด์
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Sub Tab 0: Overview & Combat Stats (Neonteam style https://srtools.neonteam.dev/1001/detail) -->
|
|
<div id="modaltab-overview" class="modal-subtab-content active">
|
|
<div class="overview-layout">
|
|
<!-- Left: Big portrait art & character identity -->
|
|
<div class="overview-portrait-box">
|
|
<img id="overview-portrait-img" class="overview-portrait-img" src="" alt="Character Art">
|
|
<div class="overview-portrait-info">
|
|
<div id="overview-char-name" style="font-size: 1.35rem; font-weight: 800; color: #fff;">-</div>
|
|
<div id="overview-char-meta" style="display: flex; gap: 0.4rem; align-items: center; margin-top: 0.35rem; flex-wrap: wrap;"></div>
|
|
<div style="display: flex; gap: 0.4rem; margin-top: 0.75rem;">
|
|
<span id="overview-badge-lvl" class="badge-super-tag">Lv. 80 / 80</span>
|
|
<span id="overview-badge-eidolon" class="badge-super-tag" style="background: rgba(251, 191, 36, 0.2); border-color: #fbbf24; color: #fbbf24;">E6</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Combat Stats, Equipped LC & Relic Summaries -->
|
|
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
|
<!-- Combat Stats Panel -->
|
|
<div class="card" style="background: rgba(18, 24, 38, 0.7); border: 1px solid var(--border-color); padding: 1rem;">
|
|
<div style="font-weight: 800; font-size: 0.95rem; color: var(--text-highlight); margin-bottom: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
|
|
<span data-i18n="overviewStatsTitle">⚔️ ค่าพลังการต่อสู้ (Combat Stats)</span>
|
|
<span style="font-size: 0.75rem; color: var(--text-muted);" data-i18n="overviewStatsNote">รวมโบนัสกรวยแสงและรีลิกส์</span>
|
|
</div>
|
|
<div class="overview-stats-grid" id="overview-stats-grid">
|
|
<!-- Dynamically populated stats -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Equipped Equipment Glance -->
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem;">
|
|
<!-- LC Glance -->
|
|
<div class="card" id="overview-lc-card" style="background: rgba(18, 24, 38, 0.7); border: 1px solid var(--border-color); padding: 0.85rem; cursor: pointer; transition: all 0.2s;" title="คลิกเพื่อจัดการ Light Cone">
|
|
<div style="font-size: 0.75rem; color: var(--text-muted); font-weight: 700; margin-bottom: 0.5rem; display: flex; justify-content: space-between;">
|
|
<span data-i18n="overviewEquippedLc">🗡️ กรวยแสงที่สวมใส่</span>
|
|
<span style="color: var(--accent-cyan); font-size: 0.7rem;">จัดการ ➔</span>
|
|
</div>
|
|
<div style="display: flex; gap: 0.65rem; align-items: center;">
|
|
<img id="overview-lc-thumb" src="" alt="" style="width: 44px; height: 60px; border-radius: 4px; object-fit: cover; border: 1px solid var(--border-color);">
|
|
<div style="min-width: 0; flex: 1;">
|
|
<div id="overview-lc-name" style="font-weight: 700; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">-</div>
|
|
<div id="overview-lc-rank" style="font-size: 0.75rem; color: var(--accent-gold); margin-top: 0.2rem;">S5 • Lv.80</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Relics Glance -->
|
|
<div class="card" id="overview-relics-card" style="background: rgba(18, 24, 38, 0.7); border: 1px solid var(--border-color); padding: 0.85rem; cursor: pointer; transition: all 0.2s;" title="คลิกเพื่อจัดการรีลิกส์">
|
|
<div style="font-size: 0.75rem; color: var(--text-muted); font-weight: 700; margin-bottom: 0.5rem; display: flex; justify-content: space-between;">
|
|
<span data-i18n="overviewEquippedRelics">🛡️ รีลิกส์และเซ็ต</span>
|
|
<span style="color: var(--accent-cyan); font-size: 0.7rem;">จัดการ ➔</span>
|
|
</div>
|
|
<div id="overview-relics-summary" style="display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem;">
|
|
<!-- Set bonuses active -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sub Tab: Relics Inspection & Selection (6 Slots) -->
|
|
<div id="modaltab-relics" class="modal-subtab-content" style="display: none;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
|
|
<div>
|
|
<div style="font-weight: 800; font-size: 1rem; color: var(--text-highlight);" data-i18n="modalRelicsTitle">
|
|
🛡️ สวมใส่รีลิกส์ (Relics 6 ชิ้น)
|
|
</div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);" data-i18n="modalRelicsSubtitle">
|
|
เลือกเปลี่ยน ปรับสเตตัส หรือสวมใส่รีลิกส์แนะนำสำหรับตัวละครนี้
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 0.4rem; flex-wrap: wrap;">
|
|
<button type="button" class="btn btn-sm btn-gold" id="btn-modal-relics-auto" data-i18n="btnAutoEquipRelics">
|
|
⚡ ติดตั้งเซ็ตแนะนำครบชุด
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-danger" id="btn-modal-relics-clear" data-i18n="btnClearAllRelics">
|
|
🧹 ถอดทั้งหมด
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Equipped Lightcone Slot in Equipment Tab -->
|
|
<div class="card" id="relics-equipped-lc-box" style="background: rgba(18, 24, 38, 0.75); border: 1px solid var(--border-color); padding: 0.85rem 1rem; margin-bottom: 1rem; cursor: pointer; transition: all 0.2s;" title="คลิกเพื่อเลือกเปลี่ยน Light Cone">
|
|
<div style="font-size: 0.75rem; color: var(--text-muted); font-weight: 700; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center;">
|
|
<span style="color: var(--accent-cyan); font-weight: 800;">🗡️ กรวยแสงที่สวมใส่ (คลิกเพื่อเลือกเปลี่ยน)</span>
|
|
<span style="color: var(--accent-gold); font-size: 0.75rem; font-weight: 700;">เปลี่ยนกรวยแสง ➔</span>
|
|
</div>
|
|
<div style="display: flex; gap: 0.85rem; align-items: center;">
|
|
<img id="relics-tab-lc-thumb" src="" alt="" style="width: 46px; height: 64px; border-radius: 6px; object-fit: cover; border: 1px solid var(--accent-gold);">
|
|
<div style="min-width: 0; flex: 1;">
|
|
<div style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
|
|
<span id="relics-tab-lc-name" style="font-weight: 800; font-size: 0.95rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">-</span>
|
|
<span id="relics-tab-lc-stars" style="color: var(--accent-gold); font-size: 0.8rem; letter-spacing: 1px;">★★★★★</span>
|
|
</div>
|
|
<div style="display: flex; gap: 0.6rem; align-items: center; margin-top: 0.25rem; font-size: 0.775rem; color: var(--text-muted); flex-wrap: wrap;">
|
|
<span id="relics-tab-lc-rank" style="color: var(--accent-gold); font-weight: 800;">S5</span>
|
|
<span>•</span>
|
|
<span id="relics-tab-lc-level" style="font-weight: 700; color: #fff;">Lv. 80 / 80</span>
|
|
<span>•</span>
|
|
<span id="relics-tab-lc-stats" style="color: var(--accent-cyan); font-family: monospace;">HP 952 / ATK 582 / DEF 529</span>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-primary" style="pointer-events: none;">เลือกเปลี่ยน</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 6 Relic Slots Grid -->
|
|
<div class="relics-slots-grid" id="modal-relics-slots-grid">
|
|
<!-- Dynamically generated 6 slot boxes -->
|
|
</div>
|
|
|
|
<!-- Active Set Bonuses -->
|
|
<div class="card" style="background: rgba(11, 15, 25, 0.75); border: 1px solid var(--border-color); padding: 0.85rem 1rem; margin-top: 1rem;">
|
|
<div style="font-weight: 700; font-size: 0.85rem; color: var(--accent-gold); margin-bottom: 0.5rem;" data-i18n="activeSetEffects">
|
|
✨ เอฟเฟกต์เซ็ตที่เปิดใช้งาน
|
|
</div>
|
|
<div id="modal-relics-active-sets" style="display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.8rem; color: #cbd5e1;">
|
|
<!-- Injected by JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sub Tab 1: Skills & Traces (Like https://srtools.punklorde.org/skills-info) -->
|
|
<div id="modaltab-skills" class="modal-subtab-content" style="display: none;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
|
|
<div style="font-weight: 700; font-size: 0.95rem; color: var(--text-highlight);" data-i18n="modalSkillCombatTitle">
|
|
ระดับสกิลต่อสู้
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-gold" id="btn-modal-max-skills" data-i18n="modalBtnMaxSkills">
|
|
⭐ ปรับสกิลเต็ม 10/10
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 4 Core Skills -->
|
|
<div class="skills-grid" style="display: flex; flex-direction: column; gap: 0.85rem;">
|
|
<!-- 1. Basic Attack -->
|
|
<div class="skill-row-card">
|
|
<div class="skill-row-header">
|
|
<div style="display: flex; align-items: center; gap: 0.65rem;">
|
|
<img id="skill-icon-basic" class="skill-row-icon" src="" alt="Basic ATK">
|
|
<div>
|
|
<div style="display: flex; align-items: center; gap: 0.4rem;">
|
|
<span class="skill-type-tag" data-i18n="modalSkillBasic">โจมตีปกติ</span>
|
|
<span id="skill-real-name-basic" class="skill-name">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="skill-lvl-badge">Lv. <strong id="val-skill-basic">6</strong> / 6</span>
|
|
</div>
|
|
<div class="skill-stepper">
|
|
<button type="button" class="btn-step" id="btn-step-dec-basic">-</button>
|
|
<input type="range" min="1" max="6" value="6" id="range-skill-basic" class="skill-range">
|
|
<button type="button" class="btn-step" id="btn-step-inc-basic">+</button>
|
|
<button type="button" class="btn-max-pill" id="btn-skill-max-basic">MAX</button>
|
|
</div>
|
|
<div id="skill-desc-basic" class="skill-desc-box"></div>
|
|
</div>
|
|
|
|
<!-- 2. Skill -->
|
|
<div class="skill-row-card">
|
|
<div class="skill-row-header">
|
|
<div style="display: flex; align-items: center; gap: 0.65rem;">
|
|
<img id="skill-icon-skill" class="skill-row-icon" src="" alt="Skill">
|
|
<div>
|
|
<div style="display: flex; align-items: center; gap: 0.4rem;">
|
|
<span class="skill-type-tag" data-i18n="modalSkillSkill">สกิลต่อสู้</span>
|
|
<span id="skill-real-name-skill" class="skill-name">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="skill-lvl-badge">Lv. <strong id="val-skill-skill">10</strong> / 10</span>
|
|
</div>
|
|
<div class="skill-stepper">
|
|
<button type="button" class="btn-step" id="btn-step-dec-skill">-</button>
|
|
<input type="range" min="1" max="10" value="10" id="range-skill-skill" class="skill-range">
|
|
<button type="button" class="btn-step" id="btn-step-inc-skill">+</button>
|
|
<button type="button" class="btn-max-pill" id="btn-skill-max-skill">MAX</button>
|
|
</div>
|
|
<div id="skill-desc-skill" class="skill-desc-box"></div>
|
|
</div>
|
|
|
|
<!-- 3. Ultimate -->
|
|
<div class="skill-row-card">
|
|
<div class="skill-row-header">
|
|
<div style="display: flex; align-items: center; gap: 0.65rem;">
|
|
<img id="skill-icon-ultra" class="skill-row-icon" src="" alt="Ultimate">
|
|
<div>
|
|
<div style="display: flex; align-items: center; gap: 0.4rem;">
|
|
<span class="skill-type-tag" data-i18n="modalSkillUltra">ท่าไม้ตาย</span>
|
|
<span id="skill-real-name-ultra" class="skill-name">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="skill-lvl-badge">Lv. <strong id="val-skill-ultra">10</strong> / 10</span>
|
|
</div>
|
|
<div class="skill-stepper">
|
|
<button type="button" class="btn-step" id="btn-step-dec-ultra">-</button>
|
|
<input type="range" min="1" max="10" value="10" id="range-skill-ultra" class="skill-range">
|
|
<button type="button" class="btn-step" id="btn-step-inc-ultra">+</button>
|
|
<button type="button" class="btn-max-pill" id="btn-skill-max-ultra">MAX</button>
|
|
</div>
|
|
<div id="skill-desc-ultra" class="skill-desc-box"></div>
|
|
</div>
|
|
|
|
<!-- 4. Talent -->
|
|
<div class="skill-row-card">
|
|
<div class="skill-row-header">
|
|
<div style="display: flex; align-items: center; gap: 0.65rem;">
|
|
<img id="skill-icon-talent" class="skill-row-icon" src="" alt="Talent">
|
|
<div>
|
|
<div style="display: flex; align-items: center; gap: 0.4rem;">
|
|
<span class="skill-type-tag" data-i18n="modalSkillTalent">พรสวรรค์</span>
|
|
<span id="skill-real-name-talent" class="skill-name">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="skill-lvl-badge">Lv. <strong id="val-skill-talent">10</strong> / 10</span>
|
|
</div>
|
|
<div class="skill-stepper">
|
|
<button type="button" class="btn-step" id="btn-step-dec-talent">-</button>
|
|
<input type="range" min="1" max="10" value="10" id="range-skill-talent" class="skill-range">
|
|
<button type="button" class="btn-step" id="btn-step-inc-talent">+</button>
|
|
<button type="button" class="btn-max-pill" id="btn-skill-max-talent">MAX</button>
|
|
</div>
|
|
<div id="skill-desc-talent" class="skill-desc-box"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Traces & Technique Section -->
|
|
<div style="margin-top: 1.25rem;">
|
|
<div style="font-weight: 700; font-size: 0.95rem; color: var(--text-highlight); margin-bottom: 0.75rem;" data-i18n="modalTracesTitle">
|
|
ร่องรอยและเทคนิค
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
|
|
<!-- Technique -->
|
|
<div class="skill-row-card" style="padding: 0.75rem 1rem;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div style="display: flex; align-items: center; gap: 0.65rem;">
|
|
<img id="skill-icon-technique" class="skill-row-icon" src="" alt="Technique">
|
|
<div>
|
|
<span class="skill-type-tag" data-i18n="modalTraceTechnique">เทคนิค</span>
|
|
<span id="skill-real-name-technique" class="skill-name">-</span>
|
|
</div>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="check-trace-technique" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div id="skill-desc-technique" class="skill-desc-box" style="margin-top: 0.35rem;"></div>
|
|
</div>
|
|
|
|
<!-- Major Traces A2, A4, A6 -->
|
|
<div style="display: flex; flex-direction: column; gap: 0.6rem;">
|
|
<div class="trace-card-item">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
|
<img id="trace-icon-a2" class="trace-icon-small" src="" alt="A2">
|
|
<span id="trace-name-a2" style="font-weight: 700; font-size: 0.875rem;">🌟 ร่องรอยพิเศษ A2</span>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="check-trace-a2" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div id="trace-desc-a2" class="skill-desc-box" style="margin-top: 0.35rem;"></div>
|
|
</div>
|
|
|
|
<div class="trace-card-item">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
|
<img id="trace-icon-a4" class="trace-icon-small" src="" alt="A4">
|
|
<span id="trace-name-a4" style="font-weight: 700; font-size: 0.875rem;">🌟 ร่องรอยพิเศษ A4</span>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="check-trace-a4" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div id="trace-desc-a4" class="skill-desc-box" style="margin-top: 0.35rem;"></div>
|
|
</div>
|
|
|
|
<div class="trace-card-item">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
|
<img id="trace-icon-a6" class="trace-icon-small" src="" alt="A6">
|
|
<span id="trace-name-a6" style="font-weight: 700; font-size: 0.875rem;">🌟 ร่องรอยพิเศษ A6</span>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="check-trace-a6" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div id="trace-desc-a6" class="skill-desc-box" style="margin-top: 0.35rem;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 10 Stat Nodes -->
|
|
<label class="trace-toggle-label" style="margin-top: 0.25rem;">
|
|
<input type="checkbox" id="check-trace-stats" checked class="trace-checkbox">
|
|
<span data-i18n="traceStatNodes">💎 โหนดสเตตัสเสริมทั้งหมด (10 โหนด)</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sub Tab 2: Status & Eidolon -->
|
|
<div id="modaltab-status" class="modal-subtab-content" style="display: none;">
|
|
<div class="grid-2" style="gap: 1rem; margin-bottom: 1rem;">
|
|
<div class="form-group">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
|
|
<label class="form-label" style="margin: 0;" data-i18n="lblLevelRange">ระดับเลเวล (1-80)</label>
|
|
<div style="display: flex; gap: 0.25rem;">
|
|
<button type="button" class="btn btn-sm btn-secondary btn-lvl-preset" data-lvl="1">1</button>
|
|
<button type="button" class="btn btn-sm btn-secondary btn-lvl-preset" data-lvl="20">20</button>
|
|
<button type="button" class="btn btn-sm btn-secondary btn-lvl-preset" data-lvl="60">60</button>
|
|
<button type="button" class="btn btn-sm btn-secondary btn-lvl-preset" data-lvl="70">70</button>
|
|
<button type="button" class="btn btn-sm btn-primary btn-lvl-preset" data-lvl="80">80</button>
|
|
</div>
|
|
</div>
|
|
<input type="number" id="modal-char-level" class="form-input" min="1" max="80" value="80">
|
|
</div>
|
|
<div class="form-group">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
|
|
<label class="form-label" style="margin: 0;" data-i18n="lblPromotionRange">การเลื่อนขั้น (0-6)</label>
|
|
<div style="display: flex; gap: 0.25rem;">
|
|
<button type="button" class="btn btn-sm btn-secondary btn-prom-preset" data-prom="0">0</button>
|
|
<button type="button" class="btn btn-sm btn-secondary btn-prom-preset" data-prom="3">3</button>
|
|
<button type="button" class="btn btn-sm btn-primary btn-prom-preset" data-prom="6">6</button>
|
|
</div>
|
|
</div>
|
|
<input type="number" id="modal-char-promotion" class="form-input" min="0" max="6" value="6">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Eidolon Section -->
|
|
<div class="form-group">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
|
|
<label class="form-label" style="margin: 0;" data-i18n="lblEidolonLevel">ระดับ Eidolon</label>
|
|
<div style="display: flex; gap: 0.4rem;">
|
|
<button type="button" class="btn btn-sm btn-secondary" id="btn-modal-quick-e0" data-i18n="btnResetE0">รีเซ็ต E0</button>
|
|
<button type="button" class="btn btn-sm btn-gold" id="btn-modal-quick-e6" data-i18n="btnMaxE6">⭐ ปลดเต็ม E6</button>
|
|
</div>
|
|
</div>
|
|
<div class="eidolon-buttons" id="modal-char-eidolon-btns" style="margin-top: 0.5rem; gap: 0.5rem;">
|
|
<!-- Injected pips -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sub Tab 3: Lightcone Equipment (Full artwork matching srtools) -->
|
|
<div id="modaltab-lightcone" class="modal-subtab-content" style="display: none;">
|
|
<div class="lc-preview-container">
|
|
<!-- Left: Full vertical artwork card -->
|
|
<div class="lc-art-wrapper" id="modal-lc-art-wrapper">
|
|
<img id="modal-lc-full-img" class="lc-full-img" src="" alt="Light Cone Artwork">
|
|
<div id="modal-lc-no-art" class="lc-placeholder-text" style="display: none;">
|
|
🗡️ ไม่มีรูปตัวอย่าง
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Details, Superimposition, Stats & Selector -->
|
|
<div class="lc-details-col">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap;">
|
|
<div>
|
|
<h3 id="modal-lc-name-display" style="font-size: 1.3rem; font-weight: 800; color: #fff; margin: 0 0 0.35rem 0;">-</h3>
|
|
<div id="modal-lc-meta-display" style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;"></div>
|
|
</div>
|
|
<div id="modal-lc-rank-badge" class="badge-super-tag">S5 • Lv.80</div>
|
|
</div>
|
|
|
|
<!-- Level Row with Slider -->
|
|
<div class="form-group" style="margin-top: 0.75rem;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
|
|
<label class="form-label" style="margin: 0;" data-i18n="lblLcLevel">เลเวล (1-80)</label>
|
|
<span id="modal-lc-lvl-val" style="font-weight: 800; font-family: monospace; color: var(--accent-cyan);">80 / 80</span>
|
|
</div>
|
|
<div style="display: flex; gap: 0.75rem; align-items: center;">
|
|
<input type="range" id="range-lc-level" min="1" max="80" value="80" class="skill-range" style="flex: 1;">
|
|
<input type="number" id="modal-lc-level" class="form-input" min="1" max="80" value="80" style="width: 70px; text-align: center;">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Superimposition Row S1 - S5 -->
|
|
<div class="form-group">
|
|
<label class="form-label" style="margin-bottom: 0.4rem;" data-i18n="lblLcRank">ระดับการขัดเกลา</label>
|
|
<div class="eidolon-buttons" id="modal-lc-rank-btns" style="gap: 0.5rem;">
|
|
<button type="button" class="eidolon-pip lc-super-pip" data-rank="1">S1</button>
|
|
<button type="button" class="eidolon-pip lc-super-pip" data-rank="2">S2</button>
|
|
<button type="button" class="eidolon-pip lc-super-pip" data-rank="3">S3</button>
|
|
<button type="button" class="eidolon-pip lc-super-pip" data-rank="4">S4</button>
|
|
<button type="button" class="eidolon-pip lc-super-pip active" data-rank="5">S5</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Passive Ability Description Card -->
|
|
<div class="lc-passive-card">
|
|
<div class="lc-passive-title" data-i18n="lcPassiveTitle">เอฟเฟกต์สกิลพิเศษ</div>
|
|
<div id="modal-lc-passive-desc" class="lc-passive-body">...</div>
|
|
</div>
|
|
|
|
<!-- Change Lightcone Section -->
|
|
<div style="margin-top: 1rem; display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap;">
|
|
<div style="flex: 1; min-width: 220px;">
|
|
<label class="form-label" data-i18n="lblSelectLc">เลือกเปลี่ยน Light Cone</label>
|
|
<select id="select-modal-change-lc" class="form-select"></select>
|
|
</div>
|
|
<button type="button" class="btn btn-primary" id="btn-modal-apply-change-lc" style="padding: 0.65rem 1.25rem; font-weight: 700;" data-i18n="btnChangeLc">
|
|
เปลี่ยน Light Cone
|
|
</button>
|
|
</div>
|
|
<input type="hidden" id="modal-lc-id" value="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sub Tab 4: Showcase Card (Matching srtools.punklorde.org/showcase-card) -->
|
|
<div id="modaltab-showcase" class="modal-subtab-content" style="display: none;">
|
|
<!-- Action Toolbar -->
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
|
|
<div style="font-weight: 800; font-size: 1rem; color: var(--text-highlight); display: flex; align-items: center; gap: 0.5rem;">
|
|
<span data-i18n="modalTabShowcase">🖼️ การ์ดแสดงผล</span>
|
|
<span class="btn-sm btn-secondary" id="showcase-build-tag">Build Overview</span>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
|
<button type="button" class="btn btn-sm btn-gold" id="btn-showcase-auto-relics" data-i18n="showcaseAutoRelics">
|
|
⚡ ติดตั้งรีลิกส์แนะนำ
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" id="btn-showcase-copy-text" data-i18n="showcaseCopy">
|
|
📋 คัดลอกข้อความ
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-primary" id="btn-showcase-export-img" data-i18n="showcaseExport">
|
|
🖼️ ส่งออกรูปภาพ
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- The Showcase Card UI Container with horizontal scroll wrapper -->
|
|
<div class="showcase-scroll-wrapper" style="overflow-x: auto; padding-bottom: 0.5rem; max-width: 100%;">
|
|
<div id="showcase-card-container" class="showcase-card-layout">
|
|
<!-- Rendered dynamically by JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Footer -->
|
|
<div style="display: flex; gap: 0.75rem; margin-top: 1.5rem; justify-content: flex-end; flex-wrap: wrap;">
|
|
<button type="button" class="btn btn-secondary" id="btn-modal-cancel-avatar" data-i18n="modalBtnClose">
|
|
✕ ปิด
|
|
</button>
|
|
<button type="button" class="btn btn-success" id="btn-modal-save-avatar" data-i18n="modalBtnSave">
|
|
💾 บันทึกตัวละคร
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Party Member Picker Modal -->
|
|
<div class="modal-overlay" id="modal-lineup-picker">
|
|
<div class="modal-content" style="max-width: 720px; max-height: 85vh; display: flex; flex-direction: column;">
|
|
<div class="modal-header">
|
|
<h3 id="modal-picker-title" style="font-weight: 800;" data-i18n="pickerTitle">เลือกตัวละครเข้าทีม</h3>
|
|
<button class="btn btn-sm btn-secondary" id="btn-close-picker-modal">✕</button>
|
|
</div>
|
|
<input type="text" id="picker-search" class="form-input" data-i18n-placeholder="pickerSearchPlaceholder" placeholder="🔍 ค้นหาตัวละครเพื่อลงทีม..." style="margin-bottom: 1rem;">
|
|
<div id="picker-avatars-grid" class="picker-grid-container" style="overflow-y: auto; flex: 1; min-height: 0; padding-right: 0.5rem;">
|
|
<!-- Injected by JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Modal -->
|
|
<div class="modal-overlay" id="modal-settings">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 style="font-weight: 700;" data-i18n="apiModalTitle">⚙️ ตั้งค่าการเชื่อมต่อ API Server</h3>
|
|
<button class="btn btn-sm btn-secondary" id="btn-close-modal">✕</button>
|
|
</div>
|
|
<div>
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="lblApiGatewayUrl">Server REST API URL</label>
|
|
<input type="text" id="modal-api-url" class="form-input">
|
|
</div>
|
|
<div style="display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem;">
|
|
<button class="btn btn-secondary" id="btn-modal-cancel" data-i18n="btnCancel">ยกเลิก</button>
|
|
<button class="btn btn-primary" id="btn-modal-save" data-i18n="btnSaveTest">บันทึก & ทดสอบ</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Light Cone Modal -->
|
|
<div class="modal-overlay" id="modal-add-lc">
|
|
<div class="modal-content" style="max-width: 760px; max-height: 88vh; display: flex; flex-direction: column;">
|
|
<div class="modal-header" style="padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); margin-bottom: 0.75rem;">
|
|
<h3 style="font-weight: 800; margin: 0; display: flex; align-items: center; gap: 0.5rem;" data-i18n="modalAddLcTitle">
|
|
🗡️ เพิ่มกรวยแสงลง FreeSR
|
|
</h3>
|
|
<button type="button" class="btn btn-sm btn-secondary" id="btn-close-add-lc-modal">✕</button>
|
|
</div>
|
|
|
|
<form id="form-add-lc" style="display: flex; flex-direction: column; flex: 1; min-height: 0;">
|
|
<!-- 1. Selected Lightcone Preview Strip -->
|
|
<div id="add-lc-preview-banner" style="display: flex; gap: 0.85rem; align-items: center; background: rgba(251, 191, 36, 0.08); border: 1.5px solid var(--accent-gold); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; margin-bottom: 0.75rem;">
|
|
<img id="add-lc-preview-thumb" src="" alt="" style="width: 44px; height: 60px; border-radius: 4px; object-fit: cover; border: 1px solid var(--accent-gold); background: #0b0d14; flex-shrink: 0;">
|
|
<div style="flex: 1; min-width: 0;">
|
|
<div style="font-size: 0.7rem; color: var(--accent-gold); font-weight: 800; text-transform: uppercase;">
|
|
✓ กรวยแสงที่เลือก (Selected)
|
|
</div>
|
|
<div id="add-lc-preview-name" style="font-weight: 800; font-size: 0.95rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">-</div>
|
|
<div id="add-lc-preview-meta" style="display: flex; gap: 0.65rem; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; align-items: center; flex-wrap: wrap;">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
<input type="hidden" id="add-lc-selected-id" value="23001">
|
|
<input type="hidden" id="add-lc-select" value="23001">
|
|
</div>
|
|
|
|
<!-- 2. Search & Filter Bar -->
|
|
<div style="display: flex; gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: wrap;">
|
|
<input type="text" id="add-lc-search" class="form-input" placeholder="🔍 ค้นหากรวยแสง (ชื่อหรือ ID)..." style="flex: 1; min-width: 160px;">
|
|
<select id="add-lc-filter-path" class="form-select" style="max-width: 140px;">
|
|
<option value="all">ทุกสาย (All)</option>
|
|
<option value="Destruction">ทำลายล้าง</option>
|
|
<option value="Hunt">ล่าสังหาร</option>
|
|
<option value="Erudition">ปัญญา</option>
|
|
<option value="Harmony">ประสาน</option>
|
|
<option value="Nihility">ลบล้าง</option>
|
|
<option value="Preservation">อนุรักษ์</option>
|
|
<option value="Abundance">เฟื่องฟู</option>
|
|
<option value="Remembrance">ความทรงจำ</option>
|
|
<option value="Elation">ปีติ</option>
|
|
</select>
|
|
<select id="add-lc-filter-rarity" class="form-select" style="max-width: 110px;">
|
|
<option value="all">ทุกระดับดาว</option>
|
|
<option value="5" selected>★5 ดาว</option>
|
|
<option value="4">★4 ดาว</option>
|
|
<option value="3">★3 ดาว</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 3. Visual Grid Container -->
|
|
<div id="add-lc-visual-grid" class="add-lc-grid-container" style="flex: 1; min-height: 180px; max-height: 280px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.5rem; padding: 0.35rem; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 0.75rem;">
|
|
<!-- Dynamically populated by JS -->
|
|
</div>
|
|
|
|
<!-- 4. Level, Promotion, Superimpose, and Equip Avatar -->
|
|
<div class="grid-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; margin-bottom: 0.75rem; align-items: end;">
|
|
<div class="form-group" style="margin-bottom: 0;">
|
|
<label class="form-label" data-i18n="modalColLevel" style="font-size: 0.75rem;">เลเวล (1-80)</label>
|
|
<input type="number" id="add-lc-level" class="form-input" min="1" max="80" value="80" required>
|
|
</div>
|
|
<div class="form-group" style="margin-bottom: 0;">
|
|
<label class="form-label" data-i18n="lblPromotion" style="font-size: 0.75rem;">เลื่อนขั้น (0-6)</label>
|
|
<input type="number" id="add-lc-promotion" class="form-input" min="0" max="6" value="6" required>
|
|
</div>
|
|
<div class="form-group" style="margin-bottom: 0;">
|
|
<label class="form-label" style="font-size: 0.75rem;">Superimpose (ขัดเกลา)</label>
|
|
<select id="add-lc-rank" class="form-select" required>
|
|
<option value="5" selected>S5 (ขัดเกลา 5)</option>
|
|
<option value="4">S4 (ขัดเกลา 4)</option>
|
|
<option value="3">S3 (ขัดเกลา 3)</option>
|
|
<option value="2">S2 (ขัดเกลา 2)</option>
|
|
<option value="1">S1 (ขัดเกลา 1)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" style="margin-bottom: 0;">
|
|
<label class="form-label" data-i18n="lblEquipAvatar" style="font-size: 0.75rem;">สวมใส่ให้ตัวละคร (ถ้าต้องการ)</label>
|
|
<select id="add-lc-avatar" class="form-select">
|
|
<option value="0" data-i18n="unassigned">-- ยังไม่สวมใส่ (เก็บในคลัง) --</option>
|
|
<!-- Injected by JS -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 5. Footer Buttons -->
|
|
<div style="display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.08);">
|
|
<button type="button" class="btn btn-secondary" id="btn-cancel-add-lc" data-i18n="btnCancel">ยกเลิก</button>
|
|
<button type="submit" class="btn btn-success" data-i18n="btnAddLcSubmit">💾 เพิ่มลง FreeSR</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Relic Modal -->
|
|
<div class="modal-overlay" id="modal-add-relic">
|
|
<div class="modal-content" style="max-width: 580px;">
|
|
<div class="modal-header">
|
|
<h3 style="font-weight: 800;" data-i18n="modalAddRelicTitle">🛡️ เพิ่มรีลิกส์ลง FreeSR</h3>
|
|
<button type="button" class="btn btn-sm btn-secondary" id="btn-close-add-relic-modal">✕</button>
|
|
</div>
|
|
<form id="form-add-relic">
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="lblSelectRelicSet">เลือกเซ็ตรีลิกส์</label>
|
|
<select id="add-relic-set" class="form-select" required>
|
|
<!-- Injected by JS -->
|
|
</select>
|
|
</div>
|
|
<div class="grid-2" style="gap: 0.75rem; margin-bottom: 1rem;">
|
|
<div class="form-group" style="margin-bottom: 0;">
|
|
<label class="form-label" data-i18n="lblRelicSlot">ชิ้นส่วน (Slot)</label>
|
|
<select id="add-relic-slot" class="form-select" required>
|
|
<option value="1">1: ส่วนหัว (Head / HP)</option>
|
|
<option value="2">2: ส่วนมือ (Hands / ATK)</option>
|
|
<option value="3">3: ลำตัว (Body)</option>
|
|
<option value="4">4: รองเท้า (Feet)</option>
|
|
<option value="5">5: ลูกแก้ว (Planar Sphere)</option>
|
|
<option value="6">6: สร้อยเชื่อมต่อ (Link Rope)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" style="margin-bottom: 0;">
|
|
<label class="form-label" data-i18n="modalColLevel">เลเวล (0-15)</label>
|
|
<input type="number" id="add-relic-level" class="form-input" min="0" max="15" value="15" required>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="lblMainAffix">สเตตัสหลัก (Main Affix)</label>
|
|
<select id="add-relic-main-affix" class="form-select" required>
|
|
<!-- Dynamic according to selected slot -->
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="lblEquipAvatar">สวมใส่ให้ตัวละคร (ถ้าต้องการ)</label>
|
|
<select id="add-relic-avatar" class="form-select">
|
|
<option value="0" data-i18n="unassigned">-- ยังไม่สวมใส่ (เก็บในคลัง) --</option>
|
|
<!-- Injected by JS -->
|
|
</select>
|
|
</div>
|
|
<div style="display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem;">
|
|
<button type="button" class="btn btn-secondary" id="btn-cancel-add-relic" data-i18n="btnCancel">ยกเลิก</button>
|
|
<button type="submit" class="btn btn-success" data-i18n="btnAddRelicSubmit">💾 เพิ่มลง FreeSR</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Select Relic for Specific Slot (Large, Spacious & Easy to Use) -->
|
|
<div class="modal-overlay" id="modal-select-relic-slot">
|
|
<div class="modal-content relic-picker-modal-content">
|
|
<div class="modal-header" style="margin-bottom: 0.75rem;">
|
|
<div style="display: flex; align-items: center; gap: 0.65rem;">
|
|
<img id="modal-slot-picker-icon" src="" alt="Slot" style="width: 28px; height: 28px; object-fit: contain;">
|
|
<div>
|
|
<h3 id="modal-slot-picker-title" style="font-weight: 800; font-size: 1.15rem; margin: 0;" data-i18n="slotPickerTitle">
|
|
🛡️ เลือกสวมใส่รีลิกส์
|
|
</h3>
|
|
<div id="modal-slot-picker-subtitle" style="font-size: 0.75rem; color: var(--text-muted); margin-top: 2px;">
|
|
เลือกสวมใส่ชิ้นที่มีอยู่ หรือสร้างชิ้นใหม่ตรงตามบิลด์ที่แนะนำ
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-secondary" id="btn-close-slot-picker">✕</button>
|
|
</div>
|
|
|
|
<!-- Current Equipped Relic Banner with Unequip Button -->
|
|
<div id="slot-picker-current-box" class="slot-picker-current-banner">
|
|
<!-- Injected currently equipped relic or empty status -->
|
|
</div>
|
|
|
|
<!-- Tabs Navigation -->
|
|
<div class="slot-picker-tabs">
|
|
<button type="button" class="slot-picker-tab-btn active" id="tab-btn-relic-quick" data-pickertab="slot-picker-quick-tab">
|
|
<span data-i18n="tabQuickGen">⚡ สวมใส่ / สร้างชิ้นแนะนำ</span>
|
|
</button>
|
|
<button type="button" class="slot-picker-tab-btn" id="tab-btn-relic-inventory" data-pickertab="slot-picker-inventory-tab">
|
|
<span data-i18n="tabFromInventory">📦 เลือกจากคลัง</span> (<span id="slot-picker-inv-count">0</span>)
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab 1: Quick & Recommended Builder -->
|
|
<div id="slot-picker-quick-tab" class="slot-picker-tab-pane">
|
|
<!-- Recommended Fast Equip Card -->
|
|
<div class="slot-picker-rec-highlight" id="slot-picker-rec-highlight">
|
|
<!-- Injected recommended set card and instant equip button -->
|
|
</div>
|
|
|
|
<!-- Custom Relic Creator -->
|
|
<div>
|
|
<div style="font-weight: 700; font-size: 0.85rem; color: var(--text-highlight); margin-bottom: 0.5rem;" data-i18n="chooseSet">
|
|
เลือกเซ็ตที่ต้องการ:
|
|
</div>
|
|
<div class="slot-picker-set-grid" id="slot-picker-set-grid">
|
|
<!-- Injected set cards for this slot -->
|
|
</div>
|
|
|
|
<div style="font-weight: 700; font-size: 0.85rem; color: var(--text-highlight); margin-top: 0.85rem; margin-bottom: 0.5rem;" data-i18n="chooseMainStat">
|
|
เลือกสเตตัสหลัก (Main Stat):
|
|
</div>
|
|
<div class="slot-picker-mainstat-pills" id="slot-picker-mainstat-pills">
|
|
<!-- Injected main stat pill buttons -->
|
|
</div>
|
|
|
|
<!-- Substats Customizer -->
|
|
<div class="slot-picker-substats-section">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem;">
|
|
<div style="font-weight: 700; font-size: 0.85rem; color: var(--text-highlight);">
|
|
🔧 ปรับแต่งออฟรอง (Substats Customizer):
|
|
</div>
|
|
<div class="substat-presets-strip">
|
|
<button type="button" class="btn-substat-preset" data-preset="god" title="ออฟแนะนำตามตัวละคร">⭐ ออฟเทพแนะนำ</button>
|
|
<button type="button" class="btn-substat-preset" data-preset="crit" title="เน้นคริล้วน">🎯 คริ Rate/DMG</button>
|
|
<button type="button" class="btn-substat-preset" data-preset="spd" title="เน้นความเร็ว">⚡ สปีด SPD</button>
|
|
<button type="button" class="btn-substat-preset" data-preset="break" title="เน้นทำลายล้าง">🔨 Break Effect</button>
|
|
<button type="button" class="btn-substat-preset" data-preset="tank" title="เน้นถึก ป้องกัน เลือด">🛡️ ถึก HP/DEF</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slot-picker-substats-grid" id="slot-picker-substats-grid">
|
|
<!-- Injected by JS: 4 substat rows with selects, steppers & previews -->
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 0.65rem; padding: 0.4rem 0.75rem; background: rgba(10, 14, 23, 0.75); border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-size: 0.775rem;">
|
|
<span style="color: var(--text-muted);">
|
|
💡 รวมจำนวนโรล (Rolls): <strong id="slot-picker-total-rolls" style="color: var(--accent-gold); font-family: monospace; font-size: 0.9rem;">9</strong> / 9 โรล (ระดับ 5★ เลเวล 15)
|
|
</span>
|
|
<button type="button" class="btn btn-sm btn-secondary" id="btn-reset-substats" style="font-size: 0.725rem; padding: 0.2rem 0.6rem;">↺ คืนค่าเดิม</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
|
|
<div id="slot-picker-edit-mode-indicator" style="font-size: 0.8rem; color: var(--accent-cyan); font-weight: 700;"></div>
|
|
<button type="button" class="btn btn-primary" id="btn-slot-picker-confirm-custom" style="padding: 0.65rem 1.4rem; font-weight: 800; font-size: 0.9rem;" data-i18n="btnEquipInstant">
|
|
⚡ สวมใส่ชิ้นนี้ทันที (+15 5★ ออฟที่เลือก)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab 2: Inventory Grid -->
|
|
<div id="slot-picker-inventory-tab" class="slot-picker-tab-pane" style="display: none;">
|
|
<div id="slot-picker-inventory-list" class="slot-picker-inv-grid">
|
|
<!-- Injected cards of matching slot relics -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Select Lightcone for Avatar -->
|
|
<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-header">
|
|
<h3 id="modal-lc-picker-title" style="font-weight: 800;" data-i18n="lcPickerTitle">
|
|
🗡️ เลือกสวมใส่กรวยแสง (Light Cone)
|
|
</h3>
|
|
<button type="button" class="btn btn-sm btn-secondary" id="btn-close-lc-picker">✕</button>
|
|
</div>
|
|
|
|
<!-- Search & Filters -->
|
|
<div style="display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap;">
|
|
<input type="text" id="lc-picker-search" class="form-input" placeholder="🔍 ค้นหาชื่อหรือ ID กรวยแสง..." style="flex: 1; min-width: 160px;">
|
|
<select id="lc-picker-filter-path" class="form-select" style="max-width: 140px;">
|
|
<option value="all">ทุกสาย</option>
|
|
<option value="same" selected>ตรงสายตัวละคร</option>
|
|
<option value="Destruction">ทำลายล้าง</option>
|
|
<option value="Hunt">ล่าสังหาร</option>
|
|
<option value="Erudition">ปัญญา</option>
|
|
<option value="Harmony">ประสาน</option>
|
|
<option value="Nihility">ลบล้าง</option>
|
|
<option value="Preservation">อนุรักษ์</option>
|
|
<option value="Abundance">เฟื่องฟู</option>
|
|
<option value="Remembrance">ความทรงจำ</option>
|
|
<option value="Elation">ปีติ</option>
|
|
</select>
|
|
<select id="lc-picker-rank" class="form-select" style="max-width: 110px;" title="ระดับการขัดเกลาเมื่อสวมใส่">
|
|
<option value="5" selected>ขัดเกลา S5</option>
|
|
<option value="4">ขัดเกลา S4</option>
|
|
<option value="3">ขัดเกลา S3</option>
|
|
<option value="2">ขัดเกลา S2</option>
|
|
<option value="1">ขัดเกลา S1</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Signature Recommendation Box -->
|
|
<div id="lc-picker-signature-box" style="display: none; background: rgba(251, 191, 36, 0.1); border: 1px dashed rgba(251, 191, 36, 0.5); border-radius: var(--radius-sm); padding: 0.65rem 0.85rem; margin-bottom: 0.75rem; align-items: center; justify-content: space-between; gap: 0.75rem;">
|
|
<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);">
|
|
<div style="min-width: 0;">
|
|
<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>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-gold" id="btn-lc-picker-quick-sig" data-i18n="lcPickerEquipSig">⚡ สวมใส่ชิ้นนี้</button>
|
|
</div>
|
|
|
|
<!-- Lightcones List Grid -->
|
|
<div id="lc-picker-list" style="flex: 1; min-height: 0; max-height: 380px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.5rem; padding-right: 0.35rem;">
|
|
<!-- Injected by JS -->
|
|
</div>
|
|
|
|
<!-- 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;">
|
|
<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" data-i18n="modalBtnClose">ปิด</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notification Container -->
|
|
<div class="toast-container" id="toast-container"></div>
|
|
|
|
<!-- Script Modules -->
|
|
<script type="module" src="js/app.js?v=2.3"></script>
|
|
</body>
|
|
</html>
|