add crown to winner team
All checks were successful
deploy / build-and-deploy (/testvaro, /opt/website-test, website-test) (push) Successful in 27s
deploy / build-and-deploy (/varo, /opt/website, website) (push) Successful in 13s

This commit is contained in:
2025-07-02 17:55:06 +02:00
parent 6789a65285
commit 2f6b3521cd
2 changed files with 36 additions and 9 deletions

View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { type ActionReturnType, actions } from 'astro:actions';
import type { db } from '@db/database.ts';
import crown from '@assets/img/crown.svg';
interface Props {
teams: Exclude<ActionReturnType<typeof actions.team.teams>['data'], undefined>['teams'];
@@ -37,6 +38,12 @@
return bBothKills - aBothKills;
});
const aliveTeams = entries.reduce(
(prev, curr) =>
prev + Number(curr.memberOne.id && curr.memberTwo.id && (!curr.memberOne.dead || !curr.memberTwo.dead)),
0
);
</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">
@@ -51,19 +58,24 @@
</thead>
<tbody>
{#each entries as team (team.id)}
{@const teamSignedUp = !!team.memberOne.id && !!team.memberTwo.id}
{@const teamDead = !!team.memberOne.dead && !!team.memberTwo.dead}
<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}
>
<div class="relative">
<div class="rounded-sm min-w-3 w-3 min-h-3 h-3" style="background-color: {team.color}"></div>
{#if aliveTeams === 1 && teamSignedUp && !teamDead}
<div class="absolute h-3.5 w-3.5 -top-2.25 -right-0.25">
<img class="h-full w-full" src={crown.src} alt="" />
</div>
{/if}
</div>
<h3 class="text-xs sm:text-xl break-all" class:line-through={teamDead}>
{team.name}
</h3>
</div>
{#if !team.memberOne.id || !team.memberTwo.id}
{#if !teamSignedUp}
<span>Team unvollständig</span>
{/if}
</td>
@@ -80,7 +92,14 @@
</div>
{/if}
{#if team.memberOne.id != null}
<img class="h-4 pixelated" src="https://mc-heads.net/head/{team.memberOne.username}/8" alt="head" />
<div class="relative">
<img class="h-4 pixelated" src="https://mc-heads.net/head/{team.memberOne.username}/8" alt="head" />
{#if aliveTeams === 1 && teamSignedUp && !teamDead}
<div class="absolute -top-1.25 -right-1.25">
<img class="h-3 w-3 rotate-30" src={crown.src} alt="" />
</div>
{/if}
</div>
{/if}
<span
class="text-xs sm:text-md break-all"
@@ -102,7 +121,14 @@
</div>
{/if}
{#if team.memberTwo.id != null}
<img class="h-4 pixelated" src="https://mc-heads.net/head/{team.memberTwo.username}/8" alt="head" />
<div class="relative">
<img class="h-4 pixelated" src="https://mc-heads.net/head/{team.memberTwo.username}/8" alt="head" />
{#if aliveTeams === 1 && teamSignedUp && !teamDead}
<div class="absolute -top-1.25 -right-1.25">
<img class="h-3 w-3 rotate-30" src={crown.src} alt="" />
</div>
{/if}
</div>
{/if}
<span
class="text-xs sm:text-md break-all"