新增連勝與獲勝特效並更新 README

src/pages/ScoreboardPage.tsx

@@ -27,6 +27,18 @@ type ScoreboardPageProps = {
   rightTeam: GroupTeam | null
   scoreState: ScoreState
   selectedGroup: RoundGroup | null
+  streakAnnouncement: {
+    count: number
+    key: number
+    teamName: string
+    title: string
+  } | null
+  victoryAnnouncement: {
+    key: number
+    scoreLabel: string
+    teamName: string
+    title: string
+  } | null
   targetDate: string
   onApplyMatchup: (
     leftTeam: GroupTeam,
@@ -55,6 +67,8 @@ export function ScoreboardPage({
   rightTeam,
   scoreState,
   selectedGroup,
+  streakAnnouncement,
+  victoryAnnouncement,
   targetDate,
   onApplyMatchup,
   onCloseFinishDialog,
@@ -262,6 +276,23 @@ export function ScoreboardPage({
 
   return (
     <>
+      {streakAnnouncement ? (
+        <div className="streak-banner" key={streakAnnouncement.key}>
+          <span className="streak-banner-count">{streakAnnouncement.count} 連勝</span>
+          <strong>{streakAnnouncement.title}</strong>
+          <small>{streakAnnouncement.teamName}</small>
+        </div>
+      ) : null}
+
+      {victoryAnnouncement ? (
+        <div className="victory-banner" key={victoryAnnouncement.key}>
+          <span className="victory-banner-kicker">目標分數達成</span>
+          <strong>{victoryAnnouncement.title}</strong>
+          <small>{victoryAnnouncement.teamName}</small>
+          <em>{victoryAnnouncement.scoreLabel}</em>
+        </div>
+      ) : null}
+
       <section className="scoreboard-screen">
         <div className="scoreboard-court">
           <ScoreboardTeamPanel