สมุดแมทช์ — บันทึกผล PTCG
เว็บแอปสำหรับบันทึกผลการเล่น Pokémon TCG เขียนด้วย Next.js (App Router) + TypeScript + Tailwind CSS + shadcn/ui ทำงานฝั่งไคลเอนต์ทั้งหมด ไม่มี backend / ไม่มีฐานข้อมูลฝั่งเซิร์ฟเวอร์
ฟีเจอร์
- 2 โหมด: TCG Live (บันทึกประจำวัน) และ เล่นข้างนอก (ตั้งชื่อรายการ, เลือกวันที่อิสระ, ระบุประเภทรายการ Gym / GBL / UBL / PBL / MBL)
- เลือกโปเกมอนแทนเด็ค (สูงสุด 2 ตัวต่อฝั่ง) จากฐานข้อมูลสไปรต์ 1,284 รายการ (โปเกมอนปกติ + Mega / Gigantamax / ร่างภูมิภาค ฯลฯ)
- ปุ่มติ๊ก 🧱 Brick สำหรับมือเปิดเกมเสีย
- สถิติรวม, อัตราชนะ, สถิติต่อเนื่อง, อัตรา Brick, ตารางสรุปคู่ต่อสู้, ประวัติการแข่งขัน
- ข้อมูลเก็บใน
localStorage ของเบราว์เซอร์ผู้ใช้ (คีย์เดิม ptcg_matchlog_v1 เข้ากันได้กับข้อมูลจากเวอร์ชัน static เดิม)
เทคโนโลยีที่ใช้
- Next.js (App Router, TypeScript)
- Tailwind CSS v4 (build จริงผ่าน PostCSS ไม่ใช่ Play CDN แบบเดิม)
- shadcn/ui สำหรับคอมโพเนนต์พื้นฐาน (Button, Dialog, Input, Select, Table ฯลฯ)
โครงสร้างไฟล์
app/ App Router: layout, page, global styles
components/ React components ของแอป (ฟอร์ม, ตัวเลือกโปเกมอน, ตาราง ฯลฯ)
components/ui/ shadcn/ui primitives
lib/ types, constants, localStorage helpers, สูตรคำนวณสถิติ
public/pokemon-data.json ฐานข้อมูลสไปรต์โปเกมอน (id, name, sprite เป็น base64 data URI) โหลดผ่าน fetch() ตอนรันไทม์
รันดูในเครื่อง
ติดตั้ง dependencies (แนะนำ pnpm):
pnpm install
pnpm dev
แล้วเปิด http://localhost:3000
คำสั่งอื่น ๆ
pnpm build # build production
pnpm start # รันเซิร์ฟเวอร์ production จากผลลัพธ์ build
pnpm lint # ตรวจโค้ดด้วย ESLint
Deploy
แอปนี้เป็น Next.js app ที่ต้องมีขั้นตอน build จึงเหมาะกับแพลตฟอร์มที่รองรับ Next.js โดยตรง เช่น Vercel (แนะนำ), Netlify หรือรันเป็น Node server เอง (pnpm build && pnpm start)
หมายเหตุ
- ข้อมูลสไปรต์ใน
public/pokemon-data.json ดึงมาจาก PokeAPI/sprites (ชื่อภาษาอังกฤษจาก PokeAPI/pokeapi data CSVs) แปลงเป็น base64 data URI ไว้ล่วงหน้า เพื่อให้แอปทำงานได้โดยไม่ต้องพึ่งอินเทอร์เน็ตหลังโหลดไฟล์นี้ครั้งแรก
- ข้อมูลแมทช์ทั้งหมดยังเก็บใน
localStorage ของเบราว์เซอร์เหมือนเดิม ไม่มีการส่งข้อมูลขึ้นเซิร์ฟเวอร์ใด ๆ
