# 🥢 เกมจับไม้สั้นไม้ยาว (Draw Straws) — สำหรับห้องอบรม

เว็บเกมสุ่มลำดับผู้ตอบคำถามอย่างยุติธรรม แทนการดูว่าใครยกมือก่อน
ผู้เข้าอบรมเปิดจากมือถือ กรอกชื่อเล่นเข้าห้อง (**เข้าห้อง = พร้อมอัตโนมัติ**) → **โฮสต์/ผู้สอนเท่านั้น** กด **"จับไม้"**
ระบบสุ่มความยาวไม้ให้ทุกคนพร้อมกัน แล้วจัดอันดับจาก **ไม้ยาวที่สุด → สั้นที่สุด** (ยาวสุด = ตอบก่อน)

เป็นไฟล์เดียว `stick-game.html` (static) + ใช้ **Firebase Realtime Database** เป็นตัว sync ข้ามเครื่องแบบ realtime
ไม่ต้องมีเซิร์ฟเวอร์ของตัวเอง — deploy บน Cloudflare Pages / Netlify / โฮสต์ static ใดก็ได้

---

## ⚙️ ตั้งค่า Firebase (ทำครั้งเดียว ~5 นาที)

1. เปิด <https://console.firebase.google.com/> → **Add project** (ตั้งชื่ออะไรก็ได้ ไม่ต้องเปิด Analytics ก็ได้)
2. เมนู **Build → Realtime Database** → **Create Database** → เลือกโซน (เช่น Singapore) → เริ่มแบบ **Test mode**
3. ไปที่ **Project settings ⚙️ → General → Your apps** → เพิ่ม **Web app `</>`** → คัดลอกออบเจกต์ `firebaseConfig`
4. เปิด `stick-game.html` แล้ววาง config ทับบล็อกนี้ (อยู่ต้น `<script type="module">`):

   ```js
   const firebaseConfig = {
     apiKey: "...",
     authDomain: "xxx.firebaseapp.com",
     databaseURL: "https://xxx-default-rtdb.firebaseio.com",
     projectId: "xxx",
     appId: "..."
   };
   ```

   > ต้องมี `databaseURL` ด้วย (จำเป็นสำหรับ Realtime Database)

5. รีเฟรชหน้าเว็บ — ถ้าตั้งค่าถูก หน้า setup จะหายไปและเข้าสู่หน้า Login

> 🔓 **Firebase web config ไม่ใช่ความลับ** — ออกแบบมาให้อยู่ฝั่ง client ได้ (ความปลอดภัยจริงคุมด้วย Database Rules)

---

## 🔐 Database Rules (ตัวอย่างสำหรับใช้ในคลาส)

ใน Realtime Database → แท็บ **Rules**:

```json
{
  "rules": {
    "rooms": {
      ".read": true,
      ".write": true
    }
  }
}
```

เปิดอ่าน/เขียนเฉพาะใต้ `rooms` (พอสำหรับกิจกรรมในคลาส) — ถ้าต้องการรัดกุมกว่านี้ค่อยเพิ่มเงื่อนไขภายหลัง

---

## 🎮 วิธีเล่น

- **ผู้เล่น:** เปิดลิงก์ → เลือก "ผู้เล่น" → กรอกชื่อเล่น → เข้าห้อง (**พร้อมอัตโนมัติ ไม่ต้องกดอะไร**) → รอผล
- **โฮสต์/ผู้สอน:** เลือก "โฮสต์" → ใส่ **รหัสโฮสต์** (ค่าเริ่มต้น `789789`) → เข้าห้อง → กด **"จับไม้"**
  - ถ้ามีคนยังไม่พร้อม ระบบจะเตือนก่อน แต่ยืนยัน "จับไม้ต่อ" ได้
  - **"เริ่มใหม่"** = ล้างผลจับไม้ (ยังคงรายชื่อ + สถานะพร้อมของทุกคนไว้ ไม่ต้องกดพร้อมใหม่)
  - **"คัดลอกลิงก์เชิญ"** = คัดลอก URL ของห้องปัจจุบันไปแชร์

### ห้อง (room)
- ค่าเริ่มต้นคือห้อง `main`
- สร้าง/เข้าห้องแยกด้วย query string เช่น `?room=class-a` → ทุกคนที่เปิดลิงก์เดียวกันอยู่ห้องเดียวกัน

### การสุ่ม
- สุ่มเมื่อ **โฮสต์กดจับไม้** เท่านั้น
- ผู้เล่นออนไลน์ = `n` คน → สุ่มความยาวไม้แต่ละคน `0..n` ซม. ทศนิยม 2 ตำแหน่ง
- ค่าซ้ำ → ตัดสินด้วยเวลาเข้าห้อง (`joinedAt`)
- เรียงมาก → น้อย, อันดับ 1 = ไม้ยาวสุด = **ตอบก่อน** (คงที่จนโฮสต์กดเริ่มใหม่)

---

## 🛠️ ปรับแต่ง

| ต้องการ | แก้ที่ |
|---|---|
| เปลี่ยนรหัสโฮสต์ | ตัวแปร `HOST_CODE` ใน `stick-game.html` |
| เปลี่ยนห้องเริ่มต้น | query `?room=...` (ดีฟอลต์ `main`) |
| เวลาสุ่ม (อนิเมชัน) | ค่า `1600` (ms) ในฟังก์ชันจับไม้ |

---

## 🚀 Deploy

ไฟล์ทั้งหมดเป็น **static** — อัปขึ้นโฮสต์ไหนก็ได้:

- **Cloudflare Pages / GitLab:** อยู่ในโปรเจกต์ codepg อยู่แล้ว (push ขึ้น main)
- **Netlify:** ลาก `stick-game.html` วางใน Netlify Drop หรือเชื่อม repo (ไม่ต้องตั้ง build command เพราะเป็น static)

> หมายเหตุ: หน้านี้เป็น HTML เดี่ยว จึงใส่ Firebase config แบบ inline
> ถ้าจะใช้ **environment variables** จริง ๆ ต้องมีขั้นตอน build (เช่น Vite) ซึ่งเกินขอบเขตของไฟล์ static นี้ — ดู `.env.example` เป็นเทมเพลตอ้างอิงค่าที่ต้องใช้