feat: team pages with match/tournament history, mobile padding fixes, linked scorers and nations
- Team page: add Tournament Participations (year pills → /tournaments/[year]) and Match History (grouped by year, W/D/L badge, opponent, score from team's perspective, PSO/AET annotations, each row → match anchor) - GraphQL: extend matches() query with teamId filter (OR team1_id/team2_id) - Match card: link team names to /teams/[slug]; fix ET score display — show scoreEt as headline for AET matches, scoreFt as footnote; winner determination uses scoreP ?? scoreEt ?? scoreFt - Tournament page: scorer names below each match linked to /players/[name] with dotted underline (solid + green on hover) - Stats page: reduce mobile padding on Goals chart, Top Scorers, Titles, Goals by Minute — hide progress bars and trophy emojis on small screens - Homepage: Golden Boot Race same mobile padding/bar treatment; add slug to match team queries Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+44
-35
@@ -2,7 +2,7 @@ import Link from 'next/link'
|
||||
import { TeamFlag } from './team-flag'
|
||||
import { LiveBadge } from './live-badge'
|
||||
|
||||
interface Team { name: string; iso2?: string | null }
|
||||
interface Team { name: string; iso2?: string | null; slug?: string | null }
|
||||
interface Match {
|
||||
id: number
|
||||
year: number
|
||||
@@ -25,8 +25,8 @@ function formatDate(d: string) {
|
||||
export function MatchCard({ match, compact = false }: { match: Match; compact?: boolean }) {
|
||||
const ft = match.scoreFt
|
||||
const hasScore = ft != null
|
||||
// Penalty score determines the winner when present
|
||||
const decisive = match.scoreP ?? ft
|
||||
// Winner: penalties first, then ET, then FT
|
||||
const decisive = match.scoreP ?? match.scoreEt ?? ft
|
||||
const winner = decisive ? (decisive[0] > decisive[1] ? 'home' : decisive[0] < decisive[1] ? 'away' : 'draw') : null
|
||||
|
||||
if (compact) {
|
||||
@@ -48,7 +48,9 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
|
||||
{hasScore
|
||||
? match.scoreP
|
||||
? `${match.scoreP[0]} – ${match.scoreP[1]}`
|
||||
: `${ft![0]} – ${ft![1]}`
|
||||
: match.scoreEt
|
||||
? `${match.scoreEt[0]} – ${match.scoreEt[1]}`
|
||||
: `${ft![0]} – ${ft![1]}`
|
||||
: match.isLive ? <LiveBadge label="•" /> : '–'}
|
||||
</div>
|
||||
{match.scoreP && (
|
||||
@@ -56,6 +58,9 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
|
||||
{ft![0]}–{ft![1]} a.e.t.
|
||||
</div>
|
||||
)}
|
||||
{match.scoreEt && !match.scoreP && (
|
||||
<div className="text-[8px] text-[#2a5c35] leading-none">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]'}`}>
|
||||
@@ -72,42 +77,46 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
|
||||
)
|
||||
}
|
||||
|
||||
const matchHref = `/tournaments/${match.year}#match-${match.id}`
|
||||
|
||||
return (
|
||||
<Link href={`/tournaments/${match.year}#match-${match.id}`} className="block">
|
||||
<div className="bg-gradient-to-br from-[#0d2016] to-[#102a1c] border border-[rgba(34,197,94,0.28)] rounded-2xl px-5 py-6 sm:px-9 sm:py-9 hover:border-[rgba(34,197,94,0.45)] transition-colors">
|
||||
{match.isLive && <div className="mb-4"><LiveBadge label="Live Now" /></div>}
|
||||
<div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3 sm:gap-8">
|
||||
<div className="text-center">
|
||||
<TeamFlag name={match.team1.name} iso2={match.team1.iso2} size="xl" className="mb-2" />
|
||||
<div className={`font-['Bebas_Neue'] text-base sm:text-xl tracking-[0.07em] truncate ${winner === 'home' ? 'text-[#dff5e8]' : 'text-[#6abf7a]'}`}>
|
||||
{match.team1.name}
|
||||
</div>
|
||||
<div className="bg-gradient-to-br from-[#0d2016] to-[#102a1c] border border-[rgba(34,197,94,0.28)] rounded-2xl px-5 py-6 sm:px-9 sm:py-9 hover:border-[rgba(34,197,94,0.45)] transition-colors">
|
||||
{match.isLive && <div className="mb-4"><LiveBadge label="Live Now" /></div>}
|
||||
<div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3 sm:gap-8">
|
||||
<Link href={match.team1.slug ? `/teams/${match.team1.slug}` : matchHref}
|
||||
className={`text-center block transition-colors hover:text-[#22c55e] ${winner === 'home' ? 'text-[#dff5e8]' : 'text-[#6abf7a]'}`}>
|
||||
<TeamFlag name={match.team1.name} iso2={match.team1.iso2} size="xl" className="mb-2" />
|
||||
<div className="font-['Bebas_Neue'] text-base sm:text-xl tracking-[0.07em] truncate">
|
||||
{match.team1.name}
|
||||
</div>
|
||||
<div className="text-center flex-shrink-0">
|
||||
<div className="font-['Bebas_Neue'] text-[48px] sm:text-[76px] text-[#22c55e] leading-none">
|
||||
{hasScore
|
||||
? match.scoreP
|
||||
? `${match.scoreP[0]}–${match.scoreP[1]}`
|
||||
</Link>
|
||||
<Link href={matchHref} className="text-center flex-shrink-0 block">
|
||||
<div className="font-['Bebas_Neue'] text-[48px] sm:text-[76px] text-[#22c55e] leading-none hover:opacity-80 transition-opacity">
|
||||
{hasScore
|
||||
? match.scoreP
|
||||
? `${match.scoreP[0]}–${match.scoreP[1]}`
|
||||
: match.scoreEt
|
||||
? `${match.scoreEt[0]}–${match.scoreEt[1]}`
|
||||
: `${ft![0]}–${ft![1]}`
|
||||
: '?–?'}
|
||||
</div>
|
||||
{match.scoreP && (
|
||||
<div className="text-[10px] text-[#2a5c35] mt-0.5">{ft![0]}–{ft![1]} a.e.t.</div>
|
||||
)}
|
||||
{match.scoreEt && !match.scoreP && (
|
||||
<div className="text-[10px] text-[#2a5c35] mt-0.5">a.e.t.</div>
|
||||
)}
|
||||
<div className="text-[9px] text-[#2a5c35] tracking-[0.12em] uppercase mt-1.5">{match.round}</div>
|
||||
<div className="text-[10px] text-[#1a3a22] mt-0.5">{match.date ? formatDate(match.date) : ''}</div>
|
||||
: '?–?'}
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<TeamFlag name={match.team2.name} iso2={match.team2.iso2} size="xl" className="mb-2" />
|
||||
<div className={`font-['Bebas_Neue'] text-base sm:text-xl tracking-[0.07em] truncate ${winner === 'away' ? 'text-[#dff5e8]' : 'text-[#6abf7a]'}`}>
|
||||
{match.team2.name}
|
||||
</div>
|
||||
{match.scoreP && (
|
||||
<div className="text-[10px] text-[#2a5c35] mt-0.5">{ft![0]}–{ft![1]} a.e.t.</div>
|
||||
)}
|
||||
{match.scoreEt && !match.scoreP && (
|
||||
<div className="text-[10px] text-[#2a5c35] mt-0.5">{ft![0]}–{ft![1]} (a.e.t.)</div>
|
||||
)}
|
||||
<div className="text-[9px] text-[#2a5c35] tracking-[0.12em] uppercase mt-1.5">{match.round}</div>
|
||||
<div className="text-[10px] text-[#1a3a22] mt-0.5">{match.date ? formatDate(match.date) : ''}</div>
|
||||
</Link>
|
||||
<Link href={match.team2.slug ? `/teams/${match.team2.slug}` : matchHref}
|
||||
className={`text-center block transition-colors hover:text-[#22c55e] ${winner === 'away' ? 'text-[#dff5e8]' : 'text-[#6abf7a]'}`}>
|
||||
<TeamFlag name={match.team2.name} iso2={match.team2.iso2} size="xl" className="mb-2" />
|
||||
<div className="font-['Bebas_Neue'] text-base sm:text-xl tracking-[0.07em] truncate">
|
||||
{match.team2.name}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user