diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css index 5bf3526..62e117b 100644 --- a/frontend/src/components/MatchCard.module.css +++ b/frontend/src/components/MatchCard.module.css @@ -21,21 +21,21 @@ inset 0 1px 0 rgba(255,255,255,0.07) !important; } -/* Badge columns — vertically centered to flags */ -.badgeLeft, .badgeRight { +/* Badge row — same flex proportions as matchRow so badges align over flags */ +.badgeRow { display: flex; align-items: center; - align-self: flex-start; - height: 56px; /* match flag height */ - min-width: 0; + margin-bottom: 8px; } -.badgeLeft { - justify-content: flex-start; +.badgeSlot { + flex: 1; + display: flex; + justify-content: center; } -.badgeRight { - justify-content: flex-end; +.badgeSpacer { + min-width: 60px; /* matches scoreBox width */ } .status { @@ -123,12 +123,12 @@ 0 0 16px rgba(254, 174, 50, 0.25); } -/* Match block — badges + teams + time/score */ -.matchBlock { +/* Match row — Teams + time/score */ +.matchRow { display: flex; align-items: flex-start; justify-content: center; - gap: 6px; + gap: 10px; margin-bottom: 16px; } diff --git a/frontend/src/components/MatchCard.tsx b/frontend/src/components/MatchCard.tsx index d4ed19f..c124f06 100644 --- a/frontend/src/components/MatchCard.tsx +++ b/frontend/src/components/MatchCard.tsx @@ -34,16 +34,6 @@ function useCountdown(minutesUntilKickoff: number) { return remaining; } -const STATUS_LABELS: Record = { - SCHEDULED: 'Geplant', - TIMED: 'Terminiert', - IN_PLAY: 'Live', - PAUSED: 'Pause', - FINISHED: 'Beendet', - POSTPONED: 'Verschoben', - CANCELLED: 'Abgesagt', -}; - function formatKickoff(utcDate: string): string { return new Date(utcDate).toLocaleString('de-DE', { hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Berlin', @@ -84,24 +74,49 @@ export default function MatchCard({ match, onTip }: Props) { return (
- {/* Main layout: badges + teams + time/score in one block */} -
- {/* Left badge — group */} -
+ {/* Badge row — centered above each flag */} +
+ {match.group && ( - {match.group.replace('GROUP_', 'Gr. ')} + {match.group.replace('GROUP_', 'Gruppe ')} )} -
+ + + + {isLive && ( + + + LIVE + + )} + {isFinished && ( + Beendet + )} + {(state === 'open' || state === 'tipped') && match.tippable && ( + + {match.minutesUntilKickoff < 60 + ? `Noch ${remainingMins} Min!` + : (() => { + const h = Math.floor(match.minutesUntilKickoff / 60); + if (h < 24) return `in ${h}h`; + const d = Math.floor(h / 24); + return `in ${d} Tag${d > 1 ? 'en' : ''}`; + })() + } + + )} + +
- {/* Home team */} + {/* Teams + Center (time or score) */} +
{match.homeTeam.shortName}
- {/* Center: LED time or Score */}
{isFinished || isLive ? ( @@ -112,37 +127,10 @@ export default function MatchCard({ match, onTip }: Props) { )}
- {/* Away team */}
{match.awayTeam.shortName}
- - {/* Right badge — status/countdown */} -
- {isLive && ( - - - LIVE - - )} - {isFinished && ( - {STATUS_LABELS[match.status] ?? match.status} - )} - {(state === 'open' || state === 'tipped') && match.tippable && ( - - {match.minutesUntilKickoff < 60 - ? `${remainingMins}m` - : (() => { - const h = Math.floor(match.minutesUntilKickoff / 60); - if (h < 24) return `${h}h`; - const d = Math.floor(h / 24); - return `${d}d`; - })() - } - - )} -
{/* Tipp area — wird zum farbigen Banner wenn Punkte ausgewertet */}