sort team table

src/app/website/index/Teams.svelte

@@ -9,6 +9,36 @@
   }
 
   const { teams, deaths }: Props = $props();
+
+  const entries = teams.map((team) => ({
+    ...team,
+    memberOne:
+      team.memberOne.id != null
+        ? {
+            ...team.memberOne,
+            dead: deaths.findIndex((d) => d.deadUserId === team.memberOne.id) !== -1
+          }
+        : undefined,
+    memberTwo:
+      team.memberTwo.id != null
+        ? {
+            ...team.memberTwo,
+            dead: deaths.findIndex((d) => d.deadUserId === team.memberTwo.id) !== -1
+          }
+        : undefined,
+    kills: deaths.filter((d) => d.killerUserId === team.memberOne.id || d.killerUserId === team.memberTwo.id).length
+  }));
+  entries.sort((a, b) => {
+    const aAllowed = !!a.memberOne && !!a.memberTwo && !(a.memberOne.dead && a.memberTwo.dead);
+    const bAllowed = !!b.memberOne && !!b.memberTwo && !(b.memberOne.dead && b.memberTwo.dead);
+    if (!aAllowed && !bAllowed) {
+      return 0;
+    } else if (!aAllowed || !bAllowed) {
+      return (bAllowed as unknown as number) - (aAllowed as unknown as number);
+    }
+
+    return b.kills - a.kills;
+  });
 </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">
@@ -22,34 +52,44 @@
       </tr>
     </thead>
     <tbody>
-      {#each teams as team (team.id)}
+      {#each entries as team (team.id)}
         <tr>
           <td>
             <div class="flex items-center gap-x-2">
               <div class="rounded-sm w-3 h-3" style="background-color: {team.color}"></div>
-              <h3 class="text-xs sm:text-xl" class:text-red-200={!team.memberOne.id || !team.memberTwo.id}>
+              <h3 class="text-xs sm:text-xl" class:text-red-200={!team.memberOne}>
                 {team.name}
               </h3>
             </div>
-            {#if !team.memberOne.id || !team.memberTwo.id}
+            {#if !team.memberOne || !team.memberTwo}
               <span>Team unvollständig</span>
             {/if}
           </td>
           <td class="max-w-9 overflow-ellipsis">
-            {#if team.memberOne.id}
+            {#if team.memberOne}
-              {@const dead = deaths.findIndex((d) => d.deadUserId === team.memberOne.id)}
               <div class="flex items-center gap-x-2">
-                <img class="w-4 h-4 pixelated" src={dead === -1 ? `https://mc-heads.net/head/${team.memberOne.username}/8` : Skeleton.src} alt="head" />
+                <img
-                <span class="text-xs sm:text-md" class:line-through={dead !== -1}>{team.memberOne.username}</span>
+                  class="w-4 h-4 pixelated"
+                  src={team.memberOne.dead ? Skeleton.src : `https://mc-heads.net/head/${team.memberOne.username}/8`}
+                  alt="head"
+                />
+                <span class="text-xs sm:text-md" class:line-through={team.memberOne.dead}
+                  >{team.memberOne.username}</span
+                >
               </div>
             {/if}
           </td>
           <td>
-            {#if team.memberTwo.id}
+            {#if team.memberTwo}
-              {@const dead = deaths.findIndex((d) => d.deadUserId === team.memberTwo.id)}
               <div class="flex items-center gap-x-2">
-                <img class="w-4 h-4 pixelated" src={dead === -1 ? `https://mc-heads.net/head/${team.memberTwo.username}/8` : Skeleton.src} alt="head" />
+                <img
-                <span class="text-xs sm:text-md" class:line-through={dead !== -1}>{team.memberTwo.username}</span>
+                  class="w-4 h-4 pixelated"
+                  src={team.memberTwo.dead ? Skeleton.src : `https://mc-heads.net/head/${team.memberTwo.username}/8`}
+                  alt="head"
+                />
+                <span class="text-xs sm:text-md" class:line-through={team.memberTwo.dead}
+                  >{team.memberTwo.username}</span
+                >
               </div>
             {/if}
           </td>