Add winner indicator to match planner for played matches

ejmccalla4607 · claude · ejmccalla4607 · commit 40e25b3ed831 · 2026-04-10T20:01:24.000-05:00
Show actual blue/red scores and a BLUE WIN / RED WIN badge for
played matches. Falls back to estimated scores (muted) for unplayed
matches, and a PLAYED badge if actual scores aren't in TBA yet.

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/src/scouting_analysis/frc2026_picklist_runner.py b/src/scouting_analysis/frc2026_picklist_runner.py
@@ -154,6 +154,8 @@ def main():
         matches[int(row["match_number"])] = {
             "blue": [int(t[3:]) for t in alliances["blue"]["team_keys"]],
             "red": [int(t[3:]) for t in alliances["red"]["team_keys"]],
+            "blue_score": alliances["blue"].get("score", -1),
+            "red_score": alliances["red"].get("score", -1),
         }
 
     # Build a lookup from picklist
@@ -233,12 +235,16 @@ def get_stat(team, col):
                 num = int(parts[0].replace("Match ", ""))
                 alliance = parts[1].strip() if len(parts) > 1 else ""
                 current_match = str(num)
+                blue_score = matches.get(num, {}).get("blue_score", -1)
+                red_score = matches.get(num, {}).get("red_score", -1)
                 match_data[current_match] = {
                     "num": num,
                     "alliance": alliance,
                     "played": num in played_match_nums,
                     "blueTotal": float(row.iloc[3]) if row.iloc[3] != "" else 0,
                     "redTotal": float(row.iloc[7]) if row.iloc[7] != "" else 0,
+                    "blueActual": blue_score if isinstance(blue_score, int) and blue_score >= 0 else None,
+                    "redActual": red_score if isinstance(red_score, int) and red_score >= 0 else None,
                     "rows": [],
                 }
             elif current_match and first not in ("", "blue1"):
diff --git a/webapp/planner.html b/webapp/planner.html
@@ -139,6 +139,14 @@
       color: #facc15; border: 1px solid #facc15; border-radius: 3px;
       padding: 0px 4px; margin-left: 4px;
     }
+    .win-badge {
+      font-family: var(--mono); font-size: 9px; letter-spacing: 1px;
+      border-radius: 3px; padding: 1px 6px; font-weight: bold;
+    }
+    .win-badge.blue { color: var(--blue); border: 1px solid var(--blue); }
+    .win-badge.red  { color: var(--red);  border: 1px solid var(--red); }
+    .score-actual   { font-family: var(--mono); font-size: 18px; }
+    .score-est      { font-family: var(--mono); font-size: 14px; color: var(--muted); }
   </style>
 </head>
 <body>
@@ -206,17 +214,32 @@ <h1 id="page-title">Match Planner</h1>
     const allianceColor = m.alliance === 'BLUE' ? 'var(--blue)' : 'var(--red)';
     const allianceBg    = m.alliance === 'BLUE' ? '#0d2040' : '#2a0d0d';
     const playedClass   = m.played ? 'played' : '';
-    const playedBadge   = m.played ? '<span class="played-badge">✓ PLAYED</span>' : '';
+
+    const hasActual = m.blueActual != null && m.redActual != null;
+    const winner = hasActual
+      ? (m.blueActual > m.redActual ? 'blue' : m.redActual > m.blueActual ? 'red' : 'tie')
+      : null;
+
+    const winBadge = winner && winner !== 'tie'
+      ? `<span class="win-badge ${winner}">${winner.toUpperCase()} WIN</span>`
+      : m.played ? '<span class="played-badge">✓ PLAYED</span>' : '';
+
+    const blueScoreHtml = hasActual
+      ? `<span class="score-actual" style="color:var(--blue)">${m.blueActual}</span>`
+      : `<span class="score-est" style="color:var(--blue)">${parseFloat(m.blueTotal).toFixed(1)}</span>`;
+    const redScoreHtml = hasActual
+      ? `<span class="score-actual" style="color:var(--red)">${m.redActual}</span>`
+      : `<span class="score-est" style="color:var(--red)">${parseFloat(m.redTotal).toFixed(1)}</span>`;
 
     return `
       <div class="match-card ${playedClass}" id="mc-${m.num}" style="animation-delay:${idx * 0.02}s">
         <div class="match-header" onclick="toggle('mc-${m.num}')">
           <div class="match-num">Q${m.num}</div>
-          ${playedBadge}
+          ${winBadge}
           <div style="font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:3px;background:${allianceBg};color:${allianceColor};letter-spacing:2px;">${m.alliance}</div>
           <div class="alliance-totals">
-            <div class="alliance-total blue"><span class="value">${parseFloat(m.blueTotal).toFixed(1)}</span></div>
-            <div class="alliance-total red"><span class="value">${parseFloat(m.redTotal).toFixed(1)}</span></div>
+            <div class="alliance-total blue">${blueScoreHtml}</div>
+            <div class="alliance-total red">${redScoreHtml}</div>
           </div>
           <div class="chevron">▾</div>
         </div>
