Some (alot) of fixes

src/components/admin/pages/event/FightCard.svelte

@@ -19,7 +19,7 @@
 
 <script lang="ts">
     import {EditOutline, TrashBinOutline} from "flowbite-svelte-icons";
-    import {Button, Modal, Toolbar, ToolbarButton} from "flowbite-svelte";
+    import {Button, Checkbox, Modal, Toolbar, ToolbarButton} from "flowbite-svelte";
     import type {EventFight, ExtendedEvent} from "@type/event.ts";
     import FightEditModal from "./modals/FightEditModal.svelte";
     import {createEventDispatcher} from "svelte";
@@ -32,6 +32,8 @@
     i: number;
     selected?: boolean;
     hideEdit?: boolean;
+    select: () => void;
+    update: () => void;
   }
 
   let {
@@ -39,29 +41,34 @@
     data = $bindable(),
     i,
     selected = false,
-    hideEdit = false
+    hideEdit = false,
+      select,
+      update,
   }: Props = $props();
 
     let deleteOpen = $state(false);
     let editOpen = $state(false);
 
-    let dispatcher = createEventDispatcher();
-
     function dispatchSelect() {
         setTimeout(() => {
             if (!deleteOpen && !editOpen) {
-                dispatcher("select");
+                select();
             }
         }, 1);
     }
 
     async function deleteFight() {
         await $fightRepo.deleteFight(fight.id);
-        dispatcher("update");
+        update();
     }
+
+    let isUneven = $derived(i % 2 === 0);
 </script>
 
-<div class="flex h-16 {i % 2 === 0 ? 'bg-gray-800' : ''} mx-4 mt-6 rounded border {selected ? 'border-orange-700' : 'border-gray-700'} p-2 hover:bg-gray-700 transition justify-between shadow-lg cursor-pointer"
+<div class={{"flex h-16 mx-4 mt-6 rounded border p-2 hover:bg-gray-700 transition justify-between shadow-lg cursor-pointer": true,
+"bg-gray-800": isUneven,
+"border-orange-700": selected,
+"border-gray-700": !selected}}
      onclick={dispatchSelect} onkeypress={dispatchSelect} role="checkbox" aria-checked={selected} tabindex="0"
 >
     <div class="flex">

src/components/admin/pages/event/FightList.svelte

@@ -82,7 +82,7 @@
         } else {
             groupFights.forEach(fight => selectedFights.add(fight));
         }
-        selectedFights = selectedFights;
+        selectedFights = new Set(selectedFights);
     }
 
     let deleteOpen = $state(false);
@@ -227,16 +227,17 @@
             <h1 class="ml-4 text-2xl">{group.group ?? "Ungrouped"}</h1>
         </div>
         {#each group.fights.sort((a, b) => a.start - b.start) as fight, i (fight.id)}
-            <FightCard {fight} {i} {data} selected={selectedFights.has(fight)}
-                       on:select={() => {
+            {@const isSelected = selectedFights.has(fight)}
+            <FightCard {fight} {i} {data} selected={isSelected}
+                       select={() => {
                     if (selectedFights.has(fight)) {
                         selectedFights.delete(fight);
                     } else {
                         selectedFights.add(fight);
                     }
-                    selectedFights = selectedFights;
-                }}
-                       on:update={async () => fights = await $fightRepo.listFights(data.event.id)}
+
+                    selectedFights = new Set(selectedFights);
+                }} update={async () => fights = await $fightRepo.listFights(data.event.id)}
             />
         {/each}
     {/each}

src/components/admin/pages/event/modals/FightEditModal.svelte

@@ -35,12 +35,13 @@
     open?: boolean;
   }
 
-  let { fight = $bindable(), data, open = $bindable(false) }: Props = $props();
+  let { fight = $bindable(), data = $bindable(), open = $bindable(false) }: Props = $props();
 
     let redTeam = $state(fight.redTeam.id.toString());
     let blueTeam = $state(fight.blueTeam.id.toString());
     let start = $state(dayjs(fight.start).utc(true).toISOString().slice(0, -1));
     let spectatePort = $state(fight.spectatePort?.toString() ?? null);
+    $inspect(spectatePort, fight.spectatePort)
     let gamemode = $state(fight.spielmodus);
     let map = $state(fight.map);
     let group = $state(fight.group);
@@ -62,6 +63,8 @@
             start: dayjs(start)
         };
 
+        console.log(update)
+
         $fightRepo.updateFight(fight.id, update)
             .then(value => {
                 open = false;

src/components/repo/fight.ts

@@ -80,7 +80,7 @@ export class FightRepo {
                 blueTeam: fight.blueTeam,
                 redTeam: fight.redTeam,
                 start: fight.start?.valueOf(),
-                spectatePort: fight.spectatePort ?? 0,
+                spectatePort: fight.spectatePort,
                 group: fight.group,
             }),
         }).then(value => value.json())