Skip to content

Commit

Permalink
fix(stats): update profile context to use Promise for asynchronous da…
Browse files Browse the repository at this point in the history 
…ta handling
  • Loading branch information
@DarthGigi
DarthGigi committed Dec 17, 2024
1 parent 85a6b72 commit c8b5b37
Show file tree
Hide file tree
Showing 23 changed files with 525 additions and 522 deletions.
211 changes: 69 additions & 142 deletions src/lib/layouts/stats/AdditionalStats.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,158 +6,85 @@
import { format as numberFormat } from "numerable";
import { getContext } from "svelte";
const profile = getContext<StatsType>("profile");
const profile = getContext<Promise<StatsType>>("profile");
const defaultPatternDecimal: string = "0,0.##";
const defaultPattern: string = "0,0";
</script>

<div class="additional-stats flex flex-col gap-2 sm:flex-row sm:flex-wrap">
<!--
<AdditionStat text="Last Area" data={profile.data.user_data.current_area.current_area} />
-->
<AdditionStat text="Joined" data={formatDistanceToNowStrict(profile.stats.joined, { addSuffix: true })} asterisk={true}>
Joined on {dateFormat(profile.stats.joined, "dd MMMM yyyy 'at' HH:mm")}
</AdditionStat>
<AdditionStat text="Purse" data={`${formatNumber(profile.stats.purse)} Coins`} />
<AdditionStat text="Bank Account" data={`${formatNumber(profile.stats.bank)} Coins`} />
<AdditionStat text="Average Skill Level" data={profile.skills.averageSkillLevel.toFixed(2)} asterisk={true}>
<div class="max-w-xs space-y-2">
<div>
<h3 class="font-bold text-text/85">
Total Skill XP:
<span class="text-text">
{numberFormat(profile.skills.totalSkillXp, defaultPattern)}
</span>
</h3>
<p class="font-medium text-text/80">Total XP gained in all skills except Social and Runecrafting.</p>
{#await profile}
Loading
{:then profile}
<AdditionStat text="Joined" data={formatDistanceToNowStrict(profile.stats.joined, { addSuffix: true })} asterisk={true}>
Joined on {dateFormat(profile.stats.joined, "dd MMMM yyyy 'at' HH:mm")}
</AdditionStat>
<AdditionStat text="Purse" data={`${formatNumber(profile.stats.purse)} Coins`} />
<AdditionStat text="Bank Account" data={`${formatNumber(profile.stats.bank)} Coins`} />
<AdditionStat text="Average Skill Level" data={profile.skills.averageSkillLevel.toFixed(2)} asterisk={true}>
<div class="max-w-xs space-y-2">
<div>
<h3 class="font-bold text-text/85">
Total Skill XP:
<span class="text-text">
{numberFormat(profile.skills.totalSkillXp, defaultPattern)}
</span>
</h3>
<p class="font-medium text-text/80">Total XP gained in all skills except Social and Runecrafting.</p>
</div>
<div>
<h3 class="font-bold text-text/85">
Average Level:
<span class="text-text">
{profile.skills.averageSkillLevel.toFixed(2)}
</span>
</h3>
<p class="font-medium text-text/80">Average skill level over all skills except Social and Runecrafting, includes progress to next level.</p>
</div>
<div>
<h3 class="font-bold text-text/85">
Average Level without progress:
<span class="text-text">
{numberFormat(profile.skills.averageSkillLevelWithProgress, defaultPatternDecimal)}
</span>
</h3>
<p class="font-medium text-text/80">Average skill level without including partial level progress.</p>
</div>
</div>
<div>
<h3 class="font-bold text-text/85">
Average Level:
</AdditionStat>
<AdditionStat text="Fairy Souls" data={`${profile.stats.fairySouls.found} / ${profile.stats.fairySouls.total}`} asterisk={true}>
{((profile.stats.fairySouls.found / profile.stats.fairySouls.total) * 100).toFixed(2)}% of fairy souls found.
</AdditionStat>
<AdditionStat text="Networth" data={formatNumber(profile.stats.networth.networth)} asterisk={true}>
<div class="max-w-xs space-y-2 font-bold">
<div>
<h3 class="text-text/85">Networth</h3>
<p class="font-medium italic text-text/80">Networth calculations by SkyHelper.</p>
</div>
<div>
<ul class="font-bold [&_li]:capitalize [&_li]:text-text/85 [&_li_span]:normal-case [&_li_span]:text-text">
{#each Object.entries(profile.stats.networth.types) as [key, value]}
<li>
{key.replace(/_/g, " ")}:
<span>
{formatNumber(value.total)}
</span>
</li>
{/each}
</ul>
</div>
<p class="text-text/85">
Unsoulbound Networth:
<span class="text-text">
{profile.skills.averageSkillLevel.toFixed(2)}
{formatNumber(profile.stats.networth.unsoulboundNetworth)}
</span>
</h3>
<p class="font-medium text-text/80">Average skill level over all skills except Social and Runecrafting, includes progress to next level.</p>
</div>
<div>
<h3 class="font-bold text-text/85">
Average Level without progress:
<br />
Total Networth:
<span class="text-text">
{numberFormat(profile.skills.averageSkillLevelWithProgress, defaultPatternDecimal)}
{numberFormat(profile.stats.networth.networth, defaultPattern)} ({formatNumber(profile.stats.networth.networth)})
</span>
</h3>
<p class="font-medium text-text/80">Average skill level without including partial level progress.</p>
</div>
</div>
</AdditionStat>
<AdditionStat text="Fairy Souls" data={`${profile.stats.fairySouls.found} / ${profile.stats.fairySouls.total}`} asterisk={true}>
{((profile.stats.fairySouls.found / profile.stats.fairySouls.total) * 100).toFixed(2)}% of fairy souls found.
</AdditionStat>
<!--
<AdditionStat text="Senither Weight" data={numberFormat(profile.data.weight.senither.overall, defaultPattern)} asterisk={true}>
<div class="max-w-xs space-y-2 font-bold">
<div>
<h3 class="text-text/85">Senither Weight</h3>
<p class="font-medium italic text-text/80">Weight calculations by Senither.</p>
</div>
<div>
<ul class="font-bold [&_li]:text-text/85 [&_li_span]:text-text">
<li>
Skill:
<span>
{numberFormat(profile.data.weight.senither.skill.total, defaultPattern)}
</span>
</li>
<li>
Slayer:
<span>
{numberFormat(profile.data.weight.senither.slayer.total, defaultPattern)}
</span>
</li>
<li>
Dungeon:
<span>
{numberFormat(profile.data.weight.senither.dungeon.total, defaultPattern)}
</span>
</li>
</ul>
</div>
<p class="text-text/85">
Total:
<span class="text-text">
{numberFormat(profile.data.weight.senither.overall, defaultPatternDecimal)}
</span>
</p>
</div>
</AdditionStat>
<AdditionStat text="Lily Weight" data={numberFormat(profile.data.weight.lily.total, defaultPattern)} asterisk={true}>
<div class="max-w-xs space-y-2 font-bold">
<div>
<h3 class="text-text/85">Lily Weight</h3>
<p class="font-medium italic text-text/80">Weight calculations by LappySheep.</p>
</div>
<div>
<ul class="font-bold [&_li]:text-text/85 [&_li_span]:text-text">
<li>
Skill:
<span>
{numberFormat(profile.data.weight.lily.skill.base, defaultPatternDecimal)}
</span>
</li>
<li>
Slayer:
<span>
{numberFormat(profile.data.weight.lily.slayer, defaultPatternDecimal)}
</span>
</li>
<li>
Dungeon:
<span>
{numberFormat(profile.data.weight.lily.catacombs.completion.base + profile.data.weight.lily.catacombs.experience, defaultPatternDecimal)}
</span>
</li>
</ul>
</div>
<p class="text-text/85">
Total:
<span class="text-text">
{numberFormat(profile.data.weight.lily.total, defaultPattern)}
</span>
</p>
</div>
</AdditionStat>
-->
<AdditionStat text="Networth" data={formatNumber(profile.stats.networth.networth)} asterisk={true}>
<div class="max-w-xs space-y-2 font-bold">
<div>
<h3 class="text-text/85">Networth</h3>
<p class="font-medium italic text-text/80">Networth calculations by SkyHelper.</p>
</div>
<div>
<ul class="font-bold [&_li]:capitalize [&_li]:text-text/85 [&_li_span]:normal-case [&_li_span]:text-text">
{#each Object.entries(profile.stats.networth.types) as [key, value]}
<li>
{key.replace(/_/g, " ")}:
<span>
{formatNumber(value.total)}
</span>
</li>
{/each}
</ul>
</p>
</div>
<p class="text-text/85">
Unsoulbound Networth:
<span class="text-text">
{formatNumber(profile.stats.networth.unsoulboundNetworth)}
</span>
<br />
Total Networth:
<span class="text-text">
{numberFormat(profile.stats.networth.networth, defaultPattern)} ({formatNumber(profile.stats.networth.networth)})
</span>
</p>
</div>
</AdditionStat>
</AdditionStat>
{/await}
</div>
66 changes: 55 additions & 11 deletions src/lib/layouts/stats/Main.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@
</script>

<div class="relative">
<Skin3D class="fixed left-0 top-1/2 z-10 h-dvh w-[30vw] -translate-y-1/2" />
{#await profile}
Loading
{:then}
<Skin3D class="fixed left-0 top-1/2 z-10 h-dvh w-[30vw] -translate-y-1/2" />
{/await}
<div class="fixed right-0 top-0 h-dvh w-[calc(100%-30vw)] backdrop-blur-lg backdrop-brightness-50"></div>
<main class="relative mx-auto ml-[30vw]">
<div class="space-y-5 p-8">
Expand All @@ -52,34 +56,74 @@
<Pets />
</section>
<section id="Inventory" class="scroll-m-32">
<Inventory />
{#await profile}
Loading
{:then}
<Inventory />
{/await}
</section>
<section id="Skills" class="scroll-m-32">
<SkillsSection />
{#await profile}
Loading
{:then}
<SkillsSection />
{/await}
</section>
<section id="Dungeons" class="scroll-m-32">
<Dungeons />
{#await profile}
Loading
{:then}
<Dungeons />
{/await}
</section>
<section id="Slayer" class="scroll-m-32">
<Slayer />
{#await profile}
Loading
{:then}
<Slayer />
{/await}
</section>
<section id="Minions" class="scroll-m-32">
<Minions />
{#await profile}
Loading
{:then}
<Minions />
{/await}
</section>
<section id="Bestiary" class="scroll-m-32">
<Bestiary />
{#await profile}
Loading
{:then}
<Bestiary />
{/await}
</section>
<section id="Collections" class="scroll-m-32">
<Collections />
{#await profile}
Loading
{:then}
<Collections />
{/await}
</section>
<section id="Crimson_Isle" class="scroll-m-32">
<CrimsonIsle />
{#await profile}
Loading
{:then}
<CrimsonIsle />
{/await}
</section>
<section id="Rift" class="scroll-m-32">
<Rift />
{#await profile}
Loading
{:then}
<Rift />
{/await}
</section>
<section id="Misc" class="scroll-m-32">
<MiscSection />
{#await profile}
Loading
{:then}
<MiscSection />
{/await}
</section>
</div>
</main>
Expand Down
Loading

0 comments on commit c8b5b37

Please sign in to comment.