From 2e284ec49ecbab4ec7641e8d124d67b684f7c2b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 14 Jun 2026 19:39:01 +0200
Subject: [PATCH] fix: show penalty score as headline result, FT score as
 footnote
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

For shootout games the FT score (e.g. 2–2) was the main display, which
was misleading. Now the penalty score is the headline (4–2) with
"2–2 a.e.t." below it. Winner highlighting also uses the penalty score.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/match-card.tsx | 37 ++++++++++++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/components/match-card.tsx b/components/match-card.tsx
index 78abf3b..8016c2f 100644
--- a/components/match-card.tsx
+++ b/components/match-card.tsx
@@ -25,7 +25,9 @@ function formatDate(d: string) {
 export function MatchCard({ match, compact = false }: { match: Match; compact?: boolean }) {
   const ft = match.scoreFt
   const hasScore = ft != null
-  const winner = ft ? (ft[0] > ft[1] ? 'home' : ft[0] < ft[1] ? 'away' : 'draw') : null
+  // Penalty score determines the winner when present
+  const decisive = match.scoreP ?? ft
+  const winner = decisive ? (decisive[0] > decisive[1] ? 'home' : decisive[0] < decisive[1] ? 'away' : 'draw') : null
 
   if (compact) {
     return (
@@ -41,8 +43,19 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
                 {match.team1.name}
               </span>
             </div>
-            <div className="font-['Bebas_Neue'] text-xl text-[#22c55e] flex-shrink-0 min-w-[44px] text-center">
-              {hasScore ? `${ft![0]} – ${ft![1]}` : match.isLive ? <LiveBadge label="•" /> : '–'}
+            <div className="flex-shrink-0 min-w-[52px] text-center">
+              <div className="font-['Bebas_Neue'] text-xl text-[#22c55e]">
+                {hasScore
+                  ? match.scoreP
+                    ? `${match.scoreP[0]} – ${match.scoreP[1]}`
+                    : `${ft![0]} – ${ft![1]}`
+                  : match.isLive ? <LiveBadge label="•" /> : '–'}
+              </div>
+              {match.scoreP && (
+                <div className="text-[8px] text-[#2a5c35] leading-none">
+                  {ft![0]}–{ft![1]} a.e.t.
+                </div>
+              )}
             </div>
             <div className="flex-1 flex items-center justify-end gap-2 overflow-hidden">
               <span className={`text-sm font-medium truncate ${winner === 'away' ? 'text-[#dff5e8]' : 'text-[#4a7a55]'}`}>
@@ -51,7 +64,9 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
               <TeamFlag name={match.team2.name} iso2={match.team2.iso2} size="sm" />
             </div>
           </div>
-          {match.scoreEt && <div className="text-[9px] text-[#2a5c35] mt-1 text-center">AET · {match.scoreP ? `PSO ${match.scoreP[0]}-${match.scoreP[1]}` : ''}</div>}
+          {match.scoreEt && !match.scoreP && (
+            <div className="text-[9px] text-[#2a5c35] mt-1 text-center">a.e.t.</div>
+          )}
         </div>
       </Link>
     )
@@ -68,12 +83,20 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
           </div>
           <div className="text-center flex-shrink-0">
             <div className="font-['Bebas_Neue'] text-[76px] text-[#22c55e] leading-none">
-              {hasScore ? `${ft![0]} – ${ft![1]}` : '? – ?'}
+              {hasScore
+                ? match.scoreP
+                  ? `${match.scoreP[0]} – ${match.scoreP[1]}`
+                  : `${ft![0]} – ${ft![1]}`
+                : '? – ?'}
             </div>
+            {match.scoreP && (
+              <div className="text-[11px] text-[#2a5c35] mt-0.5">{ft![0]}–{ft![1]} a.e.t.</div>
+            )}
             <div className="text-[10px] text-[#2a5c35] tracking-[0.12em] uppercase mt-1.5">{match.round}</div>
             <div className="text-xs text-[#1a3a22] mt-1">{match.date ? formatDate(match.date) : ''}</div>
-            {match.scoreEt && <div className="text-[10px] text-[#2a5c35] mt-1">AET {match.scoreEt[0]}–{match.scoreEt[1]}</div>}
-            {match.scoreP && <div className="text-[10px] text-[#4ade80] mt-0.5">PSO {match.scoreP[0]}–{match.scoreP[1]}</div>}
+            {match.scoreEt && !match.scoreP && (
+              <div className="text-[10px] text-[#2a5c35] mt-1">a.e.t. {match.scoreEt[0]}–{match.scoreEt[1]}</div>
+            )}
           </div>
           <div className="text-center flex-1 min-w-[100px]">
             <TeamFlag name={match.team2.name} iso2={match.team2.iso2} size="xl" className="mb-2.5" />