Cosmicbet — Front-end (glass)

หน้าเล่นเว็บเดิมพัน Cosmicbet Stack: Next.js 16 (App Router) · React 19 · TypeScript · Tailwind CSS 4 · shadcn/ui (Radix) · pnpm

Next.js 16 มี breaking changes จากเวอร์ชันก่อน — อ่านคู่มือใน node_modules/next/dist/docs/ ก่อนแก้ routing, cookies(), middleware/proxy

เริ่มใช้งาน

ต้องมี Node.js 22+ และ pnpm 10 (corepack enable)

pnpm install
pnpm dev          # http://localhost:3000

สคริปต์	ใช้ทำอะไร
pnpm dev	dev server
pnpm build / pnpm start	build และรัน production
pnpm lint	ESLint ทั้ง repo (ข้าม exports/ และ .tmp-*)
pnpm typecheck	tsc --noEmit
pnpm test	unit test (node:test ผ่าน tsx) ใน lib/**/*.test.ts, scripts/**/*.test.ts
pnpm export:lottery-kit	สร้างชุดย้ายระบบหวยไป exports/lottery-kit/dist (ดู exports/lottery-kit/README.md)

ก่อนส่งงานควรผ่าน pnpm lint && pnpm typecheck && pnpm test

Environment variables

คัดลอก .env.example เป็น .env.local แล้วแก้ค่า (เปลี่ยน NEXT_PUBLIC_* ต้อง restart dev server)

ตัวแปร	ใช้ที่	หมายเหตุ
NEXT_PUBLIC_API_BASE_URL	lib/api/http.ts	base URL ของ backend · ว่าง = เรียก mock route ใน app/api · คนละ origin ต้องเปิด CORS + credentials
NEXT_PUBLIC_SITE_URL	lib/domain/referral.ts	URL เว็บจริง สำหรับลิงก์ชวนเพื่อนตอน SSR
NEXT_PUBLIC_IMAGE_HOSTS	next.config.ts	origin รูปจาก CDN สำหรับ next/image (คั่นด้วย comma) · origin ของ API ถูกเพิ่มให้อัตโนมัติ
AUTH_SESSION_SECRET	lib/auth/session.ts	secret เซ็น cookie ของ mock auth · production ต้องตั้ง ≥ 32 ตัวอักษร ไม่งั้น login error (dev ใช้ค่า fallback)
AUTH_ENABLE_DEMO_USER	lib/auth/demoUser.ts	1 = เปิดบัญชีเดโมบน production (ค่าเริ่มต้นปิด · dev เปิดเสมอ) · เบอร์ 0999999999 / รหัส demo1234

ข้อมูลตอนนี้เป็น mock — ต่อ API จริงตรงไหน

ทุกหน้าดึงข้อมูลผ่าน lib/api/*.ts ซึ่งส่วนใหญ่ยังคืน mock จาก app/data/*MockData.ts

• lib/api/endpoints.ts — แผนที่ฟังก์ชัน → method / path / ต้อง login หรือไม่ (สัญญาที่ backend ต้องทำให้ตรง)
• lib/api/http.ts — apiFetch<T>(path, { method, body, query }) ตัวเดียวสำหรับทุกการเรียก: ใส่ base URL, ส่ง cookie, รองรับ JSON / FormData และ ไม่ throw — คืน { ok: true, data } หรือ { ok: false, error: { code, status, message } } (code: NETWORK · UNAUTHORIZED · HTTP · PARSE · ABORTED, message พร้อมแสดงผู้ใช้)
• auth (lib/auth/client.ts), หวย (lib/lottery/*) และโปรโมชัน (lib/api/promotions.ts) ใช้ apiFetch แล้ว
• ต่อ backend โดยแก้ เฉพาะ body ของฟังก์ชันใน lib/api/ ให้เรียก apiFetch และคืนชนิดข้อมูลเดิม ห้ามเรียก fetch() ตรงจาก component
• ฟังก์ชัน fetch* ทั้งหมดยังเป็น synchronous และหลาย component เรียกระหว่าง render — เมื่อเปลี่ยนเป็น HTTP (async) ต้องปรับจุดเรียกด้วย
• บาง component ยัง import จาก app/data/* ตรง (รายชื่อค่ายเกม, รายการเกม, VIP tiers, lookup หวย) — ต้องย้ายมาผ่าน lib/api ก่อน

Mock server ใน repo (dev เท่านั้น)

Route	ทำอะไร	ข้อจำกัด
app/api/auth/* (login, register, logout, session, profile)	auth แบบเบา: cookie cm_session (HMAC), รหัสผ่าน scrypt	ผู้ใช้เก็บใน .data/users.json (gitignored) · token ไม่หมดอายุ · มี demo user ใน lib/auth/demoUser.ts
app/api/lottery/* (bets, slips)	ส่งโพยและดูโพย	เก็บใน memory (lib/lottery/mockSlipStore.ts) หายเมื่อ restart · ยังไม่เช็ก login / ไม่ตัดเงิน
app/api/promotions/*	catalog + รายละเอียดโปรโมชัน	อ่านจาก public/promotions/*.json

ห้าม deploy mock server เหล่านี้ขึ้น production — ต้องแทนด้วย backend จริง

ความปลอดภัยที่ทำไว้แล้ว (และสิ่งที่ backend ต้องทำต่อ)

ส่วน	ทำแล้วใน repo นี้	backend จริงต้องทำ
session	HMAC cookie · httpOnly · หมดอายุ 30 วัน (ตรวจทั้ง cookie และ timestamp) · production ไม่มี secret = error	เพิกถอน token ตอน logout / เปลี่ยนรหัส (ต้องมี session store)
หน้า member	proxy.ts กัน /transactions · /cashback · /profile/account · /vip · /lottery/slips → /?layer=login	ตรวจสิทธิ์ทุก endpoint อีกชั้น (proxy เป็นแค่ด่านแรก)
input	ทุก route อ่าน body ผ่าน lib/server/request.ts (ชนิด · ความยาว · ขนาด body ≤ 16KB) · ธนาคาร/ช่องทางต้องอยู่ในตัวเลือก	validate ด้วย schema เดียวกับ API spec
brute force	rate limit login 10 ครั้ง/5 นาที ต่อ IP และต่อเบอร์ · register 5 ครั้ง/10 นาที (in-memory)	rate limit ที่ gateway / Redis (หลาย instance)
หวย	ต้อง login · อัตราจ่าย/ป้ายประเภทคิดฝั่ง server · ตรวจเลขตามจำนวนหลัก · ยอด 1–100,000 · ≤ 100 รายการ · โพยเห็นเฉพาะเจ้าของ	ตัดเงิน + เช็กรอบเปิดรับใน transaction เดียว · min/max ตามตลาด
redirect	?continue= และ continuePlayHref รับเฉพาะ path ภายใน	—
headers	X-Frame-Options · CSP (frame-ancestors/base-uri/form-action/object-src) · nosniff · Referrer-Policy · Permissions-Policy · HSTS (production)	CSP script-src แบบ nonce เมื่อรู้โดเมนจริง
บัญชีเดโม	ปิดบน production (เปิดด้วย AUTH_ENABLE_DEMO_USER=1)	ลบออกเมื่อมีระบบสมาชิกจริง

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