feat(noita): death counter + ranking display

polylan_submitter/src/components/RankBadge.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps<{
+  rank: number | null;
+}>();
+</script>
+
+<template>
+  <div v-if="rank !== null" class="flex justify-center">
+    <span v-if="rank === 1" class="badge badge-warning badge-lg">
+      🏆 #{{ rank }}
+    </span>
+    <span v-else-if="rank === 2" class="badge badge-lg">
+      🥈 #{{ rank }}
+    </span>
+    <span v-else-if="rank === 3" class="badge badge-lg">
+      🥉 #{{ rank }}
+    </span>
+    <span v-else class="badge badge-lg">
+      #{{ rank }}
+    </span>
+  </div>
+  <div v-else class="text-2xl text-base-content/50">
+    No rank yet
+  </div>
+</template>

polylan_submitter/src/components/Results.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import RankBadge from "./RankBadge.vue";
 
 interface User {
   id: number;
@@ -264,16 +265,7 @@ onMounted(() => {
                 <tbody>
                   <tr v-for="(user, index) in getOverallRanking()" :key="user.username">
                     <td class="font-bold">
-                      <span v-if="index === 0" class="badge badge-warning badge-lg">
-                        🏆 #1
-                      </span>
-                      <span v-else-if="index === 1" class="badge badge-lg">
-                        🥈 #2
-                      </span>
-                      <span v-else-if="index === 2" class="badge badge-lg">
-                        🥉 #3
-                      </span>
-                      <span v-else>#{{ index + 1 }}</span>
+                      <RankBadge :rank="index + 1" />
                     </td>
                     <td class="font-medium">{{ user.username }}</td>
                     <td class="text-right">{{ user.puzzlesSolved }}</td>