kickern/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hide empty first-leg score, restyle match slots

Browse Source
This commit is contained in:
arnef
2026-09-09 06:27:51 +02:00
parent d19f0c2f8f
commit 16233b5133
2 changed files with 177 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/backend/src/index.ts
+19 -14
View File
@@ -439,20 +439,25 @@ class Sportsmanager {
},
}
: undefined,
firstLeg: match.hinspiel
? {
homeTeam: {
...teams[match.hinspiel.heim_team_id],
goals: Number(match.hinspiel.heim_punkte),
points: Number(match.hinspiel.heim_spielpunkte),
},
awayTeam: {
...teams[match.hinspiel.gast_team_id],
goals: Number(match.hinspiel.gast_punkte),
points: Number(match.hinspiel.gast_spielpunkte),
},
}
: undefined,
firstLeg:
match.hinspiel &&
!(
Number(match.hinspiel.heim_punkte) === 0 &&
Number(match.hinspiel.gast_punkte) === 0
)
? {
homeTeam: {
...teams[match.hinspiel.heim_team_id],
goals: Number(match.hinspiel.heim_punkte),
points: Number(match.hinspiel.heim_spielpunkte),
},
awayTeam: {
...teams[match.hinspiel.gast_team_id],
goals: Number(match.hinspiel.gast_punkte),
points: Number(match.hinspiel.gast_spielpunkte),
},
}
: undefined,
// orig: { teams, home, away, match, homeTeam, awayTeam },
};
};
apps/frontend/src/pages/MatchDetails.tsx
+158 -24
View File
@@ -53,37 +53,171 @@ export function MatchPage() {
);
}
const SLOT_LABEL: Record<string, string> = {
SINGLE: "Einzel",
DOUBLE: "Doppel",
SHOOT_OUT: "Shootout",
};
const SLOT_TEXT: Record<string, string> = {
SINGLE: "text-emerald-400/80",
DOUBLE: "text-sky-400/80",
SHOOT_OUT: "text-amber-400/80",
};
function sidePlayers(side: any) {
return Array.isArray(side?.players)
? side.players.filter((p: any) => p !== null && p !== undefined)
: [];
}
function PlayerChip(props: {
player: any;
side: "home" | "away";
winning?: boolean;
}) {
const p = () => props.player;
const name = () => (p() ? `${p().firstName} ${p().lastName}`.trim() : "Unbesetzt");
const avatar = (
<div
class={`size-8 rounded-full border p-0.5 bg-gray-900 flex-shrink-0 ${
props.winning ? "border-emerald-500/40" : "border-gray-700"
}`}
>
<Show
when={p()?.imageUrl}
fallback={
<span class="size-full flex items-center justify-center text-[10px] font-bold text-gray-600">
{p()?.firstName?.[0]?.toUpperCase() || "?"}
</span>
}
>
<img
src={p()!.imageUrl}
class="size-full rounded-full object-cover"
alt=""
/>
</Show>
</div>
);
const label = (
<span
class={`min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium ${
props.side === "home" ? "text-left" : "text-right"
} ${props.winning ? "text-emerald-300" : "text-gray-200"}`}
>
{name()}
</span>
);
return (
<div
class={`grid items-center gap-2 w-full min-w-0 ${
props.side === "home" ? "grid-cols-[auto_1fr]" : "grid-cols-[1fr_auto]"
}`}
>
{props.side === "home" ? (
<>
{avatar}
{label}
</>
) : (
<>
{label}
{avatar}
</>
)}
</div>
);
}
function PlayerSide(props: {
side: any;
align: "home" | "away";
winning?: boolean;
}) {
const players = () => sidePlayers(props.side);
return (
<div class="flex-1 min-w-0 flex flex-col justify-center gap-2">
<Show
when={players().length > 0}
fallback={
<span
class={`text-xs font-semibold text-gray-600 py-2.5 ${
props.align === "home" ? "text-left" : "text-right"
}`}
>
—
</span>
}
>
{players().map((player: any) => (
<PlayerChip player={player} side={props.align} winning={props.winning} />
))}
</Show>
</div>
);
}
function SlotCard(props: { slot: any }) {
const slot = () => props.slot;
const sets = () => (slot().sets ?? []).filter((s: any) => s !== null);
const homeTotal = () =>
sets().reduce((n: number, s: any) => n + (Number(s.homeGoals) || 0), 0);
const awayTotal = () =>
sets().reduce((n: number, s: any) => n + (Number(s.awayGoals) || 0), 0);
const homeWins = () => homeTotal() > awayTotal();
const awayWins = () => awayTotal() > homeTotal();
return (
<div class="bg-gray-800/40 rounded-2xl p-3 border border-gray-800">
<div class="flex justify-center mb-2">
<span
class={`text-[9px] font-semibold uppercase tracking-wider whitespace-nowrap ${
SLOT_TEXT[slot().type] || SLOT_TEXT.SINGLE
}`}
>
{SLOT_LABEL[slot().type] || slot().type}
</span>
</div>
<div class="flex items-center gap-2">
<PlayerSide side={slot().home} align="home" winning={homeWins()} />
<div class="flex flex-col items-center gap-1 flex-shrink-0">
<Show
when={sets().length > 0}
fallback={<span class="text-xs font-bold text-gray-600">—</span>}
>
{sets().map((s: any) => (
<ResultTile home={s.homeGoals} away={s.awayGoals} />
))}
</Show>
</div>
<PlayerSide side={slot().away} align="away" winning={awayWins()} />
</div>
</div>
);
}
function MatchDetails(props: { match: any }) {
return (
<>
<div class="bg-gradient-to-b from-gray-800 to-gray-850 w-full py-5.5 px-10 border-b border-gray-800 text-center sticky top-0 backdrop-blur-md z-21">
<MatchItem game={props.match} />
</div>
<div>
{props.match.slots?.map((s) => {
return (
<div>
{s.type}
<div class="flex flex-row">
<div class="flex-1">
{s.home.players.map((p) => (
<div>{p ? `${p.firstName} ${p.lastName}` : "-"}</div>
))}
</div>
<div>
{s.sets.map((s) => (
<ResultTile home={s?.homeGoals} away={s?.awayGoals} />
))}
</div>
<div class="flex-1">
{s.away.players.map((p) => (
<div>{p ? `${p.firstName} ${p.lastName}` : "-"}</div>
))}
</div>
</div>
<div class="p-4 space-y-3">
<Show
when={props.match.slots?.length}
fallback={
<div class="text-center text-sm text-gray-500 py-6">
Noch keine Ergebnisse
</div>
);
})}
}
>
{props.match.slots.map((s: any) => (
<SlotCard slot={s} />
))}
</Show>
</div>
</>
);