Add DB upload flow and Docker deployment setup

src/App.tsx

@@ -1,25 +1,35 @@
 import { useEffect, useState } from 'react'
 import './App.css'
 
-type Pair = {
-  id: number
-  playerA: string
-  playerB: string
+type Participant = {
+  id: string
+  name: string
+  isPlaceholder: boolean
 }
 
-type DrawResult = {
-  pairs: Pair[]
-  benchA: string[]
-  benchB: string[]
+type Team = {
+  id: number
+  playerA: Participant
+  playerB: Participant
 }
 
+type RoundResult = {
+  id: number
+  teams: Team[]
+}
+
+type SaveState = 'idle' | 'saving' | 'saved' | 'error'
+
 const STORAGE_KEYS = {
   areaA: 'badminton-match-hub::area-a',
   areaB: 'badminton-match-hub::area-b',
 } as const
 
-const defaultAreaA = ['小杰', '阿誠', '建宏', '柏宇', 'Eason']
-const defaultAreaB = ['小安', '佩珊', '阿廷', 'Luna', 'Mina']
+const PLACEHOLDER_NAME = '那個'
+const TOTAL_ROUNDS = 3
+
+const defaultAreaA = ['建喵', '柏威', '景涵', 'Gary', '昱翔']
+const defaultAreaB = ['小念', '玟瑄', 'RuRu', '肉肉', '蓉蓉']
 
 function App() {
   const [areaAInput, setAreaAInput] = useState(() =>
@@ -28,8 +38,11 @@ function App() {
   const [areaBInput, setAreaBInput] = useState(() =>
     loadRoster(STORAGE_KEYS.areaB, defaultAreaB),
   )
-  const [result, setResult] = useState<DrawResult | null>(null)
+  const [targetDate, setTargetDate] = useState(() => formatDateInputValue())
+  const [results, setResults] = useState<RoundResult[]>([])
   const [error, setError] = useState('')
+  const [saveState, setSaveState] = useState<SaveState>('idle')
+  const [saveMessage, setSaveMessage] = useState('')
 
   useEffect(() => {
     window.localStorage.setItem(STORAGE_KEYS.areaA, areaAInput)
@@ -41,192 +54,282 @@ function App() {
 
   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 generateMatches() {
-    if (parsedAreaA.length < 3 || parsedAreaB.length < 3) {
-      setResult(null)
-      setError('A 區與 B 區都至少要有 3 位不重複成員，才能產生三組配對。')
+  function generateGroups() {
+    if (parsedAreaA.length === 0 || parsedAreaB.length === 0) {
+      setResults([])
+      setError('A 區與 B 區都至少要輸入 1 位成員。')
+      setSaveState('idle')
+      setSaveMessage('')
       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) => ({
+    const prepared = prepareParticipants(parsedAreaA, parsedAreaB)
+    const nextResults = Array.from({ length: TOTAL_ROUNDS }, (_, index) => ({
       id: index + 1,
-      playerA,
-      playerB: selectedB[index],
+      teams: createRoundTeams(prepared.areaA, prepared.areaB, index),
     }))
 
-    setResult({
-      pairs,
-      benchA: shuffledA.slice(3),
-      benchB: shuffledB.slice(3),
-    })
+    setResults(nextResults)
     setError('')
+    setSaveState('idle')
+    setSaveMessage('已產生配對，請按「上傳資料」。')
+  }
+
+  async function uploadResults() {
+    if (results.length === 0) {
+      setSaveState('error')
+      setSaveMessage('請先產生配對結果，再上傳資料。')
+      return
+    }
+
+    if (!targetDate) {
+      setSaveState('error')
+      setSaveMessage('請先選擇目標日期。')
+      return
+    }
+
+    setSaveState('saving')
+    setSaveMessage('上傳資料到資料庫中...')
+
+    try {
+      await saveMatchResults(convertDateToKey(targetDate), parsedAreaA, parsedAreaB, results)
+      setSaveState('saved')
+      setSaveMessage(`已同步到資料庫：${convertDateToKey(targetDate)}`)
+    } catch (saveError) {
+      setSaveState('error')
+      setSaveMessage(
+        saveError instanceof Error ? saveError.message : '資料庫儲存失敗，請稍後再試。',
+      )
+    }
   }
 
   function resetDemo() {
     setAreaAInput(defaultAreaA.join('\n'))
     setAreaBInput(defaultAreaB.join('\n'))
-    setResult(null)
+    setResults([])
     setError('')
+    setSaveState('idle')
+    setSaveMessage('')
   }
 
   return (
     <main className="app-shell">
       <section className="hero-card">
         <div className="hero-copy">
-          <p className="eyebrow">使用 React、Vite 與 TypeScript 建置</p>
-          <h1>羽毛球隊伍配對器</h1>
+          <p className="eyebrow">羽毛球隊伍配對</p>
+          <h1>羽毛球分組配對器</h1>
           <p className="hero-text">
-            分別輸入 A 區與 B 區名單後，系統會從兩區各抽出 3 位成員，
-            自動組成 3 組隊伍。每一組都是 A 區 1 位搭配 B 區 1 位，
-            同一輪內三組成員都不會重複。
+            輸入 A 區與 B 區名單後，系統會產生 3 組完整配對。
+            每一隊都是 1 位 A 區成員搭配 1 位 B 區成員；
+            若某一區人數不足，會自動補入「那個」。
           </p>
           <div className="hero-actions">
-            <button className="primary-button" type="button" onClick={generateMatches}>
+            <button className="primary-button" type="button" onClick={generateGroups}>
               產生三組配對
             </button>
             <button className="ghost-button" type="button" onClick={resetDemo}>
               載入範例名單
             </button>
           </div>
+          {saveMessage ? (
+            <p className={`save-status save-status-${saveState}`}>{saveMessage}</p>
+          ) : null}
         </div>
 
         <div className="hero-stats">
           <article className="stat-card">
-            <span>A 區可用人數</span>
+            <span>A 區人數</span>
             <strong>{parsedAreaA.length}</strong>
           </article>
           <article className="stat-card">
-            <span>B 區可用人數</span>
+            <span>B 區人數</span>
             <strong>{parsedAreaB.length}</strong>
           </article>
           <article className="tip-card">
-            <h2>配對規則</h2>
-            <p>固定產生 3 組，且每組皆為 A 區 1 位加上 B 區 1 位，當輪不重複。</p>
+            <h2>摘要</h2>
+            <p>
+              每組共 {teamCount} 隊，A 區補位 {placeholderCountA} 人，B 區補位 {placeholderCountB} 人。
+            </p>
           </article>
         </div>
       </section>
 
-      <section className="content-grid">
-        <article className="panel">
-          <div className="panel-heading">
-            <p className="eyebrow">名單輸入</p>
-            <h2>輸入 A 區與 B 區成員</h2>
-          </div>
+      <section className="panel input-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>
+        <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 || saveState === 'saving'}
+          >
+            上傳資料
+          </button>
+        </div>
 
-            <label className="roster-field">
-              <span>B 區成員</span>
-              <textarea
-                value={areaBInput}
-                onChange={(event) => setAreaBInput(event.target.value)}
-                placeholder={'每行一位\n例如：小安'}
-                rows={10}
-              />
-            </label>
-          </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>
 
-          <p className="helper-text">
-            支援換行、半形逗號、全形逗號與頓號分隔，系統會自動去除空白與重複名稱。
-          </p>
+          <label className="roster-field">
+            <span>B 區成員</span>
+            <textarea
+              value={areaBInput}
+              onChange={(event) => setAreaBInput(event.target.value)}
+              placeholder={'每行一位\n例如：小念'}
+              rows={10}
+            />
+          </label>
+        </div>
 
-          {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>
+        <p className="helper-text">支援換行、逗號、頓號分隔，會自動去除重複名稱。</p>
+        {error ? <p className="error-banner">{error}</p> : null}
       </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>
+      <section className="panel results-panel">
+        <div className="panel-heading">
+          <p className="eyebrow">配對結果</p>
+          <h2>三組名單</h2>
+        </div>
 
-        <article className="panel">
-          <div className="panel-heading">
-            <p className="eyebrow">候補名單</p>
-            <h2>B 區未出場成員</h2>
+        {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>
-          <RosterList
-            names={result?.benchB ?? parsedAreaB.slice(3)}
-            emptyText="目前沒有 B 區候補成員"
-          />
-        </article>
+        ) : (
+          <div className="empty-state">
+            <p>按下「產生三組配對」後，這裡會直接顯示誰跟誰一隊。</p>
+          </div>
+        )}
       </section>
     </main>
   )
 }
 
-type RosterListProps = {
-  names: string[]
-  emptyText: string
+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 RosterList({ names, emptyText }: RosterListProps) {
-  if (names.length === 0) {
-    return <p className="empty-inline">{emptyText}</p>
+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 (
-    <div className="name-list">
-      {names.map((name) => (
-        <span className="name-pill" key={name}>
-          {name}
-        </span>
-      ))}
-    </div>
-  )
+  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 ?? '資料庫儲存失敗。')
+  }
+}
+
+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[]) {
@@ -246,7 +349,7 @@ function parseRoster(input: string) {
   return Array.from(uniqueNames)
 }
 
-function shuffleList(list: string[]) {
+function shuffleList<T>(list: T[]) {
   const next = [...list]
 
   for (let index = next.length - 1; index > 0; index -= 1) {