96 lines
3.5 KiB
Svelte
96 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
import Skeleton from '@assets/img/steve.png';
|
|
import type { GetDeathsRes } from '@db/schema/death.ts';
|
|
import { type ActionReturnType, actions } from 'astro:actions';
|
|
|
|
interface Props {
|
|
teams: Exclude<ActionReturnType<typeof actions.team.teams>['data'], undefined>['teams'];
|
|
deaths: GetDeathsRes;
|
|
}
|
|
|
|
const { teams, deaths }: Props = $props();
|
|
|
|
const entries = teams.map((team) => ({
|
|
...team,
|
|
memberOne: Object.assign(team.memberOne, {
|
|
dead: team.memberOne.id != null ? deaths.findIndex((d) => d.deadUserId === team.memberOne.id) !== -1 : null,
|
|
}),
|
|
memberTwo: Object.assign(team.memberTwo, {
|
|
dead: team.memberTwo.id != null ? deaths.findIndex((d) => d.deadUserId === team.memberTwo.id) !== -1 : null,
|
|
}),
|
|
kills: deaths.filter((d) => d.killerUserId === team.memberOne.id || d.killerUserId === team.memberTwo.id).length
|
|
}));
|
|
entries.sort((a, b) => {
|
|
const aAllowed = !!a.memberOne.id && !!a.memberTwo.id && !(a.memberOne.dead && a.memberTwo.dead);
|
|
const bAllowed = !!b.memberOne.id && !!b.memberTwo.id && !(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">
|
|
<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 w-3 h-3" style="background-color: {team.color}"></div>
|
|
<h3 class="text-xs sm:text-xl" 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">
|
|
{#if team.memberOne.id != null}
|
|
<img
|
|
class="h-4 pixelated"
|
|
src={team.memberOne.dead ? Skeleton.src : `https://mc-heads.net/head/${team.memberOne.username}/8`}
|
|
alt="head"
|
|
/>
|
|
{/if}
|
|
<span class="text-xs sm:text-md" 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">
|
|
{#if team.memberTwo.id != null}
|
|
<img
|
|
class="h-4 pixelated"
|
|
src={team.memberTwo.dead ? Skeleton.src : `https://mc-heads.net/head/${team.memberTwo.username}/8`}
|
|
alt="head"
|
|
/>
|
|
{/if}
|
|
<span class="text-xs sm:text-md" 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">0</span>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|