docs: add AGENTS.md

AGENTS.md

@@ -0,0 +1,27 @@
+# AGENTS.md
+
+Bun workspaces monorepo: `apps/backend` (Elysia API on port 3000) + `apps/frontend` (Solid.js/Vite/PWA app on port 5173). `packages/` is empty; the frontend is the primary app.
+
+## Commands
+
+- `bun install` (root) — install all workspaces
+- `bun run dev` — start backend + frontend together
+  - `bun --filter backend dev` / `bun --filter frontend dev` for one side
+- Typecheck/build frontend: `bun --filter frontend build` (`tsc -b && vite build`)
+- No test suite exists: backend `test` script is a stub that exits 1; frontend has no tests
+
+## Gotchas
+
+- Readme at repo root is stale `bun init` boilerplate (`bun run index.ts` does not exist); the real entrypoints are `apps/backend/src/index.ts` and `apps/frontend/src/index.tsx`
+- Frontend calls `/api/v1/...`; Vite dev proxy adds the strip of `/api` before forwarding to `localhost:3000`. Backend routes live under `/v1/...` with NO `/api` prefix. Don't add `/api` to backend routes or drop it from frontend fetches
+- Backend `apps/backend/src/index.ts:3` hardcodes `isDev = true`, which switches ID encoding between `utf8` and `base64url` for opaque `sportsmanager:<host>:<remoteId>` IDs — decode/encode must both use the same format; change it deliberately, not accidentally
+- Frontend is Solid.js (`jsxImportSource: solid-js`), not React — no hooks, no `useState`; use `createSignal` / `createStore` (see `src/stores/matchStore.ts`)
+- `matchStore.loadMatch` merges the stats payload into the same match record via `patchMatch`; the shape of `Match` is intentionally loose (`[key: string]: unknown`)
+- PWA (`@serwist/*`) is in `apps/frontend/package.json` but NOT wired into `vite.config.ts` — Serwist service worker is currently inactive
+- `apps/backend/package.json` has a stale `"module": "src/index.js"` field; the actual file is `src/index.ts`
+
+## Conventions
+
+- No lint/CI/prettier config is set up (prettier is only a root devDependency with no config file) — don't assume a formatter style
+- Backend data comes from external German table-tennis/sportsmanager APIs (domains listed at the bottom of `apps/backend/src/index.ts`); responses are in German and field names are the raw API's (e.g. `heim_punkte`, `gast_name`)
+- Team/match/event IDs are derived (encoded), not raw — compute IDs via the `Sportsmanager.id()` helper rather than hardcoding

apps/backend/src/index.ts

@@ -439,20 +439,25 @@ class Sportsmanager {
             },
           }
         : undefined,
