From 67428517276d0e9a42b390d87169561605381b35 Mon Sep 17 00:00:00 2001
From: Gigi <47110839+DarthGigi@users.noreply.github.com>
Date: Sat, 20 Jul 2024 12:57:51 +0200
Subject: [PATCH] feat: Add dungeons

---
 src/lib/sections/stats/Dungeons.svelte | 142 +++++++++++++++++++++++--
 1 file changed, 132 insertions(+), 10 deletions(-)

diff --git a/src/lib/sections/stats/Dungeons.svelte b/src/lib/sections/stats/Dungeons.svelte
index abf3cf4c4..418805527 100644
--- a/src/lib/sections/stats/Dungeons.svelte
+++ b/src/lib/sections/stats/Dungeons.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
   import AdditionStat from "$lib/components/AdditionStat.svelte";
   import Skillbar from "$lib/components/Skillbar.svelte";
+  import { formatNumber } from "$lib/tools";
   import type { Stats as StatsType } from "$types/stats";
+  import { Avatar, Collapsible } from "bits-ui";
+  import { formatDate, formatDistanceToNowStrict } from "date-fns";
+  import ChevronDown from "lucide-svelte/icons/chevron-down";
+  import Image from "lucide-svelte/icons/image";
   import { format } from "numerable";
   import { getContext } from "svelte";
 
   const profile = getContext<StatsType>("profile");
   const dungeons = profile.dungeons;
-
-  console.log(dungeons);
 </script>
 
 <div class="space-y-4">
@@ -38,18 +41,137 @@
           </div>
         </div>
       </AdditionStat>
-      <AdditionStat text="Highest Floor Beaten (Normal)" data="TODO" />
-      <AdditionStat text="Secrets Found" data={format(dungeons.secrets.found)} />
+      <AdditionStat text="Highest Floor Beaten (Normal)" data={format(dungeons.stats.highestFloorBeatenNormal)} />
+      <AdditionStat text="Highest Floor Beaten (Master)" data={format(dungeons.stats.highestFloorBeatenMaster)} />
+      <AdditionStat text="Secrets Found" data={format(dungeons.stats.secrets.found)} subData="({format(dungeons.stats.secrets.secretsPerRun.toFixed(2))} S/R)" />
     </div>
     <div>
-      <h4 class="text-xl capitalize">Catacombs</h4>
+      <h4 class="mb-5 text-xl font-semibold capitalize">Catacombs</h4>
       <div class="flex flex-wrap gap-5">
