From e936af208650992cb356670edd25b11db478d448 Mon Sep 17 00:00:00 2001
From: Gigi <47110839+DarthGigi@users.noreply.github.com>
Date: Mon, 25 Nov 2024 23:18:00 +0100
Subject: [PATCH] Add miscellaneous stats section with virtual list support
 (#31)

* feat: add svelte-tiny-virtual-list dependency

* feat: add miscellaneous stats section and related components

* feat: enhance AdditionStat component with rarity color support

* feat: update Items component title style to be font-semibold

* feat: add styles for virtual list wrapper and inner components
---
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  8 +++
 src/app.css                                   |  8 +++
 src/lib/components/AdditionStat.svelte        | 35 +++++++++----
 src/lib/layouts/stats/Items.svelte            |  2 +-
 src/lib/layouts/stats/Main.svelte             |  2 +
 src/lib/sections/stats/MiscSection.svelte     | 43 +++++++++++++++
 src/lib/sections/stats/misc/auctions.svelte   | 39 ++++++++++++++
 src/lib/sections/stats/misc/claimed.svelte    | 24 +++++++++
 src/lib/sections/stats/misc/damage.svelte     | 17 ++++++
 src/lib/sections/stats/misc/dragons.svelte    | 36 +++++++++++++
 src/lib/sections/stats/misc/endstone.svelte   | 17 ++++++
 src/lib/sections/stats/misc/essence.svelte    | 29 +++++++++++
 src/lib/sections/stats/misc/gifts.svelte      | 17 ++++++
 src/lib/sections/stats/misc/jerry.svelte      | 17 ++++++
 src/lib/sections/stats/misc/kills.svelte      | 39 ++++++++++++++
 .../sections/stats/misc/mythological.svelte   | 51 ++++++++++++++++++
 src/lib/sections/stats/misc/pet.svelte        | 25 +++++++++
 src/lib/sections/stats/misc/potions.svelte    | 20 +++++++
 src/lib/sections/stats/misc/races.svelte      | 52 +++++++++++++++++++
 .../sections/stats/misc/uncategorized.svelte  | 29 +++++++++++
 src/lib/sections/stats/misc/upgrades.svelte   | 19 +++++++
 22 files changed, 518 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/sections/stats/MiscSection.svelte
 create mode 100644 src/lib/sections/stats/misc/auctions.svelte
 create mode 100644 src/lib/sections/stats/misc/claimed.svelte
 create mode 100644 src/lib/sections/stats/misc/damage.svelte
 create mode 100644 src/lib/sections/stats/misc/dragons.svelte
 create mode 100644 src/lib/sections/stats/misc/endstone.svelte
 create mode 100644 src/lib/sections/stats/misc/essence.svelte
 create mode 100644 src/lib/sections/stats/misc/gifts.svelte
 create mode 100644 src/lib/sections/stats/misc/jerry.svelte
 create mode 100644 src/lib/sections/stats/misc/kills.svelte
 create mode 100644 src/lib/sections/stats/misc/mythological.svelte
 create mode 100644 src/lib/sections/stats/misc/pet.svelte
 create mode 100644 src/lib/sections/stats/misc/potions.svelte
 create mode 100644 src/lib/sections/stats/misc/races.svelte
 create mode 100644 src/lib/sections/stats/misc/uncategorized.svelte
 create mode 100644 src/lib/sections/stats/misc/upgrades.svelte

diff --git a/package.json b/package.json
index 6afe2bce..04481d9d 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "svelte": "4.2.18",
     "svelte-check": "^3.8.2",
     "svelte-interactions": "^0.2.0",
+    "svelte-tiny-virtual-list": "^2.1.2",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.4",
     "tslib": "^2.6.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 500cfa62..87f44415 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -163,6 +163,9 @@ importers:
       svelte-interactions:
         specifier: ^0.2.0
         version: 0.2.0(svelte@4.2.18)
+      svelte-tiny-virtual-list:
+        specifier: ^2.1.2
+        version: 2.1.2
       tailwind-merge:
         specifier: ^2.3.0
         version: 2.3.0
@@ -2339,6 +2342,9 @@ packages:
       typescript:
         optional: true
 
+  svelte-tiny-virtual-list@2.1.2:
+    resolution: {integrity: sha512-jeP/WMvgFUR4mYXHGPiCexjX5DuzSO+3xzHNhxfcsFyy+uYPtnqI5UGb383swpzQAyXB0OBqYfzpYihD/5gxnA==}
+
   svelte@4.2.18:
     resolution: {integrity: sha512-d0FdzYIiAePqRJEb90WlJDkjUEx42xhivxN8muUBmfZnP+tzUgz12DJ2hRJi8sIHCME7jeK1PTMgKPSfTd8JrA==}
     engines: {node: '>=16'}
@@ -4567,6 +4573,8 @@ snapshots:
       postcss-load-config: 4.0.2(postcss@8.4.38)
       typescript: 5.5.2
 
+  svelte-tiny-virtual-list@2.1.2: {}
+
   svelte@4.2.18:
     dependencies:
       '@ampproject/remapping': 2.3.0
diff --git a/src/app.css b/src/app.css
index 57a6b5b3..026358ac 100644
--- a/src/app.css
+++ b/src/app.css
@@ -229,3 +229,11 @@
     filter: url(#enchanted-glint) drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));
   }
 }
