Initial React badminton team matching app
This commit is contained in:
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
31
README.md
Normal file
31
README.md
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
# 羽毛球隊伍配對器
|
||||||
|
|
||||||
|
這是一個使用 `React + Vite + TypeScript` 製作的網頁應用程式，專門用來協助羽毛球活動快速配對隊伍。
|
||||||
|
|
||||||
|
## 功能說明
|
||||||
|
|
||||||
|
- 可分別輸入 A 區與 B 區的成員名單
|
||||||
|
- 系統每次固定產生 3 組隊伍
|
||||||
|
- 每組皆由 `A 區 1 位 + B 區 1 位` 組成
|
||||||
|
- 同一輪內不會重複使用同一位成員
|
||||||
|
- 會顯示本輪未被選中的候補名單
|
||||||
|
- 會自動將輸入內容儲存在瀏覽器本機
|
||||||
|
|
||||||
|
## 使用方式
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## 正式建置
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
## 補充說明
|
||||||
|
|
||||||
|
- 輸入格式支援換行、半形逗號、全形逗號與頓號
|
||||||
|
- 系統會自動去除空白與重複名稱
|
||||||
|
- A 區與 B 區都至少需要 3 位不重複成員才能完成配對
|
||||||
23
eslint.config.js
Normal file
23
eslint.config.js
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs.flat.recommended,
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
17
index.html
Normal file
17
index.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-Hant">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="羽毛球隊伍配對器，支援輸入 A 區與 B 區名單並自動產生三組不重複配對。"
|
||||||
|
/>
|
||||||
|
<title>羽毛球隊伍配對器</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2999
package-lock.json
generated
Normal file
2999
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
30
package.json
Normal file
30
package.json
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"name": "badminton-match-hub",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^19.2.4",
|
||||||
|
"react-dom": "^19.2.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.39.4",
|
||||||
|
"@types/node": "^24.12.2",
|
||||||
|
"@types/react": "^19.2.14",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@vitejs/plugin-react": "^6.0.1",
|
||||||
|
"eslint": "^9.39.4",
|
||||||
|
"eslint-plugin-react-hooks": "^7.0.1",
|
||||||
|
"eslint-plugin-react-refresh": "^0.5.2",
|
||||||
|
"globals": "^17.4.0",
|
||||||
|
"typescript": "~6.0.2",
|
||||||
|
"typescript-eslint": "^8.58.0",
|
||||||
|
"vite": "^8.0.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/favicon.svg
Normal file
1
public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
353
src/App.css
Normal file
353
src/App.css
Normal file
@@ -0,0 +1,353 @@
|
|||||||
|
.app-shell {
|
||||||
|
width: min(1180px, calc(100% - 32px));
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 32px 0 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-card,
|
||||||
|
.panel,
|
||||||
|
.stat-card,
|
||||||
|
.tip-card,
|
||||||
|
.pair-card {
|
||||||
|
border: 1px solid rgba(24, 57, 38, 0.12);
|
||||||
|
box-shadow: 0 20px 45px rgba(26, 47, 35, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-card {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.35fr 0.85fr;
|
||||||
|
gap: 24px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy,
|
||||||
|
.hero-stats,
|
||||||
|
.panel {
|
||||||
|
border-radius: 28px;
|
||||||
|
backdrop-filter: blur(18px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy {
|
||||||
|
padding: 36px;
|
||||||
|
background: linear-gradient(145deg, rgba(255, 247, 234, 0.92), rgba(232, 244, 235, 0.84));
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
margin: 0 0 12px;
|
||||||
|
color: #1d6c46;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy h1,
|
||||||
|
.panel-heading h2,
|
||||||
|
.tip-card h2 {
|
||||||
|
margin: 0;
|
||||||
|
color: #183926;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy h1 {
|
||||||
|
font-size: clamp(2.6rem, 5vw, 4.7rem);
|
||||||
|
line-height: 0.98;
|
||||||
|
max-width: 8ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
max-width: 54ch;
|
||||||
|
margin-top: 18px;
|
||||||
|
color: #516256;
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 14px;
|
||||||
|
margin-top: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button,
|
||||||
|
.ghost-button {
|
||||||
|
min-height: 50px;
|
||||||
|
padding: 0 20px;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: none;
|
||||||
|
font: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button {
|
||||||
|
background: linear-gradient(135deg, #1d7b4d, #2b9f66);
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 16px 28px rgba(29, 123, 77, 0.24);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ghost-button {
|
||||||
|
background: rgba(255, 255, 255, 0.55);
|
||||||
|
color: #183926;
|
||||||
|
border: 1px solid rgba(24, 57, 38, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button:hover,
|
||||||
|
.ghost-button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-stats {
|
||||||
|
display: grid;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card,
|
||||||
|
.tip-card {
|
||||||
|
border-radius: 24px;
|
||||||
|
padding: 24px;
|
||||||
|
background: rgba(255, 250, 244, 0.82);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card span {
|
||||||
|
color: #5c6f61;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card strong {
|
||||||
|
color: #183926;
|
||||||
|
font-size: 3rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
background: linear-gradient(145deg, #183926, #24543a);
|
||||||
|
color: #edf6ef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-card h2 {
|
||||||
|
color: #edf6ef;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-card p {
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-grid,
|
||||||
|
.bench-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-grid {
|
||||||
|
grid-template-columns: 1.02fr 0.98fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bench-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
padding: 28px;
|
||||||
|
background: rgba(255, 253, 249, 0.78);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-heading {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roster-field {
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
color: #4b5b50;
|
||||||
|
font-size: 0.96rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roster-field span {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #183926;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roster-field textarea {
|
||||||
|
width: 100%;
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 260px;
|
||||||
|
border: 1px solid rgba(24, 57, 38, 0.15);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 16px;
|
||||||
|
background: rgba(255, 255, 255, 0.86);
|
||||||
|
color: #183926;
|
||||||
|
font: inherit;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roster-field textarea:focus,
|
||||||
|
.primary-button:focus-visible,
|
||||||
|
.ghost-button:focus-visible {
|
||||||
|
outline: 2px solid rgba(29, 123, 77, 0.26);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helper-text,
|
||||||
|
.empty-inline,
|
||||||
|
.empty-state p {
|
||||||
|
margin: 14px 0 0;
|
||||||
|
color: #627265;
|
||||||
|
line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-banner {
|
||||||
|
margin: 18px 0 0;
|
||||||
|
padding: 14px 16px;
|
||||||
|
border-radius: 18px;
|
||||||
|
background: rgba(186, 61, 47, 0.09);
|
||||||
|
border: 1px solid rgba(186, 61, 47, 0.18);
|
||||||
|
color: #8d2d22;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pair-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pair-card {
|
||||||
|
border-radius: 22px;
|
||||||
|
padding: 18px;
|
||||||
|
background: linear-gradient(145deg, rgba(255, 247, 236, 0.95), rgba(244, 251, 246, 0.92));
|
||||||
|
}
|
||||||
|
|
||||||
|
.pair-index {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #617265;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pair-names {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-chip {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 20px;
|
||||||
|
min-height: 98px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-chip strong {
|
||||||
|
font-size: clamp(1.15rem, 2vw, 1.45rem);
|
||||||
|
color: #183926;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-chip-a {
|
||||||
|
background: rgba(244, 157, 55, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-chip-b {
|
||||||
|
background: rgba(29, 123, 77, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip-label {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
color: #5f6f63;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pair-link {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border-radius: 999px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
background: #183926;
|
||||||
|
color: #fff6ea;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
min-height: 240px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
border-radius: 22px;
|
||||||
|
border: 1px dashed rgba(24, 57, 38, 0.18);
|
||||||
|
background: rgba(255, 255, 255, 0.45);
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-pill {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 36px;
|
||||||
|
padding: 0 14px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(29, 123, 77, 0.08);
|
||||||
|
color: #1d6c46;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.hero-card,
|
||||||
|
.content-grid,
|
||||||
|
.bench-grid,
|
||||||
|
.input-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy h1 {
|
||||||
|
max-width: 10ch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.app-shell {
|
||||||
|
width: min(100% - 20px, 1180px);
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy,
|
||||||
|
.panel,
|
||||||
|
.stat-card,
|
||||||
|
.tip-card {
|
||||||
|
padding: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pair-names {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pair-link {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 16px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roster-field textarea {
|
||||||
|
min-height: 220px;
|
||||||
|
}
|
||||||
|
}
|
||||||
260
src/App.tsx
Normal file
260
src/App.tsx
Normal file
@@ -0,0 +1,260 @@
|
|||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import './App.css'
|
||||||
|
|
||||||
|
type Pair = {
|
||||||
|
id: number
|
||||||
|
playerA: string
|
||||||
|
playerB: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type DrawResult = {
|
||||||
|
pairs: Pair[]
|
||||||
|
benchA: string[]
|
||||||
|
benchB: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const STORAGE_KEYS = {
|
||||||
|
areaA: 'badminton-match-hub::area-a',
|
||||||
|
areaB: 'badminton-match-hub::area-b',
|
||||||
|
} as const
|
||||||
|
|
||||||
|
const defaultAreaA = ['小杰', '阿誠', '建宏', '柏宇', 'Eason']
|
||||||
|
const defaultAreaB = ['小安', '佩珊', '阿廷', 'Luna', 'Mina']
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [areaAInput, setAreaAInput] = useState(() =>
|
||||||
|
loadRoster(STORAGE_KEYS.areaA, defaultAreaA),
|
||||||
|
)
|
||||||
|
const [areaBInput, setAreaBInput] = useState(() =>
|
||||||
|
loadRoster(STORAGE_KEYS.areaB, defaultAreaB),
|
||||||
|
)
|
||||||
|
const [result, setResult] = useState<DrawResult | null>(null)
|
||||||
|
const [error, setError] = useState('')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.localStorage.setItem(STORAGE_KEYS.areaA, areaAInput)
|
||||||
|
}, [areaAInput])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.localStorage.setItem(STORAGE_KEYS.areaB, areaBInput)
|
||||||
|
}, [areaBInput])
|
||||||
|
|
||||||
|
const parsedAreaA = parseRoster(areaAInput)
|
||||||
|
const parsedAreaB = parseRoster(areaBInput)
|
||||||
|
|
||||||
|
function generateMatches() {
|
||||||
|
if (parsedAreaA.length < 3 || parsedAreaB.length < 3) {
|
||||||
|
setResult(null)
|
||||||
|
setError('A 區與 B 區都至少要有 3 位不重複成員，才能產生三組配對。')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const shuffledA = shuffleList(parsedAreaA)
|
||||||
|
const shuffledB = shuffleList(parsedAreaB)
|
||||||
|
const selectedA = shuffledA.slice(0, 3)
|
||||||
|
const selectedB = shuffledB.slice(0, 3)
|
||||||
|
|
||||||
|
const pairs = selectedA.map((playerA, index) => ({
|
||||||
|
id: index + 1,
|
||||||
|
playerA,
|
||||||
|
playerB: selectedB[index],
|
||||||
|
}))
|
||||||
|
|
||||||
|
setResult({
|
||||||
|
pairs,
|
||||||
|
benchA: shuffledA.slice(3),
|
||||||
|
benchB: shuffledB.slice(3),
|
||||||
|
})
|
||||||
|
setError('')
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetDemo() {
|
||||||
|
setAreaAInput(defaultAreaA.join('\n'))
|
||||||
|
setAreaBInput(defaultAreaB.join('\n'))
|
||||||
|
setResult(null)
|
||||||
|
setError('')
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="app-shell">
|
||||||
|
<section className="hero-card">
|
||||||
|
<div className="hero-copy">
|
||||||
|
<p className="eyebrow">使用 React、Vite 與 TypeScript 建置</p>
|
||||||
|
<h1>羽毛球隊伍配對器</h1>
|
||||||
|
<p className="hero-text">
|
||||||
|
分別輸入 A 區與 B 區名單後，系統會從兩區各抽出 3 位成員，
|
||||||
|
自動組成 3 組隊伍。每一組都是 A 區 1 位搭配 B 區 1 位，
|
||||||
|
同一輪內三組成員都不會重複。
|
||||||
|
</p>
|
||||||
|
<div className="hero-actions">
|
||||||
|
<button className="primary-button" type="button" onClick={generateMatches}>
|
||||||
|
產生三組配對
|
||||||
|
</button>
|
||||||
|
<button className="ghost-button" type="button" onClick={resetDemo}>
|
||||||
|
載入範例名單
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hero-stats">
|
||||||
|
<article className="stat-card">
|
||||||
|
<span>A 區可用人數</span>
|
||||||
|
<strong>{parsedAreaA.length}</strong>
|
||||||
|
</article>
|
||||||
|
<article className="stat-card">
|
||||||
|
<span>B 區可用人數</span>
|
||||||
|
<strong>{parsedAreaB.length}</strong>
|
||||||
|
</article>
|
||||||
|
<article className="tip-card">
|
||||||
|
<h2>配對規則</h2>
|
||||||
|
<p>固定產生 3 組，且每組皆為 A 區 1 位加上 B 區 1 位，當輪不重複。</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="content-grid">
|
||||||
|
<article className="panel">
|
||||||
|
<div className="panel-heading">
|
||||||
|
<p className="eyebrow">名單輸入</p>
|
||||||
|
<h2>輸入 A 區與 B 區成員</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="input-grid">
|
||||||
|
<label className="roster-field">
|
||||||
|
<span>A 區成員</span>
|
||||||
|
<textarea
|
||||||
|
value={areaAInput}
|
||||||
|
onChange={(event) => setAreaAInput(event.target.value)}
|
||||||
|
placeholder={'每行一位\n例如：小杰'}
|
||||||
|
rows={10}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label className="roster-field">
|
||||||
|
<span>B 區成員</span>
|
||||||
|
<textarea
|
||||||
|
value={areaBInput}
|
||||||
|
onChange={(event) => setAreaBInput(event.target.value)}
|
||||||
|
placeholder={'每行一位\n例如：小安'}
|
||||||
|
rows={10}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="helper-text">
|
||||||
|
支援換行、半形逗號、全形逗號與頓號分隔，系統會自動去除空白與重複名稱。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{error ? <p className="error-banner">{error}</p> : null}
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="panel">
|
||||||
|
<div className="panel-heading">
|
||||||
|
<p className="eyebrow">配對結果</p>
|
||||||
|
<h2>本輪三組隊伍</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{result ? (
|
||||||
|
<div className="pair-list">
|
||||||
|
{result.pairs.map((pair) => (
|
||||||
|
<article className="pair-card" key={pair.id}>
|
||||||
|
<div className="pair-index">第 {pair.id} 組</div>
|
||||||
|
<div className="pair-names">
|
||||||
|
<div className="player-chip player-chip-a">
|
||||||
|
<span className="chip-label">A 區</span>
|
||||||
|
<strong>{pair.playerA}</strong>
|
||||||
|
</div>
|
||||||
|
<div className="pair-link">+</div>
|
||||||
|
<div className="player-chip player-chip-b">
|
||||||
|
<span className="chip-label">B 區</span>
|
||||||
|
<strong>{pair.playerB}</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="empty-state">
|
||||||
|
<p>輸入名單後按下「產生三組配對」，這裡會顯示本輪的抽籤結果。</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="bench-grid">
|
||||||
|
<article className="panel">
|
||||||
|
<div className="panel-heading">
|
||||||
|
<p className="eyebrow">候補名單</p>
|
||||||
|
<h2>A 區未出場成員</h2>
|
||||||
|
</div>
|
||||||
|
<RosterList
|
||||||
|
names={result?.benchA ?? parsedAreaA.slice(3)}
|
||||||
|
emptyText="目前沒有 A 區候補成員"
|
||||||
|
/>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="panel">
|
||||||
|
<div className="panel-heading">
|
||||||
|
<p className="eyebrow">候補名單</p>
|
||||||
|
<h2>B 區未出場成員</h2>
|
||||||
|
</div>
|
||||||
|
<RosterList
|
||||||
|
names={result?.benchB ?? parsedAreaB.slice(3)}
|
||||||
|
emptyText="目前沒有 B 區候補成員"
|
||||||
|
/>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
type RosterListProps = {
|
||||||
|
names: string[]
|
||||||
|
emptyText: string
|
||||||
|
}
|
||||||
|
|
||||||
|
function RosterList({ names, emptyText }: RosterListProps) {
|
||||||
|
if (names.length === 0) {
|
||||||
|
return <p className="empty-inline">{emptyText}</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="name-list">
|
||||||
|
{names.map((name) => (
|
||||||
|
<span className="name-pill" key={name}>
|
||||||
|
{name}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadRoster(storageKey: string, fallbackList: string[]) {
|
||||||
|
const storedValue = window.localStorage.getItem(storageKey)
|
||||||
|
return storedValue && storedValue.trim() ? storedValue : fallbackList.join('\n')
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseRoster(input: string) {
|
||||||
|
const uniqueNames = new Set<string>()
|
||||||
|
|
||||||
|
input
|
||||||
|
.split(/[\n,，、]+/g)
|
||||||
|
.map((name) => name.trim())
|
||||||
|
.filter(Boolean)
|
||||||
|
.forEach((name) => uniqueNames.add(name))
|
||||||
|
|
||||||
|
return Array.from(uniqueNames)
|
||||||
|
}
|
||||||
|
|
||||||
|
function shuffleList(list: string[]) {
|
||||||
|
const next = [...list]
|
||||||
|
|
||||||
|
for (let index = next.length - 1; index > 0; index -= 1) {
|
||||||
|
const swapIndex = Math.floor(Math.random() * (index + 1))
|
||||||
|
;[next[index], next[swapIndex]] = [next[swapIndex], next[index]]
|
||||||
|
}
|
||||||
|
|
||||||
|
return next
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
50
src/index.css
Normal file
50
src/index.css
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
:root {
|
||||||
|
font-family:
|
||||||
|
'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #21402e;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top left, rgba(245, 169, 62, 0.3), transparent 24%),
|
||||||
|
radial-gradient(circle at top right, rgba(29, 123, 77, 0.18), transparent 28%),
|
||||||
|
linear-gradient(150deg, #f4efe5 0%, #fbf8f2 48%, #edf7f0 100%);
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
body,
|
||||||
|
button,
|
||||||
|
textarea {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
p {
|
||||||
|
margin-block-start: 0;
|
||||||
|
}
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.tsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
25
tsconfig.app.json
Normal file
25
tsconfig.app.json
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "es2023",
|
||||||
|
"lib": ["ES2023", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "esnext",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
24
tsconfig.node.json
Normal file
24
tsconfig.node.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "es2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "esnext",
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user