feat: add crimson isle

src/lib/layouts/stats/Main.svelte

@@ -7,6 +7,7 @@
   import Armor from "$lib/sections/stats/Armor.svelte";
   import Bestiary from "$lib/sections/stats/Bestiary.svelte";
   import Collections from "$lib/sections/stats/Collections.svelte";
+  import CrimsonIsle from "$lib/sections/stats/CrimsonIsle.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";
@@ -38,6 +39,7 @@
   <Minions />
   <Bestiary />
   <Collections />
+  <CrimsonIsle />
 </main>
 
 <svg xmlns="http://www.w3.org/2000/svg" height="0" width="0" style="position: fixed;">

src/lib/sections/stats/CrimsonIsle.svelte

@@ -0,0 +1,80 @@
+<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 { cn } from "$lib/utils";
+  import type { Stats as StatsType } from "$types/stats";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+
+  const profile = getContext<StatsType>("profile");
+
+  const isle = profile.crimson_isle;
+</script>
+
+<Items title="Collections" class="flex-col">
+  <div slot="text">
+    {#if isle.factions.selectedFaction === "none"}
+      {profile.username} hasn't visited the Crimson Isle yet.
+    {:else}
+      <AdditionStat text="Selected Faction" class="capitalize" data={isle.factions.selectedFaction} />
+      <AdditionStat text="Mage Reputation" data={isle.factions.magesReputation} />
+      <AdditionStat text="Barbarian Reputation" data={isle.factions.barbariansReputation} />
+    {/if}
+  </div>
+
+  {#if isle.kuudra.totalKills}
+    <div class="flex flex-col gap-4">
+      <h3 class="text-xl font-semibold">Kuudra Completions</h3>
+      <AdditionStat text="Total Completions" data={isle.kuudra.totalKills} />
+      <div class="flex flex-wrap gap-4">
+        {#each isle.kuudra.tiers as tier}
+          {@const hasUnlocked = tier.kills}
+          <Chip image={{ src: tier.texture }} class={cn("h-fit w-fit", { "opacity-50": !hasUnlocked })}>
+            <div class={cn("flex flex-col")}>
+              <div class="font-bold">
+                <span class="opacity-60">{tier.name}</span>
+                <div class="text-sm">
+                  <span class="opacity-60">Kills:</span>
+                  <span class="text-text">{format(tier.kills)}</span>
+                </div>
+              </div>
+            </div>
+          </Chip>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  {#if isle.dojo.totalPoints}
+    <div class="flex flex-col gap-4">
+      <h3 class="text-xl font-semibold">Dojo Completions</h3>
+      <AdditionStat text="Total Points" data={format(isle.dojo.totalPoints)} maxed={isle.dojo.totalPoints >= 7000} />
+      <div class="flex flex-wrap gap-4">
+        {#each isle.dojo.challenges as challenge}
+          {@const hasMaxed = challenge.points >= 1000}
+          {@const hasUnlocked = challenge.points}
+          <Chip image={{ src: challenge.texture }} class={cn("h-fit w-fit", { "opacity-50": !hasUnlocked })}>
+            <div class={cn("flex flex-col")}>
+              <div class="font-bold">
+                <span class={cn(hasMaxed ? "text-maxed" : "opacity-60")}>{challenge.name}</span>
+                <div class="text-sm">
+                  <span class="opacity-60">Points:</span>
+                  <span class="text-text">{format(challenge.points)}</span>
+                </div>
+                <div class="text-sm">
+                  <span class="opacity-60">Rank:</span>
+                  <span class="text-text">{challenge.rank}</span>
+                </div>
+                <div class="text-sm">
+                  <span class="opacity-60">Time:</span>
+                  <span class="text-text">{challenge.formattedTime} Seconds</span>
+                </div>
+              </div>
+            </div>
+          </Chip>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</Items>