Files
varo-website/src/app/webite/index/Teams.svelte
bytedream 60f3f8a096
Some checks failed
deploy / build-and-deploy (push) Failing after 21s
initial commit
2025-05-18 13:16:20 +02:00

63 lines
1.9 KiB
Svelte

<script lang="ts">
import Steve from '@assets/img/steve.png';
import Team from '@components/website/Team.svelte';
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>
<Team name={team.name} color={team.color} />
</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>