Skip to content

Commit

Permalink
feat(Dungeons): refactor Catacombs and Master Catacombs sections to u…
Browse files Browse the repository at this point in the history 
…se reusable cataCard component
  • Loading branch information
@DarthGigi
DarthGigi committed Jan 11, 2025
1 parent 8110abb commit 621b7e2
Showing 1 changed file with 62 additions and 117 deletions.
179 changes: 62 additions & 117 deletions src/lib/sections/stats/Dungeons.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import SectionSubtitle from "$lib/components/SectionSubtitle.svelte";
import Skillbar from "$lib/components/Skillbar.svelte";
import { formatNumber } from "$lib/shared/helper";
import type { CatacombsData } from "$types/stats";
import { Avatar, Collapsible } from "bits-ui";
import { formatDate, formatDistanceToNowStrict } from "date-fns";
import ChevronDown from "lucide-svelte/icons/chevron-down";
Expand Down Expand Up @@ -53,135 +54,79 @@
{#snippet subtitle()}
<h4 class="my-5 text-xl font-semibold capitalize text-text/90">Catacombs</h4>
{/snippet}
<div class="flex flex-wrap gap-5">
{#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 loading="lazy" 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-5 transition-all duration-300 group-data-[state=open]:-rotate-180" />
<SectionSubtitle class="my-0">Floor Stats</SectionSubtitle>
</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-5 transition-all duration-300 group-data-[state=open]:-rotate-180" />
<SectionSubtitle class="my-0">Best run</SectionSubtitle>
</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 completed this floor.</div>
{/if}
</div>
{/each}
{:else}
This player has not played any Catacombs.
{/if}
</div>
{@render cataCard(dungeons.catacombs)}
</CollapsibleSection>

<CollapsibleSection id="Master Catacombs">
{#snippet subtitle()}
<h4 class="my-5 text-xl font-semibold capitalize text-text/90">Master Catacombs</h4>
{/snippet}
<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 loading="lazy" src={catacomb.texture} class="size-8 object-contain" />
<Avatar.Fallback>
<Image class="size-8" />
</Avatar.Fallback>
</Avatar.Root>
{catacomb.name}
</div>
{@render cataCard(dungeons.master_catacombs, true)}
</CollapsibleSection>
{/if}
</div>
</CollapsibleSection>

<Collapsible.Root class="p-5">
<Collapsible.Trigger class="group flex items-center gap-0.5">
<ChevronDown class="size-5 transition-all duration-300 group-data-[state=open]:-rotate-180" />
<SectionSubtitle class="my-0">Floor Stats</SectionSubtitle>
</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>
{#snippet cataCard(catacombs: CatacombsData[] | null, master: boolean = false)}
<div class="flex flex-wrap gap-5">
{#if catacombs}
{#each 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 loading="lazy" src={catacomb.texture} class="size-8 object-contain" />
<Avatar.Fallback>
<Image class="size-8" />
</Avatar.Fallback>
</Avatar.Root>
{catacomb.name}
</div>

{#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-5 transition-all duration-300 group-data-[state=open]:-rotate-180" />
<SectionSubtitle class="my-0">Best run</SectionSubtitle>
</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>
<Collapsible.Root class="p-5">
<Collapsible.Trigger class="group flex items-center gap-0.5">
<ChevronDown class="size-5 transition-all duration-300 group-data-[state=open]:-rotate-180" />
<SectionSubtitle class="my-0">Floor Stats</SectionSubtitle>
</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}
<div class="p-5 text-center">This player has not completed this floor.</div>
<AdditionStat class="capitalize" text={key.toLowerCase().replaceAll("_", " ")} data={formatNumber(value)} />
{/if}
</div>
{/each}
{/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-5 transition-all duration-300 group-data-[state=open]:-rotate-180" />
<SectionSubtitle class="my-0">Best run</SectionSubtitle>
</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}
This player has not played any Master Catacombs.
<div class="p-5 text-center">This player has not completed this floor.</div>
{/if}
</div>
</CollapsibleSection>
{/each}
{:else}
This player has not played any {master ? "Master Catacombs" : "Catacombs"}.
{/if}
</div>
</CollapsibleSection>
{/snippet}

0 comments on commit 621b7e2

Please sign in to comment.