Werewolf Moderator Tool (เว็บช่วย Moderator เกม Werewolf)

เครื่องมือสำหรับ Moderator ในการจัดการเกม Werewolf แบบเล่นหน้าจอเดียว (Single-page web app) ช่วยตั้งค่ารายชื่อ/บทบาท จับไพ่บทบาท เดินเกมกลางคืน-กลางวัน จับเวลา ออกรอบโหวต และเก็บบันทึกเหตุการณ์

ฟีเจอร์หลัก

• จัดการรายชื่อผู้เล่น (Pool): เพิ่ม/ล้างรายชื่อผู้เล่น
• ตั้งค่าบทบาท: เพิ่มบทบาทให้จำนวนผู้เล่น พร้อมตัวช่วยแสดง “จำนวนผู้เล่น”
• ชุดบทบาท (Presets): บันทึก/โหลด/ลบ “ชุดบทบาท” ที่ใช้บ่อย (เก็บใน Browser)
• จับไพ่บทบาท (Draw Screen): สับไพ่/เปิดดูบทบาททีละใบ เหมาะสำหรับให้ผู้เล่นมาดูบทบาทของตัวเอง
• Night / Day Phase: หน้าดำเนินเกมกลางคืนและสรุปผลช่วงกลางวัน
• โหมดโหวต (Vote): ตัวช่วยเข้าสู่ช่วงโหวต พร้อมหน้าคอนเฟิร์ม
• จับเวลา (Discussion Timer): ตั้งต้น 3 นาที (180 วินาที) พร้อม Start/Pause/Reset
• Game Log: บันทึกเหตุการณ์ไว้ดูย้อนหลัง
• Sound Settings: อัปโหลดเสียง (Night/Day/Death/Vote), ปรับความดัง, ปิดเสียง (เก็บใน Browser)
• บันทึก/กู้คืนเกม (Save/Restore): ถ้ามีเซฟค้างไว้ จะมีตัวเลือกให้ “เล่นต่อ/ลบทิ้ง”

วิธีใช้งาน (Run)

โปรเจกต์นี้เป็น Static Web ไม่มี backend และไม่ต้องติดตั้ง dependency

• วิธีง่ายที่สุด

  • เปิดไฟล์ index.html ด้วย Browser ได้เลย

• แนะนำ (สำหรับพัฒนา/ทดสอบ)

  • ใช้ Live Server (เช่น VS Code extension) แล้วเปิด index.html
  • หรือใช้ server แบบง่าย ๆ เช่น npx serve (ถ้ามี Node.js)

การใช้งานแบบย่อ (Quick Start)

1. เพิ่มรายชื่อผู้เล่นใน Pool
2. เพิ่มบทบาทให้ครบจำนวนผู้เล่น (หรือโหลดจาก Presets)
3. กด จับไพ่ เพื่อให้ผู้เล่นมาดูบทบาททีละคน
4. กด เริ่มเกม แล้วดำเนินเกมตามหน้าจอ Night/Day
5. ใช้ Timer สำหรับช่วงสนทนา และใช้ Vote สำหรับช่วงโหวต
6. เปิดดู Log เพื่อทบทวนเหตุการณ์

โครงสร้างไฟล์

• index.html: UI หลัก (Tailwind CDN) และโครงสร้างหน้าจอทั้งหมด
• app.js: Logic เกมทั้งหมด (สถานะเกม, phase, vote, timer, preset, sound, save/restore)
• styles.css: สไตล์เสริม/แอนิเมชัน/ปรับให้เหมาะกับมือถือ
• favicon.png: ไอคอน

ข้อมูลการจัดเก็บ (Storage)

ข้อมูลบางส่วนจะถูกบันทึกไว้ใน localStorage ของ Browser (เช่น เซฟเกม/ชุดบทบาท/การตั้งค่าเสียง)
หากต้องการล้างข้อมูล ให้กดปุ่ม Reset Game (ไอคอน Power) มุมขวาบน

License

ยังไม่ได้ระบุไลเซนส์ (ถ้าต้องการให้ผมใส่ MIT/Apache-2.0 แจ้งได้เลย)