Files
Website/src/components/FightTable.svelte

78 lines
3.0 KiB
Svelte

<!-- @migration-task Error while migrating Svelte code: `<tr>` is invalid inside `<table>` -->
<!--
- This file is a part of the SteamWar software.
-
- Copyright (C) 2023 SteamWar.de-Serverteam
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as published by
- the Free Software Foundation, either version 3 of the License, or
- (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<script lang="ts">
import { window } from "./utils.ts";
import { astroI18n, t } from "astro-i18n";
import type { EventFight, ExtendedEvent } from "@type/event";
import "@styles/table.css";
export let event: ExtendedEvent;
export let group: number;
export let rows: number = 1;
function getWinner(fight: EventFight) {
if (!fight.hasFinished) {
return t("announcements.table.notPlayed");
}
switch (fight.ergebnis) {
case 1:
return fight.blueTeam.kuerzel;
case 2:
return fight.redTeam.kuerzel;
default:
return t("announcements.table.draw");
}
}
</script>
<div class="p-3 bg-gray-200 dark:bg-neutral-800 rounded-2xl w-3/4 mx-auto">
<table>
<thead>
<tr class="font-bold border-b">
{#each Array(rows) as i (i)}
<td>{t("announcements.table.time")}</td>
<td>{t("announcements.table.blue")}</td>
<td>{t("announcements.table.red")}</td>
<td>{t("announcements.table.winner")}</td>
{/each}
</tr>
</thead>
<tbody>
{#each window( event.fights.filter((f) => (group === undefined ? true : f.group?.id === group)), rows ) as fights}
<tr>
{#each fights as fight (fight.id)}
<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>
<td>{getWinner(fight)}</td>
{/each}
</tr>
{/each}
</tbody>
</table>
</div>