varo-website/src/app/website/index/Teams.svelte

<script lang="ts">
  import { type ActionReturnType, actions } from 'astro:actions';
  import type { db } from '@db/database.ts';

  interface Props {
    teams: Exclude<ActionReturnType<typeof actions.team.teams>['data'], undefined>['teams'];
    deaths: Awaited<ReturnType<typeof db.getDeaths>>;
  }

  const { teams, deaths }: Props = $props();

  const entries = teams.map((team) => ({
    ...team,
    memberOne: Object.assign(team.memberOne, {
      kills: deaths.filter((d) => d.killer?.id === team.memberOne.id) ?? [],
      dead: deaths.find((d) => d.killed.id === team.memberOne.id) ?? null
    }),
    memberTwo: Object.assign(team.memberTwo, {
      kills: deaths.filter((d) => d.killer?.id === team.memberTwo.id) ?? [],
      dead: deaths.find((d) => d.killed.id === team.memberTwo.id) ?? null
    })
  }));
  entries.sort((a, b) => {
    const aBothSignedUp = a.memberOne.id != null && a.memberTwo.id != null;
    const aBothKills = a.memberOne.kills.length + a.memberTwo.kills.length;
    const aBothDead = a.memberOne.dead && a.memberTwo.dead;

    const bBothSignedUp = b.memberOne.id != null && b.memberTwo.id != null;
    const bBothKills = b.memberOne.kills.length + b.memberTwo.kills.length;
    const bBothDead = b.memberOne.dead && b.memberTwo.dead;

    if (!aBothSignedUp || !bBothSignedUp) {
      return Number(bBothSignedUp) - Number(aBothSignedUp);
    } else if ((aBothDead && !bBothDead) || (!aBothDead && bBothDead)) {
      return Number(!!aBothDead) - Number(!!bBothDead);
    }

    return bBothKills.length - aBothKills.length;
  });
</script>

<div class="card bg-base-300 shadow-sm w-full md:w-5/7 xl:w-4/7 sm:p-5 md:p-10">
  <table class="table table-fixed">
    <thead>
      <tr>
        <th style="width: 30%">Team</th>
        <th style="width: 30%">Spieler 1</th>
        <th style="width: 30%">Spieler 2</th>
        <th style="width: 10%">Kills</th>
      </tr>
    </thead>
    <tbody>
      {#each entries as team (team.id)}
        <tr>
          <td>
            <div class="flex items-center gap-x-2">
              <div class="rounded-sm min-w-3 w-3 min-h-3 h-3" style="background-color: {team.color}"></div>
              <h3
                class="text-xs sm:text-xl break-all"
                class:line-through={team.memberOne.dead && team.memberTwo.dead}
                class:text-red-200={!team.memberOne}
              >
                {team.name}
              </h3>
            </div>
            {#if !team.memberOne.id || !team.memberTwo.id}
              <span>Team unvollständig</span>
            {/if}
          </td>
          <td class="max-w-9 overflow-ellipsis">
            <div class="flex items-center gap-x-2 w-max tooltip">
              {#if team.memberTwo.kills.length > 0 || team.memberTwo.dead}
                <div class="tooltip-content text-left space-y-1">
                  {#each team.memberTwo.kills as kill (kill.killed.id)}
                    <p>🔪 {kill.killer!.username} → {kill.killed.username}</p>
                  {/each}
                  {#if team.memberTwo.dead}
                    <p class="mt-2 first:mt-initial">{team.memberTwo.dead.message}</p>
                  {/if}
                </div>
              {/if}
              {#if team.memberOne.id != null}
                <img class="h-4 pixelated" src="https://mc-heads.net/head/{team.memberOne.username}/8" alt="head" />
              {/if}
              <span
                class="text-xs sm:text-md break-all"
                class:line-through={team.memberOne.dead}
                class:text-gray-500={team.memberOne.id == null}>{team.memberOne.username}</span
              >
            </div>
          </td>
          <td>
            <div class="flex items-center gap-x-2 w-max tooltip">
              {#if team.memberTwo.kills.length > 0 || team.memberTwo.dead}
                <div class="tooltip-content text-left space-y-1">
                  {#each team.memberTwo.kills as kill (kill.killed.id)}
                    <p>🔪 {kill.killer!.username} → {kill.killed.username}</p>
                  {/each}
                  {#if team.memberTwo.dead}
                    <p class="mt-2 first:mt-initial">{team.memberTwo.dead.message}</p>
                  {/if}
                </div>
              {/if}
              {#if team.memberTwo.id != null}
                <img class="h-4 pixelated" src="https://mc-heads.net/head/{team.memberTwo.username}/8" alt="head" />
              {/if}
              <span
                class="text-xs sm:text-md break-all"
                class:line-through={team.memberTwo.dead}
                class:text-gray-500={team.memberTwo.id == null}>{team.memberTwo.username}</span
              >
            </div>
          </td>
          <td>
            <span class="text-xs sm:text-md">
              {team.memberOne.kills.length + team.memberTwo.kills.length}
            </span>
          </td>
        </tr>
      {/each}
    </tbody>
  </table>
</div>