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

คำอธิบาย

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

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

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

ผู้ใช้งาน

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

ก่อนใช้งาน

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

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

วิธีใช้งาน

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

หน้าปรับแต่งธีมเปิดเป็นแผงด้านซ้าย (บนคอมพิวเตอร์) หรือป๊อปอัป (บนมือถือ) มี 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 จะแสดงเป็นไอคอนเล็กๆ ที่แท็บเบราว์เซอร์

ข้อจำกัด

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

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

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

แก้ปัญหา

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

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

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

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

คำแนะนำ

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