+
+.virtual-list-wrapper {
+  @apply overflow-y-auto overflow-x-hidden;
+}
+
+.virtual-list-inner {
+  @apply overflow-hidden;
+}
diff --git a/src/lib/components/AdditionStat.svelte b/src/lib/components/AdditionStat.svelte
index 82679fbb..f56bf7fd 100644
--- a/src/lib/components/AdditionStat.svelte
+++ b/src/lib/components/AdditionStat.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { RARITY_COLORS } from "$constants/items";
   import { cn, flyAndScale } from "$lib/utils";
   import { Tooltip } from "bits-ui";
 
@@ -7,24 +8,36 @@
   export let subData: string | undefined = undefined;
   export let asterisk: boolean = false;
   export let maxed: boolean = false;
+  export let dataMaxed: boolean = false;
+  export let textRarityColor: string | undefined = undefined;
+  export let dataRarityColor: string | undefined = undefined;
+  export let subDataRarityColor: string | undefined = undefined;
 
   let className: string | null | undefined = undefined;
   export { className as class };
 </script>
 
 <Tooltip.Root group="additional-stats" openDelay={0} closeDelay={0}>
-  <Tooltip.Trigger class={cn(`my-0 flex items-center gap-1 text-sm font-bold text-text/60 data-[is-tooltip=false]:cursor-default`, { "text-maxed": maxed }, className)} data-is-tooltip={asterisk}>
-    <div class="capitalize">{text}:</div>
-    <span class={cn("-mr-0.5", maxed ? "text-gold" : "text-text")}
-      >{data}
-      {#if subData}
-        <span class="text-text/80"> {subData}</span>
-      {/if}
-    </span>
+  <Tooltip.Trigger asChild={!asterisk} class={cn(`my-0 flex items-center gap-1 font-bold text-text/60 data-[is-tooltip=false]:cursor-default`, { "text-maxed": maxed }, className)} data-is-tooltip={asterisk}>
+    <div class={!asterisk ? cn("my-0 flex items-center gap-1 font-bold text-text/60 data-[is-tooltip=false]:cursor-default", { "text-maxed": maxed }, className) : "contents"}>
+      <div style={textRarityColor ? `color: var(--§${RARITY_COLORS[textRarityColor]})` : ""} class="capitalize">
+        {text}:
+      </div>
+
+      <span class={cn("-mr-0.5", maxed || dataMaxed ? "text-gold" : "text-text")}>
+        <span style={dataRarityColor ? `color: var(--§${RARITY_COLORS[dataRarityColor]})` : ""}>
+          {data}
+        </span>
 
-    {#if asterisk}
-      *
-    {/if}
+        {#if subData}
+          <span class="text-text/80" style={subDataRarityColor ? `color: var(--§${RARITY_COLORS[subDataRarityColor]})` : ""}> {subData}</span>
+        {/if}
+      </span>
+
+      {#if asterisk}
+        *
+      {/if}
+    </div>
   </Tooltip.Trigger>
   {#if asterisk}
     <Tooltip.Content class="z-50 rounded-lg bg-background-grey p-4" transition={flyAndScale} transitionConfig={{ y: 8, duration: 150 }} sideOffset={6} side="top" align="center">
diff --git a/src/lib/layouts/stats/Items.svelte b/src/lib/layouts/stats/Items.svelte
index 054701d8..0a99c950 100644
--- a/src/lib/layouts/stats/Items.svelte
+++ b/src/lib/layouts/stats/Items.svelte
@@ -10,7 +10,7 @@
 
 <div class="space-y-4">
   {#if title}
-    <h3 class="text-2xl capitalize">{title}</h3>
+    <h3 class="text-2xl font-semibold capitalize">{title}</h3>
   {/if}
   {#if subtitle}
     <h4 class="text-xl capitalize text-text">{subtitle}</h4>
diff --git a/src/lib/layouts/stats/Main.svelte b/src/lib/layouts/stats/Main.svelte
index 6eac4216..e180c010 100644
--- a/src/lib/layouts/stats/Main.svelte
+++ b/src/lib/layouts/stats/Main.svelte
@@ -11,6 +11,7 @@
   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 MiscSection from "$lib/sections/stats/MiscSection.svelte";
   import Pets from "$lib/sections/stats/Pets.svelte";
   import Rift from "$lib/sections/stats/Rift.svelte";
   import SkillsSection from "$lib/sections/stats/SkillsSection.svelte";
@@ -42,6 +43,7 @@
   <Collections />
   <CrimsonIsle />
   <Rift />
+  <MiscSection />
 </main>
 
 <svg xmlns="http://www.w3.org/2000/svg" height="0" width="0" style="position: fixed;">
diff --git a/src/lib/sections/stats/MiscSection.svelte b/src/lib/sections/stats/MiscSection.svelte
new file mode 100644
index 00000000..467c8b8c
--- /dev/null
+++ b/src/lib/sections/stats/MiscSection.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { Stats as StatsType } from "$types/stats";
+  import { getContext, setContext } from "svelte";
+  import Auctions from "./misc/auctions.svelte";
+  import Claimed from "./misc/claimed.svelte";
+  import Damage from "./misc/damage.svelte";
+  import Dragons from "./misc/dragons.svelte";
+  import Endstone from "./misc/endstone.svelte";
+  import Essence from "./misc/essence.svelte";
+  import Gifts from "./misc/gifts.svelte";
+  import Jerry from "./misc/jerry.svelte";
+  import Kills from "./misc/kills.svelte";
+  import Mythological from "./misc/mythological.svelte";
+  import Pet from "./misc/pet.svelte";
+  import Potions from "./misc/potions.svelte";
+  import Races from "./misc/races.svelte";
+  import Uncategorized from "./misc/uncategorized.svelte";
+  import Upgrades from "./misc/upgrades.svelte";
+
+  const profile = getContext<StatsType>("profile");
+
+  setContext("misc", profile.misc);
+  console.log(profile.misc);
+</script>
+
+<h3 class="text-2xl capitalize">Miscellaneous</h3>
+
+<Essence />
+<!-- TODO: Essence Shop -->
+<Kills />
+<Races />
+<Gifts />
+<Jerry />
+<Dragons />
+<Endstone />
+<Damage />
+<Pet />
+<Mythological />
+<Potions />
+<Upgrades />
+<Auctions />
+<Claimed />
+<Uncategorized />
diff --git a/src/lib/sections/stats/misc/auctions.svelte b/src/lib/sections/stats/misc/auctions.svelte
new file mode 100644
index 00000000..e4a35378
--- /dev/null
+++ b/src/lib/sections/stats/misc/auctions.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import Items from "$lib/layouts/stats/Items.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+
+  const misc = getContext<StatsType["misc"]>("misc");
+</script>
+
+<Items title="Auctions Sold">
+  <div slot="text">
+    <AdditionStat text="Fees" data={format(misc.auctions.fees)} />
+    <AdditionStat text="Coins Earned" data={format(misc.auctions.gold_earned)} />
+    <AdditionStat text="Items Sold" data={format(misc.auctions.total_sold.total)} asterisk={true}>
+      {#each Object.entries(misc.auctions.total_sold) as [rarity, amount]}
+        {#if rarity !== "total"}
+          <AdditionStat text={rarity} data={amount} textRarityColor={rarity.toLowerCase()} />
+        {/if}
+      {/each}
+    </AdditionStat>
+  </div>
+</Items>
+
+<Items title="Auctions Bought">
+  <div slot="text">
+    <AdditionStat text="Bids" data={format(misc.auctions.bids)} />
+    <AdditionStat text="Highest Bid" data={format(misc.auctions.highest_bid)} />
+    <AdditionStat text="Won" data={format(misc.auctions.won)} />
+    <AdditionStat text="Coins Spent" data={format(misc.auctions.gold_spent)} />
+    <AdditionStat text="Items Bought" data={format(misc.auctions.total_bought.total)} asterisk={true}>
+      {#each Object.entries(misc.auctions.total_bought) as [rarity, amount]}
+        {#if rarity !== "total"}
+          <AdditionStat text={rarity} data={amount} textRarityColor={rarity.toLowerCase()} />
+        {/if}
+      {/each}
+    </AdditionStat>
+  </div>
+</Items>
diff --git a/src/lib/sections/stats/misc/claimed.svelte b/src/lib/sections/stats/misc/claimed.svelte
new file mode 100644
index 00000000..2076f50d
--- /dev/null
+++ b/src/lib/sections/stats/misc/claimed.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import Items from "$lib/layouts/stats/Items.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { formatDate, formatDistanceToNowStrict } from "date-fns";
+  import { getContext } from "svelte";
+
+  const misc = getContext<StatsType["misc"]>("misc");
+</script>
+
+<Items title="Claimed Items">
+  <div slot="text">
+    {#each Object.entries(misc.claimed_items) as [item, time]}
+      <AdditionStat
+        text={item.replaceAll("_", " ")}
+        data={formatDistanceToNowStrict(time, {
+          addSuffix: true
+        })}
+        asterisk={true}>
+        {formatDate(time, "'Claimed on' dd MMMM yyyy 'at' HH:mm")}
+      </AdditionStat>
+    {/each}
+  </div>
+</Items>
diff --git a/src/lib/sections/stats/misc/damage.svelte b/src/lib/sections/stats/misc/damage.svelte
new file mode 100644
index 00000000..a5f9b292
--- /dev/null
+++ b/src/lib/sections/stats/misc/damage.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import Items from "$lib/layouts/stats/Items.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+
+  const misc = getContext<StatsType["misc"]>("misc");
+</script>
+
+<Items title="Damage">
+  <div slot="text">
+    {#each Object.entries(misc.damage) as [text, data]}
+      <AdditionStat text={text.replaceAll("_", " ")} data={format(data.toFixed(3))} />
+    {/each}
+  </div>
+</Items>
diff --git a/src/lib/sections/stats/misc/dragons.svelte b/src/lib/sections/stats/misc/dragons.svelte
new file mode 100644
index 00000000..fc38594c
--- /dev/null
+++ b/src/lib/sections/stats/misc/dragons.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import Items from "$lib/layouts/stats/Items.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+
+  const misc = getContext<StatsType["misc"]>("misc");
+</script>
+
+<Items title="Dragons">
+  <div slot="text">
+    <AdditionStat text="Most Damage" data={format(misc.dragons.most_damage.best.toFixed(0))} asterisk={true}>
+      {#each Object.entries(misc.dragons.most_damage) as [text, data]}
+        {#if text !== "best"}
+          <AdditionStat {text} data={format(data.toFixed(0))} />
+        {/if}
+      {/each}
+    </AdditionStat>
+    <AdditionStat text="Fastest Kill" data={misc.dragons.fastest_kill.best} asterisk={true}>
+      {#each Object.entries(misc.dragons.fastest_kill) as [text, data]}
+        {#if text !== "best"}
+          <AdditionStat {text} {data} />
+        {/if}
+      {/each}
+    </AdditionStat>
+    <!-- TODO: Last Hits -->
+    <AdditionStat text="Deats" data={format(misc.dragons.deaths.total)} asterisk={true}>
+      {#each Object.entries(misc.dragons.deaths) as [text, data]}
+        {#if text !== "total"}
+          <AdditionStat {text} data={format(data)} />
+        {/if}
+      {/each}
+    </AdditionStat>
+  </div>
+</Items>
diff --git a/src/lib/sections/stats/misc/endstone.svelte b/src/lib/sections/stats/misc/endstone.svelte
new file mode 100644
index 00000000..8f5e43f6
--- /dev/null
+++ b/src/lib/sections/stats/misc/endstone.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import Items from "$lib/layouts/stats/Items.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+
+  const misc = getContext<StatsType["misc"]>("misc");
+</script>
+
+<Items title="Endstone Protector">
+  <div slot="text">
+    {#each Object.entries(misc.endstone_protector) as [text, data]}
+      <AdditionStat text={text.replaceAll("_", " ")} data={format(data)} />
+    {/each}
+  </div>
+</Items>
diff --git a/src/lib/sections/stats/misc/essence.svelte b/src/lib/sections/stats/misc/essence.svelte
new file mode 100644
index 00000000..e4c6e747
--- /dev/null
+++ b/src/lib/sections/stats/misc/essence.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import Chip from "$lib/components/Chip.svelte";
+  import { cn } from "$lib/utils";
+  import type { Stats as StatsType } from "$types/stats";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+
+  const misc = getContext<StatsType["misc"]>("misc");
+</script>
+
+<div class="space-y-4">
+  <h3 class="text-xl font-semibold">Essence</h3>
+  <div class="flex flex-wrap gap-4">
+    {#each misc.essence as essence}
+      {@const hasUnlocked = essence.amount}
+      <Chip image={{ src: essence.texture }} class={cn("h-fit w-fit", { "opacity-50": !hasUnlocked })}>
+        <div class={cn("flex flex-col")}>
+          <div class="font-bold">
+            <span class="opacity-60">{essence.name}</span>
+            <div class="text-sm">
+              <span class="opacity-60">Amount:</span>
+              <span class="text-text">{format(essence.amount)}</span>
+            </div>
+          </div>
+        </div>
+      </Chip>
+    {/each}
+  </div>
+</div>
diff --git a/src/lib/sections/stats/misc/gifts.svelte b/src/lib/sections/stats/misc/gifts.svelte
new file mode 100644
index 00000000..1ba71e27
--- /dev/null
+++ b/src/lib/sections/stats/misc/gifts.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import Items from "$lib/layouts/stats/Items.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+
+  const misc = getContext<StatsType["misc"]>("misc");
+</script>
+
+<Items title="Gifts">
+  <div slot="text">
+    {#each Object.entries(misc.gifts) as [text, data]}
+      <AdditionStat text={text.replaceAll("_", " ")} data={format(data)} />
+    {/each}
+  </div>
+</Items>
diff --git a/src/lib/sections/stats/misc/jerry.svelte b/src/lib/sections/stats/misc/jerry.svelte
new file mode 100644
index 00000000..e0178024
--- /dev/null
+++ b/src/lib/sections/stats/misc/jerry.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import Items from "$lib/layouts/stats/Items.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+
+  const misc = getContext<StatsType["misc"]>("misc");
+</script>
+
+<Items title="Season of Jerry">
+  <div slot="text">
+    {#each Object.entries(misc.season_of_jerry) as [text, data]}
+      <AdditionStat text={text.replaceAll("_", " ")} data={format(data)} />
+    {/each}
+  </div>
+</Items>
diff --git a/src/lib/sections/stats/misc/kills.svelte b/src/lib/sections/stats/misc/kills.svelte
new file mode 100644
index 00000000..6554f6c2
--- /dev/null
+++ b/src/lib/sections/stats/misc/kills.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+  import VirtualList from "svelte-tiny-virtual-list";
+
+  const misc = getContext<StatsType["misc"]>("misc");
+</script>
+
+<div class="space-y-4">
+  <h3 class="text-xl font-semibold">Kills</h3>
+  <div>
+    <AdditionStat text="Total Kills" data={format(misc.kills.total_kills)} />
+    <AdditionStat text="Total Deaths" data={format(misc.kills.total_deaths)} />
+  </div>
+  <div class="flex flex-wrap gap-4">
+    <div class="flex min-w-96 flex-col gap-1 rounded-lg bg-background/30">
+      <div class="flex w-full items-center justify-center gap-1.5 border-b-2 border-icon py-2 text-center font-semibold uppercase">Kills</div>
+      <VirtualList height={320} width="100%" itemCount={misc.kills.kills.length} itemSize={misc.kills.kills.length > 0 ? 20 : 0} scrollDirection="vertical">
+        <div slot="item" let:index let:style {style} class="px-4 font-semibold">
+          <div class="inline-block capitalize text-text/60">#{index + 1}</div>
+          <div class="inline-block text-text">{misc.kills.kills[index].name}</div>
+          <div class="inline-block text-text/60">: {format(misc.kills.kills[index].amount)}</div>
+        </div>
+      </VirtualList>
+    </div>
+    <div class="flex min-w-96 flex-col gap-1 rounded-lg bg-background/30">
+      <div class="flex w-full items-center justify-center gap-1.5 border-b-2 border-icon py-2 text-center font-semibold uppercase">Deaths</div>
+      <VirtualList height={320} width="100%" itemCount={misc.kills.deaths.length} itemSize={misc.kills.deaths.length > 0 ? 20 : 0} scrollDirection="vertical">
+        <div slot="item" let:index let:style {style} class="px-4 font-semibold">
+          <div class="inline-block capitalize text-text/60">#{index + 1}</div>
+          <div class="inline-block text-text">{misc.kills.deaths[index].name}</div>
+          <div class="inline-block text-text/60">: {format(misc.kills.deaths[index].amount)}</div>
+        </div>
+      </VirtualList>
+    </div>
+  </div>
+</div>
diff --git a/src/lib/sections/stats/misc/mythological.svelte b/src/lib/sections/stats/misc/mythological.svelte
new file mode 100644
index 00000000..4ba31305
--- /dev/null
+++ b/src/lib/sections/stats/misc/mythological.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import Items from "$lib/layouts/stats/Items.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+
+  const misc = getContext<StatsType["misc"]>("misc");
+</script>
+
+<Items title="Mythological Event">
+  <div slot="text">
+    <AdditionStat text="Kills" data={format(misc.mythological_event.kills)} />
+
+    <AdditionStat text="Dug Arrows" data={format(misc.mythological_event.burrows_dug_next.total)} asterisk={true}>
+      <p class="font-bold text-text/85">Rarities used:</p>
+      {#each Object.entries(misc.mythological_event.burrows_dug_next) as [tier, count]}
+        {#if tier !== "total"}
+          <AdditionStat text={tier} data={count} textRarityColor={tier.toLowerCase()} />
+        {/if}
+      {/each}
+    </AdditionStat>
+
+    <AdditionStat text="Dug Monsters" data={format(misc.mythological_event.burrows_dug_combat.total)} asterisk={true}>
+      <p class="font-bold text-text/85">Rarities used:</p>
+      {#each Object.entries(misc.mythological_event.burrows_dug_combat) as [tier, count]}
+        {#if tier !== "total"}
+          <AdditionStat text={tier} data={count} textRarityColor={tier.toLowerCase()} />
+        {/if}
+      {/each}
+    </AdditionStat>
+
+    <AdditionStat text="Dug Treasure" data={format(misc.mythological_event.burrows_dug_treasure.total)} asterisk={true}>
+      <p class="font-bold text-text/85">Rarities used:</p>
+      {#each Object.entries(misc.mythological_event.burrows_dug_treasure) as [tier, count]}
+        {#if tier !== "total"}
+          <AdditionStat text={tier} data={count} textRarityColor={tier.toLowerCase()} />
+        {/if}
+      {/each}
+    </AdditionStat>
+
+    <AdditionStat text="Chains Completed" data={format(misc.mythological_event.burrows_chains_complete.total)} asterisk={true}>
+      <p class="font-bold text-text/85">Rarities used:</p>
+      {#each Object.entries(misc.mythological_event.burrows_chains_complete) as [tier, count]}
+        {#if tier !== "total"}
+          <AdditionStat text={tier} data={count} textRarityColor={tier.toLowerCase()} />
+        {/if}
+      {/each}
+    </AdditionStat>
+  </div>
+</Items>
diff --git a/src/lib/sections/stats/misc/pet.svelte b/src/lib/sections/stats/misc/pet.svelte
new file mode 100644
index 00000000..9bb94be7
--- /dev/null
+++ b/src/lib/sections/stats/misc/pet.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import Items from "$lib/layouts/stats/Items.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+
+  const misc = getContext<StatsType["misc"]>("misc");
+</script>
+
+<Items title="Pet Milestones">
+  <div slot="text">
+    <AdditionStat text="Sea Creatures Killed" data={format(misc.pet_milestones.sea_creatures_killed.total)} asterisk={true}>
+      <AdditionStat text="Pet" data={misc.pet_milestones.sea_creatures_killed.rarity} dataRarityColor={misc.pet_milestones.sea_creatures_killed.rarity} />
+
+      <AdditionStat text="Progress" data={misc.pet_milestones.sea_creatures_killed.progress === "100.00" ? "Maxed!" : `${misc.pet_milestones.sea_creatures_killed.progress}%`} dataMaxed={misc.pet_milestones.sea_creatures_killed.progress === "100.00"} />
+    </AdditionStat>
+
+    <AdditionStat text="Ores Mined" data={format(misc.pet_milestones.ores_mined.total)} asterisk={true}>
+      <AdditionStat text="Pet" data={misc.pet_milestones.ores_mined.rarity} dataRarityColor={misc.pet_milestones.ores_mined.rarity} />
+
+      <AdditionStat text="Progress" data={misc.pet_milestones.ores_mined.progress === "100.00" ? "Maxed!" : `${misc.pet_milestones.ores_mined.progress}%`} dataMaxed={misc.pet_milestones.ores_mined.progress === "100.00"} />
+    </AdditionStat>
+  </div>
+</Items>
diff --git a/src/lib/sections/stats/misc/potions.svelte b/src/lib/sections/stats/misc/potions.svelte
new file mode 100644
index 00000000..3ba2c022
--- /dev/null
+++ b/src/lib/sections/stats/misc/potions.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import Items from "$lib/layouts/stats/Items.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+
+  const misc = getContext<StatsType["misc"]>("misc");
+</script>
+
+<Items title="Potions">
+  <div slot="text">
+    <AdditionStat text="Disabled Potion Effects" data={format(misc.effects.disabled.length)} asterisk={true}>
+      <p class="font-bold text-text/85">Disabled Potion Effects:</p>
+      {#each misc.effects.disabled as effect}
+        <p class="font-semibold capitalize text-text">{effect.replaceAll("_", " ")}</p>
+      {/each}
+    </AdditionStat>
+  </div>
+</Items>
diff --git a/src/lib/sections/stats/misc/races.svelte b/src/lib/sections/stats/misc/races.svelte
new file mode 100644
index 00000000..befab889
--- /dev/null
+++ b/src/lib/sections/stats/misc/races.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+
+  const misc = getContext<StatsType["misc"]>("misc");
+</script>
+
+<div class="space-y-4">
+  <h3 class="text-xl font-semibold">Races</h3>
+  <div class="flex flex-wrap gap-4">
+    {#each Object.entries(misc.races) as [_, race]}
+      <div class="flex min-w-64 flex-col gap-1 rounded-lg bg-background/30">
+        <div class="flex w-full items-center justify-center gap-1.5 border-b-2 border-icon py-2 text-center font-semibold uppercase">{race.name}</div>
+        <div class="my-2.5 space-y-2.5 px-5">
+          {#if race.races.with_return}
+            <p class="font-bold text-text/80">With Return:</p>
+            <div>
+              <div class="flex h-full w-full flex-col flex-wrap gap-1">
+                {#each Object.entries(race.races.with_return) as [_, value]}
+                  <AdditionStat class="text-base" text={value.name} data={format(value.time)} />
+                {/each}
+              </div>
+            </div>
+          {/if}
+
+          {#if race.races.no_return}
+            <p class="font-bold text-text/80">No Return:</p>
+            <div>
+              <div class="flex h-full w-full flex-col flex-wrap gap-1">
+                {#each Object.entries(race.races.no_return) as [_, value]}
+                  <AdditionStat class="text-base" text={value.name} data={format(value.time)} />
+                {/each}
+              </div>
+            </div>
+          {/if}
+
+          {#if race.name === "Other"}
+            <div class="flex h-full w-full flex-col flex-wrap gap-1">
+              {#each Object.entries(race.races) as [_, value]}
+                {#if "name" in value}
+                  <AdditionStat class="text-base" text={value.name} data={format(value.time)} />
+                {/if}
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
diff --git a/src/lib/sections/stats/misc/uncategorized.svelte b/src/lib/sections/stats/misc/uncategorized.svelte
new file mode 100644
index 00000000..22ccd83e
--- /dev/null
+++ b/src/lib/sections/stats/misc/uncategorized.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import Items from "$lib/layouts/stats/Items.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+
+  const misc = getContext<StatsType["misc"]>("misc");
+</script>
+
+<Items title="Uncategorized">
+  <div slot="text">
+    {#if misc.uncategorized.soulflow}
+      <AdditionStat text="Soulflow" data={format(misc.uncategorized.soulflow, "0.00a")} />
+    {/if}
+
+    {#if misc.uncategorized.teleporter_pill_consumed}
+      <AdditionStat text="Teleporter Pill Consumed" data={misc.uncategorized.teleporter_pill_consumed ? "Yes" : "No"} />
+    {/if}
+
+    {#if misc.uncategorized.reaper_peppers_eaten}
+      <AdditionStat text="Soulflow" data={misc.uncategorized.reaper_peppers_eaten} maxed={misc.uncategorized.reaper_peppers_eaten === 5} />
+    {/if}
+
+    {#if misc.uncategorized.personal_bank !== "Unknown"}
+      <AdditionStat text="Bank Cooldown" data={misc.uncategorized.personal_bank} maxed={misc.uncategorized.personal_bank === "None"} />
+    {/if}
+  </div>
+</Items>
diff --git a/src/lib/sections/stats/misc/upgrades.svelte b/src/lib/sections/stats/misc/upgrades.svelte
new file mode 100644
index 00000000..af1373fb
--- /dev/null
+++ b/src/lib/sections/stats/misc/upgrades.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import Items from "$lib/layouts/stats/Items.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+
+  const misc = getContext<StatsType["misc"]>("misc");
+</script>
+
+<Items title="Upgrades">
+  <div slot="text">
+    <AdditionStat text="Island Size" data="{format(misc.profile_upgrades.island_size)} / 10" maxed={misc.profile_upgrades.island_size === 10} />
+    <AdditionStat text="Minion Slots" data="{format(misc.profile_upgrades.minion_slots)} / 5" maxed={misc.profile_upgrades.minion_slots === 5} />
+    <AdditionStat text="Guests Count" data="{format(misc.profile_upgrades.guests_count)} / 5" maxed={misc.profile_upgrades.guests_count === 5} />
+    <AdditionStat text="Coop Slots" data="{format(misc.profile_upgrades.coop_slots)} / 3" maxed={misc.profile_upgrades.coop_slots === 3} />
+    <AdditionStat text="Coins Allowance" data="{format(misc.profile_upgrades.coins_allowance)} / 5" maxed={misc.profile_upgrades.coins_allowance === 5} />
+  </div>
+</Items>