feat: upgrade character build modal with skills info, traces, energy, and lightcones

index.html

@@ -115,7 +115,7 @@
               </div>
             </div>
             <div>
-              <span class="form-label">พิกัดตัวละคร (X, Y, Z)</span>
+              <span class="form-label">พิกัดตัวละคร XYZ</span>
               <span id="lbl-coordinates" style="color: var(--text-muted); font-size: 0.85rem;">-</span>
             </div>
           </div>
@@ -380,7 +380,8 @@
 
   <!-- Character Detail / Build Modal -->
   <div class="modal-overlay" id="modal-avatar-detail">
-    <div class="modal-content" style="max-width: 640px;">
+    <div class="modal-content" style="max-width: 760px;">
+      <!-- Modal Header -->
       <div class="modal-header">
         <h3 id="modal-char-title" style="font-weight: 800; font-size: 1.15rem; color: var(--text-highlight);">
           ปรับแต่งตัวละคร
@@ -388,75 +389,225 @@
         <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.35rem; align-items: center; flex-wrap: wrap;"></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>
-        <button type="button" class="btn btn-gold btn-sm" id="btn-modal-max-all-char">
+        <button type="button" class="btn btn-gold" id="btn-modal-max-all-char" style="padding: 0.5rem 1rem; font-weight: 800;">
           ⭐ ปรับเต็มทั้งหมด
         </button>
       </div>
 
