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

apps/frontend/src/pages/MatchDetails.tsx

@@ -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>
     </>
   );