From 55f5f25e5a6af3254196e65ee00292d3f0a88d84 Mon Sep 17 00:00:00 2001
From: bytedream <me@bytedream.dev>
Date: Mon, 23 Jun 2025 20:27:49 +0200
Subject: [PATCH] show death message on dead user hover

---
 src/app/website/index/Teams.svelte | 33 ++++++++++++------------------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/app/website/index/Teams.svelte b/src/app/website/index/Teams.svelte
index 6d2d78c..b9c8c24 100644
--- a/src/app/website/index/Teams.svelte
+++ b/src/app/website/index/Teams.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Skeleton from '@assets/img/steve.png';
   import type { GetDeathsRes } from '@db/schema/death.ts';
   import { type ActionReturnType, actions } from 'astro:actions';
 
@@ -13,16 +12,18 @@
   const entries = teams.map((team) => ({
     ...team,
     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, {
-      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
   }));
   entries.sort((a, b) => {
-    const aAllowed = !!a.memberOne.id && !!a.memberTwo.id && !(a.memberOne.dead && a.memberTwo.dead);
-    const bAllowed = !!b.memberOne.id && !!b.memberTwo.id && !(b.memberOne.dead && b.memberTwo.dead);
+    const aAllowed =
+      !!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) {
       return 0;
     } 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>
               <h3
                 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}
               >
                 {team.name}
@@ -62,33 +63,25 @@
             {/if}
           </td>
           <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}
-                <img
-                  class="h-4 pixelated"
-                  src={team.memberOne.dead ? Skeleton.src : `https://mc-heads.net/head/${team.memberOne.username}/8`}
-                  alt="head"
-                />
+                <img class="h-4 pixelated" src="https://mc-heads.net/head/{team.memberOne.username}/8" alt="head" />
               {/if}
               <span
                 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
               >
             </div>
           </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}
-                <img
-                  class="h-4 pixelated"
-                  src={team.memberTwo.dead ? Skeleton.src : `https://mc-heads.net/head/${team.memberTwo.username}/8`}
-                  alt="head"
-                />
+                <img class="h-4 pixelated" src="https://mc-heads.net/head/{team.memberTwo.username}/8" alt="head" />
               {/if}
               <span
                 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
               >
             </div>