show death message on dead user hover
This commit is contained in:
@ -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>
|
||||||
|
Reference in New Issue
Block a user