-        {#each Object.entries(dungeons.catacombs) as [floor, floorData]}
-          {floor}
-          {#each Object.entries(floorData) as [key, value]}
-            TODO
+        {#if dungeons.catacombs}
+          {#each dungeons.catacombs as catacomb}
+            <div class="flex min-w-80 basis-[calc((100%/3)-1.25rem)] 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">
+                <Avatar.Root>
+                  <Avatar.Image src={catacomb.texture} class="size-8 object-contain" />
+                  <Avatar.Fallback>
+                    <Image class="size-8" />
+                  </Avatar.Fallback>
+                </Avatar.Root>
+                {catacomb.name}
+              </div>
+
+              <Collapsible.Root class="p-5">
+                <Collapsible.Trigger class="group flex items-center gap-0.5">
+                  <ChevronDown class="size-4 transition-all duration-300 group-data-[state=open]:-rotate-180" />
+                  <h4 class="text-xl font-semibold capitalize text-text">Floor Stats</h4>
+                </Collapsible.Trigger>
+                <Collapsible.Content>
+                  {#each Object.entries(catacomb.stats) as [key, value]}
+                    {#if typeof value === "object"}
+                      <AdditionStat class="capitalize" text={key.toLowerCase().replaceAll("_", " ")} data={formatNumber(value.damage)} subData="({value.type})" />
+                    {:else}
+                      <AdditionStat class="capitalize" text={key.toLowerCase().replaceAll("_", " ")} data={formatNumber(value)} />
+                    {/if}
+                  {/each}
+                </Collapsible.Content>
+              </Collapsible.Root>
+
+              {#if catacomb.best_run}
+                <Collapsible.Root class="px-5 pb-[2.5rem]">
+                  <Collapsible.Trigger class="group flex items-center gap-0.5">
+                    <ChevronDown class="size-4 transition-all duration-300 group-data-[state=open]:-rotate-180" />
+                    <h4 class="text-xl font-semibold capitalize text-text">Best run</h4>
+                  </Collapsible.Trigger>
+                  <Collapsible.Content>
+                    {#each Object.entries(catacomb.best_run) as [key, value]}
+                      {#if typeof value === "number"}
+                        {#if key === "timestamp"}
+                          <AdditionStat class="capitalize" text={key.toLowerCase().replaceAll("_", " ")} data={formatDistanceToNowStrict(value, { addSuffix: true })} asterisk={true}>
+                            {formatDate(value, "dd MMMM yyyy 'at' HH:mm")}
+                          </AdditionStat>
+                        {:else}
+                          <AdditionStat class="capitalize" text={key.toLowerCase().replaceAll("_", " ")} data={formatNumber(value)} />
+                        {/if}
+                      {:else}
+                        <AdditionStat class="capitalize" text={key.toLowerCase().replaceAll("_", " ")} data={value} />
+                      {/if}
+                    {/each}
+                  </Collapsible.Content>
+                </Collapsible.Root>
+              {:else}
+                <div class="p-5 text-center">This player has not played this floor.</div>
+              {/if}
+            </div>
+          {/each}
+        {:else}
+          This player has not played any Catacombs.
+        {/if}
+      </div>
+    </div>
+
+    <div>
+      <h4 class="mb-5 text-xl font-semibold capitalize">Master Catacombs</h4>
+      <div class="flex flex-wrap gap-5">
+        {#if dungeons.master_catacombs}
+          {#each dungeons.master_catacombs as catacomb}
+            <div class="flex min-w-80 basis-[calc((100%/3)-1.25rem)] 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">
+                <Avatar.Root>
+                  <Avatar.Image src={catacomb.texture} class="size-8 object-contain" />
+                  <Avatar.Fallback>
+                    <Image class="size-8" />
+                  </Avatar.Fallback>
+                </Avatar.Root>
+                {catacomb.name}
+              </div>
+
+              <Collapsible.Root class="p-5">
+                <Collapsible.Trigger class="group flex items-center gap-0.5">
+                  <ChevronDown class="size-4 transition-all duration-300 group-data-[state=open]:-rotate-180" />
+                  <h4 class="text-xl font-semibold capitalize text-text">Floor Stats</h4>
+                </Collapsible.Trigger>
+                <Collapsible.Content>
+                  {#each Object.entries(catacomb.stats) as [key, value]}
+                    {#if typeof value === "object"}
+                      <AdditionStat class="capitalize" text={key.toLowerCase().replaceAll("_", " ")} data={formatNumber(value.damage)} subData="({value.type})" />
+                    {:else}
+                      <AdditionStat class="capitalize" text={key.toLowerCase().replaceAll("_", " ")} data={formatNumber(value)} />
+                    {/if}
+                  {/each}
+                </Collapsible.Content>
+              </Collapsible.Root>
+
+              {#if catacomb.best_run}
+                <Collapsible.Root class="px-5 pb-[2.5rem]">
+                  <Collapsible.Trigger class="group flex items-center gap-0.5">
+                    <ChevronDown class="size-4 transition-all duration-300 group-data-[state=open]:-rotate-180" />
+                    <h4 class="text-xl font-semibold capitalize text-text">Best run</h4>
+                  </Collapsible.Trigger>
+                  <Collapsible.Content>
+                    {#each Object.entries(catacomb.best_run) as [key, value]}
+                      {#if typeof value === "number"}
+                        {#if key === "timestamp"}
+                          <AdditionStat class="capitalize" text={key.toLowerCase().replaceAll("_", " ")} data={formatDistanceToNowStrict(value, { addSuffix: true })} asterisk={true}>
+                            {formatDate(value, "dd MMMM yyyy 'at' HH:mm")}
+                          </AdditionStat>
+                        {:else}
+                          <AdditionStat class="capitalize" text={key.toLowerCase().replaceAll("_", " ")} data={formatNumber(value)} />
+                        {/if}
+                      {:else}
+                        <AdditionStat class="capitalize" text={key.toLowerCase().replaceAll("_", " ")} data={value} />
+                      {/if}
+                    {/each}
+                  </Collapsible.Content>
+                </Collapsible.Root>
+              {:else}
+                <div class="p-5 text-center">This player has not played this floor.</div>
+              {/if}
+            </div>
           {/each}
-        {/each}
+        {:else}
+          This player has not played any Master Catacombs.
+        {/if}
       </div>
     </div>
   {/if}