한국어

로그인 프로젝트 공개

BadCount 🏸

배드민턴 세션을 추적하고 그룹을 관리하며 점수와 결제를 기록

원문 보기

Track badminton sessions, manage groups, record scores and payments

AI가 요약 · 페이지 글에서

스포츠·피트니스JavaScript · HTMLGitHub @leezen441온라인운영자 미확인

제품 방문하기 GitHub

써 보셨어요? 한 번만 눌러 주세요. 로그인은 필요 없어요.

가동 상태: 온라인; 30일 가동률 100%
최근 코드 업데이트: 10월 27일; 활성 저장소
최신 버전: 없음
기여자: 1명; 포크 0
nomorevibe 등록: 11월 8일; 저장소 생성 2026년 5월

언어 구성

JavaScript 66.5%
HTML 29.7%
CSS 3.8%

업데이트0건

전체

아직 감지된 업데이트가 없습니다. GitHub 릴리스가 나오면 여기에 보입니다.

최신순

···

GitHub 이슈 수신 설정

로그인 상태를 확인하는 중입니다.

댓글을 불러오는 중입니다.

BadCount 🏸 — nomorevibe

BadCount 🏸

배드민턴 세션을 추적하고 그룹을 관리하며 점수와 결제를 기록

원문 보기

Track badminton sessions, manage groups, record scores and payments

AI가 요약 · 페이지 글에서

스포츠·피트니스JavaScript · HTMLGitHub @leezen441온라인운영자 미확인

제품 방문하기 GitHub

써 보셨어요? 한 번만 눌러 주세요. 로그인은 필요 없어요.

가동 상태: 온라인; 30일 가동률 100%
최근 코드 업데이트: 10월 27일; 활성 저장소
최신 버전: 없음
기여자: 1명; 포크 0
nomorevibe 등록: 11월 8일; 저장소 생성 2026년 5월

언어 구성

JavaScript 66.5%
HTML 29.7%
CSS 3.8%

업데이트0건

전체

아직 감지된 업데이트가 없습니다. GitHub 릴리스가 나오면 여기에 보입니다.

최신순

···

GitHub 이슈 수신 설정

로그인 상태를 확인하는 중입니다.

댓글을 불러오는 중입니다.

소개

메이커가 쓴 소개는 위의 한 줄이 전부입니다. 더 자세한 내용은 저장소 README에서 읽을 수 있습니다. 저장소 README ↗

README

🏸 BadCount — แอปบันทึกเกมแบดมินตัน

Web App (PWA) ธีม Sporty Neon-Lime & Sleek Graphite-Black สำหรับจดสมาชิก นับลูก คำนวณค่าใช้จ่าย และจัดคิวเกมแบดมินตัน Real-time sync ทุกคนเห็นพร้อมกัน — ใช้ฟรี 100%

เวอร์ชันปัจจุบัน: 3.19.0 (cache badcount-v55)

🌐 Live: badcount.vercel.app
📦 GitHub: leezen441/Badcount

✨ คุณสมบัติหลัก

🎨 ธีมพรีเมียม Sporty Neon-Lime & Sleek Graphite-Black (CI 100%)

