From 2f6b3521cd6f897a5228cebe0a112f124ea11903 Mon Sep 17 00:00:00 2001
From: bytedream <me@bytedream.dev>
Date: Wed, 2 Jul 2025 17:55:06 +0200
Subject: [PATCH] add crown to winner team

---
 src/app/website/index/Teams.svelte | 44 ++++++++++++++++++++++++------
 src/assets/img/crown.svg           |  1 +
 2 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/img/crown.svg

diff --git a/src/app/website/index/Teams.svelte b/src/app/website/index/Teams.svelte
index d44d76a..1e809ce 100644
--- a/src/app/website/index/Teams.svelte
+++ b/src/app/website/index/Teams.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { type ActionReturnType, actions } from 'astro:actions';
   import type { db } from '@db/database.ts';
+  import crown from '@assets/img/crown.svg';
 
   interface Props {
     teams: Exclude<ActionReturnType<typeof actions.team.teams>['data'], undefined>['teams'];
@@ -37,6 +38,12 @@
 
     return bBothKills - aBothKills;
   });
+
+  const aliveTeams = entries.reduce(
+    (prev, curr) =>
+      prev + Number(curr.memberOne.id && curr.memberTwo.id && (!curr.memberOne.dead || !curr.memberTwo.dead)),
+    0
+  );
 </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">
