Random Wheel - วงล้อสุ่ม

Prompt สำหรับสร้างแอปแบบนี้เอง

คัดลอกไปวางกับ AI เพื่อดัดแปลงเป็นเวอร์ชันของคุณเองได้

# Prompt: แอปวงล้อสุ่มเลขที่นักเรียน

สร้างแอปวงล้อสุ่มเลขที่นักเรียนเป็นไฟล์ HTML เดียวจบ (single-file, vanilla JS, ไม่พึ่ง CDN ใดๆ ยกเว้น Google Fonts) สำหรับครูใช้สุ่มเรียกนักเรียนในห้องเรียน เปิดทำงานแบบ offline ได้ และ deploy เป็น `index.html` ได้ทันที

## ฟังก์ชันหลัก
- วงล้อหมุน (canvas) แสดงเลขที่ 1 ถึง N โดย N มาจากช่องกรอก "จำนวนนักเรียน" (รองรับ 1–99 ค่าเริ่มต้น 40)
- กดปุ่ม "สุ่ม" แล้ววงล้อหมุนพร้อมเสียงติ๊กๆ (Web Audio API สร้างเสียงเอง ไม่ใช้ไฟล์เสียง) ความเร็วค่อยๆ ช้าลงแบบ ease-out แล้วหยุดตรงเลขที่สุ่มได้
- มี 2 โหมด สลับได้:
  - **ลบออก**: เลขที่สุ่มได้แล้วจะถูกตัดออกจากวงล้อ ไม่ถูกสุ่มซ้ำ (เหมาะกับการเรียกทีละคนจนครบห้อง)
  - **สุ่มใหม่ได้**: วงล้อมีเลขครบเสมอ สุ่มซ้ำได้
- ปุ่มรีเซ็ตเพื่อคืนเลขทั้งหมดกลับวงล้อ

## หน้าจอหลัก (สำคัญ — ให้เรียบ มีแค่ 4 อย่าง)
หน้าแรกต้องมีเพียง: (1) วงล้อขนาดใหญ่ (2) ช่องกรอกจำนวน (3) ปุ่มสุ่ม (4) ปุ่มเปิดดูรายการเลขที่ทั้งหมด พร้อม badge แสดงจำนวนที่เหลือ — ทุกอย่างอยู่ในหน้าเดียวโดยไม่ต้องเลื่อนจอ

## รายการเลขที่ (แยกไป layer/popup)
อย่าแสดง grid เลขทั้งหมดบนหน้าหลัก ให้ไปอยู่ใน modal ที่เลื่อนขึ้นจากด้านล่าง (bottom sheet) เปิดเมื่อกดปุ่มรายการ ภายใน modal มี: tab สลับโหมดพร้อมคำอธิบายโหมด, grid เลขที่ทั้งหมด (เลขที่สุ่มแล้วขีดฆ่าและจางลง เลขล่าสุดไฮไลต์), และปุ่มรีเซ็ต ปิดได้ด้วยการแตะนอก modal หรือปุ่มกากบาท

## Popup แสดงผลเต็มจอ (สำหรับห้องเรียน)
หลังวงล้อหยุด ให้เด้ง popup เต็มจอแสดงเลขผลขนาดใหญ่มาก (ใช้หน่วย vmin เพื่อให้ใหญ่เต็มจอบนโปรเจกเตอร์/ทีวี คนนั่งหลังห้องเห็นชัด) มี animation เลขเด้งเข้าแบบ bounce, มี confetti โปรยฉลอง, มีปุ่ม "สุ่มอีกครั้ง" ในตัว popup และแตะที่ใดก็ได้เพื่อปิด

## Responsive (สำคัญมาก — ทดสอบทั้ง 2 แนว)
- **แนวตั้ง (portrait)**: วงล้อใหญ่กลางจอ ปุ่มควบคุมเรียงแนวนอนด้านล่าง
- **แนวนอน (landscape) และจอกว้าง**: วงล้อชิดซ้าย ปุ่มควบคุมเรียง**แนวตั้ง**ทางขวา
- ขนาดวงล้อให้อิงความกว้างจอ (เช่น `min(86vw, 380px)`) ในแนวตั้ง และอิงความสูงจอ (`min(80vh, ...)`) ในแนวนอน **อย่าใช้ vh คุมขนาดวงล้อในแนวตั้ง** เพราะบนมือถือจอสูงจะทำให้วงล้อเล็กผิดปกติ
- ทดสอบบน iPhone และ iPad ทั้งแนวตั้งและแนวนอน ปุ่มสุ่มต้องไม่หลุดออกนอกจอในทุกกรณี

## ดีไซน์
- ธีมสีน้ำเงินกรมท่าเข้ม + เหลืองทอง (แรงบันดาลใจจากสีโรงเรียน) + แดงเป็น accent
- ฟอนต์ Kanit (Google Fonts) ทั้งแอป
- ตัวเลขใช้ `font-variant-numeric: tabular-nums`
- ตัวชี้ (pointer) สามเหลี่ยมสีทองอยู่ด้านบนวงล้อ

## ข้อควรระวังเรื่องคณิตศาสตร์ของวงล้อ (จุดที่พลาดบ่อย)
ตัวชี้ต้องชี้ตรงกับเลขที่ประกาศผลเสมอ ระวังเรื่องทิศทาง: canvas วาด slice ตามเข็มนาฬิกา (มุมเพิ่ม = หมุนตามเข็ม) ส่วนตัวชี้อยู่ด้านบนคือมุม `-π/2`
- slice ที่ index i มีจุดกึ่งกลางที่มุม `rotation + (i + 0.5) × sliceAngle`
- มุมหมุนสุดท้ายที่ต้องการ: `target = -π/2 - (winnerIndex + 0.5) × sliceAngle`
- คำนวณระยะหมุนโดย **normalize ทั้งมุมปัจจุบันและมุมเป้าหมายให้อยู่ใน [0, 2π) ก่อน** แล้วหา delta (ระยะหมุนไปข้างหน้า ถ้าติดลบให้บวก 2π) จากนั้นบวกจำนวนรอบเต็มเป็นจำนวนเต็มคูณ 2π — วิธีนี้ทำให้วงล้อลงตรงกลางช่อง winner พอดีเสมอ
- **อย่า**คำนวณแบบ `target - (angle % 2π)` ตรงๆ เพราะจะ normalize ไม่ครบ ทำให้ตัวชี้เพี้ยนไปจากเลขที่ประกาศ

## คุณภาพ
- เขียน test ทางคณิตศาสตร์ตรวจว่าตัวชี้ลงตรง winner จริงในทุกจำนวนช่อง (2 ถึง 60) ทุกตำแหน่ง winner และหลายมุมเริ่มต้น ก่อนส่งมอบ
- ใส่ comment อธิบายส่วนคณิตศาสตร์ของวงล้อให้ชัด
- footer ใส่ "ครูติ · kru-ti.com"

แอปอื่นที่น่าสนใจ