Files
Website/src/components/GroupTable.svelte
2023-12-05 17:36:31 +01:00

56 lines
1.6 KiB
Svelte

<script lang="ts">
import {window} from "./util.ts";
import {t} from "astro-i18n";
import type {ExtendedEvent} from "./types/event.ts";
export let event: ExtendedEvent;
export let group: string;
export let rows: number = 1;
$: teamPoints = event.teams.map(team => {
const fights = event.fights.filter(fight => fight.blueTeam.id === team.id || fight.redTeam.id === team.id);
const points = fights.reduce((acc, fight) => {
if (fight.ergebnis === 1 && fight.blueTeam.id === team.id) {
return acc + 3;
} else if (fight.ergebnis === 2 && fight.redTeam.id === team.id) {
return acc + 3;
} else if (fight.ergebnis === 3) {
return acc + 1;
} else {
return acc;
}
}, 0);
return {
team,
points,
};
}).sort((a, b) => b.points - a.points);
</script>
<div>
<table>
<tr class="font-bold border-b">
{#each Array(rows) as _}
<td>{t("announcements.table.team")}</td>
<td>{t("announcements.table.points")}</td>
{/each}
</tr>
{#each window(teamPoints, rows) as teams}
<tr>
{#each teams as team}
<td>{team.team.name}</td>
<td>{team.points}</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>