-      firstLeg: match.hinspiel
+      firstLeg:
-        ? {
+        match.hinspiel &&
-            homeTeam: {
+        !(
-              ...teams[match.hinspiel.heim_team_id],
+          Number(match.hinspiel.heim_punkte) === 0 &&
-              goals: Number(match.hinspiel.heim_punkte),
+          Number(match.hinspiel.gast_punkte) === 0
-              points: Number(match.hinspiel.heim_spielpunkte),
+        )
-            },
+          ? {
-            awayTeam: {
+              homeTeam: {
-              ...teams[match.hinspiel.gast_team_id],
+                ...teams[match.hinspiel.heim_team_id],
-              goals: Number(match.hinspiel.gast_punkte),
+                goals: Number(match.hinspiel.heim_punkte),
-              points: Number(match.hinspiel.gast_spielpunkte),
+                points: Number(match.hinspiel.heim_spielpunkte),
-            },
+              },
-          }
+              awayTeam: {
-        : undefined,
+                ...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/components/MatchDetailsFutureSkeleton.tsx

@@ -0,0 +1,79 @@
+import { For } from "solid-js";
+
+export function MatchDetailsFutureSkeleton() {
+  return (
+    <div class="animate-pulse">
+      <div class="bg-gradient-to-b from-gray-800 to-gray-850 p-6 border-b border-gray-800 text-center">
+        <div class="h-2.5 bg-gray-700 rounded w-24 mx-auto mb-4 animate-skeleton-loop" />
+
+        <div class="flex items-center justify-between gap-4 my-2">
+          <div class="flex-1 flex flex-col items-center gap-2 min-w-0">
+            <div
+              class="size-14 bg-gray-700 rounded-full animate-skeleton-loop"
+              style={{ "--delay": "0ms" }}
+            />
+            <div class="h-3 bg-gray-700 rounded w-20" />
+          </div>
+
+          <div class="flex flex-col items-center justify-center px-4 py-2 bg-gray-950/50 rounded-2xl border border-gray-800 min-w-[100px] gap-1.5">
+            <div class="h-2.5 bg-gray-700 rounded w-14" />
+            <div class="h-5 bg-gray-700 rounded w-12" />
+            <div class="h-2 bg-gray-700 rounded w-6" />
+          </div>
+
+          <div class="flex-1 flex flex-col items-center gap-2 min-w-0">
+            <div
+              class="size-14 bg-gray-700 rounded-full animate-skeleton-loop"
+              style={{ "--delay": "80ms" }}
+            />
+            <div class="h-3 bg-gray-700 rounded w-20" />
+          </div>
+        </div>
+
+        <div class="h-2.5 bg-gray-700 rounded w-32 mx-auto mt-4" />
+      </div>
+
+      <div class="p-4 space-y-6">
+        <div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 animate-skeleton-loop">
+          <div class="h-2.5 bg-gray-700 rounded w-40 mx-auto mb-3" />
+          <div class="h-3.5 w-full rounded-full bg-gray-900 border border-gray-750" />
+          <div class="flex justify-between items-center mt-2.5">
+            <div class="h-2.5 bg-gray-700 rounded w-14" />
+            <div class="h-2.5 bg-gray-700 rounded w-14" />
+            <div class="h-2.5 bg-gray-700 rounded w-14" />
+          </div>
+        </div>
+
+        <div
+          class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 h-32 animate-skeleton-loop"
+          style={{ "--delay": "120ms" }}
+        />
+
+        <div
+          class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4 animate-skeleton-loop"
+          style={{ "--delay": "240ms" }}
+        >
+          <div class="h-2.5 bg-gray-700 rounded w-32 mx-auto" />
+          <div class="flex items-center justify-between gap-2 px-2">
+            <div class="flex gap-1">
+              <For each={[0, 1, 2, 3, 4]}>
+                {() => <div class="size-6 bg-gray-700 rounded-full" />}
+              </For>
+            </div>
+            <div class="h-2.5 bg-gray-700 rounded w-8" />
+            <div class="flex gap-1">
+              <For each={[0, 1, 2, 3, 4]}>
+                {() => <div class="size-6 bg-gray-700 rounded-full" />}
+              </For>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 h-40 animate-skeleton-loop"
+          style={{ "--delay": "360ms" }}
+        />
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/MatchDetailsGenericSkeleton.tsx

@@ -0,0 +1,33 @@
+import { For } from "solid-js";
+
+export function MatchDetailsGenericSkeleton() {
+  return (
+    <div class="animate-pulse">
+      <div class="bg-gradient-to-b from-gray-800 to-gray-850 p-6 border-b border-gray-800 flex items-center justify-center gap-4">
+        <div
+          class="size-10 bg-gray-700 rounded-full animate-skeleton-loop"
+          style={{ "--delay": "0ms" }}
+        />
+        <div
+          class="w-14 h-7 bg-gray-950/60 rounded-lg border border-gray-700/50 animate-skeleton-loop"
+          style={{ "--delay": "100ms" }}
+        />
+        <div
+          class="size-10 bg-gray-700 rounded-full animate-skeleton-loop"
+          style={{ "--delay": "50ms" }}
+        />
+      </div>
+
+      <div class="p-4 space-y-3">
+        <For each={[0, 1, 2]}>
+          {(i) => (
+            <div
+              class="bg-gray-800/40 rounded-2xl h-16 border border-gray-800 animate-skeleton-loop"
+              style={{ "--delay": `${i * 150}ms` }}
+            />
+          )}
+        </For>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/MatchDetailsSkeleton.tsx

@@ -0,0 +1,66 @@
+import { For } from "solid-js";
+
+export function MatchDetailsSkeleton() {
+  return (
+    <div class="animate-pulse">
+      <div class="bg-gradient-to-b from-gray-800 to-gray-850 w-full py-5.5 px-10 border-b border-gray-800">
+        <div class="flex items-center justify-between gap-2">
+          <div class="flex-1 flex items-center gap-2 justify-end">
+            <div
+              class="h-3 bg-gray-700 rounded w-16 animate-skeleton-loop"
+              style={{ "--delay": "0ms" }}
+            />
+            <div
+              class="size-8 bg-gray-700 rounded-full animate-skeleton-loop"
+              style={{ "--delay": "50ms" }}
+            />
+          </div>
+          <div
+            class="w-16 min-w-16 h-7 bg-gray-950/60 rounded-lg border border-gray-700/50 animate-skeleton-loop"
+            style={{ "--delay": "100ms" }}
+          />
+          <div class="flex-1 flex items-center gap-2 justify-start">
+            <div
+              class="size-8 bg-gray-700 rounded-full animate-skeleton-loop"
+              style={{ "--delay": "50ms" }}
+            />
+            <div
+              class="h-3 bg-gray-700 rounded w-16 animate-skeleton-loop"
+              style={{ "--delay": "0ms" }}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="p-4 space-y-3">
+        <For each={[0, 1, 2, 3]}>
+          {(i) => (
+            <div
+              class="bg-gray-800/40 rounded-2xl p-3 border border-gray-800 animate-skeleton-loop"
+              style={{ "--delay": `${i * 120}ms` }}
+            >
+              <div class="flex justify-center mb-2">
+                <div class="h-2.5 bg-gray-700 rounded w-14" />
+              </div>
+              <div class="flex items-center gap-2">
+                <div class="flex-1 flex flex-col gap-2">
+                  <div class="flex items-center gap-2 justify-end">
+                    <div class="h-3 bg-gray-700 rounded w-16" />
+                    <div class="size-8 bg-gray-700 rounded-full" />
+                  </div>
+                </div>
+                <div class="w-8 h-6 bg-gray-950/60 rounded border border-gray-700/50 flex-shrink-0" />
+                <div class="flex-1 flex flex-col gap-2">
+                  <div class="flex items-center gap-2 justify-start">
+                    <div class="size-8 bg-gray-700 rounded-full" />
+                    <div class="h-3 bg-gray-700 rounded w-16" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/pages/MatchDetails.tsx

@@ -1,17 +1,22 @@
-import { onMount } from "solid-js";
+import { createSignal, onMount } from "solid-js";
 import { Header } from "../components/Header";
 import { useParams } from "@solidjs/router";
 import { matchStore, loadMatch } from "../stores/matchStore";
 import { MatchItem } from "../components/MatchItem";
 import { MatchInsights } from "../components/MatchInsights";
 import { ResultTile } from "../components/ResultTile";
+import { MatchDetailsSkeleton } from "../components/MatchDetailsSkeleton";
+import { MatchDetailsFutureSkeleton } from "../components/MatchDetailsFutureSkeleton";
+import { MatchDetailsGenericSkeleton } from "../components/MatchDetailsGenericSkeleton";
 export function MatchPage() {
   // const { id } = useParams();
   const id = window.location.pathname.split("/").pop();
   const match = () => matchStore.matches.find((m) => m.id === id);
+  const [isLoading, setIsLoading] = createSignal(true);
 
-  onMount(() => {
+  onMount(async () => {
-    loadMatch(id);
+    await loadMatch(id);
+    setIsLoading(false);
   });
 
   return (
@@ -41,49 +46,195 @@ export function MatchPage() {
         </button>
         <div class="bg-gray-900">
           {/* <Header title={""} showBackButton /> */}
-          {match() && match().status !== "SCHEDULED" && (
+          <Show when={match()} fallback={<MatchDetailsGenericSkeleton />}>
-            <MatchDetails match={match()} />
+            <Show when={match().status !== "SCHEDULED"}>
-          )}
+              <Show
-          {match() && match().status === "SCHEDULED" && (
+                when={!isLoading()}
-            <MatchDetailsFuture match={match()} />
+                fallback={<MatchDetailsSkeleton />}
-          )}
+              >
+                <MatchDetails match={match()} />
+              </Show>
+            </Show>
+            <Show when={match().status === "SCHEDULED"}>
+              <Show
+                when={!isLoading()}
+                fallback={<MatchDetailsFutureSkeleton />}
+              >
+                <MatchDetailsFuture match={match()} />
+              </Show>
+            </Show>
+          </Show>
         </div>
       </div>
     </>
   );
 }
 
+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>
+      <div class="p-4 space-y-3">
-        {props.match.slots?.map((s) => {
+        <Show
-          return (
+          when={props.match.slots?.length}
-            <div>
+          fallback={
-              {s.type}
+            <div class="text-center text-sm text-gray-500 py-6">
-              <div class="flex flex-row">
+              Noch keine Ergebnisse
-                <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>
-          );
+          }
-        })}
+        >
+          {props.match.slots.map((s: any) => (
+            <SlotCard slot={s} />
+          ))}
+        </Show>
       </div>
     </>
   );