WIP: minions

src/lib/components/AdditionStat.svelte

@@ -3,7 +3,7 @@
   import { Tooltip } from "bits-ui";
 
   export let text: string;
-  export let data: string;
+  export let data: string | number;
   export let subData: string | undefined = undefined;
   export let asterisk: boolean = false;
 

src/lib/layouts/stats/Main.svelte

@@ -7,6 +7,7 @@
   import Armor from "$lib/sections/stats/Armor.svelte";
   import Dungeons from "$lib/sections/stats/Dungeons.svelte";
   import Inventory from "$lib/sections/stats/Inventory.svelte";
+  import Minions from "$lib/sections/stats/Minions.svelte";
   import Pets from "$lib/sections/stats/Pets.svelte";
   import SkillsSection from "$lib/sections/stats/SkillsSection.svelte";
   import Slayer from "$lib/sections/stats/Slayer.svelte";
@@ -32,6 +33,7 @@
   <SkillsSection />
   <Dungeons />
   <Slayer />
+  <Minions />
 </main>
 
 <svg xmlns="http://www.w3.org/2000/svg" height="0" width="0" style="position: fixed;">

src/lib/sections/stats/Minions.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import Chip from "$lib/components/Chip.svelte";
+  import Items from "$lib/layouts/stats/Items.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { getContext } from "svelte";
+
+  const profile = getContext<StatsType>("profile");
+
+  const minions = profile.minions;
+
+  console.log(minions);
+</script>
+
+<Items title="Minions">
+  <div slot="text">
+    <AdditionStat text="Unique Minions" data="{minions.maxedTiers} / {minions.totalTiers}" subData="({((100 * minions.maxedTiers) / minions.totalTiers).toFixed(0)}%)" />
+    <AdditionStat text="Minion Slots" data={minions.minionsSlots.current} subData="({minions.minionsSlots.next} to next slot)" />
+    <AdditionStat text="Bonus Minion Slots" data="{minions.minionsSlots.bonusSlots} / 5" />
+    <AdditionStat text="Maxed Minions" data="{minions.maxedMinions} / {minions.totalMinions}" />
+  </div>
+  {#each Object.entries(minions.minions) as [category, data]}
+    <span>{category}</span>
+    {#each data.minions as minion}
+      <Chip image={{ src: minion.texture }}>
+        <div class="flex flex-col">
+          {minion.name}
+
+          <div class="relative text-2xl font-black">
+            <span class="absolute animate-bounce bg-gradient-to-tr from-red-500 to-yellow-500 bg-clip-text text-transparent">
+              TRADE AT <a href="https://minionah.com">minionah.com</a>
+            </span>
+            <span class="absolute animate-ping bg-gradient-to-tr from-red-500 to-yellow-500 bg-clip-text text-transparent">
+              TRADE AT <a href="https://minionah.com">minionah.com</a>
+            </span>
+          </div>
+        </div>
+      </Chip>
+    {/each}
+  {/each}
+</Items>