TOSM Pack Builder — ขึ้น Vercel + Supabase

ทุกการแก้ไขบันทึกลงฐานข้อมูล Supabase ทันที ทุกคนเห็นข้อมูลเดียวกันแบบสด ๆ เข้าใช้ด้วย ชื่อผู้ใช้ + รหัสผ่าน ที่ผู้ดูแลสร้างให้ (ไม่ใช้ Magic link) แพ็กหนึ่งแก้ได้ทีละคน คนแรกที่เปิดแพ็กจะถือสิทธิ์แก้ไว้ คนอื่นเห็นว่า “🔒 ชื่อ กำลังแก้แพ็กนี้อยู่” และดูได้อย่างเดียว จนกว่าคนแรกจะออกจากแพ็กนั้น

index.html            หน้าเว็บ (ไฟล์เดียวกับ tosm-pack-builder.html + บรรทัดโหลด /config.js)
api/config.js         ส่งค่าเชื่อมต่อ Supabase ให้หน้าเว็บ (/config.js)
api/admin-users.js    สร้างบัญชี / รีเซ็ตรหัสผ่าน / เปลี่ยนสิทธิ์ (เฉพาะ admin)
supabase/schema.sql   ตาราง + RLS + ระบบล็อกแพ็ก (รันครั้งเดียว รันซ้ำได้)
vercel.json, package.json

---

ขั้นที่ 1 · สร้างตารางใน Supabase

1. Supabase → โปรเจกต์ → SQL Editor → New query
2. วางเนื้อหาทั้งหมดของ supabase/schema.sql → Run
3. ตรวจ guardrail: รัน select * from public.rls_audit(); → ต้องได้ 0 แถว (ถ้ามีแถวขึ้น แปลว่ามีตารางที่ยังไม่เปิด RLS หรือเปิดให้ anon ใช้ได้)

ขั้นที่ 2 · ตั้งค่าการเข้าสู่ระบบ

Supabase → Authentication → Sign In / Providers

• Email: เปิดไว้
• Allow new users to sign up: ปิด (สร้างบัญชีได้เฉพาะผู้ดูแล)
• Magic link / OTP ไม่ได้ใช้

ขั้นที่ 3 · สร้างผู้ดูแลคนแรก (ทำครั้งเดียว)

1. Authentication → Users → Add user → Create new user
   • Email: [email protected] (ชื่อผู้ใช้ตามด้วย @tosm.local)
   • Password: ตั้งเอง
   • ติ๊ก Auto Confirm User
2. SQL Editor:

   update public.profiles set role = 'admin', active = true, display_name = 'SK' where username = 'sk';
   

   คนต่อไปสร้างจากในเว็บได้เลย (ตั้งค่า → จัดการผู้ใช้)

ขั้นที่ 4 · เอารหัส App Client

select value from private.app_config where key = 'app_client_key';

คัดลอกค่าที่ได้ไว้ใส่ใน Vercel ขั้นถัดไป

ขั้นที่ 5 · Deploy บน Vercel

1. อัปโหลดโฟลเดอร์นี้ขึ้น GitHub แล้ว Vercel → Add New → Project → เลือก repo (หรือใช้คำสั่ง npx vercel ในโฟลเดอร์นี้) Framework Preset: Other · ไม่ต้องมี Build command
2. Settings → Environment Variables

ชื่อ	ค่า
SUPABASE_URL	https://slmxqrjttummvgfhmfnd.supabase.co
SUPABASE_PUBLISHABLE_KEY	sb_publishable_ksgczLdB9vYu6Q-QISTPkg_p40z-uER
APP_CLIENT_KEY	ไม่ต้องใส่แล้ว (หน้าเว็บรับรหัสนี้จากฐานข้อมูลหลังล็อกอิน)
SUPABASE_SERVICE_ROLE_KEY	Supabase → Project Settings → API Keys → Secret key (sb_secret_…)
LOGIN_DOMAIN	ไม่ต้องใส่ (ค่าเริ่มต้น tosm.local)

⚠ Secret key / service_role ใส่ที่ Vercel เท่านั้น ห้ามใส่ในหน้าเว็บ ห้ามส่งในแชท ห้าม commit ขึ้น GitHub ถ้าเผลอหลุด ให้กด Revoke/Roll ที่ Supabase แล้วใส่อันใหม่

3. Redeploy หลังใส่ค่าครบ

ขั้นที่ 6 · เริ่มใช้

1. เปิดเว็บ → เข้าสู่ระบบด้วย sk และรหัสผ่านจากขั้นที่ 3
2. ย้ายข้อมูลเดิม (ทำครั้งเดียว เลือกวิธีใดวิธีหนึ่ง)
   • ถ้าเคยใช้เครื่องมือในเบราว์เซอร์นี้: ตั้งค่า → ย้ายขึ้นระบบ
   • ถ้ามีไฟล์ .json: กด นำเข้า JSON ที่แถบด้านบน
3. ตั้งค่า → จัดการผู้ใช้ → สร้างบัญชีให้ทีม ระบบสร้างรหัสผ่านให้และแสดง ครั้งเดียว → กดคัดลอกส่งให้เจ้าของบัญชี เจ้าของบัญชีเปลี่ยนรหัสเองได้ที่ ตั้งค่า → เปลี่ยนรหัสผ่าน

สิทธิ์: ผู้ดูแล (ทุกอย่าง + จัดการผู้ใช้) · แก้ไขได้ · ดูอย่างเดียว ปิดบัญชี = เข้าสู่ระบบไม่ได้ทันที และปล่อยแพ็กที่เขาถืออยู่

---

ระบบล็อกแพ็ก ทำงานยังไง

