Skip to content

Commit

Permalink
Merge pull request #90 from SkyCryptWebsite/dev
Browse files Browse the repository at this point in the history
  • Loading branch information
DarthGigi authored Jan 13, 2025
2 parents 565318a + 35c9b59 commit a1610ca
Show file tree
Hide file tree
Showing 17 changed files with 110 additions and 56 deletions.
12 changes: 10 additions & 2 deletions src/lib/components/CollapsibleSection.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,15 @@
import type { Snippet } from "svelte";
import { slide } from "svelte/transition";
let { id, class: className, children, subtitle }: { id: string; class?: string; children?: Snippet; subtitle?: Snippet } = $props();
type Props = {
id: string;
class?: string;
order?: number;
children?: Snippet;
subtitle?: Snippet;
};
let { id, class: className, order, children, subtitle }: Props = $props();
let sectionElement = $state<HTMLElement>();
let transormedID = $derived.by(() => {
Expand All @@ -31,7 +39,7 @@
</script>

<Collapsible.Root asChild let:builder bind:open={() => $collapsePreferences[transormedID.toLowerCase()] ?? true, (v) => ($collapsePreferences[transormedID.toLowerCase()] = v)}>
<section bind:this={sectionElement} id={transormedID} use:builder.action {...builder} class={cn("scroll-m-32", className)}>
<section id={transormedID} class={cn("order-[--order] scroll-m-32", className)} style="--order: {order};" bind:this={sectionElement} use:builder.action {...builder}>
<Collapsible.Trigger class="flex items-center justify-between">
{#if !subtitle}
<SectionTitle>{id}</SectionTitle>
Expand Down
8 changes: 3 additions & 5 deletions src/lib/layouts/stats/Main.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import PlayerProfile from "$lib/layouts/stats/PlayerProfile.svelte";
import Skills from "$lib/layouts/stats/Skills.svelte";
import Stats from "$lib/layouts/stats/Stats.svelte";
import SectionsLazy from "$lib/sections/SectionsLazy.svelte";
import SectionsEager from "$lib/sections/SectionsEager.svelte";
import { flyAndScale } from "$lib/shared/utils";
import { itemContent, showItem } from "$lib/stores/internal";
import { Dialog } from "bits-ui";
Expand Down Expand Up @@ -44,14 +44,12 @@
<Navbar />
{/await}

<div class="space-y-5 p-4 @[75rem]/parent:p-8">
<div class="flex flex-col flex-nowrap gap-y-5 p-4 @[75rem]/parent:p-8">
{#await import('$lib/components/APINotice.svelte') then { default: Notice }}
<Notice />
{/await}

<SectionsLazy />

<!-- <SectionsEager /> -->
<SectionsEager />
</div>
</main>
</div>
Expand Down
73 changes: 47 additions & 26 deletions src/lib/sections/SectionsEager.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import Accessories from "$lib/sections/stats/Accessories.svelte";
import Bestiary from "$lib/sections/stats/Bestiary.svelte";
import Collections from "$lib/sections/stats/Collections.svelte";
import Crimson_Isle from "$lib/sections/stats/CrimsonIsle.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";
Expand All @@ -13,36 +13,57 @@
import Skills from "$lib/sections/stats/SkillsSection.svelte";
import Slayer from "$lib/sections/stats/Slayer.svelte";
import Weapons from "$lib/sections/stats/Weapons.svelte";
import type { SectionComponentsEager, SectionName } from "$lib/sections/types";
import type { SectionName } from "$lib/sections/types";
import { sectionOrderPreferences } from "$lib/stores/preferences";
import Armor from "./stats/Armor.svelte";
const ctx = getProfileCtx();
const profile = $derived(ctx.profile);
const sectionComponents: SectionComponentsEager = $derived({
Armor: profile.items && profile.items.armor && profile.items.equipment && profile.items.wardrobe ? Armor : null,
Weapons: profile.items && profile.items.weapons ? Weapons : null,
Accessories: profile.accessories ? Accessories : null,
Pets: profile.pets ? Pets : null,
Inventory: profile.items ? Inventory : null,
Skills: profile.skills ? Skills : null,
Dungeons: profile.dungeons ? Dungeons : null,
Slayer: profile.slayer ? Slayer : null,
Minions: profile.minions ? Minions : null,
Bestiary: profile.bestiary ? Bestiary : null,
Collections: profile.collections ? Collections : null,
Crimson_Isle: profile.crimson_isle ? Crimson_Isle : null,
Rift: profile.rift ? Rift : null,
Misc: profile.misc ? Misc : null
});
function findIndex(id: SectionName) {
return $sectionOrderPreferences.findIndex((section) => section.name === id);
}
</script>

{#each $sectionOrderPreferences as sectionId (sectionId.id)}
{@const Component = sectionComponents[sectionId.name as SectionName]}
{#if Component !== null}
<Component />
{:else}
<p>Something went wrong</p>
{/if}
{/each}
{#if profile.items && profile.items.armor && profile.items.equipment && profile.items.wardrobe}
<Armor order={findIndex("Armor")} />
{/if}
{#if profile.items && profile.items.weapons}
<Weapons order={findIndex("Weapons")} />
{/if}
{#if profile.accessories}
<Accessories order={findIndex("Accessories")} />
{/if}
{#if profile.pets}
<Pets order={findIndex("Pets")} />
{/if}
{#if profile.items}
<Inventory order={findIndex("Inventory")} />
{/if}
{#if profile.skills}
<Skills order={findIndex("Skills")} />
{/if}
{#if profile.dungeons}
<Dungeons order={findIndex("Dungeons")} />
{/if}
{#if profile.slayer}
<Slayer order={findIndex("Slayer")} />
{/if}
{#if profile.minions}
<Minions order={findIndex("Minions")} />
{/if}
{#if profile.bestiary}
<Bestiary order={findIndex("Bestiary")} />
{/if}
{#if profile.collections}
<Collections order={findIndex("Collections")} />
{/if}
{#if profile.crimson_isle}
<CrimsonIsle order={findIndex("Crimson_Isle")} />
{/if}
{#if profile.rift}
<Rift order={findIndex("Rift")} />
{/if}
{#if profile.misc}
<Misc order={findIndex("Misc")} />
{/if}
4 changes: 3 additions & 1 deletion src/lib/sections/stats/Accessories.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,15 @@
import { Collapsible } from "bits-ui";
import ChevronDown from "lucide-svelte/icons/chevron-down";
let { order }: { order: number } = $props();
const ctx = getProfileCtx();
const profile = $derived(ctx.profile);
const accessories = $derived(profile.accessories);
</script>

{#if accessories.magicalPower?.total}
<CollapsibleSection id="Accessories">
<CollapsibleSection id="Accessories" {order}>
<Items>
{#snippet text()}
<div>
Expand Down
4 changes: 3 additions & 1 deletion src/lib/sections/stats/Armor.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
import { cn } from "$lib/shared/utils";
import { ScrollArea } from "bits-ui";
let { order }: { order: number } = $props();
const ctx = getProfileCtx();
const profile = $derived(ctx.profile);
Expand All @@ -18,7 +20,7 @@
const firstWardrobeItems = $derived(wardrobe.map((wardrobeItems) => wardrobeItems.find((piece) => piece)));
</script>

<CollapsibleSection id="Armor">
<CollapsibleSection id="Armor" {order}>
<Items>
{#snippet text()}
{#if armor.armor.length > 0 && !armor.armor.every((piece) => !piece.display_name)}
Expand Down
4 changes: 3 additions & 1 deletion src/lib/sections/stats/Bestiary.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@
import { cn } from "$lib/shared/utils";
import { format } from "numerable";
let { order }: { order: number } = $props();
const ctx = getProfileCtx();
const profile = $derived(ctx.profile);
const bestiary = $derived(profile.bestiary);
</script>

<CollapsibleSection id="Bestiary">
<CollapsibleSection id="Bestiary" {order}>
<Items class="flex-col">
{#snippet text()}
<div>
Expand Down
4 changes: 3 additions & 1 deletion src/lib/sections/stats/Collections.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@
import { cn } from "$lib/shared/utils";
import { format } from "numerable";
let { order }: { order: number } = $props();
const ctx = getProfileCtx();
const profile = $derived(ctx.profile);
const collections = $derived(profile.collections);
</script>

<CollapsibleSection id="Collections">
<CollapsibleSection id="Collections" {order}>
<Items class="flex-col">
{#snippet text()}
<div>
Expand Down
4 changes: 3 additions & 1 deletion src/lib/sections/stats/CrimsonIsle.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@
import { cn } from "$lib/shared/utils";
import { format } from "numerable";
let { order }: { order: number } = $props();
const ctx = getProfileCtx();
const profile = $derived(ctx.profile);
const isle = $derived(profile.crimson_isle);
</script>

<CollapsibleSection id="Crimson Isle">
<CollapsibleSection id="Crimson Isle" {order}>
<Items class="flex-col">
{#snippet text()}
<div>
Expand Down
4 changes: 3 additions & 1 deletion src/lib/sections/stats/Dungeons.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,14 @@
import Image from "lucide-svelte/icons/image";
import { format } from "numerable";
let { order }: { order: number } = $props();
const ctx = getProfileCtx();
const profile = $derived(ctx.profile);
const dungeons = $derived(profile.dungeons);
</script>

<CollapsibleSection id="Dungeons">
<CollapsibleSection id="Dungeons" {order}>
<div class="space-y-4">
{#if dungeons.unlocked === false}
<p class="space-x-0.5 leading-6">{profile.username} hasn't unlocked Dungeons yet.</p>
Expand Down
16 changes: 9 additions & 7 deletions src/lib/sections/stats/Inventory.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
import { writable } from "svelte/store";
import { crossfade, fade } from "svelte/transition";
let { order }: { order: number } = $props();
let openStorageTab = writable<string>("0");
const ctx = getProfileCtx();
const profile = $derived(ctx.profile);
Expand Down Expand Up @@ -83,22 +86,21 @@
].filter((tab) => tab.items.length > 0)
);
let openStorageTab = writable<string>("0");
const [send, receive] = crossfade({
duration: 300,
easing: cubicInOut
});
$effect(() => {
if ($openTab === "storage") {
openStorageTab.set("0");
} else if ($openTab === "museum") {
openStorageTab.set("19");
}
});
const [send, receive] = crossfade({
duration: 300,
easing: cubicInOut
});
</script>

<CollapsibleSection id="Inventory">
<CollapsibleSection id="Inventory" {order}>
{#if tabs.length > 0}
<Tabs.Root bind:value={$openTab} class="relative mb-0 rounded-lg bg-background/30 p-5 pt-4 @container">
<Tabs.List>
Expand Down
4 changes: 3 additions & 1 deletion src/lib/sections/stats/Minions.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
import { Avatar, Button } from "bits-ui";
import ExternalLink from "lucide-svelte/icons/external-link";
let { order }: { order: number } = $props();
const ctx = getProfileCtx();
const profile = $derived(ctx.profile);
Expand All @@ -18,7 +20,7 @@
const arabicTiers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
</script>

<CollapsibleSection id="Minions">
<CollapsibleSection id="Minions" {order}>
<Items class="flex-col">
{#snippet text()}
<div>
Expand Down
4 changes: 3 additions & 1 deletion src/lib/sections/stats/MiscSection.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,11 @@
import Races from "./misc/races.svelte";
import Uncategorized from "./misc/uncategorized.svelte";
import Upgrades from "./misc/upgrades.svelte";
let { order }: { order: number } = $props();
</script>

<CollapsibleSection id="Miscellaneous" class="mb-4">
<CollapsibleSection id="Miscellaneous" class="mb-4" {order}>
<Essence />
<!-- TODO: Essence Shop -->
<Kills />
Expand Down
9 changes: 5 additions & 4 deletions src/lib/sections/stats/Pets.svelte
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
<script lang="ts">
import { getProfileCtx } from "$ctx/profile.svelte";
import AdditionStat from "$lib/components/AdditionStat.svelte";
import Bonus from "$lib/components/Bonus.svelte";
import CollapsibleSection from "$lib/components/CollapsibleSection.svelte";
import Item from "$lib/components/Item.svelte";
import SectionSubtitle from "$lib/components/SectionSubtitle.svelte";
import Items from "$lib/layouts/stats/Items.svelte";
import { getProfileCtx } from "$ctx/profile.svelte";
import CollapsibleSection from "$lib/components/CollapsibleSection.svelte";
import { formatNumber, getRarityClass, renderLore, uniqBy } from "$lib/shared/helper";
import { cn } from "$lib/shared/utils";
import { Collapsible } from "bits-ui";
import ChevronDown from "lucide-svelte/icons/chevron-down";
let { order }: { order: number } = $props();
const ctx = getProfileCtx();
const profile = $derived(ctx.profile);
const pets = $derived(profile.pets);
Expand All @@ -21,7 +22,7 @@
</script>

{#if pets.pets?.length}
<CollapsibleSection id="Pets">
<CollapsibleSection id="Pets" {order}>
<Items>
{#snippet text()}
<div>
Expand Down
4 changes: 3 additions & 1 deletion src/lib/sections/stats/Rift.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@
import { formatDate, formatDistanceToNowStrict } from "date-fns";
import { format } from "numerable";
let { order }: { order: number } = $props();
const ctx = getProfileCtx();
const profile = $derived(ctx.profile);
const rift = $derived(profile.rift);
</script>

<CollapsibleSection id="Rift">
<CollapsibleSection id="Rift" {order}>
<Items class="flex-col">
{#snippet text()}
<div>
Expand Down
4 changes: 3 additions & 1 deletion src/lib/sections/stats/SkillsSection.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,13 @@
import Fishing from "./skills/fishing.svelte";
import Mining from "./skills/mining.svelte";
let { order }: { order: number } = $props();
const ctx = getProfileCtx();
const profile = $derived(ctx.profile);
</script>

<CollapsibleSection id="Skills" class="pt-4">
<CollapsibleSection id="Skills" class="pt-4" {order}>
{#if profile.items && profile.items.mining_tools && profile.mining}
<Mining />
{:else}
Expand Down
4 changes: 3 additions & 1 deletion src/lib/sections/stats/Slayer.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,14 @@
import Image from "lucide-svelte/icons/image";
import { format } from "numerable";
let { order }: { order: number } = $props();
const ctx = getProfileCtx();
const profile = $derived(ctx.profile);
const slayer = $derived(profile.slayer);
</script>

<CollapsibleSection id="Slayer">
<CollapsibleSection id="Slayer" {order}>
<div class="space-y-4">
{#if slayer.unlocked === false}
<p class="space-x-0.5 leading-6">{profile.username} hasn't unlocked Slayers yet.</p>
Expand Down
Loading

0 comments on commit a1610ca

Please sign in to comment.