ปรับแต่งธีมและสี (Theme Customization)

คำอธิบาย

ระบบปรับแต่งธีมช่วยให้แอดมินสามารถเปลี่ยนสีและรูปลักษณ์ของเว็บไซต์ผู้เล่นได้ มี 2 วิธีหลัก:

1. เลือกธีมสำเร็จรูป — กดเลือกธีมจากรายการที่เตรียมไว้ ระบบจะเปลี่ยนสีทั้งเว็บให้ทันที ใช้งานง่าย ไม่ต้องปรับสีเอง
2. ปรับแต่งเองแบบละเอียด — ใช้หน้าปรับแต่งธีมบนเว็บ demo เพื่อปรับสีทีละส่วน เลือกธีมสำเร็จรูปเป็นจุดเริ่มต้นแล้วปรับเพิ่ม หรือสร้างธีมใหม่ทั้งหมด จากนั้นคัดลอก Config มาวางในหน้าแอดมิน

นอกจากสีแล้ว แอดมินยังสามารถอัปโหลดโลโก้และ Favicon ของเว็บไซต์ได้จากหน้าตั้งค่าแบรนด์ในแอดมิน

ผู้ใช้งาน

• แอดมิน / โอเปอเรเตอร์: เลือกธีมสำเร็จรูปหรืออัปโหลด CSS ธีมผ่านหน้าตั้งค่าแบรนด์ ใช้หน้าปรับแต่งธีมบนเว็บ demo เพื่อออกแบบสีแบบละเอียดและคัดลอก Config

ก่อนใช้งาน

สำหรับแอดมิน:

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

วิธีใช้งาน

วิธีที่ 1 — เลือกธีมสำเร็จรูปจากหน้าแอดมิน (ง่ายที่สุด)

1. เข้าสู่ระบบแอดมิน ไปที่เมนู "ตั้งค่าแบรนด์เว็บไซต์"
2. เลื่อนไปที่ส่วน "ธีมสีเว็บไซต์" จะเห็นการ์ดธีมสำเร็จรูปเรียงเป็นตาราง แต่ละธีมแสดงรูปตัวอย่างและป้ายบอกโหมด (สว่าง/มืด)
3. กดปุ่ม "ใช้ธีมนี้" บนธีมที่ต้องการ แล้วกด "ยืนยัน"
4. ระบบจะเปลี่ยนธีมให้อัตโนมัติ มีผลกับเว็บผู้เล่นภายใน 5 นาที
5. ธีมที่กำลังใช้งานจะมีกรอบสีไฮไลต์และแสดงว่า "ใช้งานอยู่"

คำแนะนำ

ถ้าต้องการปรับสีเพิ่มเติมหลังเลือกธีมสำเร็จรูป ให้ไปที่วิธีที่ 2 — เปิดหน้าปรับแต่งบนเว็บ demo แล้วใช้ธีมนี้เป็นจุดเริ่มต้นปรับสีทีละส่วนได้

---

วิธีที่ 2 — ปรับแต่งธีมเองแบบละเอียดผ่านเว็บ demo

สำหรับผู้ที่ต้องการปรับสีทีละส่วนหรือสร้างธีมใหม่ทั้งหมด ใช้หน้าปรับแต่งธีมบนเว็บ demo

ขั้นตอนที่ 1 — ออกแบบธีมด้วยหน้าปรับแต่งบนเว็บ demo

หน้าปรับแต่งธีมเปิดเป็นแผงด้านซ้าย (บนคอมพิวเตอร์) หรือป๊อปอัป (บนมือถือ) มี 3 แท็บ:

แท็บ "ธีม" — ปรับสี

1. สลับโหมดสว่าง/มืด — สวิตช์ด้านบนสำหรับเปลี่ยนระหว่าง Light Mode และ Dark Mode
2. ธีมสำเร็จรูป — กดเลือกธีมที่เตรียมไว้แล้ว (เช่น Light Purple, Dark Purple, Light Orange, Dark Red ฯลฯ) ระบบจะเปลี่ยนสีทั้งหมดให้ทันที
3. ปรับสีแต่ละส่วน — ด้านล่างจะแสดงรายการสีทั้งหมด แบ่งเป็นหมวดหมู่:

หมวดหมู่	ควบคุมอะไร
Base (พื้นฐาน)	สีพื้นหลังหลัก สีตัวอักษร สีการ์ด สีป๊อปอัป
Layout (เลย์เอาท์)	สีพื้นหลังส่วนหัว (Header) และส่วนท้าย (Footer)
Primary (สีหลัก)	สีหลักของเว็บ ปุ่มหลัก หัวข้อรายการเกม
Secondary (สีรอง)	สีรองสำหรับองค์ประกอบเสริม
Accent (สีเน้น)	สีเน้นสำหรับจุดสนใจพิเศษ
Status (สถานะ)	สีแจ้งเตือนข้อผิดพลาด
Neutral (กลาง)	สีตัวอักษรรอง ขอบ ช่องกรอกข้อมูล
Header (ส่วนหัว)	สีไอคอนที่เลือก/ไม่เลือกในส่วนหัว
Footer (ส่วนท้าย)	สีไอคอนที่เลือก/ไม่เลือกในส่วนท้าย สีปุ่มกลาง
Sidebar (แถบข้าง)	สีพื้นหลัง ตัวอักษร และองค์ประกอบในแถบข้าง
หวย	สีพื้นหลังและตัวเลขในส่วนหวย

4. วิธีเปลี่ยนสี — กดที่ช่องสีเพื่อเปิดตัวเลือกสี หรือพิมพ์รหัสสี (เช่น #FF5500) ลงในช่องโดยตรง แต่ละสีมีปุ่ม "ใช้ค่าเริ่มต้น" สำหรับคืนค่าเดิม
5. รีเซ็ตทั้งหมด — กดปุ่ม "รีเซ็ตเป็นค่าเริ่มต้น" เพื่อคืนค่าสีทั้งหมดกลับเป็นค่าเดิม

แท็บ "โลโก้" — เปลี่ยนโลโก้ (ทดลอง)

• อัปโหลดไฟล์ PNG เพื่อทดลองดูโลโก้บนเว็บ
• โลโก้จะแสดงใน Header, หน้าโหลด และหัวเกม
• อัตราส่วนแนะนำ 2:1 (กว้าง:สูง)

หมายเหตุ

โลโก้ที่อัปโหลดในแท็บนี้เป็นการทดลองดูเฉพาะเครื่องเท่านั้น ถ้าต้องการเปลี่ยนโลโก้จริงสำหรับผู้เล่นทุกคน ให้อัปโหลดผ่านหน้าแอดมิน (ดูขั้นตอนที่ 3)

แท็บ "แบนเนอร์" — เปลี่ยนแบนเนอร์ (ทดลอง)

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

หมายเหตุ

แบนเนอร์ที่ตั้งค่าในแท็บนี้เก็บเฉพาะในเครื่องเท่านั้น ไม่มีผลกับผู้เล่นคนอื่น

ขั้นตอนที่ 2 — คัดลอก Config

เมื่อปรับสีจนพอใจแล้ว:

1. กดปุ่ม "คัดลอก Config" ในแท็บธีม
2. ระบบจะคัดลอก CSS ของธีมปัจจุบัน (ทั้ง Light Mode และ Dark Mode) ไปยังคลิปบอร์ด
3. CSS ที่คัดลอกจะอยู่ในรูปแบบ:

:root {
  --background: 0 0% 98%;
  --foreground: 270 100% 20%;
  --primary: 270 100% 55%;
  /* ... สีอื่นๆ ... */
}

.dark {
  --background: 272 32% 7%;
  --foreground: 210 40% 98%;
  --primary: 272 72% 58%;
  /* ... สีอื่นๆ ... */
}

คำแนะนำ

ถ้าต้องการเก็บธีมไว้ใช้ภายหลัง ให้คัดลอก Config แล้ววางเก็บไว้ในไฟล์ข้อความ เมื่อต้องการใช้อีกครั้ง ให้กดปุ่ม "ใช้ Config" แล้ววาง CSS ลงไป จะเห็นการเปลี่ยนแปลงบนเว็บทันที (เฉพาะเครื่องตัวเอง)

ขั้นตอนที่ 3 — อัปโหลดธีมผ่านหน้าแอดมิน

เมื่อได้ CSS ที่ต้องการแล้ว ให้นำไปอัปโหลดในหน้าแอดมินเพื่อให้มีผลกับผู้เล่นทุกคน:

1. เข้าสู่ระบบแอดมิน ไปที่เมนู "ตั้งค่าแบรนด์เว็บไซต์"
2. เลื่อนไปที่ส่วน "ตั้งค่าธีมสีสำหรับเว็บไซต์"
3. วาง CSS ที่คัดลอกมาลงในช่องข้อความ
4. กดปุ่ม "อัปโหลด"
5. CSS จะถูกอัปโหลดไปยังเซิร์ฟเวอร์และมีผลกับผู้เล่นทุกคนทันที (อาจต้องรีเฟรชหน้าเว็บ)

อัปโหลดโลโก้

1. ในหน้า "ตั้งค่าแบรนด์เว็บไซต์" ส่วน "อัปโหลดโลโก้"
2. อัปโหลดไฟล์ PNG ของโลโก้
3. โลโก้จะแสดงใน Header, หน้าโหลด และหัวเกมของเว็บไซต์ผู้เล่น

อัปโหลด Favicon

1. ในหน้า "ตั้งค่าแบรนด์เว็บไซต์" ส่วน "อัปโหลด Favicon"
2. อัปโหลดรูป Favicon — ระบบจะสร้างขนาดต่างๆ ให้อัตโนมัติ
3. Favicon จะแสดงเป็นไอคอนเล็กๆ ที่แท็บเบราว์เซอร์

ข้อจำกัด

• ธีมสำเร็จรูปมีผลทันที — เมื่อกด "ใช้ธีมนี้" แล้วยืนยัน จะเปลี่ยนธีมให้ผู้เล่นทุกคนภายใน 5 นาที ไม่มีขั้นตอนตรวจสอบก่อน
• การปรับสีแบบละเอียดผ่านเว็บ demo เก็บเฉพาะในเครื่อง — ถ้าเปลี่ยนเบราว์เซอร์หรือล้างข้อมูล การตั้งค่าจะหายไป ต้องคัดลอก Config เก็บไว้ก่อน
• ต้องอัปโหลด CSS ผ่านหน้าแอดมินเพื่อให้มีผลกับทุกคน — การปรับสีบนเว็บ demo เป็นแค่การทดลอง ไม่มีผลกับผู้เล่นคนอื่น
• โลโก้ต้องเป็นไฟล์ PNG เท่านั้น — ไม่รองรับรูปแบบอื่น
• CSS ที่อัปโหลดจะแทนที่ CSS เดิมทั้งหมด — ถ้าอัปโหลด CSS ใหม่ CSS เดิมจะถูกแทนที่ ควรคัดลอก CSS เดิมเก็บไว้ก่อนเปลี่ยน
• ผู้เล่นอาจต้องรีเฟรชหน้าเว็บ หลังจากแอดมินอัปโหลดธีมใหม่ เพื่อให้เห็นการเปลี่ยนแปลง

ข้อผิดพลาดที่พบบ่อย

• ปรับสีแล้วแต่ผู้เล่นไม่เห็นการเปลี่ยนแปลง → การปรับสีบนเว็บผู้เล่นเก็บเฉพาะในเครื่อง ต้องคัดลอก Config แล้วอัปโหลดผ่านหน้าแอดมินด้วย
• อัปโหลด CSS แล้วแต่เว็บไม่เปลี่ยน → ลองรีเฟรชหน้าเว็บ (Ctrl+Shift+R หรือ Cmd+Shift+R) เพื่อล้างแคช
• คัดลอก Config แล้ววางในแอดมินไม่ได้ → ตรวจว่าคัดลอก CSS ทั้งหมด (ทั้ง :root { ... } และ .dark { ... }) ไม่ใช่แค่บางส่วน
• เปลี่ยนสีแล้วบางส่วนของเว็บไม่เปลี่ยนตาม → บางองค์ประกอบอาจใช้สีแบบกำหนดตายตัว ไม่ได้ใช้ตัวแปรสี ให้ลองปรับสีในหมวดหมู่อื่นดู
• โลโก้อัปโหลดแล้วไม่แสดง → ตรวจว่าไฟล์เป็น PNG และลองรีเฟรชหน้าเว็บ

แก้ปัญหา

• ปัญหา: แอดมินไม่เห็นเมนูตั้งค่าแบรนด์เว็บไซต์
  วิธีแก้: ตรวจว่าบัญชีมีสิทธิ์ "ตั้งค่าเว็บ" หรือยัง ถ้าเพิ่งเปลี่ยนสิทธิ์ ให้รีเฟรชหน้า

• ปัญหา: ไม่เห็นหน้าปรับแต่งธีมบนเว็บผู้เล่น
  วิธีแก้: ฟีเจอร์นี้เปิดใช้งานเฉพาะบางโปรเจกต์ ถ้าเว็บของคุณไม่มีฟีเจอร์นี้ ให้ใช้ธีมสำเร็จรูปจากหน้าแอดมิน ("ตั้งค่าแบรนด์เว็บไซต์") หรืออัปโหลด CSS โดยตรง

• ปัญหา: ปรับสีแล้วหน้าเว็บดูแปลกๆ
  วิธีแก้: กดปุ่ม "รีเซ็ตเป็นค่าเริ่มต้น" เพื่อคืนค่าสีทั้งหมดกลับเป็นค่าเดิม แล้วเริ่มปรับใหม่ หรือเลือกธีมสำเร็จรูปเป็นจุดเริ่มต้น

• ปัญหา: ธีมที่อัปโหลดไม่ตรงกับที่ทดลองบนเว็บ
  วิธีแก้: ตรวจว่าคัดลอก Config ทั้ง Light Mode และ Dark Mode มาครบ และวางลงในช่อง CSS ของหน้าแอดมินทั้งหมดโดยไม่ตัดส่วนใดออก

คำแนะนำ

• เริ่มจากธีมสำเร็จรูปก่อน — กดเลือกธีมจากหน้า "ตั้งค่าแบรนด์เว็บไซต์" ได้เลย ถ้าพอใจก็ไม่ต้องปรับอะไรเพิ่ม
• ถ้าต้องการปรับสีเพิ่มเติม ให้เปิดเว็บ demo แล้วเลือกธีมสำเร็จรูปนั้นเป็นจุดเริ่มต้น แล้วค่อยปรับสีทีละส่วน
• ทดลองทั้ง Light Mode และ Dark Mode ก่อนอัปโหลด เพราะผู้เล่นบางคนอาจใช้โหมดมืด
• คัดลอก Config เก็บไว้ในไฟล์ข้อความทุกครั้งก่อนเปลี่ยนธีม เพื่อให้สามารถย้อนกลับได้
• สีที่สำคัญที่สุดคือ Primary (สีหลัก) และ Background (สีพื้นหลัง) — ปรับ 2 สีนี้ก่อนจะเห็นความแตกต่างชัดเจนที่สุด
• ใช้สี Accent ที่ตัดกับสี Primary เพื่อให้ปุ่มและจุดสนใจเด่นชัด
• หลังอัปโหลดธีมใหม่ ให้ทดสอบบนมือถือด้วย เพราะบางสีอาจดูต่างกันบนหน้าจอที่ต่างกัน