valknar/worldcup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show penalty score as headline result, FT score as footnote

Browse Source 
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>
This commit is contained in:
Sebastian Krüger
2026-06-14 19:39:01 +02:00
parent 25e440f5a4
commit 2e284ec49e
1 changed files with 30 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/match-card.tsx
+30 -7
View File
@@ -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" />