From 8e19213c0696c9269b7435ff4f47c8eb7b8063d1 Mon Sep 17 00:00:00 2001
From: DarthGigi <47110839+DarthGigi@users.noreply.github.com>
Date: Sun, 8 Dec 2024 16:35:43 +0100
Subject: [PATCH] feat: enhance PlayerProfile component with social media
 sharing and improved UI elements

---
 src/lib/layouts/stats/PlayerProfile.svelte | 83 ++++++++++++++++++----
 1 file changed, 70 insertions(+), 13 deletions(-)

diff --git a/src/lib/layouts/stats/PlayerProfile.svelte b/src/lib/layouts/stats/PlayerProfile.svelte
index 10a8c88e..f4d3c6ef 100644
--- a/src/lib/layouts/stats/PlayerProfile.svelte
+++ b/src/lib/layouts/stats/PlayerProfile.svelte
@@ -1,37 +1,53 @@
 <script lang="ts">
   import { flyAndScale } from "$lib/shared/utils";
   import type { Stats as StatsType } from "$lib/types/stats";
-  import { Button, DropdownMenu } from "bits-ui";
+  import { Avatar, Button, DropdownMenu } from "bits-ui";
   import ChevronRight from "lucide-svelte/icons/chevron-right";
   import ExternalLink from "lucide-svelte/icons/external-link";
+  import Share from "lucide-svelte/icons/share";
   import Star from "lucide-svelte/icons/star";
   import { getContext } from "svelte";
 
   const profile = getContext<StatsType>("profile");
+
+  const iconMapper: Record<string, string> = {
+    twitter: "x-twitter.svg",
+    youtube: "youtube.svg",
+    instagram: "instagram.svg",
+    tiktok: "tiktok.svg",
+    twitch: "twitch.svg",
+    discord: "discord.svg",
+    hypixel: "hypixel.png"
+  };
 </script>
 
 <div class="mt-12 flex flex-wrap items-center gap-x-2 gap-y-3 text-4xl">
   Stats for