@@ -51,19 +58,24 @@
     </thead>
     <tbody>
       {#each entries as team (team.id)}
+        {@const teamSignedUp = !!team.memberOne.id && !!team.memberTwo.id}
+        {@const teamDead = !!team.memberOne.dead && !!team.memberTwo.dead}
         <tr>
           <td>
             <div class="flex items-center gap-x-2">
-              <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:text-red-200={!team.memberOne}
-              >
+              <div class="relative">
+                <div class="rounded-sm min-w-3 w-3 min-h-3 h-3" style="background-color: {team.color}"></div>
+                {#if aliveTeams === 1 && teamSignedUp && !teamDead}
+                  <div class="absolute h-3.5 w-3.5 -top-2.25 -right-0.25">
+                    <img class="h-full w-full" src={crown.src} alt="" />
+                  </div>
+                {/if}
+              </div>
+              <h3 class="text-xs sm:text-xl break-all" class:line-through={teamDead}>
                 {team.name}
               </h3>
             </div>
-            {#if !team.memberOne.id || !team.memberTwo.id}
+            {#if !teamSignedUp}
               <span>Team unvollständig</span>
             {/if}
           </td>
@@ -80,7 +92,14 @@
                 </div>
               {/if}
               {#if team.memberOne.id != null}
-                <img class="h-4 pixelated" src="https://mc-heads.net/head/{team.memberOne.username}/8" alt="head" />
+                <div class="relative">
+                  <img class="h-4 pixelated" src="https://mc-heads.net/head/{team.memberOne.username}/8" alt="head" />
+                  {#if aliveTeams === 1 && teamSignedUp && !teamDead}
+                    <div class="absolute -top-1.25 -right-1.25">
+                      <img class="h-3 w-3 rotate-30" src={crown.src} alt="" />
+                    </div>
+                  {/if}
+                </div>
               {/if}
               <span
                 class="text-xs sm:text-md break-all"
@@ -102,7 +121,14 @@
                 </div>
               {/if}
               {#if team.memberTwo.id != null}
-                <img class="h-4 pixelated" src="https://mc-heads.net/head/{team.memberTwo.username}/8" alt="head" />
+                <div class="relative">
+                  <img class="h-4 pixelated" src="https://mc-heads.net/head/{team.memberTwo.username}/8" alt="head" />
+                  {#if aliveTeams === 1 && teamSignedUp && !teamDead}
+                    <div class="absolute -top-1.25 -right-1.25">
+                      <img class="h-3 w-3 rotate-30" src={crown.src} alt="" />
+                    </div>
+                  {/if}
+                </div>
               {/if}
               <span
                 class="text-xs sm:text-md break-all"
diff --git a/src/assets/img/crown.svg b/src/assets/img/crown.svg
new file mode 100644
index 0000000..090eae6
--- /dev/null
+++ b/src/assets/img/crown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><g fill="#f79329"><path d="m91.56 50.38l14.35 44.94l-36.36-4.71z"/><path d="M105.91 96.5c-.05 0-.1 0-.15-.01l-36.37-4.71c-.39-.05-.72-.29-.9-.64s-.17-.76.01-1.1l22.02-40.23c.23-.41.69-.65 1.15-.61c.47.04.87.36 1.01.81l14.24 44.62c.14.19.22.43.22.68c0 .65-.53 1.18-1.18 1.18c0 .01-.03.01-.05.01M71.4 89.66l32.82 4.25l-12.94-40.55zM40.19 34.91a5.46 5.46 0 0 1-5.46 5.46c-3.01 0-5.46-2.45-5.46-5.46c0-3.02 2.44-5.46 5.46-5.46s5.46 2.44 5.46 5.46"/><path d="M34.73 41.54a6.65 6.65 0 0 1-6.64-6.64a6.65 6.65 0 0 1 6.64-6.64a6.65 6.65 0 0 1 6.64 6.64a6.65 6.65 0 0 1-6.64 6.64m0-10.91c-2.36 0-4.28 1.92-4.28 4.28s1.92 4.28 4.28 4.28s4.29-1.92 4.29-4.28s-1.93-4.28-4.29-4.28m58.85-1.18c3.01.18 5.31 2.77 5.13 5.78c-.17 3.01-2.77 5.3-5.77 5.13a5.45 5.45 0 0 1-5.13-5.77c.18-3.02 2.76-5.32 5.77-5.14"/><path d="m93.26 41.54l-.39-.01c-1.77-.1-3.4-.89-4.57-2.21a6.62 6.62 0 0 1-1.67-4.8a6.647 6.647 0 0 1 6.63-6.25l.39.01c3.66.22 6.46 3.38 6.24 7.03a6.64 6.64 0 0 1-6.63 6.23m.23-10.92c-2.5 0-4.37 1.77-4.5 4.03c-.07 1.14.31 2.24 1.07 3.1s1.8 1.36 2.95 1.43l.25.01c2.26 0 4.14-1.77 4.27-4.03c.14-2.36-1.67-4.39-4.03-4.54zM36.43 50.38L22.09 95.32l36.36-4.71z"/><path d="M22.09 96.5c-.34 0-.68-.15-.91-.42c-.26-.31-.34-.73-.22-1.11L35.3 50.03c.14-.45.54-.77 1.01-.81c.51-.05.92.19 1.15.61l22.02 40.23c.18.34.19.75.01 1.1c-.17.35-.51.58-.9.64l-36.36 4.71c-.04-.01-.09-.01-.14-.01m14.63-43.14L23.77 93.92l32.82-4.25z"/></g><use href="#notoV1Crown1"/><use href="#notoV1Crown1"/><defs><path id="notoV1Crown0" d="M119.5 53.43a1.18 1.18 0 0 0-1.29.22L87.25 82.71L65.16 49.72c-.22-.33-.58-.52-.98-.52c-.39 0-.76.19-.98.51l-22.19 33l-30.95-29.07a1.18 1.18 0 0 0-1.29-.22c-.43.19-.71.63-.69 1.1l1.27 47.52c0 10.33 24.06 18.43 54.78 18.43s54.78-8.1 54.78-18.4l1.27-47.55c.02-.46-.25-.9-.68-1.09"/><path id="notoV1Crown1" fill="#fcc21b" d="M72.17 28.76c0 4.51-3.66 8.17-8.17 8.17s-8.18-3.66-8.18-8.17c0-4.52 3.66-8.17 8.18-8.17s8.17 3.65 8.17 8.17m-58.72 6.15c0 3.58-2.9 6.48-6.49 6.48c-3.58 0-6.48-2.9-6.48-6.48c0-3.59 2.9-6.49 6.48-6.49c3.59 0 6.49 2.9 6.49 6.49m101.09 0c0 3.58 2.9 6.48 6.49 6.48c3.58 0 6.49-2.9 6.49-6.48a6.49 6.49 0 0 0-6.49-6.49a6.49 6.49 0 0 0-6.49 6.49"/></defs><use fill="#fcc21b" href="#notoV1Crown0"/><clipPath id="notoV1Crown2"><use href="#notoV1Crown0"/></clipPath><path fill="#d7598b" d="m119.91 78.06l.01.01l-.59 18.85h-.01c-4.2-.13-7.46-4.45-7.3-9.66c.16-5.22 3.69-9.33 7.89-9.2m-111.54 0l-.01.01l.58 18.85h.02c4.19-.13 7.46-4.45 7.29-9.66c-.16-5.22-3.69-9.33-7.88-9.2" clip-path="url(#notoV1Crown2)"/><path fill="#d7598b" d="M72.8 96.55c0 5.58-3.88 10.11-8.67 10.11c-4.78 0-8.66-4.53-8.66-10.11c0-5.59 3.88-10.11 8.66-10.11c4.79-.01 8.67 4.52 8.67 10.11"/><g fill="#ed6c30"><path d="M89.9 102.14c-.13 2.7-2.12 4.79-4.44 4.68c-2.31-.11-4.08-2.4-3.94-5.09c.14-2.71 2.13-4.8 4.44-4.68c2.31.1 4.07 2.39 3.94 5.09"/><ellipse cx="103.04" cy="98.95" rx="4.89" ry="4.2" transform="rotate(-87.013 103.044 98.958)"/></g><g fill="#ed6c30"><path d="M38.37 102.14c.13 2.7 2.12 4.79 4.44 4.68c2.31-.11 4.08-2.4 3.94-5.09c-.13-2.71-2.12-4.8-4.43-4.68c-2.32.1-4.09 2.39-3.95 5.09"/><ellipse cx="25.23" cy="98.95" rx="4.19" ry="4.89" transform="rotate(-2.987 25.234 98.957)"/></g></svg>
\ No newline at end of file