Merge branch 'feat/bugfixes' of https://github.com/SkyCryptWebsite/Sk…

…yCryptv2 into feat/bugfixes
SkyCryptWebsite · Dec 15, 2024 · 0efaddc · 0efaddc
2 parents 9b384c0 + 42bbbe5
commit 0efaddc
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 36 deletions.
diff --git a/src/lib/components/Item.svelte b/src/lib/components/Item.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { page } from "$app/stores";
+  import { RARITIES, RARITY_COLORS } from "$lib/shared/constants/items";
   import { getRarityClass, isEnchanted, removeFormatting, renderLore } from "$lib/shared/helper";
   import { cn, flyAndScale } from "$lib/shared/utils";
   import type { ProcessedItem, ProcessedPet } from "$lib/types/global";
@@ -9,31 +10,36 @@
   export let piece: ProcessedItem | ProcessedPet;
   export let isInventory = false;
   export let showCount = true;
+  export let showRecombobulated = true;
 
-  const itemName = (piece as ProcessedItem).tag?.display?.Name ?? piece.display_name ?? "???";
+  const item = piece as ProcessedItem;
+  const processedPet = piece as unknown as ProcessedPet;
+  const itemName = item.tag?.display?.Name ?? piece.display_name ?? "???";
   const itemNameHtml = renderLore(itemName);
   const isMulticolor = (itemNameHtml.match(/<\/span>/g) || []).length > 1;
   const bgColor = piece.rarity ? getRarityClass(piece.rarity.toLowerCase() as string, "bg") : "bg-background";
-  const enchanted = isEnchanted(piece as ProcessedItem);
-
-  const processedItem = piece as ProcessedItem;
-  const processedPet = piece as unknown as ProcessedPet;
+  const enchanted = isEnchanted(item);
+  const recombobulated = showRecombobulated && item.recombobulated;
+  const shine = enchanted || item.shiny;
 
-  const showNumbers = showCount && processedItem.Count > 1;
+  const showNumbers = showCount && item.Count > 1;
 </script>
 
 <div class="nice-colors-dark contents">
   <Tooltip.Root group="armor" openDelay={0} closeDelay={0}>
-    <Tooltip.Trigger class={cn(`relative flex items-center justify-center rounded-lg`, isInventory ? "p-0" : `p-4 ${bgColor}`)}>
+    <Tooltip.Trigger class={cn(`relative flex aspect-square items-center justify-center overflow-clip rounded-lg`, isInventory ? "p-0" : `p-2 ${bgColor}`, { shine: shine })}>
       <Avatar.Root>
-        <Avatar.Image src={$page.url.origin + piece.texture_path} alt={piece.display_name} class="data-[enchanted=true]:enchanted h-auto w-16 select-none" data-enchanted={enchanted} />
+        <Avatar.Image src={$page.url.origin + piece.texture_path} alt={piece.display_name} class="data-[enchanted=true]:enchanted h-auto w-14 select-none" data-enchanted={enchanted} />
         <Avatar.Fallback>
-          <Image class="size-16" />
+          <Image class="size-14" />
         </Avatar.Fallback>
       </Avatar.Root>
