เกี่ยวกับ

Guess Picture Game Show Platform — เวอร์ชัน 1.0.0

ระบบนี้คืออะไร
แพลตฟอร์มเกมทายภาพแบบเปิดช่องทีละช่อง สำหรับใช้ในห้องเรียน งานกิจกรรม และการแข่งขัน ออกแบบให้ทำงานได้เต็มรูปแบบโดยไม่ต้องมีเซิร์ฟเวอร์

ข้อมูลทุกอย่าง — รูปภาพ ชุดคำถาม คะแนน และการตั้งค่า — ถูกเก็บไว้ในเบราว์เซอร์ของเครื่องที่ใช้งานเท่านั้น ไม่มีการส่งข้อมูลออกไปที่ใด และไม่มีการเก็บสถิติผู้ใช้

การซิงก์ระหว่างจอควบคุม จอแสดงผล และหน้า Buzzer ใช้สองช่องทางพร้อมกัน — BroadcastChannel สำหรับหน้าจอในเครื่องเดียวกัน และ WebRTC DataChannel สำหรับอุปกรณ์คนละเครื่อง โดยเซิร์ฟเวอร์ทำหน้าที่แค่แนะนำให้สองเครื่องรู้จักกัน ไม่กี่ครั้งตอนเริ่มเชื่อม หลังจากนั้นข้อมูลเกมวิ่งตรงระหว่างเครื่องโดยไม่ผ่านเซิร์ฟเวอร์ จึงไม่ต้องมีบัญชีผู้ใช้และไม่มีการเก็บข้อมูลการเล่นไว้ที่ใด

คลังรูปภาพ
  • ลากวาง / อัปโหลดหลายไฟล์ / นำเข้าทั้งโฟลเดอร์
  • JPG · PNG · WEBP · AVIF · GIF
  • ค้นหาแบบ fuzzy, แท็ก, หมวดหมู่, รายการโปรด
  • เปลี่ยนชื่อ ทำสำเนา ลบ เรียงลำดับ สลับลำดับ ส่งออกไฟล์
  • Lazy loading + virtual list รองรับรูปหลักพัน
เกมและการควบคุม
  • ตาราง 3×3 ถึง 30×30 กำหนดเองได้
  • สไตล์ช่อง 8 แบบ + แอนิเมชัน 9 แบบ
  • ลำดับเปิด 10 แบบ (สุ่ม แถว คอลัมน์ ทแยง ก้นหอย งู จากกลาง จากนอก กำหนดเอง)
  • คลิก / ลากเปิดหลายช่อง / Undo / Redo / คีย์ลัด
  • Presenter Mode, Hint หลายระดับ, จับเวลา, Auto Play
ทีมและคะแนน
  • ทีมไม่จำกัดจำนวน พร้อมสีและโลโก้
  • คะแนนอัตโนมัติตามสัดส่วนช่องที่เปิด
  • Bonus / Penalty / ประวัติคะแนน / จัดอันดับแบบเรียลไทม์
  • Buzzer พร้อมล็อกผู้กดคนแรกและวัดเวลาห่าง
ข้อมูลและออฟไลน์
  • IndexedDB สำหรับรูปและ Playlist, LocalStorage สำหรับการตั้งค่า
  • Auto Save / Auto Restore เกมที่ค้างอยู่
  • Export / Import เป็นไฟล์ JSON (พร้อมรูปในไฟล์เดียว)
  • ติดตั้งเป็นแอป (PWA) และใช้งานออฟไลน์
เทคโนโลยีที่ใช้
Next.js 15 (App Router)
TypeScript (Strict)
TailwindCSS
shadcn/ui + Radix UI
Framer Motion
Zustand
React Hook Form
Lucide Icons
React Dropzone
qrcode.react
Fuse.js
Dexie (IndexedDB)
PWA + Service Worker
การเข้าถึง (Accessibility)
  • • ควบคุมได้ครบด้วยคีย์บอร์ด เมาส์ และการสัมผัส
  • • ป้ายกำกับ ARIA บนทุกปุ่มและช่องในตาราง
  • • โหมดคอนทราสต์สูงสำหรับห้องที่แสงจ้า
  • • ตัวเลือกลดการเคลื่อนไหวสำหรับผู้ที่ไวต่อภาพเคลื่อนไหว
  • • รองรับหน้าจอตั้งแต่มือถือจนถึง 4K