init localize
This commit is contained in:
191
app/[locale]/components/Fixtures.tsx
Normal file
191
app/[locale]/components/Fixtures.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
"use client";
|
||||
|
||||
import { GROUP_IDS, GroupId, Match, Team } from "@/lib/types";
|
||||
import { computeGroupTables } from "@/lib/standings";
|
||||
import Flag from "./Flag";
|
||||
|
||||
function teamById(teams: Team[], id: string | null) {
|
||||
return id ? teams.find((t) => t.id === id) : undefined;
|
||||
}
|
||||
|
||||
// Kürzel der lokalen Browser-Zeitzone, z.B. "MEZ"/"GMT+1" – einmal ermittelt.
|
||||
const TZ_LABEL = (() => {
|
||||
try {
|
||||
const parts = new Intl.DateTimeFormat("de-DE", { timeZoneName: "short" })
|
||||
.formatToParts(new Date());
|
||||
return parts.find((p) => p.type === "timeZoneName")?.value ?? "";
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
})();
|
||||
|
||||
function fmtDate(iso: string): string {
|
||||
const d = new Date(iso);
|
||||
const s = d.toLocaleString("de-DE", {
|
||||
weekday: "short", day: "2-digit", month: "2-digit",
|
||||
hour: "2-digit", minute: "2-digit",
|
||||
});
|
||||
return TZ_LABEL ? `${s} ${TZ_LABEL}` : s;
|
||||
}
|
||||
|
||||
function statusText(m: Match): { text: string; live: boolean } {
|
||||
switch (m.status) {
|
||||
case "LIVE":
|
||||
case "IN_PLAY":
|
||||
return { text: m.minute != null ? `${m.minute}'` : "läuft", live: true };
|
||||
case "PAUSED":
|
||||
return { text: "Halbzeit", live: true };
|
||||
case "FINISHED":
|
||||
return { text: "Beendet", live: false };
|
||||
default:
|
||||
return { text: fmtDate(m.utcDate), live: false };
|
||||
}
|
||||
}
|
||||
|
||||
// Mitte: Ergebnis (wenn vorhanden) oder ein schlichtes "–" bei ungespielten
|
||||
// Spielen. Datum/Uhrzeit steht bereits links im Status und wird hier NICHT
|
||||
// wiederholt.
|
||||
function ScoreCell({ m }: { m: Match }) {
|
||||
const hasScore = m.homeScore != null && m.awayScore != null;
|
||||
const st = statusText(m);
|
||||
if (hasScore) {
|
||||
return (
|
||||
<span className={`fx-score ${st.live ? "score-live" : ""}`}>
|
||||
{m.homeScore} : {m.awayScore}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return <span className="fx-vs">–</span>;
|
||||
}
|
||||
|
||||
function GroupStandings({
|
||||
group, teams, matches,
|
||||
}: { group: GroupId; teams: Team[]; matches: Match[] }) {
|
||||
// Live-Tabelle: laufende Spiele werden mit Zwischenstand eingerechnet.
|
||||
const table = computeGroupTables(teams, matches, true).find((t) => t.group === group);
|
||||
if (!table) return null;
|
||||
|
||||
// Teams, die gerade ein laufendes Spiel haben -> Zeile markieren.
|
||||
const liveTeamIds = new Set<string>();
|
||||
let hasLive = false;
|
||||
for (const m of matches) {
|
||||
if (m.group !== group) continue;
|
||||
if (m.status === "LIVE" || m.status === "IN_PLAY" || m.status === "PAUSED") {
|
||||
hasLive = true;
|
||||
if (m.homeTeamId) liveTeamIds.add(m.homeTeamId);
|
||||
if (m.awayTeamId) liveTeamIds.add(m.awayTeamId);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fx-standings">
|
||||
<div className="fx-standings-title">
|
||||
Tabelle – Gruppe {group}
|
||||
{hasLive && <span className="fx-standings-live">● LIVE</span>}
|
||||
</div>
|
||||
<table className="standings">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="team">Mannschaft</th>
|
||||
<th>Sp</th><th>S</th><th>U</th><th>N</th>
|
||||
<th>Tore</th><th>±</th><th>Pkt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{table.rows.map((r) => {
|
||||
const team = teamById(teams, r.teamId);
|
||||
const cls = r.rank <= 2 ? `q${r.rank}` : r.rank === 3 ? "q3" : "";
|
||||
const isLive = liveTeamIds.has(r.teamId);
|
||||
return (
|
||||
<tr key={r.teamId} className={isLive ? "row-live" : ""}>
|
||||
<td className="team">
|
||||
<span className={`rankdot ${cls}`}>{r.rank}</span>
|
||||
<Flag team={team} size={20} />
|
||||
<span className="team-name">{team?.localisedName ?? team?.name ?? r.teamId}</span>
|
||||
{isLive && <span className="row-live-dot" title="läuft gerade" />}
|
||||
</td>
|
||||
<td>{r.played}</td>
|
||||
<td>{r.won}</td>
|
||||
<td>{r.drawn}</td>
|
||||
<td>{r.lost}</td>
|
||||
<td>{r.goalsFor}:{r.goalsAgainst}</td>
|
||||
<td>{r.goalDiff > 0 ? `+${r.goalDiff}` : r.goalDiff}</td>
|
||||
<td className="pts">{r.points}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Fixtures({
|
||||
group, teams, matches, onSelectGroup,
|
||||
}: {
|
||||
group: GroupId; teams: Team[]; matches: Match[];
|
||||
onSelectGroup: (g: GroupId) => void;
|
||||
}) {
|
||||
const list = matches
|
||||
.filter((m) => m.group === group)
|
||||
.sort((a, b) => +new Date(a.utcDate) - +new Date(b.utcDate));
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="grp-switch">
|
||||
{GROUP_IDS.map((g) => (
|
||||
<button
|
||||
key={g}
|
||||
className={`grp-chip ${g === group ? "active" : ""}`}
|
||||
onClick={() => onSelectGroup(g)}
|
||||
>
|
||||
{g}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{list.length === 0 ? (
|
||||
<div className="notice">Für Gruppe {group} liegen noch keine Spiele im Feed vor.</div>
|
||||
) : (
|
||||
<div className="fixtures">
|
||||
{list.map((m) => {
|
||||
const home = teamById(teams, m.homeTeamId);
|
||||
const away = teamById(teams, m.awayTeamId);
|
||||
const st = statusText(m);
|
||||
const homeWin = m.homeScore != null && m.awayScore != null && m.homeScore > m.awayScore;
|
||||
const awayWin = m.homeScore != null && m.awayScore != null && m.awayScore > m.homeScore;
|
||||
return (
|
||||
<div className={`fx ${st.live ? "fx-live" : ""}`} key={m.id}>
|
||||
<div className="fx-status">
|
||||
{st.live && <span className="dot live" />}
|
||||
<span>{st.text}</span>
|
||||
</div>
|
||||
<div className="fx-teams">
|
||||
<div className={`fx-team home ${homeWin ? "win" : ""}`}>
|
||||
<Flag team={home} size={22} />
|
||||
<span className="fx-name">{home?.localisedName ?? home?.name ?? "—"}</span>
|
||||
</div>
|
||||
<ScoreCell m={m} />
|
||||
<div className={`fx-team away ${awayWin ? "win" : ""}`}>
|
||||
<Flag team={away} size={22} />
|
||||
<span className="fx-name">{away?.localisedName ?? away?.name ?? "—"}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="fx-meta">
|
||||
{m.venue && <span className="fx-venue">📍 {m.venue}</span>}
|
||||
{m.attendance != null && (
|
||||
<span className="fx-att">👥 {m.attendance.toLocaleString("de-DE")}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{list.length > 0 && (
|
||||
<GroupStandings group={group} teams={teams} matches={matches} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user