✅ บังคับธีมดาร์กโหมดถาวร (Forced Dark Mode): ดีไซน์สปอร์ตด้วยเขียวสะท้อนแสงนีออน (#b5f714) และดำกราไฟต์ (#0d0e12) — initTheme() ใส่คลาส dark ตลอด ไม่มีโหมดสว่าง
✅ เน้นการอ่านออกได้ง่ายและชัดเจน (High Legibility): คอนทราสต์อักษรสีดำเข้ม (#121315) บนปุ่มเขียวนีออน อ่านง่ายภายใต้แสงสนาม
✅ ดีไซน์ Opaque Card เรียบหรู: หลีกเลี่ยงเลเยอร์โปร่งแสงที่ทับซ้อน ทำให้อ่านประวัติ ยอดเงิน และตารางเกมได้ชัด
✅ สปอร์ตไอคอนเฉพาะตัว (Abstract Brand Identity): โลโก้ PWA และ Favicon เป็นเวกเตอร์ไม้แบด + ลูกขนไก่
✅ ปุ่มหลักพร้อม Micro-Animations: ปุ่มในหน้ารายละเอียดกลุ่ม (Invite, Temp Manager, Export, QR Payment) เรืองแสงนีออน พร้อมคลิกย่อตัวและ hover glow
✅ ตัวเลือกปฏิทิน/เวลาความคมชัดสูง: ในดาร์กโหมด ไอคอน date/time picker เป็นสีขาวคมชัด

👥 จัดการกลุ่ม (Session Management)

✅ สร้างกลุ่ม/ก๊วนของแต่ละวัน: จัดการรายชื่อสมาชิก จำนวนสนาม และค่าใช้จ่าย
✅ ปุ่ม "สร้างกลุ่มอาทิตย์หน้า" (Recurring Session): คัดลอกจากก๊วนล่าสุดเฉพาะ สถานที่ / ค่าคอร์ต / ค่าลูก / ค่าอื่นๆ / สนาม / QR ธนาคาร แล้วตั้งวันที่เป็นวันอาทิตย์ที่ใกล้ที่สุด — ไม่คัดลอกสมาชิกและแมตช์ ก๊วนใหม่เริ่มว่าง สถานะเปิด เปิดรับสมาชิก
✅ การจัดการสมาชิกแบบยืดหยุ่น: เพิ่ม/ลบได้ตลอด พร้อม suggestion จากชื่อที่เคยลงเล่นในเครื่องนั้น (สูงสุด 30 ชื่อ)
✅ พักคิวสมาชิกชั่วคราว (Pause Members): หยุดไม่ให้เข้า Auto Draft โดยไม่ต้องลบชื่อ — คนที่ลงชื่อผ่านลิงก์ join จะถูกพักคิวอัตโนมัติจนกว่าแอดมินจะปลด
✅ ปิดรับสมาชิก: ล็อกไม่ให้ลงชื่อเพิ่มได้ แม้ Court ยังเปิดอยู่ (ปิด Court = ปิดรับอัตโนมัติ)
✅ ประวัติย้อนหลัง (History): แสดงรายการกลุ่มย้อนหลังสูงสุด 50 รายการล่าสุด
✅ Highlight สถานะกลุ่ม: กลุ่มที่ปิดยอดแล้วเด่นด้วยกรอบเขียวนีออน กลุ่มที่กำลังเปิดอยู่แยกชัด

🏟️ จัดการสนาม (Court Management)

✅ ระบุเลขสนาม + ช่วงเวลา: เปิด-ปิดแต่ละสนามไม่พร้อมกันได้
✅ Time Picker: นาฬิกา 24 ชั่วโมง
✅ Suggestion จากกลุ่มก่อน: ดึงสนามล่าสุดจาก settings/defaults (lastUsedCourts)

💰 คำนวณค่าใช้จ่าย (Expense Calculation)

✅ ค่าคอร์ตแบบยืดหยุ่น: toggle "รวม (หารเท่ากัน)" หรือ "ต่อคน"
✅ ค่าลูกแบดตามใช้จริง: โหมดเบอร์ลูก (เช่น 1-5, 8) หรือโหมดนับจำนวนอย่างง่าย (simpleShuttleCount) — ลูกจากแมตช์หารให้ผู้เล่นในเกมนั้น (ยกเว้นคนที่ถูก exempt)
✅ ค่าใช้จ่ายอื่นๆ (ค่าน้ำ/อาหาร): หารเท่ากันทุกคน หรือคิดรายคน
✅ ยกเว้น / กำหนดยอดเอง: ฟรีค่าลูกทั้งก๊วน, เว้นจำนวนลูก, หรือ manualFee ให้แอดมินใส่ยอดคงที่รายคน
✅ ติดตามสถานะการชำระเงิน: ติ๊ก "จ่ายแล้ว" รายคนแบบ realtime พร้อมขีดฆ่าชื่อ

🎮 จัดเกม + สถิติ (Matchmaking & Stats)

✅ Auto Draft: จัด 4 คนจากผู้ที่ลงน้อย, คู่ซ้ำน้อย, บาลานซ์มือ, buddy อยู่ฝั่งเดียวกัน (คนพักคิว / จ่ายแล้วไม่ถูกสุ่ม)
✅ Auto Split: แบ่งฝั่ง Team A vs Team B จากระดับมือ (A / B / C / P / S)
✅ Buddy (คู่หู): ในโหมด advance สมาชิกเลือก buddy ได้ตอนลงชื่อ เพื่อให้อยู่ฝั่งเดียวกัน
✅ Co-play Badges: badge 3 ระดับว่าใครเคยเล่นด้วยกันกี่ครั้ง
✅ บันทึกแมตช์นับลูก: เก็บผู้เล่น 4 คน, เบอร์/จำนวนลูก, และผู้เล่นที่ยกเว้นค่าลูกในเกมนั้น — ไม่มีฟิลด์คะแนน rally

📲 หน้าต่างโต้ตอบบนมือถือ (Mobile Modals & Layout)

✅ Centered Modals: หน้าต่างเกมใหม่, PromptPay, และอื่นๆ กึ่งกลางจอ มุมโค้ง rounded-2xl
✅ ปุ่มล่างไม่ถูกบัง: ความสูง modal สูงสุด ~90% ของจอ มีสกรอลล์ภายใน
✅ ปุ่มย้อนกลับบนมือถือ: History API + LIFO modal stack — กด Back ปิด modal ล่าสุดก่อน ไม่ออกจากหน้า
✅ PWA Install: ติดตั้งแบบ standalone เต็มจอ

⚡ Cache-Busting & PWA Resilient Updates

✅ Service Worker: namespace badcount-v33 ใน sw.js — เคลียร์แคชเก่าเมื่ออัปเดต
✅ Cache-busting query: premium.css?v=3.16.0 และ app.js?v=3.16.0 ใน index.html
- ⚠️ กฎสำคัญ: ทุกครั้งที่แก้ app.js / premium.css ต้อง bump ?v= ใน index.html และ CACHE_NAME ใน sw.js ไม่งั้นผู้ใช้ไม่เห็นของใหม่
✅ Resilient Realtime Sync: แจ้ง online/offline และ resubscribe Firestore เมื่อกลับมาจาก background

📤 Export & Sharing

✅ Bill JPG: สรุปยอดก๊วนพร้อม QR รับเงิน
✅ ภาพทวงค่า: ส่งต่อทางแชต (LINE / Messenger) แจ้งยอดค้างรายคน
✅ PromptPay QR Cloud Sync: สร้าง QR ไดนามิกจากเบอร์/ID ใน settings/defaults (canonical EMV + quiet zone) — fallback เป็น session.bankQR ถ้ายังไม่มี PromptPay ID
✅ สลิปโอนเงิน: อัปโหลดเก็บใน sessions/{id}/receipts/{memberId} เป็น base64 ใน Firestore (ไม่ใช้ Firebase Storage) พร้อม metadata ลบอัตโนมัติ ~30 วัน

🔔 Notification System

✅ Toast + เสียง: แจ้งเมื่อมีคนลงชื่อใหม่
✅ Dynamic Tab Title: กระพริบชื่อแท็บพร้อมจำนวนผู้เล่น
✅ Native OS Notifications: แจ้งแอดมิน/ผู้จัดการเมื่อย่อหน้าต่าง

🔒 Authentication & Access Level

✅ Admin passcode: เทียบ SHA-256 กับ PASSCODE_HASH ใน app.js — จำใน localStorage 30 วัน
✅ Manager passcode: รหัสผู้ช่วยแยกต่างหากใน app.js (ข้อความตรง ไม่ได้ hash) — จำจนกว่าจะออกจากระบบ
✅ Temp Manager PIN: PIN 4 หลักต่อก๊วน + วันหมดอายุ ใช้เข้า /#/m/{id}
✅ 3-Tier Permission: Admin / Manager / Member (ลิงก์ join สาธารณะ ไม่มีล็อกอิน)

🆕 ฟีเจอร์ล่าสุด (ตรงกับโค้ดปัจจุบัน)

✅ 🤖 LINE Bot: พักการส่งเข้ากลุ่มทั้งหมด (ประหยัดโควตา LINE) — ไม่มีส่งอัตโนมัติ, ปุ่ม LINE ซ่อนไว้, ปุ่มทวงเปลี่ยนเป็นแชร์/คัดลอกข้อความแทน · โค้ดส่งยังเก็บไว้ครบ
✅ ลงชื่อ = พักคิวอัตโนมัติ: join ผ่านลิงก์ → isPaused: true จนแอดมินปลดเมื่อมาถึงสนาม
✅ จำระดับมือข้ามก๊วน: ชื่อที่เคยตั้งมือไว้ ระบบใส่ระดับล่าสุดให้ตอนลงชื่อ/เพิ่มสมาชิก
✅ Personal Stats แบบ Chip + Suggest: พิมพ์/กดชื่อหลายคน + แนะนำชื่อใกล้เคียง (ไทย↔อังกฤษ เช่น Ball↔บอล)
✅ PromptPay QR สแกนได้หลายแบงก์: field order แบบ canonical + ขอบขาว (quiet zone)

🌐 Routes / URL Patterns

Hash router ใน app.js (route()):

URL	สิทธิ์	หน้าที่
`/#/`	Admin	แดชบอร์ด สร้าง/เปิดก๊วน
`/#/history`	Admin (Manager ถูกส่งไป m-home)	ประวัติกลุ่ม 50 รายการล่าสุด
`/#/personal-stats`	Admin & Manager	สถิติรายคน จำนวนเกม ค่าลูก ยอดเงิน ตามช่วงเวลา
`/#/admin-summary`	Admin & Manager	สรุปยอดรับ จ่าย ค้าง
`/#/session/{id}`	Admin (ไม่ล็อกอินจะล็อก nav)	จัดการก๊วนเต็มสิทธิ์: สมาชิก สนาม เงิน จัดเกมนับลูก
`/#/m-home`	Manager / Admin	รายการก๊วนล่าสุดสำหรับผู้จัดการ
`/#/m/{id}`	Temp Manager	จัดการก๊วนนี้ (ต้อง PIN 4 หลักของก๊วนนั้น ถ้ายังไม่ผ่าน)
`/#/join/{id}`	Public	ลงชื่อ (พักคิวอัตโนมัติ · จำระดับมือ) ดูยอด อัปโหลดสลิป — เลือก buddy ได้เมื่อก๊วนเป็นโหมด advance

🤖 LINE Bot Integration (instance หลัก)

บอท LINE Official Account ผ่าน Vercel Serverless Functions (api/) ต่อ Firestore โปรเจกต์เดียวกัน (badcount-a1296)

คำสั่งบอท

พิมพ์ในแชต/กลุ่ม	ใครสั่งได้	การทำงาน
`startbadcount`	เจ้าของ	เริ่มทำงาน + จำแชต/กลุ่มนี้เป็นปลายทาง · คนแรกที่พิมพ์ = เจ้าของถาวร (Trust-On-First-Use)
`stopbadcount`	เจ้าของ	หยุดทำงาน — คำสั่ง `invite` / `close` จะเงียบด้วย
`invite`	ทุกคน	ตอบ list invite ของก๊วนที่เปิดอยู่ล่าสุด (ไม่มีก๊วนเปิด → แจ้งว่าไม่มี)
`close`	ทุกคน / คนที่อนุญาต	ก๊วนล่าสุดที่วันที่ไม่เกินวันนี้ (ข้ามก๊วนล่วงหน้า) · ปิดแล้ว → ทุกคนได้ list จ่ายเงิน · ยังเปิด → เจ้าของหรือคนที่อนุญาต = ปิด Court ในแอปให้เลย + ตอบ list จ่ายเงิน · คนที่ยังไม่อนุญาต = ได้รหัส 4 หลักให้เจ้าของอนุมัติ
`allow <รหัส>`	เจ้าของ	อนุญาตคนที่ขอรหัสนั้นให้ปิด Court ผ่าน `close` ได้ถาวร (รหัสหมดอายุ 30 นาที)
`closers`	เจ้าของ	ดูรายชื่อคนที่ปิด Court ได้
`disallow <ลำดับ>`	เจ้าของ	ถอนสิทธิ์คนลำดับนั้นจาก `closers`

พิมพ์คำสั่งเดี่ยวๆ ทั้งข้อความ ไม่ต้องมีคำนำหน้า/แท็กบอท · ตัวพิมพ์เล็ก-ใหญ่ได้ (Close, INVITE)
ทุกคำสั่งเป็น reply (ตอบกลับ) → ไม่กินโควตา LINE · invite / close ใช้ได้เฉพาะตอนบอท active
สิทธิ์ปิด Court เก็บเป็น LINE userId ใน settings/lineBot.closers (เปลี่ยนชื่อในไลน์ก็ปลอมไม่ได้)
ข้อความอื่นบอทเงียบ / ตอนถูกเชิญเข้ากลุ่มจะทักให้พิมพ์ startbadcount

สิ่งที่บอททำจริง (ตรงกับโค้ด)

ปุ่ม LINE ในหน้าก๊วน: ซ่อนไว้ชั่วคราว (ครอบด้วย HTML comment ใน index.html ข้างช่องวันที่) — handler ใน app.js และ api/line-notify.js ยังอยู่ครบ ลบคอมเมนต์ออกก็ใช้ได้ทันที
ปุ่มทวง ในหน้าก๊วน: ไม่ส่งผ่านบอทแล้ว — แชร์/คัดลอกข้อความทวง (เหมือนปุ่ม 🔔 ทวงเงิน) ให้วางในแชตเอง ไม่กินโควตา · ฟังก์ชันส่งผ่านบอท remindUnpaidViaLine() ใน app.js ยังเก็บไว้ ผูกกลับที่ listener ของ btnRemindUnpaid เพื่อใช้ใหม่
ไม่มีการส่งอัตโนมัติ — ตัดออกทั้งหมดเพื่อประหยัดโควตา LINE (push เข้ากลุ่มนับตามจำนวนสมาชิก): ไม่ส่งตอนมีคนลงชื่อ, ตอนปิดรับ, ตอนปิด Court, ตอนสร้างเกมแรก และไม่มี cron ทวงทุกเช้า

การตั้งค่า (ครั้งเดียว)

สร้าง Messaging API channel ที่ LINE Developers Console → ได้ Channel access token + Channel secret
ใส่ใน Vercel → Environment Variables: LINE_CHANNEL_ACCESS_TOKEN, LINE_CHANNEL_SECRET (ตัวเลือก PUBLIC_BASE_URL ถ้าต้องการบังคับโดเมน)
ตั้ง Webhook URL = https://<โดเมน>/api/line-webhook → เปิด Use webhook
ที่ OA Manager: ปิด Auto-reply · เปิด Webhooks · เปิด Allow bots to join group chats
เชิญบอทเข้ากลุ่ม → พิมพ์ startbadcount (คนพิมพ์คนแรก = เจ้าของ)

LINE API รันได้เมื่อ deploy บน Vercel (หรือ vercel dev) — สแตติกเซิร์ฟเวอร์อย่าง python -m http.server จะไม่รัน /api/*

ผลต่อฐานข้อมูล

doc settings/lineBot — adminUserId, active, groupId / roomId / directUserId, updatedAt
field ใน session: lineNotifiedAt, lineOpenNotifiedAt (optional) — ไม่แตะ members / ค่าใช้จ่าย / สลิป

บอทผูกกับ Firebase project ของ instance นั้น — ถ้าจะทำ Team B ต้องสร้าง channel + ตั้ง env แยก และชี้ firebase config ใน api/_firebase.js ไปโปรเจกต์นั้น

📁 โครงสร้างไฟล์

Badcount/
  ├─ index.html          ← UI หลัก (premium.css?v=3.16.0 / app.js?v=3.16.0)
  ├─ premium.css         ← ธีมเขียวนีออน-ดำกราไฟต์
  ├─ app.js              ← Logic หลักทั้งหมด (จัดคิว, คำนวณเงิน, PWA, join, LINE ฝั่งไคลเอนต์)
  ├─ firebase-config.js  ← Firestore web config (โปรเจกต์ badcount-a1296)
  ├─ manifest.json       ← PWA manifest
  ├─ icon.svg / icon-maskable.svg
  ├─ sw.js               ← Service Worker (CACHE_NAME = badcount-v55)
  ├─ qrcode.min.js       ← สร้าง PromptPay QR (local)
  ├─ package.json        ← dependency `firebase` สำหรับ serverless เท่านั้น
  ├─ api/                ← LINE Bot — Vercel Serverless Functions
  │   ├─ line-webhook.js   ← startbadcount / stopbadcount
  │   ├─ line-notify.js    ← push invite / ทวงเงิน (เรียกจากปุ่มเท่านั้น)
  │   ├─ _totals.js        ← สูตรเงิน (ต้องตรงกับ calcSessionTotals ใน app.js)
  │   └─ _firebase.js / _line.js / _sessions.js / _notify.js
  ├─ .gitignore
  └─ README.md

ไม่มี bundler / TypeScript / ชุดทดสอบ — เปิด index.html คุยกับ Firestore โดยตรง

🚀 วิธีติดตั้ง (Setup ครั้งเดียว)

ขั้นที่ 1: สร้าง Firebase Project (ฟรี)

ไปที่ Firebase Console
คลิก Add project → ตั้งชื่อโครงการ เช่น badcount
ปิด Google Analytics (ไม่จำเป็น)
รอโครงการสร้างเสร็จ → กด Continue

ขั้นที่ 2: เพิ่ม Web App

ที่หน้า Project Overview → กดไอคอน </> (Web App)
ตั้งชื่อแอป เช่น badcount-web → กด Register app
คัดลอกวัตถุ firebaseConfig ไปใส่ใน firebase-config.js
กด Continue to console

แอปนี้ ไม่ใช้ Firebase Authentication — ล็อกอินเป็น passcode ฝั่งไคลเอนต์ ไม่ต้องเปิด Auth

ขั้นที่ 3: เปิดใช้งาน Firestore Database

เมนูซ้าย → Build → Firestore Database
กด Create database → เลือก Standard edition
Location: แนะนำ asia-southeast3 (Bangkok) (เปลี่ยนทีหลังไม่ได้)
เลือก Start in test mode → กด Create

ขั้นที่ 4: ตั้งค่า Security Rules

ใน Firestore → แท็บ Rules — rules ชุดที่ใช้อยู่เปิดอ่าน/เขียนได้ทุกคน (จำกัดขนาดสมาชิก ≤ 50):

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /sessions/{sessionId} {
      allow read: if true;
      allow create: if request.resource.data.keys().hasAll(['date', 'members', 'status'])
                    && request.resource.data.members.size() <= 50;
      allow update: if request.resource.data.members.size() <= 50;
      allow delete: if true;

      match /receipts/{memberId} {
        allow read: if true;
        allow write: if true;
      }
    }
    match /settings/{docId} {
      allow read: if true;
      allow write: if true;
    }
  }
}

กด Publish

ผู้ที่มีลิงก์ก๊วนหรือ join URL อ่าน/แก้ข้อมูลได้ตาม rules ด้านบน — แชร์เฉพาะกลุ่มที่ไว้ใจ

ขั้นที่ 5: ตั้งค่า `firebase-config.js`

แก้ไฟล์ firebase-config.js ในโฟลเดอร์โปรเจกต์:

export const firebaseConfig = {
  apiKey: "AIza...",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abc123"
};

ค่าเหล่านี้เป็น public client config ตามที่ Firebase ออกแบบไว้ ความคุมสิทธิ์อยู่ที่ Security Rules

ขั้นที่ 6: ตั้งรหัสผ่านแอดมิน (Passcode)

ใน app.js หา PASSCODE_HASH แล้วนำรหัสที่ต้องการมา hash เป็น SHA-256

ใน Console ของเบราว์เซอร์ (F12):

const buf = await crypto.subtle.digest(
  "SHA-256",
  new TextEncoder().encode("YOUR_PASSWORD")
);
console.log(
  Array.from(new Uint8Array(buf))
    .map(b => b.toString(16).padStart(2, "0"))
    .join("")
);

วางผลลัพธ์ลง PASSCODE_HASH
รหัสผู้ช่วย (MANAGER_PASSCODE) ตั้งแยกในไฟล์เดียวกัน — เป็นข้อความตรง ไม่ได้ hash

ขั้นที่ 7: GitHub

รีโปที่ใช้อยู่แล้ว: https://github.com/leezen441/Badcount.git

ถ้าเริ่มรีโปใหม่:

git init
git add .
git commit -m "Initial BadCount App Setup"

git remote add origin https://github.com/USERNAME/badcount.git
git branch -M main
git push -u origin main

ขั้นที่ 8: Deploy ขึ้น Vercel

Vercel → Import รีโปจาก GitHub
ไม่ต้องตั้ง build command (สแตติก + /api)
ใส่ env ของ LINE ถ้าจะใช้บอท → Deploy
ได้ URL เช่น https://your-app.vercel.app

🎉 ส่งลิงก์ก๊วนให้สมาชิกลงชื่อและสแกนจ่ายได้ทันที

🧮 สูตรคำนวณค่าใช้จ่าย

สูตรใน calcSessionTotals (app.js) และ api/_totals.js ต้องตรงกัน:

N = จำนวนสมาชิกในก๊วน

ค่าคอร์ตต่อคน  = (ค่าคอร์ตรวม ÷ N)  หรือ  ราคาต่อคนคงที่   ตาม courtFeeType
ค่าอื่นๆ ต่อคน  = (ค่ารวม ÷ N)      หรือ  ราคาต่อคนคงที่   ตาม otherCostType

ลูกของสมาชิก X =
  shuttlesUsed (ใส่เอง) + ส่วนแบ่งลูกจากทุกแมตช์ที่ X ลง
  (แมตช์หารให้ผู้เล่นในเกมนั้น; ถ้ามีคน exempt คนที่เหลือแบกส่วนนั้น)

ลูกที่คิดเงิน = 0 ถ้า excludeAllShuttles
             หรือ max(0, ลูกของ X − shuttlesExcluded)
             หรือตามปกติ

ยอด X = ค่าคอร์ตต่อคน + ค่าอื่นๆ ต่อคน + (ลูกที่คิดเงิน × shuttlePrice)

ถ้ามี manualFee → ใช้ยอดนั้นแทนทั้งสูตร

โหมดลูก:

เบอร์ลูก (ค่าเริ่ม): ใส่ 1-5, 8 แล้วระบบนับจำนวน
นับจำนวน (simpleShuttleCount): ใส่ตัวเลขจำนวนลูกตรงๆ

ตัวอย่าง (ยังไม่มียกเว้น / manualFee)

ก๊วน 4 คน ค่าคอร์ตรวม 400 · ค่าน้ำรวม 100 · ลูกละ 25 · A ใช้ 2, B 1, C 2, D 1

สมาชิก	ค่าสนาม	ค่าน้ำ/อื่นๆ	ค่าลูก	ยอดสุทธิ
A	100 ฿	25 ฿	50 ฿ (2 ลูก)	175 ฿
B	100 ฿	25 ฿	25 ฿ (1 ลูก)	150 ฿
C	100 ฿	25 ฿	50 ฿ (2 ลูก)	175 ฿
D	100 ฿	25 ฿	25 ฿ (1 ลูก)	150 ฿
รวม	400 ฿	100 ฿	150 ฿	650 ฿

📲 PWA Install

🤖 Android (Chrome)

เปิด URL ด้วย Chrome
เมนู (⋮) → Install app / Add to Home screen

🍎 iOS (Safari เท่านั้น)

เปิดด้วย Safari
Share → Add to Home Screen
(ถ้าต้องการแจ้งเตือน) Settings → Notifications → BadCount

💻 Desktop (Chrome / Edge)

ไอคอนติดตั้งใน address bar หรือเมนู → Install BadCount...

ถ้าเปิดใน LINE in-app browser แอปจะพยายามเด้งออกไปบราวเซอร์จริง (openExternalBrowser=1) เพราะแชร์รูป/กล้องใน LINE มักไม่ครบ

🛠️ รันในเครื่อง

แอปหลัก (สแตติก + Firestore):

python -m http.server 8000

เปิด http://localhost:8000
หรือ VS Code Live Server ที่ index.html

ต้องมีเน็ตสำหรับ Firebase + CDN (Tailwind, Fonts, jsQR)

LINE /api/*: ใช้ vercel dev หลัง npm install และใส่ env ของ LINE — http.server ไม่รัน serverless

💰 โควตาฟรี

บริการ	Free tier ที่เกี่ยวข้อง	หมายเหตุของแอปนี้
Vercel Hosting	bandwidth ตามแพลน Hobby	สแตติก + serverless LINE
Firestore (Spark)	reads / writes รายวัน	ฐานข้อมูลหลัก + สลิป base64 ใน subcollection `receipts`
LINE Messaging API	ตามโควตาช่องทาง	เลยตัดการส่งอัตโนมัติทั้งหมด เหลือแค่กดปุ่มเอง

ไม่ใช้ Firebase Storage — รูปสลิปอยู่ใน Firestore document

🏗️ เทคโนโลยี (Tech Stack)

เลเยอร์	ของที่ใช้
Frontend	HTML + `premium.css` + Tailwind CDN + Vanilla JS (ไม่มี build)
Database	Firebase Firestore realtime (`onSnapshot`)
Hosting	Vercel (push GitHub → deploy)
Auth	Admin SHA-256 + Manager passcode + Temp PIN — ไม่ใช้ Firebase Auth
PWA	Manifest + Service Worker + Notification API
QR	`qrcode.min.js` (สร้าง PromptPay) + jsQR CDN (อ่านสลิป)
LINE	Messaging API ผ่าน `api/*.js`

🔒 ข้อควรระวังด้านความปลอดภัย

รหัสแอดมินเก็บเป็น SHA-256 ในซอร์ส ไม่เก็บรหัสดิบของแอดมิน
รหัสผู้ช่วย (MANAGER_PASSCODE) เป็นข้อความตรงใน app.js — เปลี่ยนเองถ้าแชร์รีโปสาธารณะ
ทราฟฟิกผ่าน HTTPS ของ Vercel
Firestore rules ชุดปัจจุบัน อ่าน/เขียนได้ทุกคน (จำกัดสมาชิก ≤ 50) — ผู้ที่มีลิงก์ /#/session/{id}, /#/m/{id} หรือ /#/join/{id} เข้าถึงข้อมูลก๊วนนั้นได้
/api/line-notify ไม่มี auth ของผู้เรียก — ใครรู้ sessionId ตอนบอท active อาจทริกเกอร์โพสต์ LINE ได้
ถ้าต้องการล็อกเข้มขึ้น ค่อยเพิ่ม Firebase Authentication ในภายหลัง

📝 สัญญาอนุญาต (License)

โปรเจกต์นี้อยู่ภายใต้สัญญาอนุญาตสิทธิ์ MIT License

นำไปปรับแต่ง แก้ไข แจกจ่าย หรือพัฒนาต่อยอดในก๊วนของคุณได้โดยไม่ต้องขออนุญาต

🏸 BadCount — Count Every Game. Enjoy Every Match.

README 전문 보기 ↗

README

🏸 BadCount — แอปบันทึกเกมแบดมินตัน

เวอร์ชันปัจจุบัน: 3.19.0 (cache badcount-v55)

🌐 Live: badcount.vercel.app
📦 GitHub: leezen441/Badcount

✨ คุณสมบัติหลัก

🎨 ธีมพรีเมียม Sporty Neon-Lime & Sleek Graphite-Black (CI 100%)

✅ บังคับธีมดาร์กโหมดถาวร (Forced Dark Mode): ดีไซน์สปอร์ตด้วยเขียวสะท้อนแสงนีออน (#b5f714) และดำกราไฟต์ (#0d0e12) — initTheme() ใส่คลาส dark ตลอด ไม่มีโหมดสว่าง
✅ เน้นการอ่านออกได้ง่ายและชัดเจน (High Legibility): คอนทราสต์อักษรสีดำเข้ม (#121315) บนปุ่มเขียวนีออน อ่านง่ายภายใต้แสงสนาม
✅ ดีไซน์ Opaque Card เรียบหรู: หลีกเลี่ยงเลเยอร์โปร่งแสงที่ทับซ้อน ทำให้อ่านประวัติ ยอดเงิน และตารางเกมได้ชัด
✅ สปอร์ตไอคอนเฉพาะตัว (Abstract Brand Identity): โลโก้ PWA และ Favicon เป็นเวกเตอร์ไม้แบด + ลูกขนไก่
✅ ปุ่มหลักพร้อม Micro-Animations: ปุ่มในหน้ารายละเอียดกลุ่ม (Invite, Temp Manager, Export, QR Payment) เรืองแสงนีออน พร้อมคลิกย่อตัวและ hover glow
✅ ตัวเลือกปฏิทิน/เวลาความคมชัดสูง: ในดาร์กโหมด ไอคอน date/time picker เป็นสีขาวคมชัด

👥 จัดการกลุ่ม (Session Management)

✅ สร้างกลุ่ม/ก๊วนของแต่ละวัน: จัดการรายชื่อสมาชิก จำนวนสนาม และค่าใช้จ่าย
✅ ปุ่ม "สร้างกลุ่มอาทิตย์หน้า" (Recurring Session): คัดลอกจากก๊วนล่าสุดเฉพาะ สถานที่ / ค่าคอร์ต / ค่าลูก / ค่าอื่นๆ / สนาม / QR ธนาคาร แล้วตั้งวันที่เป็นวันอาทิตย์ที่ใกล้ที่สุด — ไม่คัดลอกสมาชิกและแมตช์ ก๊วนใหม่เริ่มว่าง สถานะเปิด เปิดรับสมาชิก
✅ การจัดการสมาชิกแบบยืดหยุ่น: เพิ่ม/ลบได้ตลอด พร้อม suggestion จากชื่อที่เคยลงเล่นในเครื่องนั้น (สูงสุด 30 ชื่อ)
✅ พักคิวสมาชิกชั่วคราว (Pause Members): หยุดไม่ให้เข้า Auto Draft โดยไม่ต้องลบชื่อ — คนที่ลงชื่อผ่านลิงก์ join จะถูกพักคิวอัตโนมัติจนกว่าแอดมินจะปลด
✅ ปิดรับสมาชิก: ล็อกไม่ให้ลงชื่อเพิ่มได้ แม้ Court ยังเปิดอยู่ (ปิด Court = ปิดรับอัตโนมัติ)
✅ ประวัติย้อนหลัง (History): แสดงรายการกลุ่มย้อนหลังสูงสุด 50 รายการล่าสุด
✅ Highlight สถานะกลุ่ม: กลุ่มที่ปิดยอดแล้วเด่นด้วยกรอบเขียวนีออน กลุ่มที่กำลังเปิดอยู่แยกชัด

🏟️ จัดการสนาม (Court Management)

✅ ระบุเลขสนาม + ช่วงเวลา: เปิด-ปิดแต่ละสนามไม่พร้อมกันได้
✅ Time Picker: นาฬิกา 24 ชั่วโมง
✅ Suggestion จากกลุ่มก่อน: ดึงสนามล่าสุดจาก settings/defaults (lastUsedCourts)

💰 คำนวณค่าใช้จ่าย (Expense Calculation)

✅ ค่าคอร์ตแบบยืดหยุ่น: toggle "รวม (หารเท่ากัน)" หรือ "ต่อคน"
✅ ค่าลูกแบดตามใช้จริง: โหมดเบอร์ลูก (เช่น 1-5, 8) หรือโหมดนับจำนวนอย่างง่าย (simpleShuttleCount) — ลูกจากแมตช์หารให้ผู้เล่นในเกมนั้น (ยกเว้นคนที่ถูก exempt)
✅ ค่าใช้จ่ายอื่นๆ (ค่าน้ำ/อาหาร): หารเท่ากันทุกคน หรือคิดรายคน
✅ ยกเว้น / กำหนดยอดเอง: ฟรีค่าลูกทั้งก๊วน, เว้นจำนวนลูก, หรือ manualFee ให้แอดมินใส่ยอดคงที่รายคน
✅ ติดตามสถานะการชำระเงิน: ติ๊ก "จ่ายแล้ว" รายคนแบบ realtime พร้อมขีดฆ่าชื่อ

🎮 จัดเกม + สถิติ (Matchmaking & Stats)

✅ Auto Draft: จัด 4 คนจากผู้ที่ลงน้อย, คู่ซ้ำน้อย, บาลานซ์มือ, buddy อยู่ฝั่งเดียวกัน (คนพักคิว / จ่ายแล้วไม่ถูกสุ่ม)
✅ Auto Split: แบ่งฝั่ง Team A vs Team B จากระดับมือ (A / B / C / P / S)
✅ Buddy (คู่หู): ในโหมด advance สมาชิกเลือก buddy ได้ตอนลงชื่อ เพื่อให้อยู่ฝั่งเดียวกัน
✅ Co-play Badges: badge 3 ระดับว่าใครเคยเล่นด้วยกันกี่ครั้ง
✅ บันทึกแมตช์นับลูก: เก็บผู้เล่น 4 คน, เบอร์/จำนวนลูก, และผู้เล่นที่ยกเว้นค่าลูกในเกมนั้น — ไม่มีฟิลด์คะแนน rally

📲 หน้าต่างโต้ตอบบนมือถือ (Mobile Modals & Layout)

✅ Centered Modals: หน้าต่างเกมใหม่, PromptPay, และอื่นๆ กึ่งกลางจอ มุมโค้ง rounded-2xl
✅ ปุ่มล่างไม่ถูกบัง: ความสูง modal สูงสุด ~90% ของจอ มีสกรอลล์ภายใน
✅ ปุ่มย้อนกลับบนมือถือ: History API + LIFO modal stack — กด Back ปิด modal ล่าสุดก่อน ไม่ออกจากหน้า
✅ PWA Install: ติดตั้งแบบ standalone เต็มจอ

⚡ Cache-Busting & PWA Resilient Updates

✅ Service Worker: namespace badcount-v33 ใน sw.js — เคลียร์แคชเก่าเมื่ออัปเดต
✅ Cache-busting query: premium.css?v=3.16.0 และ app.js?v=3.16.0 ใน index.html
- ⚠️ กฎสำคัญ: ทุกครั้งที่แก้ app.js / premium.css ต้อง bump ?v= ใน index.html และ CACHE_NAME ใน sw.js ไม่งั้นผู้ใช้ไม่เห็นของใหม่
✅ Resilient Realtime Sync: แจ้ง online/offline และ resubscribe Firestore เมื่อกลับมาจาก background

📤 Export & Sharing

✅ Bill JPG: สรุปยอดก๊วนพร้อม QR รับเงิน
✅ ภาพทวงค่า: ส่งต่อทางแชต (LINE / Messenger) แจ้งยอดค้างรายคน
✅ PromptPay QR Cloud Sync: สร้าง QR ไดนามิกจากเบอร์/ID ใน settings/defaults (canonical EMV + quiet zone) — fallback เป็น session.bankQR ถ้ายังไม่มี PromptPay ID
✅ สลิปโอนเงิน: อัปโหลดเก็บใน sessions/{id}/receipts/{memberId} เป็น base64 ใน Firestore (ไม่ใช้ Firebase Storage) พร้อม metadata ลบอัตโนมัติ ~30 วัน

🔔 Notification System

✅ Toast + เสียง: แจ้งเมื่อมีคนลงชื่อใหม่
✅ Dynamic Tab Title: กระพริบชื่อแท็บพร้อมจำนวนผู้เล่น
✅ Native OS Notifications: แจ้งแอดมิน/ผู้จัดการเมื่อย่อหน้าต่าง

🔒 Authentication & Access Level

✅ Admin passcode: เทียบ SHA-256 กับ PASSCODE_HASH ใน app.js — จำใน localStorage 30 วัน
✅ Manager passcode: รหัสผู้ช่วยแยกต่างหากใน app.js (ข้อความตรง ไม่ได้ hash) — จำจนกว่าจะออกจากระบบ
✅ Temp Manager PIN: PIN 4 หลักต่อก๊วน + วันหมดอายุ ใช้เข้า /#/m/{id}
✅ 3-Tier Permission: Admin / Manager / Member (ลิงก์ join สาธารณะ ไม่มีล็อกอิน)

🆕 ฟีเจอร์ล่าสุด (ตรงกับโค้ดปัจจุบัน)

✅ 🤖 LINE Bot: พักการส่งเข้ากลุ่มทั้งหมด (ประหยัดโควตา LINE) — ไม่มีส่งอัตโนมัติ, ปุ่ม LINE ซ่อนไว้, ปุ่มทวงเปลี่ยนเป็นแชร์/คัดลอกข้อความแทน · โค้ดส่งยังเก็บไว้ครบ
✅ ลงชื่อ = พักคิวอัตโนมัติ: join ผ่านลิงก์ → isPaused: true จนแอดมินปลดเมื่อมาถึงสนาม
✅ จำระดับมือข้ามก๊วน: ชื่อที่เคยตั้งมือไว้ ระบบใส่ระดับล่าสุดให้ตอนลงชื่อ/เพิ่มสมาชิก
✅ Personal Stats แบบ Chip + Suggest: พิมพ์/กดชื่อหลายคน + แนะนำชื่อใกล้เคียง (ไทย↔อังกฤษ เช่น Ball↔บอล)
✅ PromptPay QR สแกนได้หลายแบงก์: field order แบบ canonical + ขอบขาว (quiet zone)

🌐 Routes / URL Patterns

Hash router ใน app.js (route()):

URL	สิทธิ์	หน้าที่
`/#/`	Admin	แดชบอร์ด สร้าง/เปิดก๊วน
`/#/history`	Admin (Manager ถูกส่งไป m-home)	ประวัติกลุ่ม 50 รายการล่าสุด
`/#/personal-stats`	Admin & Manager	สถิติรายคน จำนวนเกม ค่าลูก ยอดเงิน ตามช่วงเวลา
`/#/admin-summary`	Admin & Manager	สรุปยอดรับ จ่าย ค้าง
`/#/session/{id}`	Admin (ไม่ล็อกอินจะล็อก nav)	จัดการก๊วนเต็มสิทธิ์: สมาชิก สนาม เงิน จัดเกมนับลูก
`/#/m-home`	Manager / Admin	รายการก๊วนล่าสุดสำหรับผู้จัดการ
`/#/m/{id}`	Temp Manager	จัดการก๊วนนี้ (ต้อง PIN 4 หลักของก๊วนนั้น ถ้ายังไม่ผ่าน)
`/#/join/{id}`	Public	ลงชื่อ (พักคิวอัตโนมัติ · จำระดับมือ) ดูยอด อัปโหลดสลิป — เลือก buddy ได้เมื่อก๊วนเป็นโหมด advance

🤖 LINE Bot Integration (instance หลัก)

บอท LINE Official Account ผ่าน Vercel Serverless Functions (api/) ต่อ Firestore โปรเจกต์เดียวกัน (badcount-a1296)

คำสั่งบอท

พิมพ์ในแชต/กลุ่ม	ใครสั่งได้	การทำงาน
`startbadcount`	เจ้าของ	เริ่มทำงาน + จำแชต/กลุ่มนี้เป็นปลายทาง · คนแรกที่พิมพ์ = เจ้าของถาวร (Trust-On-First-Use)
`stopbadcount`	เจ้าของ	หยุดทำงาน — คำสั่ง `invite` / `close` จะเงียบด้วย
`invite`	ทุกคน	ตอบ list invite ของก๊วนที่เปิดอยู่ล่าสุด (ไม่มีก๊วนเปิด → แจ้งว่าไม่มี)
`close`	ทุกคน / คนที่อนุญาต	ก๊วนล่าสุดที่วันที่ไม่เกินวันนี้ (ข้ามก๊วนล่วงหน้า) · ปิดแล้ว → ทุกคนได้ list จ่ายเงิน · ยังเปิด → เจ้าของหรือคนที่อนุญาต = ปิด Court ในแอปให้เลย + ตอบ list จ่ายเงิน · คนที่ยังไม่อนุญาต = ได้รหัส 4 หลักให้เจ้าของอนุมัติ
`allow <รหัส>`	เจ้าของ	อนุญาตคนที่ขอรหัสนั้นให้ปิด Court ผ่าน `close` ได้ถาวร (รหัสหมดอายุ 30 นาที)
`closers`	เจ้าของ	ดูรายชื่อคนที่ปิด Court ได้
`disallow <ลำดับ>`	เจ้าของ	ถอนสิทธิ์คนลำดับนั้นจาก `closers`

พิมพ์คำสั่งเดี่ยวๆ ทั้งข้อความ ไม่ต้องมีคำนำหน้า/แท็กบอท · ตัวพิมพ์เล็ก-ใหญ่ได้ (Close, INVITE)
ทุกคำสั่งเป็น reply (ตอบกลับ) → ไม่กินโควตา LINE · invite / close ใช้ได้เฉพาะตอนบอท active
สิทธิ์ปิด Court เก็บเป็น LINE userId ใน settings/lineBot.closers (เปลี่ยนชื่อในไลน์ก็ปลอมไม่ได้)
ข้อความอื่นบอทเงียบ / ตอนถูกเชิญเข้ากลุ่มจะทักให้พิมพ์ startbadcount

สิ่งที่บอททำจริง (ตรงกับโค้ด)

ปุ่ม LINE ในหน้าก๊วน: ซ่อนไว้ชั่วคราว (ครอบด้วย HTML comment ใน index.html ข้างช่องวันที่) — handler ใน app.js และ api/line-notify.js ยังอยู่ครบ ลบคอมเมนต์ออกก็ใช้ได้ทันที
ปุ่มทวง ในหน้าก๊วน: ไม่ส่งผ่านบอทแล้ว — แชร์/คัดลอกข้อความทวง (เหมือนปุ่ม 🔔 ทวงเงิน) ให้วางในแชตเอง ไม่กินโควตา · ฟังก์ชันส่งผ่านบอท remindUnpaidViaLine() ใน app.js ยังเก็บไว้ ผูกกลับที่ listener ของ btnRemindUnpaid เพื่อใช้ใหม่
ไม่มีการส่งอัตโนมัติ — ตัดออกทั้งหมดเพื่อประหยัดโควตา LINE (push เข้ากลุ่มนับตามจำนวนสมาชิก): ไม่ส่งตอนมีคนลงชื่อ, ตอนปิดรับ, ตอนปิด Court, ตอนสร้างเกมแรก และไม่มี cron ทวงทุกเช้า

การตั้งค่า (ครั้งเดียว)

สร้าง Messaging API channel ที่ LINE Developers Console → ได้ Channel access token + Channel secret
ใส่ใน Vercel → Environment Variables: LINE_CHANNEL_ACCESS_TOKEN, LINE_CHANNEL_SECRET (ตัวเลือก PUBLIC_BASE_URL ถ้าต้องการบังคับโดเมน)
ตั้ง Webhook URL = https://<โดเมน>/api/line-webhook → เปิด Use webhook
ที่ OA Manager: ปิด Auto-reply · เปิด Webhooks · เปิด Allow bots to join group chats
เชิญบอทเข้ากลุ่ม → พิมพ์ startbadcount (คนพิมพ์คนแรก = เจ้าของ)

ผลต่อฐานข้อมูล

doc settings/lineBot — adminUserId, active, groupId / roomId / directUserId, updatedAt
field ใน session: lineNotifiedAt, lineOpenNotifiedAt (optional) — ไม่แตะ members / ค่าใช้จ่าย / สลิป

บอทผูกกับ Firebase project ของ instance นั้น — ถ้าจะทำ Team B ต้องสร้าง channel + ตั้ง env แยก และชี้ firebase config ใน api/_firebase.js ไปโปรเจกต์นั้น

📁 โครงสร้างไฟล์

Badcount/
  ├─ index.html          ← UI หลัก (premium.css?v=3.16.0 / app.js?v=3.16.0)
  ├─ premium.css         ← ธีมเขียวนีออน-ดำกราไฟต์
  ├─ app.js              ← Logic หลักทั้งหมด (จัดคิว, คำนวณเงิน, PWA, join, LINE ฝั่งไคลเอนต์)
  ├─ firebase-config.js  ← Firestore web config (โปรเจกต์ badcount-a1296)
  ├─ manifest.json       ← PWA manifest
  ├─ icon.svg / icon-maskable.svg
  ├─ sw.js               ← Service Worker (CACHE_NAME = badcount-v55)
  ├─ qrcode.min.js       ← สร้าง PromptPay QR (local)
  ├─ package.json        ← dependency `firebase` สำหรับ serverless เท่านั้น
  ├─ api/                ← LINE Bot — Vercel Serverless Functions
  │   ├─ line-webhook.js   ← startbadcount / stopbadcount
  │   ├─ line-notify.js    ← push invite / ทวงเงิน (เรียกจากปุ่มเท่านั้น)
  │   ├─ _totals.js        ← สูตรเงิน (ต้องตรงกับ calcSessionTotals ใน app.js)
  │   └─ _firebase.js / _line.js / _sessions.js / _notify.js
  ├─ .gitignore
  └─ README.md

ไม่มี bundler / TypeScript / ชุดทดสอบ — เปิด index.html คุยกับ Firestore โดยตรง

🚀 วิธีติดตั้ง (Setup ครั้งเดียว)

ขั้นที่ 1: สร้าง Firebase Project (ฟรี)

ไปที่ Firebase Console
คลิก Add project → ตั้งชื่อโครงการ เช่น badcount
ปิด Google Analytics (ไม่จำเป็น)
รอโครงการสร้างเสร็จ → กด Continue

ขั้นที่ 2: เพิ่ม Web App

ที่หน้า Project Overview → กดไอคอน </> (Web App)
ตั้งชื่อแอป เช่น badcount-web → กด Register app
คัดลอกวัตถุ firebaseConfig ไปใส่ใน firebase-config.js
กด Continue to console

แอปนี้ ไม่ใช้ Firebase Authentication — ล็อกอินเป็น passcode ฝั่งไคลเอนต์ ไม่ต้องเปิด Auth

ขั้นที่ 3: เปิดใช้งาน Firestore Database

เมนูซ้าย → Build → Firestore Database
กด Create database → เลือก Standard edition
Location: แนะนำ asia-southeast3 (Bangkok) (เปลี่ยนทีหลังไม่ได้)
เลือก Start in test mode → กด Create

ขั้นที่ 4: ตั้งค่า Security Rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /sessions/{sessionId} {
      allow read: if true;
      allow create: if request.resource.data.keys().hasAll(['date', 'members', 'status'])
                    && request.resource.data.members.size() <= 50;
      allow update: if request.resource.data.members.size() <= 50;
      allow delete: if true;

      match /receipts/{memberId} {
        allow read: if true;
        allow write: if true;
      }
    }
    match /settings/{docId} {
      allow read: if true;
      allow write: if true;
    }
  }
}

กด Publish

ผู้ที่มีลิงก์ก๊วนหรือ join URL อ่าน/แก้ข้อมูลได้ตาม rules ด้านบน — แชร์เฉพาะกลุ่มที่ไว้ใจ

ขั้นที่ 5: ตั้งค่า `firebase-config.js`

แก้ไฟล์ firebase-config.js ในโฟลเดอร์โปรเจกต์:

export const firebaseConfig = {
  apiKey: "AIza...",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abc123"
};

ค่าเหล่านี้เป็น public client config ตามที่ Firebase ออกแบบไว้ ความคุมสิทธิ์อยู่ที่ Security Rules

ขั้นที่ 6: ตั้งรหัสผ่านแอดมิน (Passcode)

ใน app.js หา PASSCODE_HASH แล้วนำรหัสที่ต้องการมา hash เป็น SHA-256

ใน Console ของเบราว์เซอร์ (F12):

const buf = await crypto.subtle.digest(
  "SHA-256",
  new TextEncoder().encode("YOUR_PASSWORD")
);
console.log(
  Array.from(new Uint8Array(buf))
    .map(b => b.toString(16).padStart(2, "0"))
    .join("")
);

ขั้นที่ 7: GitHub

รีโปที่ใช้อยู่แล้ว: https://github.com/leezen441/Badcount.git

ถ้าเริ่มรีโปใหม่:

git init
git add .
git commit -m "Initial BadCount App Setup"

git remote add origin https://github.com/USERNAME/badcount.git
git branch -M main
git push -u origin main

ขั้นที่ 8: Deploy ขึ้น Vercel

Vercel → Import รีโปจาก GitHub
ไม่ต้องตั้ง build command (สแตติก + /api)
ใส่ env ของ LINE ถ้าจะใช้บอท → Deploy
ได้ URL เช่น https://your-app.vercel.app

🎉 ส่งลิงก์ก๊วนให้สมาชิกลงชื่อและสแกนจ่ายได้ทันที

🧮 สูตรคำนวณค่าใช้จ่าย

สูตรใน calcSessionTotals (app.js) และ api/_totals.js ต้องตรงกัน:

N = จำนวนสมาชิกในก๊วน

ค่าคอร์ตต่อคน  = (ค่าคอร์ตรวม ÷ N)  หรือ  ราคาต่อคนคงที่   ตาม courtFeeType
ค่าอื่นๆ ต่อคน  = (ค่ารวม ÷ N)      หรือ  ราคาต่อคนคงที่   ตาม otherCostType

ลูกของสมาชิก X =
  shuttlesUsed (ใส่เอง) + ส่วนแบ่งลูกจากทุกแมตช์ที่ X ลง
  (แมตช์หารให้ผู้เล่นในเกมนั้น; ถ้ามีคน exempt คนที่เหลือแบกส่วนนั้น)

ลูกที่คิดเงิน = 0 ถ้า excludeAllShuttles
             หรือ max(0, ลูกของ X − shuttlesExcluded)
             หรือตามปกติ

ยอด X = ค่าคอร์ตต่อคน + ค่าอื่นๆ ต่อคน + (ลูกที่คิดเงิน × shuttlePrice)

ถ้ามี manualFee → ใช้ยอดนั้นแทนทั้งสูตร

โหมดลูก:

เบอร์ลูก (ค่าเริ่ม): ใส่ 1-5, 8 แล้วระบบนับจำนวน
นับจำนวน (simpleShuttleCount): ใส่ตัวเลขจำนวนลูกตรงๆ

ตัวอย่าง (ยังไม่มียกเว้น / manualFee)

ก๊วน 4 คน ค่าคอร์ตรวม 400 · ค่าน้ำรวม 100 · ลูกละ 25 · A ใช้ 2, B 1, C 2, D 1

สมาชิก	ค่าสนาม	ค่าน้ำ/อื่นๆ	ค่าลูก	ยอดสุทธิ
A	100 ฿	25 ฿	50 ฿ (2 ลูก)	175 ฿
B	100 ฿	25 ฿	25 ฿ (1 ลูก)	150 ฿
C	100 ฿	25 ฿	50 ฿ (2 ลูก)	175 ฿
D	100 ฿	25 ฿	25 ฿ (1 ลูก)	150 ฿
รวม	400 ฿	100 ฿	150 ฿	650 ฿

📲 PWA Install

🤖 Android (Chrome)

เปิด URL ด้วย Chrome
เมนู (⋮) → Install app / Add to Home screen

🍎 iOS (Safari เท่านั้น)

เปิดด้วย Safari
Share → Add to Home Screen
(ถ้าต้องการแจ้งเตือน) Settings → Notifications → BadCount

💻 Desktop (Chrome / Edge)

ไอคอนติดตั้งใน address bar หรือเมนู → Install BadCount...

🛠️ รันในเครื่อง

แอปหลัก (สแตติก + Firestore):

python -m http.server 8000

เปิด http://localhost:8000
หรือ VS Code Live Server ที่ index.html

ต้องมีเน็ตสำหรับ Firebase + CDN (Tailwind, Fonts, jsQR)

LINE /api/*: ใช้ vercel dev หลัง npm install และใส่ env ของ LINE — http.server ไม่รัน serverless

💰 โควตาฟรี

บริการ	Free tier ที่เกี่ยวข้อง	หมายเหตุของแอปนี้
Vercel Hosting	bandwidth ตามแพลน Hobby	สแตติก + serverless LINE
Firestore (Spark)	reads / writes รายวัน	ฐานข้อมูลหลัก + สลิป base64 ใน subcollection `receipts`
LINE Messaging API	ตามโควตาช่องทาง	เลยตัดการส่งอัตโนมัติทั้งหมด เหลือแค่กดปุ่มเอง

ไม่ใช้ Firebase Storage — รูปสลิปอยู่ใน Firestore document

🏗️ เทคโนโลยี (Tech Stack)

เลเยอร์	ของที่ใช้
Frontend	HTML + `premium.css` + Tailwind CDN + Vanilla JS (ไม่มี build)
Database	Firebase Firestore realtime (`onSnapshot`)
Hosting	Vercel (push GitHub → deploy)
Auth	Admin SHA-256 + Manager passcode + Temp PIN — ไม่ใช้ Firebase Auth
PWA	Manifest + Service Worker + Notification API
QR	`qrcode.min.js` (สร้าง PromptPay) + jsQR CDN (อ่านสลิป)
LINE	Messaging API ผ่าน `api/*.js`

🔒 ข้อควรระวังด้านความปลอดภัย

รหัสแอดมินเก็บเป็น SHA-256 ในซอร์ส ไม่เก็บรหัสดิบของแอดมิน
รหัสผู้ช่วย (MANAGER_PASSCODE) เป็นข้อความตรงใน app.js — เปลี่ยนเองถ้าแชร์รีโปสาธารณะ
ทราฟฟิกผ่าน HTTPS ของ Vercel
Firestore rules ชุดปัจจุบัน อ่าน/เขียนได้ทุกคน (จำกัดสมาชิก ≤ 50) — ผู้ที่มีลิงก์ /#/session/{id}, /#/m/{id} หรือ /#/join/{id} เข้าถึงข้อมูลก๊วนนั้นได้
/api/line-notify ไม่มี auth ของผู้เรียก — ใครรู้ sessionId ตอนบอท active อาจทริกเกอร์โพสต์ LINE ได้
ถ้าต้องการล็อกเข้มขึ้น ค่อยเพิ่ม Firebase Authentication ในภายหลัง

📝 สัญญาอนุญาต (License)

โปรเจกต์นี้อยู่ภายใต้สัญญาอนุญาตสิทธิ์ MIT License

🏸 BadCount — Count Every Game. Enjoy Every Match.

README 전문 보기 ↗

BadCount 🏸

언어 구성

업데이트0건

댓글

스포츠·피트니스 분야의 다른 프로젝트

BadCount 🏸

언어 구성

업데이트0건

댓글

스포츠·피트니스 분야의 다른 프로젝트

이 프로젝트의 운영자인가요?

소개

README

🏸 BadCount — แอปบันทึกเกมแบดมินตัน

✨ คุณสมบัติหลัก

🎨 ธีมพรีเมียม Sporty Neon-Lime & Sleek Graphite-Black (CI 100%)

👥 จัดการกลุ่ม (Session Management)

🏟️ จัดการสนาม (Court Management)

💰 คำนวณค่าใช้จ่าย (Expense Calculation)

🎮 จัดเกม + สถิติ (Matchmaking & Stats)

📲 หน้าต่างโต้ตอบบนมือถือ (Mobile Modals & Layout)

⚡ Cache-Busting & PWA Resilient Updates

📤 Export & Sharing

🔔 Notification System

🔒 Authentication & Access Level

🆕 ฟีเจอร์ล่าสุด (ตรงกับโค้ดปัจจุบัน)

🌐 Routes / URL Patterns

🤖 LINE Bot Integration (instance หลัก)

คำสั่งบอท

สิ่งที่บอททำจริง (ตรงกับโค้ด)

การตั้งค่า (ครั้งเดียว)

ผลต่อฐานข้อมูล

📁 โครงสร้างไฟล์

🚀 วิธีติดตั้ง (Setup ครั้งเดียว)

ขั้นที่ 1: สร้าง Firebase Project (ฟรี)

ขั้นที่ 2: เพิ่ม Web App

ขั้นที่ 3: เปิดใช้งาน Firestore Database

ขั้นที่ 4: ตั้งค่า Security Rules

ขั้นที่ 5: ตั้งค่า firebase-config.js

ขั้นที่ 6: ตั้งรหัสผ่านแอดมิน (Passcode)

ขั้นที่ 7: GitHub

ขั้นที่ 8: Deploy ขึ้น Vercel

🧮 สูตรคำนวณค่าใช้จ่าย

ตัวอย่าง (ยังไม่มียกเว้น / manualFee)

📲 PWA Install

🤖 Android (Chrome)

🍎 iOS (Safari เท่านั้น)

💻 Desktop (Chrome / Edge)

🛠️ รันในเครื่อง

💰 โควตาฟรี

🏗️ เทคโนโลยี (Tech Stack)

🔒 ข้อควรระวังด้านความปลอดภัย

📝 สัญญาอนุญาต (License)

README

README

🏸 BadCount — แอปบันทึกเกมแบดมินตัน

✨ คุณสมบัติหลัก

🎨 ธีมพรีเมียม Sporty Neon-Lime & Sleek Graphite-Black (CI 100%)

👥 จัดการกลุ่ม (Session Management)

🏟️ จัดการสนาม (Court Management)

💰 คำนวณค่าใช้จ่าย (Expense Calculation)

🎮 จัดเกม + สถิติ (Matchmaking & Stats)

📲 หน้าต่างโต้ตอบบนมือถือ (Mobile Modals & Layout)

⚡ Cache-Busting & PWA Resilient Updates

📤 Export & Sharing

🔔 Notification System

🔒 Authentication & Access Level

🆕 ฟีเจอร์ล่าสุด (ตรงกับโค้ดปัจจุบัน)

🌐 Routes / URL Patterns

🤖 LINE Bot Integration (instance หลัก)

คำสั่งบอท

สิ่งที่บอททำจริง (ตรงกับโค้ด)

การตั้งค่า (ครั้งเดียว)

ผลต่อฐานข้อมูล

📁 โครงสร้างไฟล์

🚀 วิธีติดตั้ง (Setup ครั้งเดียว)

ขั้นที่ 1: สร้าง Firebase Project (ฟรี)

ขั้นที่ 2: เพิ่ม Web App

ขั้นที่ 3: เปิดใช้งาน Firestore Database

ขั้นที่ 4: ตั้งค่า Security Rules

ขั้นที่ 5: ตั้งค่า `firebase-config.js`

ขั้นที่ 5: ตั้งค่า `firebase-config.js`