65 lines
2.0 KiB
Svelte
65 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import Steve 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();
|
|
</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>Team</th>
|
|
<th>Spieler 1</th>
|
|
<th>Spieler 2</th>
|
|
<th>Kills</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each teams 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">{team.name}</h3>
|
|
</div>
|
|
</td>
|
|
<td class="max-w-9 overflow-ellipsis">
|
|
{#if team.memberOne.id}
|
|
<div class="flex items-center gap-x-2">
|
|
<img class="w-4 h-4 pixelated" src={Steve.src} alt="head" />
|
|
<span
|
|
class="text-xs sm:text-md"
|
|
class:line-through={deaths.find((d) => d.deadUserId === team.memberOne.id)}
|
|
>{team.memberOne.username}</span
|
|
>
|
|
</div>
|
|
{/if}
|
|
</td>
|
|
<td>
|
|
{#if team.memberTwo.id}
|
|
<div class="flex items-center gap-x-2">
|
|
<img class="w-4 h-4 pixelated" src={Steve.src} alt="head" />
|
|
<span
|
|
class="text-xs sm:text-md"
|
|
class:line-through={deaths.find((d) => d.deadUserId === team.memberTwo.id)}
|
|
>{team.memberTwo.username}</span
|
|
>
|
|
</div>
|
|
{/if}
|
|
</td>
|
|
<td>
|
|
<span class="text-xs sm:text-md">0</span>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|