-  <div class="inline-flex items-center gap-2 rounded-full bg-[#7f7f7f33] px-4 py-2 align-middle text-3xl font-semibold">
-    <div class="nice-colors-dark light dark relative flex items-center justify-center overflow-hidden rounded-full bg-minecraft-b px-2 py-1 text-xl">
-      <div class="relative z-20 inline-flex justify-between gap-3">
-        <span>MVP</span>
-        <span>+</span>
+  <div class="inline-flex items-center gap-2 rounded-full bg-[#7f7f7f]/20 py-2 pl-2 pr-4 align-middle text-3xl font-semibold">
+    <div class="nice-colors-dark light dark relative flex items-center justify-center overflow-hidden rounded-full bg-[var(--color)] px-2 py-1 text-xl" style={`--color:${profile.rank?.color}`}>
+      <div class="relative z-20 inline-flex justify-between gap-3 text-lg font-bold">
+        <span>{profile.rank?.tag}</span>
+        {#if profile.rank?.plus}
+          <span>{profile.rank?.plus}</span>
+        {/if}
       </div>
-      <div class="absolute -right-3 bottom-0 top-0 z-10 h-14 w-1/2 bg-minecraft-6" style="transform: skew(-20deg);"></div>
+      <div class="absolute -right-3 bottom-0 top-0 z-10 h-14 w-1/2 skew-x-[-20deg] bg-[var(--plusColor)]" style={`--plusColor:${profile.rank?.plusColor ?? profile.rank?.color}`}></div>
     </div>
-    {profile.username}
+    <span>{profile.username}</span>
   </div>
   on
   <DropdownMenu.Root>
-    <DropdownMenu.Trigger class="inline-flex items-center rounded-full bg-[#7f7f7f33] px-4 py-2 align-middle text-3xl font-semibold">
+    <DropdownMenu.Trigger class="inline-flex items-center rounded-full bg-[#7f7f7f]/20 px-4 py-2 align-middle text-3xl font-semibold">
       {profile.profile_cute_name}
     </DropdownMenu.Trigger>
 
     <DropdownMenu.Content class="z-[99999]  min-w-64 overflow-hidden rounded-lg bg-background-grey/95 text-3xl font-semibold" align="start" side="bottom" transition={flyAndScale} transitionConfig={{ y: -8, duration: 150 }}>
       {#each profile.profiles as otherProfile}
-        <DropdownMenu.Item href={`/stats/${profile.username}/${otherProfile.cute_name}`} class="flex items-center px-4 py-2 hover:bg-text/20" data-sveltekit-preload-code="viewport">
+        <DropdownMenu.Item href={`/stats/${profile.username}/${otherProfile.cute_name}`} class="flex items-center p-4 hover:bg-text/20" data-sveltekit-preload-code="viewport">
           {otherProfile.cute_name}
+          {#if otherProfile.game_mode === "bingo"}
+            🎲
+          {/if}
         </DropdownMenu.Item>
       {/each}
     </DropdownMenu.Content>
@@ -43,12 +59,53 @@
     <Star class="size-5" />
   </Button.Root>
 
-  <Button.Root class="rounded-full bg-icon/90 px-2 py-1 font-semibold transition-opacity duration-150 hover:bg-icon">Load Guild</Button.Root>
+  <Button.Root
+    class="rounded-full bg-icon/90 p-1 transition-opacity duration-150 hover:bg-icon"
+    on:click={async () => {
+      await navigator.share({
+        url: location.href,
+        title: `Stats for ${profile.username} on Hypixel`
+      });
+    }}>
+    <Share class="size-5" />
+  </Button.Root>
 
-  <Button.Root href={`https://plancke.io/hypixel/player/stats/${profile.username}`} class="flex items-center justify-center gap-1.5 rounded-full bg-icon/90 px-2 py-1 font-semibold transition-opacity duration-150 hover:bg-icon">
-    Planke <ExternalLink class="size-4" />
+  <Button.Root href={`https://plancke.io/hypixel/player/stats/${profile.username}`} target="_blank" class="flex items-center justify-center gap-1.5 rounded-full bg-icon/90 px-2 py-1 font-semibold transition-opacity duration-150 hover:bg-icon">
+    Plancke <ExternalLink class="size-4" />
   </Button.Root>
 
+  <Button.Root href={`https://elitebot.dev/@${profile.username}/${profile.profile_cute_name}`} target="_blank" class="flex items-center justify-center gap-1.5 rounded-full bg-icon/90 px-2 py-1 font-semibold transition-opacity duration-150 hover:bg-icon">
+    Elite <ExternalLink class="size-4" />
+  </Button.Root>
+
+  <Button.Root class="flex items-center justify-center gap-1.5 rounded-full bg-icon/90 px-2 py-1 font-semibold transition-opacity duration-150 hover:bg-icon" on:click={() => navigator.clipboard.writeText(profile.uuid)}>Copy UUID</Button.Root>
+  {#each Object.entries(profile.social) as [key, value]}
+    {key}
+    {value}
+  {/each}
+  {#each Object.entries(profile.social) as [key, value]}
+    {#if key === "discord"}
+      <Button.Root class="flex items-center justify-center gap-1.5 rounded-full bg-icon/90 px-2 py-1 font-semibold transition-opacity duration-150 hover:bg-icon" on:click={() => navigator.clipboard.writeText(value)}>
+        <Avatar.Root>
+          <Avatar.Image src="/img/icons/{iconMapper[key.toLowerCase()]}" alt="{profile.username}'s Discord" class="size-4 text-white" />
+          <Avatar.Fallback>
+            {profile.username.slice(0, 2)}
+          </Avatar.Fallback>
+        </Avatar.Root>
+        {key}
+      </Button.Root>
+    {:else}
+      <Button.Root href={value} target="_blank" class="flex items-center justify-center gap-1.5 rounded-full bg-icon/90 px-2 py-1 font-semibold transition-opacity duration-150 hover:bg-icon">
+        <Avatar.Root>
+          <Avatar.Image src="/img/icons/{iconMapper[key.toLowerCase()]}" alt="{profile.username}'s Discord" class="size-4 text-white" />
+          <Avatar.Fallback>
+            {profile.username.slice(0, 2)}
+          </Avatar.Fallback>
+        </Avatar.Root>
+      </Button.Root>
+    {/if}
+  {/each}
+
   <Button.Root class="rounded-full bg-icon/90 p-1 transition-opacity duration-150 hover:bg-icon">
     <ChevronRight class="size-5" />
   </Button.Root>