sort team table
All checks were successful
deploy / build-and-deploy (push) Successful in 23s

This commit is contained in:
bytedream 2025-06-04 00:45:23 +02:00
parent fc156c386b
commit c1c5af73dd

View File

@ -9,6 +9,36 @@
}
const { teams, deaths }: Props = $props();
const entries = teams.map((team) => ({
...team,
memberOne:
team.memberOne.id != null
? {
...team.memberOne,
dead: deaths.findIndex((d) => d.deadUserId === team.memberOne.id) !== -1
}
: undefined,
memberTwo:
team.memberTwo.id != null
? {
...team.memberTwo,
dead: deaths.findIndex((d) => d.deadUserId === team.memberTwo.id) !== -1
}
: undefined,
kills: deaths.filter((d) => d.killerUserId === team.memberOne.id || d.killerUserId === team.memberTwo.id).length
}));
entries.sort((a, b) => {
const aAllowed = !!a.memberOne && !!a.memberTwo && !(a.memberOne.dead && a.memberTwo.dead);
const bAllowed = !!b.memberOne && !!b.memberTwo && !(b.memberOne.dead && b.memberTwo.dead);
if (!aAllowed && !bAllowed) {
return 0;
} else if (!aAllowed || !bAllowed) {
return (bAllowed as unknown as number) - (aAllowed as unknown as number);
}
return b.kills - a.kills;
});
</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">
@ -22,34 +52,44 @@
</tr>
</thead>
<tbody>
{#each teams as team (team.id)}
{#each entries as team (team.id)}
<tr>
<td>
<div class="flex items-center gap-x-2">
<div class="rounded-sm w-3 h-3" style="background-color: {team.color}"></div>
<h3 class="text-xs sm:text-xl" class:text-red-200={!team.memberOne.id || !team.memberTwo.id}>
<h3 class="text-xs sm:text-xl" class:text-red-200={!team.memberOne}>
{team.name}
</h3>
</div>
{#if !team.memberOne.id || !team.memberTwo.id}
{#if !team.memberOne || !team.memberTwo}
<span>Team unvollständig</span>
{/if}
</td>
<td class="max-w-9 overflow-ellipsis">
{#if team.memberOne.id}
{@const dead = deaths.findIndex((d) => d.deadUserId === team.memberOne.id)}
{#if team.memberOne}
<div class="flex items-center gap-x-2">
<img class="w-4 h-4 pixelated" src={dead === -1 ? `https://mc-heads.net/head/${team.memberOne.username}/8` : Skeleton.src} alt="head" />
<span class="text-xs sm:text-md" class:line-through={dead !== -1}>{team.memberOne.username}</span>
<img
class="w-4 h-4 pixelated"
src={team.memberOne.dead ? Skeleton.src : `https://mc-heads.net/head/${team.memberOne.username}/8`}
alt="head"
/>
<span class="text-xs sm:text-md" class:line-through={team.memberOne.dead}
>{team.memberOne.username}</span
>
</div>
{/if}
</td>
<td>
{#if team.memberTwo.id}
{@const dead = deaths.findIndex((d) => d.deadUserId === team.memberTwo.id)}
{#if team.memberTwo}
<div class="flex items-center gap-x-2">
<img class="w-4 h-4 pixelated" src={dead === -1 ? `https://mc-heads.net/head/${team.memberTwo.username}/8` : Skeleton.src} alt="head" />
<span class="text-xs sm:text-md" class:line-through={dead !== -1}>{team.memberTwo.username}</span>
<img
class="w-4 h-4 pixelated"
src={team.memberTwo.dead ? Skeleton.src : `https://mc-heads.net/head/${team.memberTwo.username}/8`}
alt="head"
/>
<span class="text-xs sm:text-md" class:line-through={team.memberTwo.dead}
>{team.memberTwo.username}</span
>
</div>
{/if}
</td>