show kill details on kill number hover

src/app/website/index/Teams.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import type { GetDeathsRes } from '@db/schema/death.ts';
   import { type ActionReturnType, actions } from 'astro:actions';
+  import type { db } from '@db/database.ts';
 
   interface Props {
     teams: Exclude<ActionReturnType<typeof actions.team.teams>['data'], undefined>['teams'];
-    deaths: GetDeathsRes;
+    deaths: Awaited<ReturnType<typeof db.getDeaths>>;
   }
 
   const { teams, deaths }: Props = $props();
@@ -12,27 +12,27 @@
   const entries = teams.map((team) => ({
     ...team,
     memberOne: Object.assign(team.memberOne, {
-      deathMessage: deaths.find((d) => d.deadUserId === team.memberOne.id)?.message ?? null
+      dead: deaths.find((d) => d.killed.id === team.memberOne.id) ?? null
     }),
     memberTwo: Object.assign(team.memberTwo, {
-      deathMessage: deaths.find((d) => d.deadUserId === team.memberTwo.id)?.message ?? null
+      dead: deaths.find((d) => d.killed.id === team.memberTwo.id) ?? null
     }),
-    kills: deaths.filter((d) => d.killerUserId === team.memberOne.id || d.killerUserId === team.memberTwo.id).length
+    kills: deaths.filter((d) => d.killer?.id === team.memberOne.id || d.killer?.id === team.memberTwo.id)
   }));
   entries.sort((a, b) => {
     const aBothSignedUp = a.memberOne.id != null && a.memberTwo.id != null;
-    const aBothDeathMessage = a.memberOne.deathMessage != null && a.memberTwo.deathMessage != null;
+    const aBothDead = a.memberOne.dead && a.memberTwo.dead;
 
     const bBothSignedUp = b.memberOne.id != null && b.memberTwo.id != null;
-    const bBothDeathMessage = b.memberOne.deathMessage != null && b.memberTwo.deathMessage != null;
+    const bBothDead = b.memberOne.dead && b.memberTwo.dead;
 
     if (!aBothSignedUp || !bBothSignedUp) {
       return Number(bBothSignedUp) - Number(aBothSignedUp);
-    } else if (aBothDeathMessage && !bBothDeathMessage || !aBothDeathMessage  && bBothDeathMessage) {
-      return Number(aBothDeathMessage) - Number(bBothDeathMessage);
+    } else if ((aBothDead && !bBothDead) || (!aBothDead && bBothDead)) {
+      return Number(!!aBothDead) - Number(!!bBothDead);
     }
 
-    return b.kills - a.kills;
+    return b.kills.length - a.kills.length;
   });
 </script>
 
@@ -54,7 +54,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.deathMessage !== null && team.memberTwo.deathMessage !== null}
+                class:line-through={team.memberOne.dead && team.memberTwo.dead}
                 class:text-red-200={!team.memberOne}
               >
                 {team.name}
@@ -65,34 +65,37 @@
             {/if}
           </td>
           <td class="max-w-9 overflow-ellipsis">
-            <div class="flex items-center gap-x-2 w-max tooltip" data-tip={team.memberOne.deathMessage}>
+            <div class="flex items-center gap-x-2 w-max tooltip" data-tip={team.memberOne.dead?.message}>
               {#if team.memberOne.id != null}
                 <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.deathMessage !== null}
+                class:line-through={team.memberOne.dead}
                 class:text-gray-500={team.memberOne.id == null}>{team.memberOne.username}</span
               >
             </div>
           </td>
           <td>
-            <div class="flex items-center gap-x-2 w-max tooltip" data-tip={team.memberTwo.deathMessage}>
+            <div class="flex items-center gap-x-2 w-max tooltip" data-tip={team.memberTwo.dead?.message}>
               {#if team.memberTwo.id != null}
                 <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.deathMessage !== null}
+                class:line-through={team.memberTwo.dead}
                 class:text-gray-500={team.memberTwo.id == null}>{team.memberTwo.username}</span
               >
             </div>
           </td>
           <td>
-            <span class="text-xs sm:text-md">
-              {deaths.filter(
-                (death) => death.killerUserId === team.memberOne.id || death.killerUserId === team.memberTwo.id
-              ).length}
+            <span class="text-xs sm:text-md tooltip tooltip-right">
+              <span class="tooltip-content text-left space-y-1">
+                {#each team.kills as kill, i (i)}
+                  <p>{kill.killer!.username} 🔪 {kill.killed.username}</p>
+                {/each}
+              </span>
+              {team.kills.length}
             </span>
           </td>
         </tr>

src/db/schema/death.ts

@@ -1,4 +1,4 @@
-import { int, mysqlTable, varchar } from 'drizzle-orm/mysql-core';
+import { alias, int, mysqlTable, varchar } from 'drizzle-orm/mysql-core';
 import type { MySql2Database } from 'drizzle-orm/mysql2';
 import { user } from './user.ts';
 import { eq } from 'drizzle-orm';
@@ -24,7 +24,6 @@ export type GetDeathByUserIdReq = {
 };
 
 export type GetDeathsReq = {};
-export type GetDeathsRes = (typeof death.$inferSelect)[];
 
 export async function addDeath(db: Database, values: AddDeathReq) {
   await db.insert(death).values(values);
@@ -36,7 +35,23 @@ export async function getDeathByUserId(db: Database, values: GetDeathByUserIdReq
   });
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export async function getDeaths(db: Database, values: GetDeathsReq): Promise<GetDeathsReq> {
-  return db.query.death.findMany();
+export async function getDeaths(db: Database, _values: GetDeathsReq) {
+  const killed = alias(user, 'killed');
+  const killer = alias(user, 'killer');
+
+  return db
+    .select({
+      message: death.message,
+      killed: {
+        id: killed.id,
+        username: killed.username
+      },
+      killer: {
+        id: killer.id,
+        username: killer.username
+      }
+    })
+    .from(death)
+    .innerJoin(killed, eq(death.deadUserId, killed.id))
+    .leftJoin(killer, eq(death.killerUserId, killer.id));
 }