Add Slayer section to stats page (#20)

* feat: Add Slayer section to stats page (WIP) * fix(stats/slayer): incorrect xpForNext * chore: Add Avatar and Image components for Slayer section --------- Co-authored-by: DuckySoLucky <robertkovac160@gmail.com>
SkyCryptWebsite · Jul 20, 2024 · b6b2663 · b6b2663
1 parent b894f6a
commit b6b2663
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 2 deletions.
diff --git a/src/lib/layouts/stats/Main.svelte b/src/lib/layouts/stats/Main.svelte
@@ -9,6 +9,7 @@
   import Inventory from "$lib/sections/stats/Inventory.svelte";
   import Pets from "$lib/sections/stats/Pets.svelte";
   import SkillsSection from "$lib/sections/stats/SkillsSection.svelte";
+  import Slayer from "$lib/sections/stats/Slayer.svelte";
   import Weapons from "$lib/sections/stats/Weapons.svelte";
   import type { Stats as StatsType } from "$types/stats";
   import { setContext } from "svelte";
@@ -30,6 +31,7 @@
   <Inventory />
   <SkillsSection />
   <Dungeons />
+  <Slayer />
 </main>
 
 <svg xmlns="http://www.w3.org/2000/svg" height="0" width="0" style="position: fixed;">

diff --git a/src/lib/sections/stats/Slayer.svelte b/src/lib/sections/stats/Slayer.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+  import AdditionStat from "$lib/components/AdditionStat.svelte";
+  import Bonus from "$lib/components/Bonus.svelte";
+  import type { Stats as StatsType } from "$types/stats";
+  import { Avatar, Progress } from "bits-ui";
+  import Image from "lucide-svelte/icons/image";
+  import { format } from "numerable";
+  import { getContext } from "svelte";
+
+  const profile = getContext<StatsType>("profile");
+  const slayer = profile.slayer;
+</script>
+
+<div class="space-y-4">
+  <h3 class="text-2xl uppercase">Slayer</h3>
+  {#if slayer}
+    <AdditionStat text="Total Slayer XP" data={format(slayer.totalSlayerExp)} />
+    <div class="flex flex-wrap gap-5">
+      {#each Object.entries(slayer.data) as [key, value]}
+        {#if value.level.xp > 0}
+          <div class="relative flex min-w-[min(20.625rem,100vw)] flex-col items-center gap-1 space-y-5 overflow-hidden 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={value.texture} class="size-8 object-contain" />
+                <Avatar.Fallback>
+                  <Image class="size-8" />
+                </Avatar.Fallback>
+              </Avatar.Root>
+              {value.name}
+            </div>
+            <div class="flex h-full w-full flex-wrap gap-5 px-5 uppercase">
+              {#each Object.entries(value.kills) as [key, killValue]}
+                <div class="flex flex-col items-center gap-1 text-sm font-bold text-text/60">
+                  <span>
+                    {#if !isNaN(Number(key))}
+                      Tier {["I", "II", "III", "IV", "V"][Number(key) - 1]}
+                    {:else}
+                      {key}
+                    {/if}
+                  </span>
+                  <span class="text-text">
+                    {format(killValue)}
+                  </span>
+                </div>
+              {/each}
+            </div>
+            <div class="w-full">
+              <p class="mb-2 w-full space-y-5 px-5 text-center font-semibold capitalize text-text/60">
+                {key} Level {value.level.level}
+              </p>
+
+              <Progress.Root value={value.level.xp} max={value.level.xpForNext} class="group h-4 w-full overflow-hidden bg-text/30" data-maxed={value.level.maxed}>
+                <div class="absolute z-10 flex h-full w-full justify-center">
+                  <div class="text-xs font-semibold shadow-background/50 text-shadow">
+                    {#if value.level.maxed}
+                      {format(value.level.xp)}
+                    {:else}
+                      {format(value.level.xp)} / {format(value.level.xpForNext)}
+                    {/if}
+                    XP
+                  </div>
+                </div>
+                <div class="h-full w-full flex-1 transition-all duration-1000 ease-in-out group-data-[maxed=false]:bg-skillbar group-data-[maxed=true]:bg-maxedbar" style={`transform: translateX(-${100 - (value.level.xp / (value.level.maxed ? value.level.xp : value.level.xpForNext)) * 100}%)`} />
+              </Progress.Root>
+            </div>
+          </div>
+        {/if}
+      {/each}
+    </div>
+    <Bonus title="Bonus:" stats={slayer.stats} />
+  {/if}
+</div>
diff --git a/src/lib/stats/slayer.ts b/src/lib/stats/slayer.ts
@@ -27,7 +27,7 @@ function getLevel(slayer: string, data: SlayerBoss) {
       level: 0,
       maxLevel: 0,
       xpCurrent: 0,
-      xpForNext: 0,
+      xpForNext: constants.SLAYER_XP[slayer] ? constants.SLAYER_XP[slayer]["1"] : 0,
       maxed: false
     };
   }
@@ -37,7 +37,7 @@ function getLevel(slayer: string, data: SlayerBoss) {
   const maxLevel = Object.keys(constants.SLAYER_XP[slayer]).length;
   for (const [level, xp] of reversed) {
     if (data.xp > xp) {
-      const xpForNext = xp;
+      const xpForNext = constants.SLAYER_XP[slayer][parseInt(level) + 1];
       return {
         xp: data.xp,
         xpForNext,