badminton-match-hub/README.md

# 羽毛球分組配對器

這是一個使用 `React + Vite + TypeScript` 製作的網頁應用程式，用來將 A 區與 B 區成員配成羽毛球隊伍。

## 功能說明

- 分別輸入 A 區與 B 區名單
- 可指定要寫入資料庫的目標日期
- 每次固定產生 3 組完整配對結果
- 每一隊都由 `1 位 A 區 + 1 位 B 區` 組成
- 每一組都會把 A 區與 B 區名單完整分配完成
- 若某一區人數不足，系統會自動補入「那個」
- 產生配對後可用按鈕手動上傳資料到資料庫
- 支援換行、半形逗號、全形逗號與頓號輸入
- 會自動去除空白與重複名稱

## 使用方式

```bash
npm install
npm run dev
```

## 資料庫欄位

- `time`: 目標日期，格式為 `YYYYMMDD`
- `personnel`: 人員清單，格式為 `[[1,"A區成員"],[0,"B區成員"]]`
- `battlecombination`: 三組隊伍搭配，格式為 `{"0":[["A","B"]],"1":[...],"2":[...]}`

## 正式建置

```bash
npm run build
```

## Docker 部署

這個專案已提供單容器部署方式，容器啟動後會同時提供：

- 網頁前端
- `/api` 後端
- MariaDB 寫入功能

### 建立映像

```bash
docker build -t badminton-match-hub .
```

### 啟動容器

```bash
docker run -d \
  --name badminton-match-hub \
  -p 8787:8787 \
  -e PORT=8787 \
  -e DB_HOST=192.168.0.15 \
  -e DB_PORT=3307 \
  -e DB_USER=jianmiau \
  -e DB_PASSWORD=你的密碼 \
  -e DB_DATABASE=badminton \
  -e DB_TABLE=badminton \
  badminton-match-hub
```

### NAS 上建議設定

- 容器埠使用 `8787`
- 對外埠可自訂，例如 `8787:8787`
- 環境變數請在 NAS 的 Docker 介面中填入
- 不要把本機 `.env` 直接打包進映像

部署完成後可直接透過：

```text
http://NAS_IP:8787
```

開啟系統。

### docker-compose

專案也已提供 [docker-compose.yml](D:/Users/JianMiau/Downloads/badminton-match-hub/docker-compose.yml)。

```bash
docker compose up -d --build
```

Compose 版本預設會：

- 對外使用 `3500`
- 容器內部使用 `3500`
- 讀取 `.env` 內的資料庫設定

部署後可透過：

```text
http://NAS_IP:3500
```

開啟系統。