• เปิดแพ็กในหน้า จัดแพ็ก หรือคลิกคอลัมน์ในหน้า สรุปแพ็ก = ถือสิทธิ์แก้แพ็กนั้น
• คนอื่นเห็นแถบส้ม “🔒 ชื่อ กำลังแก้แพ็กนี้อยู่” ช่องกรอกถูกล็อก และเห็นการแก้ไขของคนแรกทันที
• สิทธิ์จะปล่อยเมื่อ: เปลี่ยนไปแพ็กอื่น / กลับหน้าแรก / ปิดหน้าเว็บ / ออกจากระบบ / ไม่ได้ใช้งาน 10 นาที (ถ้าเน็ตหลุดหรือเครื่องดับ ระบบปล่อยเองภายใน 2 นาที)
• เซิร์ฟเวอร์ตรวจซ้ำทุกครั้ง: ต่อให้มีคนพยายามบันทึก หรือลบโฟลเดอร์ที่มีแพ็กที่คนอื่นถืออยู่ ก็จะถูกปฏิเสธ
• ส่วนอื่น (ชื่อโฟลเดอร์ ลำดับแพ็ก ตั้งค่า) ใครบันทึกล่าสุดได้ค่านั้น

Guardrail ความปลอดภัย

ชั้น	ป้องกันอะไร
anon ไม่มีสิทธิ์ใด ๆ ในทุกตาราง	ใครถือแค่ publishable key แต่ไม่ได้ล็อกอิน อ่าน/เขียนอะไรไม่ได้เลย
RLS เปิดทุกตาราง	อ่านได้เฉพาะบัญชีที่เปิดใช้งาน · เขียนได้เฉพาะสิทธิ์ ผู้ดูแล/แก้ไขได้
Header x-app-client	การเขียนต้องส่งรหัส App Client มาด้วย สคริปต์ภายนอกที่เอา key ไปยิงตรงจะเขียนไม่ได้
ตาราง profiles, edit_locks, change_log	แก้จากหน้าเว็บตรง ๆ ไม่ได้ ต้องผ่านฟังก์ชันหรือ API ผู้ดูแล
Event trigger	ตารางใหม่ที่สร้างทีหลังจะถูกเปิด RLS อัตโนมัติ
rls_audit()	ตรวจได้ทุกเมื่อ ต้องได้ 0 แถว
change_log	บันทึกว่าใครสร้าง/แก้/ลบแพ็กและโฟลเดอร์ เมื่อไร

หมายเหตุ: รหัส App Client อยู่ในหน้าเว็บ คนที่ล็อกอินแล้วเปิดดูโค้ดจะเห็นได้ จึงเป็นด่านเสริม ด่านหลักจริง ๆ คือ ต้องล็อกอิน + RLS ถ้าอยากเปลี่ยนรหัส: update private.app_config set value = '…' where key = 'app_client_key'; แล้วแก้ APP_CLIENT_KEY ใน Vercel ให้ตรงกัน

ตารางในฐานข้อมูล

ตาราง	เก็บอะไร
profiles	ผู้ใช้: username, ชื่อที่แสดง, สิทธิ์, เปิด/ปิดใช้งาน
folders	โฟลเดอร์โปรโมชัน: ชื่อ, สี, ลำดับแพ็ก
packs	แพ็ก: ชื่อ, Fixed/Random, ราคา, Limit, วันเวลาขาย, Reset, หมวด Aztek, Type, โบนัส GSP/EXP, แนวคิด, รูป, ยอดขายจริง
pack_items	ไอเทมในแพ็ก: Item ID, ชื่อ, จำนวน, TP, TP in-game, โอกาส %, ได้แน่นอน, ไอเทมนอกลิสต์, ลำดับ
item_values	TP ที่จำไว้ต่อไอเทม (เติมให้อัตโนมัติครั้งต่อไป)
app_settings	อัตรา TP→THB, Seed ต่อ THB, ชื่อหมวด Aztek
edit_locks	ใครกำลังแก้แพ็กไหน หมดอายุเมื่อไร
change_log	ประวัติการแก้ไข

รายการไอเทม (คลังไอเทม) ยังโหลดจาก Google Sheet ผ่าน Apps Script URL เหมือนเดิม (ตั้งค่า → Apps Script URL)

อัปเดตหน้าเว็บครั้งต่อไป

แทนที่ index.html ด้วยไฟล์ใหม่ แล้ว push/redeploy · ถ้า schema.sql มีการแก้ ให้รันใน SQL Editor ซ้ำได้เลย (ข้อมูลเดิมไม่หาย)

สิ่งที่หน้าเข้าสู่ระบบเห็นได้ (ก่อนล็อกอิน)

มีแค่ supabaseUrl, publishable key และ loginDomain ใน /config.js ซึ่งจำเป็นสำหรับการล็อกอินเอง และเปิดอะไรไม่ได้ถ้าไม่มีบัญชี (RLS ทุกตาราง, anon ไม่มีสิทธิ์ใด ๆ)

ส่วนนี้ส่งให้ หลังล็อกอินเท่านั้น ผ่าน public.client_config() (เฉพาะบัญชีที่เปิดใช้งาน):

• รหัส App Client (private.app_config.app_client_key)
• Apps Script URL ของรายการไอเทม (private.app_config.items_api, รหัส items_key ถ้าตั้ง ACCESS_KEY ในสคริปต์)

เปลี่ยน URL ของรายการไอเทม: update private.app_config set value = 'https://script.google.com/macros/s/…/exec' where key = 'items_api';

ตอนออกจากระบบ เบราว์เซอร์ไม่เก็บข้อมูลโฟลเดอร์หรือรายการไอเทมไว้