feat: Add Team info Sidebar

src/components/event/EleminationDisplay.svelte

@@ -1,12 +1,20 @@
 <script lang="ts">
-    import type { ExtendedEvent, EventFight, ResponseGroups, ResponseRelation } from "@type/event.ts";
+    import type {
+        ExtendedEvent,
+        EventFight,
+        ResponseGroups,
+        ResponseRelation,
+    } from "@type/event.ts";
     import type { EleminationViewConfig } from "./types";
     import EventCard from "./EventCard.svelte";
     import EventFightChip from "./EventFightChip.svelte";
     import { onMount, onDestroy, tick } from "svelte";
     import { FightConnector, fightConnector } from "./connections.svelte.ts";
 
-    const { event, config }: { event: ExtendedEvent; config: EleminationViewConfig } = $props();
+    const {
+        event,
+        config,
+    }: { event: ExtendedEvent; config: EleminationViewConfig } = $props();
 
     const defaultGroup: ResponseGroups = {
         id: -1,
@@ -18,8 +26,13 @@
         points: null,
     };
 
-    function buildStages(ev: ExtendedEvent, finalFightId: number): EventFight[][] {
-        const fightMap = new Map<number, EventFight>(ev.fights.map((f) => [f.id, f]));
+    function buildStages(
+        ev: ExtendedEvent,
+        finalFightId: number,
+    ): EventFight[][] {
+        const fightMap = new Map<number, EventFight>(
+            ev.fights.map((f) => [f.id, f]),
+        );
         const relationsByFight = new Map<number, ResponseRelation[]>();
         for (const rel of ev.relations) {
             const list = relationsByFight.get(rel.fight) ?? [];
@@ -41,7 +54,8 @@
                 const rels = relationsByFight.get(fight.id) ?? [];
                 for (const rel of rels) {
                     if (rel.type === "FIGHT" && rel.fromFight) {
-                        const src = fightMap.get(rel.fromFight.id) ?? rel.fromFight;
+                        const src =
+                            fightMap.get(rel.fromFight.id) ?? rel.fromFight;
                         if (src && !visited.has(src.id)) {
                             visited.add(src.id);
                             nextLayer.push(src);
@@ -89,8 +103,12 @@
 
         for (const rel of event.relations) {
             if (rel.type !== "FIGHT" || !rel.fromFight) continue;
-            const fromEl = document.getElementById(`fight-${rel.fromFight.id}`) as HTMLElement | null;
-            const toEl = document.getElementById(`fight-${rel.fight}-team-${rel.team.toLowerCase()}`) as HTMLElement | null;
+            const fromEl = document.getElementById(
+                `fight-${rel.fromFight.id}`,
+            ) as HTMLElement | null;
+            const toEl = document.getElementById(
+                `fight-${rel.fight}-team-${rel.team.toLowerCase()}`,
+            ) as HTMLElement | null;
             if (fromEl && toEl) {
                 connector.addConnection(fromEl, toEl, "#9ca3af");
             }
@@ -111,7 +129,11 @@
             <div class="flex flex-col justify-center">
                 <EventCard title={stageName(index, stage)}>
                     {#each stage as fight}
-                        <EventFightChip {fight} group={fight.group ?? defaultGroup} />
+                        <EventFightChip
+                            {event}
+                            {fight}
+                            group={fight.group ?? defaultGroup}
+                        />
                     {/each}
                 </EventCard>
             </div>