-      <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;">ระดับเลเวล (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" style="padding: 0.15rem 0.45rem; font-size: 0.75rem;">1</button>
-              <button type="button" class="btn btn-sm btn-secondary btn-lvl-preset" data-lvl="20" style="padding: 0.15rem 0.45rem; font-size: 0.75rem;">20</button>
-              <button type="button" class="btn btn-sm btn-secondary btn-lvl-preset" data-lvl="60" style="padding: 0.15rem 0.45rem; font-size: 0.75rem;">60</button>
-              <button type="button" class="btn btn-sm btn-secondary btn-lvl-preset" data-lvl="70" style="padding: 0.15rem 0.45rem; font-size: 0.75rem;">70</button>
-              <button type="button" class="btn btn-sm btn-primary btn-lvl-preset" data-lvl="80" style="padding: 0.15rem 0.45rem; font-size: 0.75rem;">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;">การเลื่อนขั้น (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" style="padding: 0.15rem 0.45rem; font-size: 0.75rem;">0</button>
-              <button type="button" class="btn btn-sm btn-secondary btn-prom-preset" data-prom="3" style="padding: 0.15rem 0.45rem; font-size: 0.75rem;">3</button>
-              <button type="button" class="btn btn-sm btn-primary btn-prom-preset" data-prom="6" style="padding: 0.15rem 0.45rem; font-size: 0.75rem;">6</button>
-            </div>
-          </div>
-          <input type="number" id="modal-char-promotion" class="form-input" min="0" max="6" value="6">
-        </div>
+      <!-- Sub Tabs Navigation (srtools 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-skills">
+          ⚡ สกิลและร่องรอย
+        </button>
+        <button type="button" class="modal-subtab-btn" data-modaltab="modaltab-status">
+          ⚙️ เลเวล & Eidolon
+        </button>
+        <button type="button" class="modal-subtab-btn" data-modaltab="modaltab-lightcone">
+          🗡️ กรวยแสง
+        </button>
       </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;">ระดับ Eidolon</label>
-          <div style="display: flex; gap: 0.4rem;">
-            <button type="button" class="btn btn-sm btn-secondary" id="btn-modal-quick-e0" style="padding: 0.2rem 0.6rem; font-size: 0.75rem;">
-              รีเซ็ต E0
-            </button>
-            <button type="button" class="btn btn-sm btn-gold" id="btn-modal-quick-e6" style="padding: 0.2rem 0.6rem; font-size: 0.75rem;">
-              ⭐ ปลดเต็ม 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 class="form-group" style="margin-top: 1rem;">
-        <label class="form-label">สกิลและร่องรอย</label>
-        <div style="background: rgba(0,0,0,0.3); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
-          <div style="font-size: 0.85rem; color: var(--text-muted);">
-            โจมตีปกติเลเวล 6, สกิลต่อสู้เลเวล 10, ท่าไม้ตายเลเวล 10, พรสวรรค์เลเวล 10 และโหนดเสริมทั้งหมด
+      <!-- Sub Tab 1: Skills & Traces (Like https://srtools.punklorde.org/skills-info) -->
+      <div id="modaltab-skills" class="modal-subtab-content active">
+        <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);">
+            ระดับสกิลต่อสู้
           </div>
           <button type="button" class="btn btn-sm btn-gold" id="btn-modal-max-skills">
-            ⭐ อัพสกิล 10/10
+            ⭐ ปรับสกิลเต็ม 10/10
           </button>
         </div>
+
+        <!-- 4 Core Skills -->
+        <div class="skills-grid" style="display: flex; flex-direction: column; gap: 0.75rem;">
+          <!-- 1. Basic Attack -->
+          <div class="skill-row-card">
+            <div class="skill-row-header">
+              <span class="skill-name">โจมตีปกติ</span>
+              <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>
+
+          <!-- 2. Skill -->
+          <div class="skill-row-card">
+            <div class="skill-row-header">
+              <span class="skill-name">สกิลต่อสู้</span>
+              <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>
+
+          <!-- 3. Ultimate -->
+          <div class="skill-row-card">
+            <div class="skill-row-header">
+              <span class="skill-name">ท่าไม้ตาย</span>
+              <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>
+
+          <!-- 4. Talent -->
+          <div class="skill-row-card">
+            <div class="skill-row-header">
+              <span class="skill-name">พรสวรรค์</span>
+              <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>
+        </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;">
+            ร่องรอยและเทคนิค
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 0.6rem;">
+            <label class="trace-toggle-label">
+              <input type="checkbox" id="check-trace-technique" checked class="trace-checkbox">
+              <span>⚡ เทคนิค — เปิดใช้งานก่อนเริ่มการต่อสู้</span>
+            </label>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem;">
+              <label class="trace-toggle-label">
+                <input type="checkbox" id="check-trace-a2" checked class="trace-checkbox">
+                <span>🌟 ร่องรอยพิเศษ A2</span>
+              </label>
+              <label class="trace-toggle-label">
+                <input type="checkbox" id="check-trace-a4" checked class="trace-checkbox">
+                <span>🌟 ร่องรอยพิเศษ A4</span>
+              </label>
+              <label class="trace-toggle-label">
+                <input type="checkbox" id="check-trace-a6" checked class="trace-checkbox">
+                <span>🌟 ร่องรอยพิเศษ A6</span>
+              </label>
+            </div>
+            <label class="trace-toggle-label">
+              <input type="checkbox" id="check-trace-stats" checked class="trace-checkbox">
+              <span>💎 โหนดสเตตัสเสริมทั้งหมด (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;">ระดับเลเวล (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;">การเลื่อนขั้น (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;">ระดับ Eidolon</label>
+            <div style="display: flex; gap: 0.4rem;">
+              <button type="button" class="btn btn-sm btn-secondary" id="btn-modal-quick-e0">รีเซ็ต E0</button>
+              <button type="button" class="btn btn-sm btn-gold" id="btn-modal-quick-e6">⭐ ปลดเต็ม 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>
+
+        <!-- Ultimate Energy Section -->
+        <div class="form-group" style="margin-top: 1.25rem;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
+            <label class="form-label" style="margin: 0;">พลังงานท่าไม้ตาย</label>
+            <div style="display: flex; gap: 0.35rem;">
+              <button type="button" class="btn btn-sm btn-secondary" id="btn-modal-energy-50">ตั้งค่า 50%</button>
+              <button type="button" class="btn btn-sm btn-primary" id="btn-modal-energy-100">เต็ม 100%</button>
+            </div>
+          </div>
+          <div style="display: flex; gap: 0.75rem; align-items: center;">
+            <input type="range" id="range-char-energy" min="0" max="140" value="140" class="skill-range" style="flex: 1;">
+            <span id="val-char-energy" style="font-weight: 800; font-family: monospace; min-width: 60px; text-align: right;">140/140</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Sub Tab 3: Lightcone Equipment -->
+      <div id="modaltab-lightcone" class="modal-subtab-content" style="display: none;">
+        <div class="card" style="padding: 1.25rem; background: rgba(0,0,0,0.3); border: 1px solid var(--border-color);">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
+            <span style="font-weight: 800; font-size: 1rem; color: var(--text-highlight);">กรวยแสงที่สวมใส่</span>
+            <button type="button" class="btn btn-sm btn-gold" id="btn-modal-max-lc">⭐ ปรับกรวยแสงเต็มขั้น</button>
+          </div>
+          <div class="form-group">
+            <label class="form-label">ID กรวยแสง</label>
+            <input type="number" id="modal-lc-id" class="form-input" placeholder="เช่น 21002 หรือ 24001">
+          </div>
+          <div class="grid-2" style="gap: 1rem;">
+            <div class="form-group">
+              <label class="form-label">เลเวลกรวยแสง (1-80)</label>
+              <input type="number" id="modal-lc-level" class="form-input" min="1" max="80" value="80">
+            </div>
+            <div class="form-group">
+              <label class="form-label">ระดับการขัดเกลา</label>
+              <div class="eidolon-buttons" id="modal-lc-rank-btns" style="margin-top: 0.25rem;">
+                <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>
+          </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">
           ✕ ปิด