9dc33afb8986714858393c0d4dd8d90cb5fdddf8
GaC-Srtool 🌌
GaC-Srtool คือเว็บแอปพลิเคชันแดชบอร์ด (Web Dashboard & Management Tool) สำหรับจัดการข้อมูลตัวละคร, สถานะผู้เล่น, จุดวาร์ป, และไฟล์เซฟ (freesr-data.json, persistent) ของเซิร์ฟเวอร์ GaC-hkrpg-go (และ FreeSR Private Server)
ถูกออกแบบให้ทำงานแบบ Client-side 100% ไม่มีเซิร์ฟเวอร์หลังบ้าน จึงสามารถโฮสต์ผ่าน GitHub Pages ได้ฟรีตลอดชีพ ไม่ต้องเสียค่าบริการใดๆ!
✨ ความสามารถหลัก (Features)
- 📊 หน้าแดชบอร์ด (Overview Dashboard):
- แสดงสถานะเซิร์ฟเวอร์สด (Live Health Status)
- นับจำนวนตัวละคร, กรวยแสง (Lightcones), และรีลิกส์ (Relics) ทั้งหมด
- แสดงพิกัดตัวละครปัจจุบัน (Plane, Floor, X, Y, Z) และการจัดทีม (Current Lineup)
- 👥 จัดการตัวละคร (Avatars & Eidolons):
- ดูรายชื่อตัวละครทั้งหมดพร้อมสาย Path, ธาตุ และระดับดาว
- ปรับเลเวลและการปลดดาว Eidolon (E0 - E6) รายตัวแบบเรียลไทม์
- ปุ่ม Max All ตัวละครทุกตัวเป็น Lv. 80 และ E6 ในคลิกเดียว
- ⚡ ระบบ Ex-Rank Skills:
- สลับเปิด/ปิด Ex-Rank ของตัวละครพิเศษ (Jing Yuan CC immunity, Dan Heng • IL, Acheron)
- สั่งเปิดหรือปิด Ex-Rank ทุกตัวละครพร้อมกันได้ทันที
- 🚀 วาร์ปฉากและตำแหน่ง (Teleportation):
- รวมจุดวาร์ปปลอดภัยยอดนิยม (Astral Express Parlor Car, Herta Station, Belobog, Xianzhou Luofu, Penacony)
- กล่องใส่วาร์ปแบบกำหนดเอง (Plane ID, Floor ID, Entry ID, พิกัด X, Y, Z)
- 📝 จัดการไฟล์ JSON (FreeSR Data & Persistent Editor):
- โหลดและแก้ไขไฟล์
freesr-data.jsonและpersistentบนเซิร์ฟเวอร์ได้โดยตรง - มีระบบตรวจเช็ค Syntax JSON และจัดรูปแบบโค้ด (Beautify)
- ดาวน์โหลด Backup หรืออัปโหลดไฟล์ JSON จากเครื่องขึ้นเซิร์ฟเวอร์
- โหลดและแก้ไขไฟล์
- ⚙️ เชื่อมต่อแบบ Dynamic (No Hardcode):
- สามารถระบุ REST API Gateway URL (เช่น
http://localhost:21000หรือ IP เครื่องในวง LAN) ผ่านหน้าต่างตั้งค่า โดยค่าจะถูกบันทึกไว้ในเบราว์เซอร์ (localStorage)
- สามารถระบุ REST API Gateway URL (เช่น
🌐 วิธีนำขึ้นโฮสต์ GitHub Pages (ฟรี 100%)
คุณสามารถโฮสต์เว็บนี้ผ่าน GitHub ได้ง่ายๆ เพียง 4 ขั้นตอน:
ขั้นตอนที่ 1: สร้าง Repository บน GitHub
- เข้าไปที่ GitHub.com แล้วกด New repository
- ตั้งชื่อ เช่น
GaC-srtool(จะเลือก Public หรือ Private ก็ได้) - ไม่ต้อง ติ๊กถูกที่ช่อง "Add a README file" จากนั้นกด Create repository
ขั้นตอนที่ 2: Push โปรเจกต์ขึ้น GitHub
เปิด Terminal / PowerShell ในโฟลเดอร์นี้ แล้วรันคำสั่ง:
git remote add origin https://github.com/<ชื่อผู้ใช้ของคุณ>/GaC-srtool.git
git add .
git commit -m "feat: initial commit for GaC-srtool dashboard"
git push -u origin main
ขั้นตอนที่ 3: เปิดใช้งาน GitHub Pages
- ในหน้า Repo ของคุณบน GitHub ไปที่แท็บ Settings
- ที่เมนูด้านซ้าย เลือกหัวข้อ Pages
- ใต้หัวข้อ Build and deployment:
- Source: เลือก
Deploy from a branch - Branch: เลือก
mainและโฟลเดอร์/ (root) - กดปุ่ม Save
(หรือจะเลือก Source เป็น
GitHub Actionsก็ได้ ตัวโปรเจกต์มี.github/workflows/deploy.ymlเตรียมไว้ให้อัตโนมัติแล้ว)
- Source: เลือก
ขั้นตอนที่ 4: ใช้งานได้ทันที
รอระบบ GitHub Deploy ประมาณ 1 นาที คุณจะได้รับ URL เว็บไซต์ เช่น:
https://<ชื่อผู้ใช้ของคุณ>.github.io/GaC-srtool/
สามารถเปิดจากเบราว์เซอร์เครื่องใดก็ได้ หรือเปิดจากมือถือ/แท็บเล็ตในวงแลนเดียวกันได้เลย!
💡 หมายเหตุเรื่องการเชื่อมต่อ Browser (Mixed Content)
- เมื่อเปิดหน้าเว็บผ่าน
https://...github.ioและทำการเชื่อมต่อกับเซิร์ฟเวอร์ที่เครื่องของเรา (http://localhost:21000):- เบราว์เซอร์สมัยใหม่ (Google Chrome, Microsoft Edge, Brave) อนุญาตให้หน้าเว็บ HTTPS ยิง request ไปยัง
http://localhost:*หรือhttp://127.0.0.1:*ได้ทันที (ตามมาตรฐาน W3C Localhost Exception) - หากใช้เบราว์เซอร์บางตัวที่แจ้งเตือนความปลอดภัย (Insecure Content / Mixed Content): สามารถกดไอคอนรูปกุญแจ/การตั้งค่าที่หน้า URL Bar แล้วเลือก Site settings -> Insecure content: Allow ได้ครับ
- เบราว์เซอร์สมัยใหม่ (Google Chrome, Microsoft Edge, Brave) อนุญาตให้หน้าเว็บ HTTPS ยิง request ไปยัง
💻 การทดสอบและรันในเครื่อง (Local Development)
หากต้องการเปิดใช้งานหรือพัฒนาในเครื่องโดยไม่ต้องต่อเน็ต:
- เปิดตรง: ดับเบิ้ลคลิกไฟล์
index.htmlเพื่อเปิดใช้งานบนเบราว์เซอร์ได้ทันที - รัน Local Server:
เปิดเว็บที่
npm run dev # หรือ npx serve . -l 5173http://localhost:5173
Languages
JavaScript
85%
HTML
7.7%
CSS
6.1%
Python
1.2%