show death message on dead user hover

This commit is contained in:
2025-06-23 20:27:49 +02:00
parent 03ee87d7cf
commit 55f5f25e5a

View File

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import Skeleton from '@assets/img/steve.png';
import type { GetDeathsRes } from '@db/schema/death.ts'; import type { GetDeathsRes } from '@db/schema/death.ts';
import { type ActionReturnType, actions } from 'astro:actions'; import { type ActionReturnType, actions } from 'astro:actions';
@ -13,16 +12,18 @@
const entries = teams.map((team) => ({ const entries = teams.map((team) => ({
...team, ...team,
memberOne: Object.assign(team.memberOne, { memberOne: Object.assign(team.memberOne, {
dead: team.memberOne.id != null ? deaths.findIndex((d) => d.deadUserId === team.memberOne.id) !== -1 : null deathMessage: deaths.find((d) => d.deadUserId === team.memberOne.id)?.message ?? null
}), }),
memberTwo: Object.assign(team.memberTwo, { memberTwo: Object.assign(team.memberTwo, {
dead: team.memberTwo.id != null ? deaths.findIndex((d) => d.deadUserId === team.memberTwo.id) !== -1 : null deathMessage: deaths.find((d) => d.deadUserId === team.memberTwo.id)?.message ?? null
}), }),
kills: deaths.filter((d) => d.killerUserId === team.memberOne.id || d.killerUserId === team.memberTwo.id).length kills: deaths.filter((d) => d.killerUserId === team.memberOne.id || d.killerUserId === team.memberTwo.id).length
})); }));
entries.sort((a, b) => { entries.sort((a, b) => {
const aAllowed = !!a.memberOne.id && !!a.memberTwo.id && !(a.memberOne.dead && a.memberTwo.dead); const aAllowed =
const bAllowed = !!b.memberOne.id && !!b.memberTwo.id && !(b.memberOne.dead && b.memberTwo.dead); !!a.memberOne.id && !!a.memberTwo.id && !(a.memberOne.deathMessage !== null && a.memberTwo.deathMessage !== null);
const bAllowed =
!!b.memberOne.id && !!b.memberTwo.id && !(b.memberOne.deathMessage !== null && b.memberTwo.deathMessage !== null);
if (!aAllowed && !bAllowed) { if (!aAllowed && !bAllowed) {
return 0; return 0;
} else if (!aAllowed || !bAllowed) { } else if (!aAllowed || !bAllowed) {
@ -51,7 +52,7 @@
<div class="rounded-sm min-w-3 w-3 min-h-3 h-3" style="background-color: {team.color}"></div> <div class="rounded-sm min-w-3 w-3 min-h-3 h-3" style="background-color: {team.color}"></div>
<h3 <h3
class="text-xs sm:text-xl break-all" class="text-xs sm:text-xl break-all"
class:line-through={team.memberOne.dead && team.memberTwo.dead} class:line-through={team.memberOne.deathMessage !== null && team.memberTwo.deathMessage !== null}
class:text-red-200={!team.memberOne} class:text-red-200={!team.memberOne}
> >
{team.name} {team.name}
@ -62,33 +63,25 @@
{/if} {/if}
</td> </td>
<td class="max-w-9 overflow-ellipsis"> <td class="max-w-9 overflow-ellipsis">
<div class="flex items-center gap-x-2"> <div class="flex items-center gap-x-2 w-max tooltip" data-tip={team.memberOne.deathMessage}>
{#if team.memberOne.id != null} {#if team.memberOne.id != null}
<img <img class="h-4 pixelated" src="https://mc-heads.net/head/{team.memberOne.username}/8" alt="head" />
class="h-4 pixelated"
src={team.memberOne.dead ? Skeleton.src : `https://mc-heads.net/head/${team.memberOne.username}/8`}
alt="head"
/>
{/if} {/if}
<span <span
class="text-xs sm:text-md break-all" class="text-xs sm:text-md break-all"
class:line-through={team.memberOne.dead} class:line-through={team.memberOne.deathMessage !== null}
class:text-gray-500={team.memberOne.id == null}>{team.memberOne.username}</span class:text-gray-500={team.memberOne.id == null}>{team.memberOne.username}</span
> >
</div> </div>
</td> </td>
<td> <td>
<div class="flex items-center gap-x-2"> <div class="flex items-center gap-x-2 w-max tooltip" data-tip={team.memberTwo.deathMessage}>
{#if team.memberTwo.id != null} {#if team.memberTwo.id != null}
<img <img class="h-4 pixelated" src="https://mc-heads.net/head/{team.memberTwo.username}/8" alt="head" />
class="h-4 pixelated"
src={team.memberTwo.dead ? Skeleton.src : `https://mc-heads.net/head/${team.memberTwo.username}/8`}
alt="head"
/>
{/if} {/if}
<span <span
class="text-xs sm:text-md break-all" class="text-xs sm:text-md break-all"
class:line-through={team.memberTwo.dead} class:line-through={team.memberTwo.deathMessage !== null}
class:text-gray-500={team.memberTwo.id == null}>{team.memberTwo.username}</span class:text-gray-500={team.memberTwo.id == null}>{team.memberTwo.username}</span
> >
</div> </div>