+      {#if recombobulated}
+        <div class="absolute -right-3 -top-3 z-10 size-6 rotate-45 bg-[--color]" style="--color: var(--§{RARITY_COLORS[RARITIES[RARITIES.indexOf(piece.rarity) - 1]]})"></div>
+      {/if}
       {#if showNumbers}
         <div class="absolute bottom-0.5 right-0.5 text-2xl font-semibold text-white text-shadow-[.1em_.1em_.1em_#000]">
-          {processedItem.Count}
+          {item.Count}
         </div>
       {/if}
     </Tooltip.Trigger>
@@ -51,8 +57,8 @@
         </p>
       </div>
       <div class="nice-colors-auto p-6 font-semibold leading-snug">
-        {#if processedItem.tag?.display?.Lore}
-          {#each processedItem.tag.display.Lore as lore}
+        {#if item.tag?.display?.Lore}
+          {#each item.tag.display.Lore as lore}
             {@html renderLore(lore)}
           {/each}
         {:else if processedPet.lore}

diff --git a/src/lib/components/Wardrobe.svelte b/src/lib/components/Wardrobe.svelte
@@ -1,34 +1,36 @@
 <script lang="ts">
   import Item from "$lib/components/Item.svelte";
   import type { ProcessedItem } from "$lib/types/global";
-  import { Collapsible } from "bits-ui";
+  import { Avatar, Collapsible } from "bits-ui";
   import { writable } from "svelte/store";
   import { slide } from "svelte/transition";
 
-  export let firstWardrobeItem: ProcessedItem | undefined;
   export let wardrobeItems: ProcessedItem[];
 
+  const highestItem = wardrobeItems.find((piece) => piece);
+  const pieces = ["helmet", "chestplate", "leggings", "boots"];
+
   const expanded = writable<boolean>(false);
 </script>
 
 <Collapsible.Root bind:open={$expanded}>
-  <Collapsible.Trigger>
-    {#if firstWardrobeItem}
-      <Item piece={firstWardrobeItem} />
+  <Collapsible.Trigger class="mt-2 flex flex-col gap-2">
+    {#if !$expanded}
+      {#if highestItem}
+        <Item piece={highestItem} />
+      {/if}
+    {:else}
+      <Collapsible.Content transition={slide} class="flex flex-col gap-2">
+        {#each wardrobeItems as piece, index}
+          {#if piece}
+            <Item {piece} />
+          {:else}
+            <Avatar.Root class="rounded-lg bg-background-lore p-2">
+              <Avatar.Image class="size-14" loading="eager" src={`/img/textures/item/empty_armor_slot_${pieces[index]}.png`} />
+            </Avatar.Root>
+          {/if}
+        {/each}
+      </Collapsible.Content>
     {/if}
   </Collapsible.Trigger>
-  <Collapsible.Content transition={slide} class="mt-2 flex flex-col gap-2">
-    {#each wardrobeItems as piece}
-      {#if piece}
-        {#if piece !== firstWardrobeItem}
-          <Item {piece} />
-        {/if}
-      {:else}
-        <!-- TODO: Add placeholders -->
-        <div class="flex size-24 items-center justify-center rounded-lg bg-background-lore">
-          <p class="text-text/60">TODO: <br /> Add placeholders</p>
-        </div>
-      {/if}
-    {/each}
-  </Collapsible.Content>
 </Collapsible.Root>
diff --git a/src/lib/layouts/stats/Items.svelte b/src/lib/layouts/stats/Items.svelte
@@ -13,11 +13,11 @@
     <h3 class="text-2xl font-semibold capitalize underline decoration-icon decoration-4 [text-underline-position:under]">{title}</h3>
   {/if}
   {#if subtitle}
-    <h4 class="text-xl capitalize text-text">{subtitle}</h4>
+    <h4 class="text-xl font-semibold capitalize text-text/90">{subtitle}</h4>
   {/if}
   <slot name="text" />
 
-  <div class={cn("flex flex-wrap gap-4", className)}>
+  <div class={cn("flex flex-wrap gap-3", className)}>
     <slot />
   </div>
 

diff --git a/src/lib/sections/stats/Armor.svelte b/src/lib/sections/stats/Armor.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <Items title="Armor">
-  <div slot="text">
+  <div slot="text" class="contents">
     {#if armor.set_name}
       <p class="space-x-0.5 font-bold capitalize leading-6 text-text/60">
         <span>Set:</span>
@@ -40,7 +40,7 @@
 </Items>
 
 <Items subtitle="Wardrobe">
-  {#each firstWardrobeItems as firstWardrobeItem, i}
-    <Wardrobe {firstWardrobeItem} wardrobeItems={wardrobe[i]} />
+  {#each firstWardrobeItems as _, i}
+    <Wardrobe wardrobeItems={wardrobe[i]} />
   {/each}
 </Items>