Website/src/components/EloTable.svelte

<!--
  -   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 {statsRepo} from "./repo/repo.ts";
    import {t} from "astro-i18n";

    export let gamemode: string;

    let request = getRequest();

    function getRequest() {
        return $statsRepo.getRankings(gamemode);
    }
</script>

{#await request}
    <p>Loading...</p>
{:then data}
    <div>
        <table>
            <tr class="font-bold">
                <td>{t("elo.place")}</td>
                <td>{t("elo.name")}</td>
                <td>{t("elo.elo")}</td>
            </tr>
            {#each data as player, i (player.id)}
                <tr>
                    <td>{`${i + 1}.`}</td>
                    <td>{player.name}</td>
                    <td>{player.elo}</td>
                </tr>
            {/each}
        </table>
    </div>
{:catch error}
    <p>{error.message}</p>
{/await}

<style lang="scss">
    table {
      @apply w-full;
    }
    div {
      @apply p-3 bg-gray-200 dark:bg-gray-800 rounded-2xl;
    }
</style>