PSO Score

This commit is contained in:
2026-07-04 10:32:31 -05:00
parent 867d3c96b1
commit 5138e61854
2 changed files with 40 additions and 9 deletions

View File

@@ -16,13 +16,16 @@ function fmtTime(iso: string, locale: string): string {
return d.toLocaleTimeString(locale === "en" ? "en-US" : "de-DE", { hour: "2-digit", minute: "2-digit" });
}
function scoreDisplay(m: Match, dict: Dictionary): string {
function scoreMain(m: Match): string {
if (m.status === "SCHEDULED" || m.status === "POSTPONED" || (m.homeScore == null && m.awayScore == null)) return " : ";
const base = `${m.homeScore ?? 0} : ${m.awayScore ?? 0}`;
return `${m.homeScore ?? 0} : ${m.awayScore ?? 0}`;
}
function scorePenalty(m: Match, dict: Dictionary): string | null {
if (m.homePenalty != null && m.awayPenalty != null) {
return `${base} (${m.homePenalty}:${m.awayPenalty} ${dict.bracket.penaltyShootout})`;
return `${m.homePenalty}:${m.awayPenalty} ${dict.bracket.penaltyShootout}`;
}
return base;
return null;
}
function isLive(m: Match): boolean {
@@ -145,6 +148,7 @@ export default function KoFixtures({ teams, matches, dict, locale }: { teams: Te
const city = STADIUMS[MATCH_STADIUMS[m.matchNumber]]?.city;
const isTarget = String(m.id) === String(targetMatchId);
const finished = m.status === "FINISHED";
const penalty = scorePenalty(m, dict);
return (
<div
@@ -195,13 +199,21 @@ export default function KoFixtures({ teams, matches, dict, locale }: { teams: Te
{/* Teams + Score */}
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<TeamLabel team={home} locale={locale} />
<span style={{
fontFamily: "var(--font-mono)", fontSize: 22, fontWeight: 700,
color: live ? "var(--turf)" : "var(--ink)",
<div style={{
position: "relative",
display: "flex", flexDirection: "column", alignItems: "center",
padding: "0 16px",
}}>
{scoreDisplay(m, dict)}
</span>
<span style={{
fontFamily: "var(--font-mono)", fontSize: 22, fontWeight: 700,
color: live ? "var(--turf)" : "var(--ink)",
lineHeight: 1,
}}>
{scoreMain(m)}
{penalty && <span className="pso-inline"> ({penalty})</span>}
</span>
{penalty && <span className="pso-badge">{penalty}</span>}
</div>
<TeamLabel team={away} reverse locale={locale} />
</div>

View File

@@ -285,6 +285,9 @@ table.standings { width: 100%; border-collapse: collapse; }
}
.foot a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 2px; }
/* PSO-Badge: auf Desktop inline im Score, auf Mobile absolut darunter schwebend */
.pso-badge { display: none; }
/* =====================================================================
MOBIL — Breakpoint 640px (iPhone ~375, Galaxy ~412, alle ≤640)
===================================================================== */
@@ -357,6 +360,22 @@ table.standings { width: 100%; border-collapse: collapse; }
.bracket-banner { padding: 10px 12px; font-size: 13px; }
.legend { font-size: 10px; gap: 12px; }
/* ---------- mobil: PSO-Badge (Elfmeterschießen unter dem Score) ---------- */
.pso-inline { display: none; }
.pso-badge {
display: block;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 2px;
font-size: 10px;
font-family: var(--font-mono);
color: var(--ink);
white-space: nowrap;
pointer-events: none;
}
/* ---------- mobil: Simulation ---------- */
.sim-row { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
.sim-row-phase { min-width: 100%; font-size: 9px; }