Refactor GroupTable component to use $props for event, group, and rows; simplify teamPoints calculation with derived state

src/components/GroupTable.svelte

@@ -24,35 +24,22 @@
     import type { ExtendedEvent } from "@type/event.ts";
     import "@styles/table.css";
 
-    export let event: ExtendedEvent;
-    export let group: number;
-    export let rows: number = 1;
+    let {
+        event,
+        group,
+        rows = 1,
+    }: {
+        event: ExtendedEvent;
+        group: number;
+        rows?: number;
+    } = $props();
 
-    $: teamPoints = event.teams
-        .map((team) => {
-            let fights = event.fights.filter((fight) => fight.blueTeam.id === team.id || fight.redTeam.id === team.id);
-
-            if (group !== undefined) {
-                fights = fights.filter((fight) => fight.group?.id === group);
-            }
-
-            const points = fights.reduce((acc, fight) => {
-                if (fight.ergebnis === 1 && fight.blueTeam.id === team.id) {
-                    return acc + (fight.group?.pointsPerWin ?? 3);
-                } else if (fight.ergebnis === 2 && fight.redTeam.id === team.id) {
-                    return acc + (fight.group?.pointsPerWin ?? 3);
-                } else if (fight.ergebnis === 3) {
-                    return acc + (fight.group?.pointsPerDraw ?? 1);
-                } else {
-                    return acc + (fight.group?.pointsPerLoss ?? 0);
-                }
-            }, 0);
-            return {
-                team,
-                points,
-            };
-        })
-        .sort((a, b) => b.points - a.points);
+    let teamPoints = $derived(
+        Object.entries(event.groups[group]?.points ?? {}).map(([teamId, points]) => ({
+            team: event.teams.find((t) => t.id === Number(teamId))!!,
+            points: points,
+        }))
+    );
 </script>
 
 <div class="p-3 bg-gray-200 dark:bg-neutral-800 rounded-2xl w-3/4 mx-auto">