feat: complete SrTool overhaul with lineup builder, character build modal, equipment, and FireflyGo/RobinSR modes
This commit is contained in:
1 parent
5cce9bdd04
commit
e1667fa109
3 files changed
+1067
-254
No files matched your search
+303
-103
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GaC-Srtool — FreeSR & Game Management Dashboard</title>
|
||||
<title>GaC-Srtool — Ultimate Star Rail Server & Build Manager</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌌</text></svg>">
|
||||
</head>
|
||||
@@ -14,54 +14,78 @@
|
||||
<div class="brand">
|
||||
<div class="brand-icon">✦</div>
|
||||
<div>
|
||||
<div class="brand-title" data-i18n="appName">GaC-Srtool</div>
|
||||
<div class="brand-subtitle" data-i18n="appSubtitle">Star Rail FreeSR & Server Controller</div>
|
||||
<div class="brand-title">GaC-Srtool</div>
|
||||
<div class="brand-subtitle">Star Rail FreeSR & Server Controller</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-controls">
|
||||
<!-- Language Selector -->
|
||||
<select id="lang-select" class="form-select btn-sm" style="width: auto; padding: 0.35rem 0.65rem; background: var(--bg-secondary); cursor: pointer;" title="Language / 语言 / 言語 / ภาษา">
|
||||
<!-- Injected by i18n.js -->
|
||||
<!-- 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 (เซิร์ฟเวอร์หลัก / Full Control)</option>
|
||||
<option value="firefly">🔥 FireflyGo (FreeSR Compatible)</option>
|
||||
<option value="robin">🕊️ RobinSR (FreeSR Compatible)</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>
|
||||
|
||||
<div class="connection-pill" id="btn-open-settings" title="Click to configure API connection">
|
||||
<!-- 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" data-i18n="checking">กำลังตรวจสอบ...</span>
|
||||
<span id="connection-status-text">กำลังตรวจสอบ...</span>
|
||||
</div>
|
||||
<button class="btn btn-secondary btn-sm" id="btn-quick-ping" title="Refresh connection">
|
||||
<span data-i18n="refresh">🔄 รีเฟรช</span>
|
||||
|
||||
<button class="btn btn-secondary btn-sm" id="btn-quick-ping" title="รีเฟรชการเชื่อมต่อ">
|
||||
🔄 รีเฟรช
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<nav class="nav-tabs">
|
||||
<button class="tab-btn active" data-tab="tab-dashboard" data-i18n="tabDashboard">📊 แดชบอร์ด (Overview)</button>
|
||||
<button class="tab-btn" data-tab="tab-avatars" data-i18n="tabAvatars">👥 ตัวละคร (Avatars)</button>
|
||||
<button class="tab-btn" data-tab="tab-exrank" data-i18n="tabExrank">⚡ Ex-Rank (สกิลพิเศษ)</button>
|
||||
<button class="tab-btn" data-tab="tab-teleport" data-i18n="tabTeleport">🚀 วาร์ปฉาก (Teleport)</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">⚙️ ตั้งค่า & คู่มือ Host</button>
|
||||
<button class="tab-btn active" data-tab="tab-dashboard">📊 แดชบอร์ด & ทีม (Lineup)</button>
|
||||
<button class="tab-btn" data-tab="tab-avatars">👥 ตัวละคร (Avatars & Build)</button>
|
||||
<button class="tab-btn" data-tab="tab-equipment">🗡️ กรวยแสง & รีลิกส์ (Equipment)</button>
|
||||
<button class="tab-btn" data-tab="tab-persistent" id="tab-btn-persistent">💾 จัดการเซฟ GaC (Persistent)</button>
|
||||
<button class="tab-btn" data-tab="tab-exrank">⚡ Ex-Rank (สกิลพิเศษ)</button>
|
||||
<button class="tab-btn" data-tab="tab-teleport">🚀 วาร์ปฉาก (Teleport)</button>
|
||||
<button class="tab-btn" data-tab="tab-json">📝 จัดการไฟล์ JSON</button>
|
||||
<button class="tab-btn" data-tab="tab-settings">⚙️ ตั้งค่า & ข้อมูลโหมด</button>
|
||||
</nav>
|
||||
|
||||
<!-- Main Container -->
|
||||
<main class="main-container">
|
||||
|
||||
<!-- 1. Dashboard Tab -->
|
||||
<!-- 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">ตัวละครที่ครอบครอง (Avatars)</div>
|
||||
<div class="stat-label">ตัวละครที่ครอบครอง (Avatars)</div>
|
||||
</div>
|
||||
<div class="card stat-box">
|
||||
<div class="stat-number" id="stat-lightcones">0</div>
|
||||
<div class="stat-label" data-i18n="statLightcones">กรวยแสง (Lightcones)</div>
|
||||
<div class="stat-label">กรวยแสง (Lightcones)</div>
|
||||
</div>
|
||||
<div class="card stat-box">
|
||||
<div class="stat-number" id="stat-relics">0</div>
|
||||
<div class="stat-label" data-i18n="statRelics">รีลิกส์ (Relics)</div>
|
||||
<div class="stat-label">รีลิกส์ (Relics)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Party Lineup Visualizer -->
|
||||
<div class="card" style="margin-bottom: 1.5rem;">
|
||||
<div class="card-title">
|
||||
<span>🎮 สมาชิกในทีมปัจจุบัน (Active Party Lineup)</span>
|
||||
<span style="font-size: 0.8rem; color: var(--accent-cyan); font-weight: normal;">* คลิกที่ช่องเพื่อเปลี่ยนตัวละครในทีม</span>
|
||||
</div>
|
||||
<div class="lineup-grid" id="lineup-container">
|
||||
<!-- Rendered by JS -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -69,12 +93,16 @@
|
||||
<!-- Server & Map Card -->
|
||||
<div class="card">
|
||||
<div class="card-title">
|
||||
<span data-i18n="serverStatusTitle">📍 สถานะเซิร์ฟเวอร์ & ตำแหน่งปัจจุบัน</span>
|
||||
<span>📍 สถานะเซิร์ฟเวอร์ & พิกัดปัจจุบัน</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="lblApiGatewayUrl">API Gateway Endpoint</span>
|
||||
<span class="form-label">โหมดเซิร์ฟเวอร์ที่ใช้งาน</span>
|
||||
<strong id="lbl-active-mode" style="color: var(--accent-cyan);">GaC-hkrpg-go</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span class="form-label">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;">
|
||||
@@ -88,7 +116,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="form-label" data-i18n="coords">พิกัดตัวละคร (X, Y, Z)</span>
|
||||
<span class="form-label">พิกัดตัวละคร (X, Y, Z)</span>
|
||||
<span id="lbl-coordinates" style="color: var(--text-muted); font-size: 0.85rem;">-</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -96,84 +124,192 @@
|
||||
|
||||
<!-- Quick Actions Card -->
|
||||
<div class="card">
|
||||
<div class="card-title" data-i18n="quickActionsTitle">⚡ ดำเนินการด่วน (Quick Actions)</div>
|
||||
<p class="card-subtitle" data-i18n="quickActionsSubtitle">สั่งการส่งไปยัง REST API Gateway ทันที</p>
|
||||
<div class="card-title">⚡ ดำเนินการด่วน (Quick Actions)</div>
|
||||
<p class="card-subtitle">ส่งคำสั่งไปยังเซิร์ฟเวอร์ทันที</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
|
||||
<button class="btn btn-gold" id="btn-quick-max-all">
|
||||
<span data-i18n="btnMaxAll">⭐ ปรับเลเวล 80 & ปลด E6 ตัวละครทั้งหมด (Max All)</span>
|
||||
⭐ ปรับเลเวล 80 & ปลด E6 ตัวละครทั้งหมด (Max All)
|
||||
</button>
|
||||
<button class="btn btn-primary" id="btn-quick-warp-express">
|
||||
<span data-i18n="btnWarpExpress">🚂 วาร์ปกลับรถไฟ Astral Express ทันที</span>
|
||||
🚂 วาร์ปกลับห้องรับรองรถไฟ Astral Express ทันที
|
||||
</button>
|
||||
<button class="btn btn-secondary" id="btn-quick-sync-persistent">
|
||||
<span data-i18n="btnSyncPersistent">💾 ซิงค์ข้อมูล Persistent ล่าสุด</span>
|
||||
💾 ซิงค์ข้อมูล Persistent / เซฟล่าสุด
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current Lineup -->
|
||||
<div class="card" style="margin-top: 1.5rem;">
|
||||
<div class="card-title" data-i18n="currentLineupTitle">🎮 ทีมปัจจุบัน (Current Lineup)</div>
|
||||
<div id="lineup-container" class="grid-4" style="margin-top: 0.5rem;">
|
||||
<div class="card" style="text-align: center; color: var(--text-muted);">กำลังโหลดข้อมูลทีม...</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. Avatars Tab -->
|
||||
<!-- 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: 480px;">
|
||||
<input type="text" id="avatar-search" class="form-input" data-i18n-placeholder="searchPlaceholder" placeholder="🔍 ค้นหาชื่อหรือ ID ตัวละคร...">
|
||||
<div style="display: flex; gap: 0.75rem; flex: 1; max-width: 520px;">
|
||||
<input type="text" id="avatar-search" class="form-input" placeholder="🔍 ค้นหาชื่อหรือ ID ตัวละคร...">
|
||||
<select id="avatar-filter-rarity" class="form-select" style="max-width: 140px;">
|
||||
<option value="all" data-i18n="filterAllRarity">ทุกระดับดาว</option>
|
||||
<option value="5" data-i18n="filter5Star">5 ดาว (SSR)</option>
|
||||
<option value="4" data-i18n="filter4Star">4 ดาว (SR)</option>
|
||||
<option value="all">ทุกระดับดาว</option>
|
||||
<option value="5">5 ดาว (SSR)</option>
|
||||
<option value="4">4 ดาว (SR)</option>
|
||||
</select>
|
||||
<select id="avatar-filter-element" class="form-select" style="max-width: 140px;">
|
||||
<option value="all">ทุกธาตุ</option>
|
||||
<option value="Fire">ไฟ (Fire)</option>
|
||||
<option value="Ice">น้ำแข็ง (Ice)</option>
|
||||
<option value="Lightning">สายฟ้า (Lightning)</option>
|
||||
<option value="Wind">ลม (Wind)</option>
|
||||
<option value="Physical">กายภาพ (Physical)</option>
|
||||
<option value="Quantum">ควอนตัม (Quantum)</option>
|
||||
<option value="Imaginary">จินตภาพ (Imaginary)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.5rem;">
|
||||
<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>
|
||||
<button class="btn btn-gold" id="btn-max-all-avatars">⭐ ปรับ Max E6 ทุกตัว</button>
|
||||
<button class="btn btn-secondary" id="btn-reload-avatars">🔄 รีโหลด</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;">
|
||||
กำลังดึงข้อมูลตัวละครจากเซิร์ฟเวอร์...
|
||||
กำลังดึงข้อมูลตัวละคร...
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. Ex-Rank Tab -->
|
||||
<!-- 3. Equipment Tab (Lightcones & Relics) -->
|
||||
<section id="tab-equipment" class="tab-content">
|
||||
<div class="grid-2">
|
||||
<!-- Lightcones Card -->
|
||||
<div class="card">
|
||||
<div class="card-title">
|
||||
<span>🗡️ กรวยแสงในคลัง (Lightcones)</span>
|
||||
<span class="btn-sm btn-secondary" id="badge-total-lc">0 ชิ้น</span>
|
||||
</div>
|
||||
<p class="card-subtitle">รายการกรวยแสงทั้งหมดจาก freesr-data.json</p>
|
||||
<div id="lightcones-list" style="max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem;">
|
||||
<div style="color: var(--text-muted); text-align: center; padding: 1.5rem;">กำลังโหลดข้อมูลกรวยแสง...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Relics Card -->
|
||||
<div class="card">
|
||||
<div class="card-title">
|
||||
<span>🛡️ รีลิกส์ในคลัง (Relics)</span>
|
||||
<span class="btn-sm btn-secondary" id="badge-total-relics">0 ชิ้น</span>
|
||||
</div>
|
||||
<p class="card-subtitle">รายการรีลิกส์ทั้งหมดจาก freesr-data.json</p>
|
||||
<div id="relics-list" style="max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem;">
|
||||
<div style="color: var(--text-muted); text-align: center; padding: 1.5rem;">กำลังโหลดข้อมูลรีลิกส์...</div>
|
||||
</div>
|
||||
</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>💾 จัดการไฟล์เซฟ Persistent (GaC-hkrpg-go Dedicated)</span>
|
||||
<span class="btn-sm btn-success">เซิร์ฟเวอร์ของเราเอง</span>
|
||||
</div>
|
||||
<p class="card-subtitle">
|
||||
ไฟล์ <code>persistent</code> เก็บการตั้งค่าสถานะผู้เล่นเฉพาะของเซิร์ฟเวอร์ GaC เช่น เพศ/ธาตุตัวเอก, สเตตัส March 7th, สวิตช์ฟังก์ชัน Global ต่างๆ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid-2">
|
||||
<!-- Main Character & March Path -->
|
||||
<div class="card">
|
||||
<div class="card-title">👤 ผู้บุกเบิก & March 7th</div>
|
||||
<form id="form-persistent-chars">
|
||||
<div class="form-group">
|
||||
<label class="form-label">เพศ & ธาตุของตัวเอก (Main Character)</label>
|
||||
<select id="persistent-mc-select" class="form-select">
|
||||
<option value="MalePhysical">ผู้บุกเบิกชาย - กายภาพ (Male Physical)</option>
|
||||
<option value="FemalePhysical">ผู้บุกเบิกหญิง - กายภาพ (Female Physical)</option>
|
||||
<option value="MalePreservation">ผู้บุกเบิกชาย - ไฟ (Male Preservation)</option>
|
||||
<option value="FemalePreservation">ผู้บุกเบิกหญิง - ไฟ (Female Preservation)</option>
|
||||
<option value="MaleHarmony">ผู้บุกเบิกชาย - ประสาน (Male Harmony)</option>
|
||||
<option value="FemaleHarmony">ผู้บุกเบิกหญิง - ประสาน (Female Harmony)</option>
|
||||
<option value="MaleRemembrance">ผู้บุกเบิกชาย - ความทรงจำ (Male Remembrance)</option>
|
||||
<option value="FemaleRemembrance">ผู้บุกเบิกหญิง - ความทรงจำ (Female Remembrance)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">สายของ March 7th</label>
|
||||
<select id="persistent-march-select" class="form-select">
|
||||
<option value="MarchHunt">March 7th - ล่าสังหาร (The Hunt / จินตภาพ)</option>
|
||||
<option value="MarchPreservation">March 7th - อนุรักษ์ (Preservation / น้ำแข็ง)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary" style="width: 100%;">
|
||||
💾 บันทึกการตั้งค่าตัวละคร
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Global Features & Toggles -->
|
||||
<div class="card">
|
||||
<div class="card-title">⚙️ สวิตช์ระบบพิเศษของ 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);">เปิดใช้งานฟังก์ชันพิเศษ 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);">เปิดใช้งานฟังก์ชันพิเศษ Castorice ทั่วทั้งเซิร์ฟเวอร์</div>
|
||||
</div>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="toggle-castorice-global">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-success" id="btn-save-persistent-toggles">
|
||||
💾 บันทึกสวิตช์ 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>
|
||||
<span>⚡ ระบบปลดล็อค 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>
|
||||
<button class="btn btn-success btn-sm" id="btn-exrank-enable-all">เปิด Ex-Rank ทั้งหมด</button>
|
||||
<button class="btn btn-secondary btn-sm" id="btn-exrank-disable-all">ปิด Ex-Rank ทั้งหมด</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-subtitle" data-i18n="exrankSubtitle">
|
||||
<p class="card-subtitle">
|
||||
เปิดใช้งานพรสวรรค์และกลไกพิเศษ 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;">
|
||||
<div style="color: var(--text-muted); text-align: center; padding: 2rem;">
|
||||
กำลังโหลดข้อมูล Ex-Rank...
|
||||
</div>
|
||||
<!-- Rendered by JS -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. Teleport Tab -->
|
||||
<!-- 6. Teleport Tab -->
|
||||
<section id="tab-teleport" class="tab-content">
|
||||
<div class="grid-2">
|
||||
<!-- Presets -->
|
||||
<div class="card">
|
||||
<div class="card-title" data-i18n="presetsTitle">📍 จุดวาร์ปปลอดภัยยอดนิยม (Safe Presets)</div>
|
||||
<p class="card-subtitle" data-i18n="presetsSubtitle">คลิกจุดวาร์ปเพื่อย้ายฉากของผู้เล่นในไฟล์เซฟได้ทันที</p>
|
||||
<div class="card-title">📍 จุดวาร์ปปลอดภัยยอดนิยม (Safe Presets)</div>
|
||||
<p class="card-subtitle">คลิกจุดวาร์ปเพื่อย้ายฉากของผู้เล่นในไฟล์เซฟได้ทันที</p>
|
||||
<div id="teleport-presets-list" style="display: flex; flex-direction: column; gap: 0.6rem;">
|
||||
<!-- Rendered by JS -->
|
||||
</div>
|
||||
@@ -181,8 +317,8 @@
|
||||
|
||||
<!-- Custom Coordinate Warp -->
|
||||
<div class="card">
|
||||
<div class="card-title" data-i18n="customTeleportTitle">🎯 กำหนดพิกัดวาร์ปเอง (Custom Teleport)</div>
|
||||
<p class="card-subtitle" data-i18n="customTeleportSubtitle">ใส่ PlaneID, FloorID และ EntryID ตามต้องการ</p>
|
||||
<div class="card-title">🎯 กำหนดพิกัดวาร์ปเอง (Custom Teleport)</div>
|
||||
<p class="card-subtitle">ใส่ PlaneID, FloorID และ EntryID ตามต้องการ</p>
|
||||
|
||||
<form id="form-custom-teleport">
|
||||
<div class="grid-2" style="gap: 0.75rem;">
|
||||
@@ -215,7 +351,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 0.5rem;" data-i18n="btnExecuteWarp">
|
||||
<button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 0.5rem;">
|
||||
🚀 ยืนยันการวาร์ป (Execute Teleport)
|
||||
</button>
|
||||
</form>
|
||||
@@ -223,106 +359,170 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. JSON Management Tab -->
|
||||
<!-- 7. 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 (Save)</button>
|
||||
<button class="btn btn-sm btn-primary active" id="btn-select-freesr">📄 freesr-data.json</button>
|
||||
<button class="btn btn-sm btn-secondary" id="btn-select-persistent">💾 persistent (Save)</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>
|
||||
<button class="btn btn-sm btn-secondary" id="btn-json-beautify">✨ จัดรูปแบบ JSON</button>
|
||||
<button class="btn btn-sm btn-secondary" id="btn-json-download">📥 ดาวน์โหลด 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;">
|
||||
<span>📤 อัปโหลดไฟล์</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>
|
||||
<button class="btn btn-sm btn-success" id="btn-json-save">💾 บันทึกไปยังเซิร์ฟเวอร์</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">Tip: สามารถแก้ไขค่าดิบแล้วกด 'บันทึกไปยังเซิร์ฟเวอร์' ได้ทันที</span>
|
||||
<span id="json-status-info">พร้อมใช้งาน</span>
|
||||
<span>Tip: สามารถแก้ไขค่าดิบแล้วกด 'บันทึกไปยังเซิร์ฟเวอร์' ได้ทันที</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. Settings & GitHub Hosting Guide -->
|
||||
<!-- 8. Settings & Compatibility Guide -->
|
||||
<section id="tab-settings" class="tab-content">
|
||||
<div class="grid-2">
|
||||
<!-- Endpoint config -->
|
||||
<div class="card">
|
||||
<div class="card-title" data-i18n="apiSettingsTitle">⚙️ ตั้งค่าการเชื่อมต่อ API Gateway</div>
|
||||
<p class="card-subtitle" data-i18n="apiSettingsSubtitle">ปรับเปลี่ยนพอร์ตหรือ IP ได้ตามไฟล์ server.json ของคุณ</p>
|
||||
<div class="card-title">⚙️ ตั้งค่าการเชื่อมต่อ API Gateway</div>
|
||||
<p class="card-subtitle">ปรับเปลี่ยนพอร์ตหรือ IP ได้ตามเซิร์ฟเวอร์ที่คุณใช้</p>
|
||||
|
||||
<form id="form-settings">
|
||||
<div class="form-group">
|
||||
<label class="form-label" data-i18n="lblApiGatewayUrl">REST API Gateway URL</label>
|
||||
<label class="form-label">โหมดเซิร์ฟเวอร์ (Target Server)</label>
|
||||
<select id="setting-server-mode" class="form-select">
|
||||
<option value="gac">⚡ GaC-hkrpg-go (เซิร์ฟเวอร์หลัก - แก้ได้ทั้ง FreeSR + Persistent)</option>
|
||||
<option value="firefly">🔥 FireflyGo (FreeSR Standard)</option>
|
||||
<option value="robin">🕊️ RobinSR (FreeSR Standard)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">REST API Gateway URL</label>
|
||||
<input type="text" id="setting-api-url" class="form-input" placeholder="http://localhost:21000">
|
||||
<small style="color: var(--text-muted); display: block; margin-top: 0.35rem;">
|
||||
* Port 21000 by default (GaC-hkrpg-go SDK Server)
|
||||
* ค่าเริ่มต้นพอร์ต 21000 (SDK server)
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" data-i18n="lblPingInterval">ความถี่ในการตรวจสอบสถานะ (วินาที)</label>
|
||||
<label class="form-label">ความถี่ในการตรวจสอบสถานะ (วินาที)</label>
|
||||
<input type="number" id="setting-ping-interval" class="form-input" min="3" max="60" value="10">
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.75rem;">
|
||||
<button type="submit" class="btn btn-success" style="flex: 1;" data-i18n="btnSaveSettings">💾 บันทึกการตั้งค่า</button>
|
||||
<button type="button" class="btn btn-secondary" id="btn-reset-settings" data-i18n="btnResetDefault">คืนค่าเริ่มต้น</button>
|
||||
<button type="submit" class="btn btn-success" style="flex: 1;">💾 บันทึกการตั้งค่า</button>
|
||||
<button type="button" class="btn btn-secondary" id="btn-reset-settings">คืนค่าเริ่มต้น</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- GitHub Pages Hosting Guide -->
|
||||
<!-- Mode Explanation Card -->
|
||||
<div class="card">
|
||||
<div class="card-title" data-i18n="hostGuideTitle">🌐 วิธีนำขึ้นโฮสต์ GitHub Pages (ฟรี 100%)</div>
|
||||
<p class="card-subtitle" data-i18n="hostGuideSubtitle">สามารถเปิดใช้งานเว็บนี้บนอินเทอร์เน็ตได้โดยไม่ต้องเสียค่าโฮสต์ใดๆ</p>
|
||||
|
||||
<ol style="margin-left: 1.25rem; font-size: 0.875rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.65rem;">
|
||||
<li>
|
||||
<strong style="color: var(--text-main);">1. Create GitHub Repository:</strong><br>
|
||||
Create new repo e.g. <code>GaC-srtool</code>
|
||||
</li>
|
||||
<li>
|
||||
<strong style="color: var(--text-main);">2. Push to GitHub:</strong><br>
|
||||
<code>git remote add origin https://github.com/<user>/GaC-srtool.git</code><br>
|
||||
<code>git add . && git commit -m "Init" && git push -u origin main</code>
|
||||
</li>
|
||||
<li>
|
||||
<strong style="color: var(--text-main);">3. Enable GitHub Pages:</strong><br>
|
||||
Go to Repo > <strong>Settings</strong> > <strong>Pages</strong> > Source: <strong>Deploy from a branch</strong> > Branch: <strong>main</strong> / (root) > Click <strong>Save</strong>
|
||||
</li>
|
||||
<li>
|
||||
<strong style="color: var(--text-main);">4. Done:</strong><br>
|
||||
Your dashboard will be online at <code>https://<user>.github.io/GaC-srtool/</code>!
|
||||
</li>
|
||||
</ol>
|
||||
<div class="card-title">💡 ข้อมูลโหมดเซิร์ฟเวอร์ & สำหรับผู้อื่น</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.85rem; font-size: 0.875rem; color: var(--text-muted);">
|
||||
<div>
|
||||
<strong style="color: var(--accent-cyan);">⚡ GaC-hkrpg-go (Full Access):</strong><br>
|
||||
โหมดเฉพาะของเซิร์ฟเวอร์เรา สามารถอ่านและเขียนทั้ง <code>freesr-data.json</code> และ <code>persistent</code> ได้แบบ 100% เรียลไทม์ผ่าน REST API Gateway พร้อมระบบ Ex-Rank และ Teleport
|
||||
</div>
|
||||
<div>
|
||||
<strong style="color: #f87171;">🔥 FireflyGo:</strong><br>
|
||||
สำหรับผู้ใช้งานที่รันเซิร์ฟเวอร์ FireflyGo สามารถใช้เครื่องมือนี้จัดทีม, แม็กซ์ตัวละคร, หรือปรับแต่งอาวุธ/รีลิกส์ แล้วสั่งซิงค์ผ่าน <code>/srtools</code> หรือกดดาวน์โหลดไฟล์ <code>freesr-data.json</code> ไปวางในเซิร์ฟเวอร์ได้ทันที
|
||||
</div>
|
||||
<div>
|
||||
<strong style="color: #c084fc;">🕊️ RobinSR:</strong><br>
|
||||
สำหรับผู้ใช้งาน RobinSR สามารถใช้เครื่องมือนี้ในการสร้างเซฟและตัวละครตามมาตรฐาน FreeSR ได้อย่างสมบูรณ์แบบ
|
||||
</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: 640px;">
|
||||
<div class="modal-header">
|
||||
<h3 id="modal-char-title" style="font-weight: 800; font-size: 1.15rem; color: var(--text-highlight);">
|
||||
ปรับแต่งตัวละคร
|
||||
</h3>
|
||||
<button class="btn btn-sm btn-secondary" id="btn-close-avatar-modal">✕</button>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.25rem;">
|
||||
<div class="avatar-image-container" style="width: 76px; height: 76px;">
|
||||
<img id="modal-char-img" class="avatar-img" src="" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<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;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-2" style="gap: 1rem; margin-bottom: 1rem;">
|
||||
<div class="form-group">
|
||||
<label class="form-label">ระดับเลเวล (Level 1-80)</label>
|
||||
<input type="number" id="modal-char-level" class="form-input" min="1" max="80" value="80">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">การเลื่อนขั้น (Ascension 0-6)</label>
|
||||
<input type="number" id="modal-char-promotion" class="form-input" min="0" max="6" value="6">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Eidolon (E0 - E6)</label>
|
||||
<div class="eidolon-buttons" id="modal-char-eidolon-btns" style="margin-top: 0.35rem;">
|
||||
<!-- Injected pips -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 0.75rem; margin-top: 1.5rem; justify-content: flex-end;">
|
||||
<button class="btn btn-gold" id="btn-modal-max-skills">
|
||||
⭐ อัพสกิล & Traces ทั้งหมด (10/10)
|
||||
</button>
|
||||
<button class="btn btn-success" id="btn-modal-save-avatar">
|
||||
💾 บันทึกตัวละคร
|
||||
</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;">เลือกตัวละครเข้าทีม</h3>
|
||||
<button class="btn btn-sm btn-secondary" id="btn-close-picker-modal">✕</button>
|
||||
</div>
|
||||
<input type="text" id="picker-search" class="form-input" placeholder="🔍 ค้นหาตัวละครเพื่อลงทีม..." style="margin-bottom: 1rem;">
|
||||
<div id="picker-avatars-grid" class="grid-4" style="overflow-y: auto; flex: 1; 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="apiSettingsTitle">⚙️ ตั้งค่าการเชื่อมต่อ API Server</h3>
|
||||
<h3 style="font-weight: 700;">⚙️ ตั้งค่าการเชื่อมต่อ 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>
|
||||
<label class="form-label">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">Cancel</button>
|
||||
<button class="btn btn-primary" id="btn-modal-save" data-i18n="btnSaveSettings">บันทึก & ทดสอบ</button>
|
||||
<button class="btn btn-secondary" id="btn-modal-cancel">ยกเลิก</button>
|
||||
<button class="btn btn-primary" id="btn-modal-save">บันทึก & ทดสอบ</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user