Website/src/components/FightTable.svelte

50 Zeilen
1.5 KiB
Svelte

<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>