🏸 Bisdakmintoners

Badminton Club Management App

A full-featured, single-file web app for managing badminton club sessions, queue match-ups, chip-in payments, and group projects. Built with plain HTML/JS and Firebase Firestore — no build tools required.

---

📦 File Structure

bisdakmintoners/
├── index.html        ← The entire app (HTML + CSS + JS in one file)
├── netlify.toml      ← Netlify deployment configuration
└── README.md         ← This file

---

🚀 Deployment Guide

Step 1 — Create a Firebase Project

1. Visit https://console.firebase.google.com
2. Click Add project → name it bisdakmintoners → click Continue through the steps
3. Go to Build → Firestore Database → Create database
4. Choose Start in test mode → select a region → click Enable

Step 2 — Get Your Firebase Config

1. In your Firebase project, click the ⚙️ gear icon → Project Settings
2. Under Your apps, click the </> (Web) icon
3. Register the app with any nickname (e.g. bisdakmintoners-web)
4. Copy the entire firebaseConfig object shown

Step 3 — Add Config to the App

Open index.html and find this block (around line 799):

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

Replace each placeholder value with your actual Firebase credentials.

Step 4 — Push to GitHub

git init
git add .
git commit -m "Bisdakmintoners v2"
git remote add origin https://github.com/YOUR_USERNAME/bisdakmintoners.git
git push -u origin main

Step 5 — Deploy on Netlify

1. Go to https://app.netlify.com
2. Click Add new site → Import an existing project → GitHub
3. Authorize Netlify and select your repository
4. Configure build settings:
   • Build command: (leave empty)
   • Publish directory: .
5. Click Deploy site

Your app will be live at a URL like https://bisdakmintoners.netlify.app.

Auto-deploy: Every time you push a new commit to GitHub, Netlify will automatically redeploy your app.

---

🔐 Role-Based Access

Login uses a simple 4-digit passcode per role. Select your role on the login screen, enter the passcode, and — for Members — choose your name from the dropdown.

Role	Default PIN	Access Level
👑 Super Admin	9999	Full access: members, sessions, queue, chip-in, projects, history, and passcode settings
🛡️ Admin	2222	Generate match-ups, manage sessions, record results, manage chip-in & projects
🏸 Member	1111	Select your name, view your queue position, input your own chip-in & project payments
👁️ Guest	(no PIN)	View-only access to all pages — no edits allowed

Passcodes can be changed anytime by the Super Admin under Settings.

---

📱 Pages & Features

📊 Dashboard

• Live stats: total members, sessions, projects, and members with outstanding balances
• Latest Session card — shows date, venue, and all attendees with avatars
• Outstanding Balances panel — lists every member with unpaid chip-in or project balances across all sessions and projects, sorted by amount owed
• Quick-pay shortcut directly from the dashboard

---

👥 Members

• Add, edit, and delete club members
• Fields: Full Name, Nickname (shown in queue for quick identification), Skill Level, Contact
• Skill levels: Beginner · Intermediate · Advanced — used for balanced match-ups and Advanced Battle Mode
• Color-coded avatars auto-generated from each member's name

Members page is visible to Super Admin, Admin, and Guest. Members log in and are identified by name, not this page.

---

🏸 Queue

For Admins & Super Admins

Complete queue management for 1 court, doubles format (4 players per match).

Creating a Session

• Set the date, venue, notes, and per-head chip-in amount
• Select which members are attending that session
• The system initializes the queue order from the attendee list

Generating a Match-Up

• Click ⚡ Generate Next to create the next match
• The system takes the next 4 players from the queue
• Teams are skill-balanced: strongest paired with weakest, 2nd paired with 3rd
• The current match is displayed on the Court 1 visual with Team A vs Team B

Recording Results

• Click Team A Wins, Draw, or Team B Wins
• Queue automatically rotates:
  • Winners → move to the front of the waiting queue
  • Losers → go to the back of the queue
  • Draw → both teams go to the back

Other Controls

• 🔀 Shuffle — randomize the entire queue order at any time
• Queue list shows each player's position, skill badge, and ON COURT tag if currently playing
• Advanced players in the queue are highlighted with a red left border

---

⚔️ Advanced Battle Mode

A special feature that schedules Advanced-only showdown matches at a configurable interval within the normal queue rotation.

How to enable:

1. Open the Advanced Battle Mode panel on the Queue page
2. Toggle the switch ON
3. Set the interval — e.g. 3 means every 3rd match will be an Advanced Battle

How it works:

• When a match number is a multiple of the set interval (e.g. match 3, 6, 9...), the system checks how many Advanced players are attending that session
• If 4 or more Advanced players are present → they are pulled from the attendee list, shuffled randomly, and split into 2 Advanced-only teams of 2
• If fewer than 4 Advanced players are present → the battle is skipped with a notification, and a regular balanced match runs instead
• Advanced Battle matches do not disrupt the normal queue — waiting players keep their positions and the rotation continues as usual after the battle

以上為 README 的開頭部分。其餘內容請閱讀原文。 檢視完整 README ↗