453 lines
14 KiB
TypeScript
453 lines
14 KiB
TypeScript
import { useEffect, useState } from 'react'
|
||
import './App.css'
|
||
|
||
type Participant = {
|
||
id: string
|
||
name: string
|
||
isPlaceholder: boolean
|
||
}
|
||
|
||
type Team = {
|
||
id: number
|
||
playerA: Participant
|
||
playerB: Participant
|
||
}
|
||
|
||
type RoundResult = {
|
||
id: number
|
||
teams: Team[]
|
||
}
|
||
|
||
type ActionState = 'idle' | 'saving' | 'saved' | 'loading' | 'loaded' | 'error'
|
||
|
||
type LoadMatchResultsResponse = {
|
||
time: number
|
||
personnel: string
|
||
battlecombination: string | null
|
||
}
|
||
|
||
const STORAGE_KEYS = {
|
||
areaA: 'badminton-match-hub::area-a',
|
||
areaB: 'badminton-match-hub::area-b',
|
||
} as const
|
||
|
||
const PLACEHOLDER_NAME = '那個'
|
||
const TOTAL_ROUNDS = 3
|
||
|
||
const defaultAreaA = ['建喵', '柏威', '景涵', 'Gary', '昱翔']
|
||
const defaultAreaB = ['小念', '玟瑄', 'RuRu', '肉肉', '蓉蓉']
|
||
|
||
function App() {
|
||
const [areaAInput, setAreaAInput] = useState(() =>
|
||
loadRoster(STORAGE_KEYS.areaA, defaultAreaA),
|
||
)
|
||
const [areaBInput, setAreaBInput] = useState(() =>
|
||
loadRoster(STORAGE_KEYS.areaB, defaultAreaB),
|
||
)
|
||
const [targetDate, setTargetDate] = useState(() => formatDateInputValue())
|
||
const [results, setResults] = useState<RoundResult[]>([])
|
||
const [error, setError] = useState('')
|
||
const [actionState, setActionState] = useState<ActionState>('idle')
|
||
const [actionMessage, setActionMessage] = 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)
|
||
const teamCount = Math.max(parsedAreaA.length, parsedAreaB.length)
|
||
const placeholderCountA = Math.max(0, teamCount - parsedAreaA.length)
|
||
const placeholderCountB = Math.max(0, teamCount - parsedAreaB.length)
|
||
|
||
function generateGroups() {
|
||
if (parsedAreaA.length === 0 || parsedAreaB.length === 0) {
|
||
setResults([])
|
||
setError('A 區與 B 區都至少要輸入 1 位成員。')
|
||
setActionState('idle')
|
||
setActionMessage('')
|
||
return
|
||
}
|
||
|
||
const prepared = prepareParticipants(parsedAreaA, parsedAreaB)
|
||
const nextResults = Array.from({ length: TOTAL_ROUNDS }, (_, index) => ({
|
||
id: index + 1,
|
||
teams: createRoundTeams(prepared.areaA, prepared.areaB, index),
|
||
}))
|
||
|
||
setResults(nextResults)
|
||
setError('')
|
||
setActionState('idle')
|
||
setActionMessage('已產生配對，請按「上傳資料」。')
|
||
}
|
||
|
||
async function uploadResults() {
|
||
if (results.length === 0) {
|
||
setActionState('error')
|
||
setActionMessage('請先產生配對結果，再上傳資料。')
|
||
return
|
||
}
|
||
|
||
if (!targetDate) {
|
||
setActionState('error')
|
||
setActionMessage('請先選擇目標日期。')
|
||
return
|
||
}
|
||
|
||
setActionState('saving')
|
||
setActionMessage('上傳資料到資料庫中...')
|
||
|
||
try {
|
||
await saveMatchResults(convertDateToKey(targetDate), parsedAreaA, parsedAreaB, results)
|
||
setActionState('saved')
|
||
setActionMessage(`已同步到資料庫：${convertDateToKey(targetDate)}`)
|
||
} catch (saveError) {
|
||
setActionState('error')
|
||
setActionMessage(
|
||
saveError instanceof Error ? saveError.message : '資料庫儲存失敗，請稍後再試。',
|
||
)
|
||
}
|
||
}
|
||
|
||
async function loadResults() {
|
||
if (!targetDate) {
|
||
setActionState('error')
|
||
setActionMessage('請先選擇目標日期。')
|
||
return
|
||
}
|
||
|
||
setActionState('loading')
|
||
setActionMessage('讀取指定日期資料中...')
|
||
|
||
try {
|
||
const payload = await loadMatchResults(convertDateToKey(targetDate))
|
||
const loaded = convertDbRecordToAppState(payload)
|
||
setAreaAInput(loaded.areaA.join('\n'))
|
||
setAreaBInput(loaded.areaB.join('\n'))
|
||
setResults(loaded.results)
|
||
setError('')
|
||
setActionState('loaded')
|
||
setActionMessage(`已讀取資料：${convertDateToKey(targetDate)}`)
|
||
} catch (loadError) {
|
||
setResults([])
|
||
setActionState('error')
|
||
setActionMessage(
|
||
loadError instanceof Error ? loadError.message : '讀取資料失敗，請稍後再試。',
|
||
)
|
||
}
|
||
}
|
||
|
||
function resetDemo() {
|
||
setAreaAInput(defaultAreaA.join('\n'))
|
||
setAreaBInput(defaultAreaB.join('\n'))
|
||
setResults([])
|
||
setError('')
|
||
setActionState('idle')
|
||
setActionMessage('')
|
||
}
|
||
|
||
return (
|
||
<main className="app-shell">
|
||
<section className="hero-card">
|
||
<div className="hero-copy">
|
||
<p className="eyebrow">羽毛球隊伍配對</p>
|
||
<h1>羽毛球分組配對器</h1>
|
||
<p className="hero-text">
|
||
輸入 A 區與 B 區名單後，系統會產生 3 組完整配對。
|
||
每一隊都是 1 位 A 區成員搭配 1 位 B 區成員；
|
||
若某一區人數不足，會自動補入「那個」。
|
||
</p>
|
||
<div className="hero-actions">
|
||
<button className="primary-button" type="button" onClick={generateGroups}>
|
||
產生三組配對
|
||
</button>
|
||
<button className="ghost-button" type="button" onClick={resetDemo}>
|
||
載入範例名單
|
||
</button>
|
||
</div>
|
||
{actionMessage ? (
|
||
<p className={`save-status save-status-${actionState}`}>{actionMessage}</p>
|
||
) : null}
|
||
</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>
|
||
每組共 {teamCount} 隊，A 區補位 {placeholderCountA} 人，B 區補位 {placeholderCountB} 人。
|
||
</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="panel input-panel">
|
||
<div className="panel-heading">
|
||
<p className="eyebrow">名單輸入</p>
|
||
<h2>輸入 A 區與 B 區名單</h2>
|
||
</div>
|
||
|
||
<div className="upload-row">
|
||
<label className="date-field">
|
||
<span>目標日期</span>
|
||
<input
|
||
type="date"
|
||
value={targetDate}
|
||
onChange={(event) => setTargetDate(event.target.value)}
|
||
/>
|
||
</label>
|
||
<button
|
||
className="primary-button upload-button"
|
||
type="button"
|
||
onClick={() => void uploadResults()}
|
||
disabled={results.length === 0 || actionState === 'saving' || actionState === 'loading'}
|
||
>
|
||
上傳資料
|
||
</button>
|
||
<button
|
||
className="ghost-button upload-button"
|
||
type="button"
|
||
onClick={() => void loadResults()}
|
||
disabled={actionState === 'saving' || actionState === 'loading'}
|
||
>
|
||
讀取指定日期
|
||
</button>
|
||
</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}
|
||
</section>
|
||
|
||
<section className="panel results-panel">
|
||
<div className="panel-heading">
|
||
<p className="eyebrow">配對結果</p>
|
||
<h2>三組名單</h2>
|
||
</div>
|
||
|
||
{results.length > 0 ? (
|
||
<div className="round-list">
|
||
{results.map((round) => (
|
||
<article className="round-card" key={round.id}>
|
||
<h3 className="round-title">第 {round.id} 組</h3>
|
||
<div className="team-list">
|
||
{round.teams.map((team) => (
|
||
<article className="team-card" key={`${round.id}-${team.id}`}>
|
||
<span className="team-index">第 {team.id} 隊</span>
|
||
<div className="team-line">
|
||
<span className={team.playerA.isPlaceholder ? 'name-placeholder' : 'name-a'}>
|
||
{team.playerA.name}
|
||
</span>
|
||
<span className="team-divider">×</span>
|
||
<span className={team.playerB.isPlaceholder ? 'name-placeholder' : 'name-b'}>
|
||
{team.playerB.name}
|
||
</span>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="empty-state">
|
||
<p>按下「產生三組配對」後，這裡會直接顯示誰跟誰一隊。</p>
|
||
</div>
|
||
)}
|
||
</section>
|
||
</main>
|
||
)
|
||
}
|
||
|
||
function prepareParticipants(areaA: string[], areaB: string[]) {
|
||
const targetCount = Math.max(areaA.length, areaB.length)
|
||
const shuffledA = shuffleList(areaA)
|
||
const shuffledB = shuffleList(areaB)
|
||
|
||
return {
|
||
areaA: createParticipants(shuffledA, targetCount, 'A'),
|
||
areaB: createParticipants(shuffledB, targetCount, 'B'),
|
||
}
|
||
}
|
||
|
||
function createParticipants(players: string[], targetCount: number, zone: 'A' | 'B') {
|
||
const participants: Participant[] = players.map((name, index) => ({
|
||
id: `${zone}-${index}-${name}`,
|
||
name,
|
||
isPlaceholder: false,
|
||
}))
|
||
|
||
for (let index = players.length; index < targetCount; index += 1) {
|
||
participants.push({
|
||
id: `${zone}-placeholder-${index}`,
|
||
name: PLACEHOLDER_NAME,
|
||
isPlaceholder: true,
|
||
})
|
||
}
|
||
|
||
return participants
|
||
}
|
||
|
||
function createRoundTeams(areaA: Participant[], areaB: Participant[], roundIndex: number) {
|
||
return areaA.map((playerA, index) => ({
|
||
id: index + 1,
|
||
playerA,
|
||
playerB: areaB[(index + roundIndex) % areaB.length],
|
||
}))
|
||
}
|
||
|
||
async function saveMatchResults(
|
||
time: string,
|
||
areaA: string[],
|
||
areaB: string[],
|
||
rounds: RoundResult[],
|
||
) {
|
||
const response = await fetch('/api/match-results', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
time,
|
||
areaA,
|
||
areaB,
|
||
teams: rounds.map((round) => ({
|
||
round: round.id,
|
||
teams: round.teams.map((team) => ({
|
||
team: team.id,
|
||
a: team.playerA.name,
|
||
b: team.playerB.name,
|
||
})),
|
||
})),
|
||
}),
|
||
})
|
||
|
||
const payload = (await response.json()) as { ok?: boolean; message?: string }
|
||
|
||
if (!response.ok || !payload.ok) {
|
||
throw new Error(payload.message ?? '資料庫儲存失敗。')
|
||
}
|
||
}
|
||
|
||
async function loadMatchResults(time: string) {
|
||
const response = await fetch(`/api/match-results/${time}`)
|
||
const payload = (await response.json()) as {
|
||
ok?: boolean
|
||
message?: string
|
||
data?: LoadMatchResultsResponse
|
||
}
|
||
|
||
if (!response.ok || !payload.ok || !payload.data) {
|
||
throw new Error(payload.message ?? '指定日期沒有資料。')
|
||
}
|
||
|
||
return payload.data
|
||
}
|
||
|
||
function convertDbRecordToAppState(record: LoadMatchResultsResponse) {
|
||
const personnel = JSON.parse(record.personnel) as [number, string][]
|
||
const battlecombination = JSON.parse(record.battlecombination ?? '{}') as Record<
|
||
string,
|
||
[string, string][]
|
||
>
|
||
|
||
const areaA = personnel.filter(([group]) => group === 1).map(([, name]) => name)
|
||
const areaB = personnel.filter(([group]) => group === 0).map(([, name]) => name)
|
||
|
||
const results = Object.keys(battlecombination)
|
||
.sort((left, right) => Number(left) - Number(right))
|
||
.map((key, roundIndex) => ({
|
||
id: roundIndex + 1,
|
||
teams: battlecombination[key].map((team, teamIndex) => ({
|
||
id: teamIndex + 1,
|
||
playerA: createLoadedParticipant(team[0], 'A', roundIndex, teamIndex),
|
||
playerB: createLoadedParticipant(team[1], 'B', roundIndex, teamIndex),
|
||
})),
|
||
}))
|
||
|
||
return { areaA, areaB, results }
|
||
}
|
||
|
||
function createLoadedParticipant(name: string, zone: 'A' | 'B', roundIndex: number, teamIndex: number) {
|
||
return {
|
||
id: `${zone}-loaded-${roundIndex}-${teamIndex}-${name}`,
|
||
name,
|
||
isPlaceholder: name === PLACEHOLDER_NAME,
|
||
}
|
||
}
|
||
|
||
function formatDateInputValue() {
|
||
const now = new Date()
|
||
const year = now.getFullYear()
|
||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||
const day = String(now.getDate()).padStart(2, '0')
|
||
return `${year}-${month}-${day}`
|
||
}
|
||
|
||
function convertDateToKey(dateValue: string) {
|
||
const [year = '', month = '', day = ''] = dateValue.split('-')
|
||
return `${year}${month}${day}`
|
||
}
|
||
|
||
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<T>(list: T[]) {
|
||
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
|