New Code Editor and fun

src/components/FightTable.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import {eventRepo} from "./repo/repo.ts";
+    import {astroI18n} from "astro-i18n";
+    import type {ExtendedEvent} from "./types/event.ts";
+
+    export let event: ExtendedEvent;
+    export let group: string;
+    export let rows: number = 1;
+
+    function window<T>(arr: T[], len: number): T[][] {
+        let result: T[][] = [];
+        for (let i = 0; i < arr.length; i += len) {
+            result.push(arr.slice(i, i + len));
+        }
+        return result;
+    }
+</script>
+
+<div>
+    <table>
+        <tr class="font-bold border-b">
+            {#each Array(rows) as _}
+                <td>Time</td>
+                <td>Blue Team</td>
+                <td>Red Team</td>
+            {/each}
+        </tr>
+        {#each window(event.fights.filter(f => f.group === group), rows) as fights}
+            <tr>
+                {#each fights as fight}
+                    <td>{Intl.DateTimeFormat(astroI18n.locale, {
+                        hour: "numeric",
+                        minute: "numeric",
+                    }).format(new Date(fight.start))}</td>
+                    <td class:font-bold={fight.ergebnis === 1} class:italic={fight.ergebnis === 3}>{fight.blueTeam.kuerzel}</td>
+                    <td class:font-bold={fight.ergebnis === 2} class:italic={fight.ergebnis === 3}>{fight.redTeam.kuerzel}</td>
+                {/each}
+            </tr>
+        {/each}
+    </table>
+</div>
+
+<style lang="scss">
+  table {
+    @apply w-full;
+  }
+  div {
+    @apply p-3 bg-gray-200 dark:bg-gray-800 rounded-2xl w-3/4 mx-auto;
+  }
+</style>