Skip to content

Commit

Permalink
feat: Add dungeons
Browse files Browse the repository at this point in the history
  • Loading branch information
@DarthGigi
DarthGigi committed Jul 20, 2024
1 parent d6671a6 commit 6742851
Showing 1 changed file with 132 additions and 10 deletions.
142 changes: 132 additions & 10 deletions src/lib/sections/stats/Dungeons.svelte
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand Down Expand Up @@ -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}
Expand Down

0 comments on commit 6742851

Please sign in to comment.