From d3adec5a23925f98d113ba0658b2caba415fa478 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Mon, 22 Apr 2024 10:30:34 -0400
Subject: [PATCH] [+] Leaderboard hover

---
 AquaNet/src/pages/Ranking.svelte  | 12 ++++++++++--
 AquaNet/src/pages/UserHome.svelte |  2 --
 AquaNet/src/vars.sass             |  1 +
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/AquaNet/src/pages/Ranking.svelte b/AquaNet/src/pages/Ranking.svelte
index fa0ff6dd..417b5dc2 100644
--- a/AquaNet/src/pages/Ranking.svelte
+++ b/AquaNet/src/pages/Ranking.svelte
@@ -6,6 +6,8 @@
   import type { GameName } from "../libs/scoring";
   import { GAME_TITLE } from "../libs/i18n";
   import { t } from "../libs/i18n";
+  import UserCard from "../components/UserCard.svelte";
+  import Tooltip from "../components/Tooltip.svelte";
 
   export let game: GameName = 'mai2';
 
@@ -19,6 +21,8 @@
       d = { users };
     })
     .catch((e) => error = e.message);
+
+  let hoveringUser = "";
 </script>
 
 <main class="content leaderboard">
@@ -33,7 +37,7 @@
 
   {#if d}
     <div class="leaderboard-container">
-      <div class="lb-user">
+      <div class="lb-user" on:mouseenter={() => hoveringUser = d.users[0].username}>
         <span class="rank">{t("Leaderboard.Rank")}</span>
         <span class="name"></span>
         <span class="rating">{t("Leaderboard.Rating")}</span>
@@ -42,7 +46,7 @@
         <span class="ap">{t("Leaderboard.AP")}</span>
       </div>
       {#each d.users as user, i (user.rank)}
-        <div class="lb-user" class:alternate={i % 2 === 1}>
+        <div class="lb-user" class:alternate={i % 2 === 1} on:mouseover={() => hoveringUser = user.username}>
           <span class="rank">#{user.rank}</span>
           <span class="name">
             {#if user.username !== ""}
@@ -58,6 +62,10 @@
         </div>
       {/each}
     </div>
+
+    <Tooltip triggeredBy=".name">
+      <UserCard username={hoveringUser} {game} />
+    </Tooltip>
   {/if}
 
   <StatusOverlays error={error} loading={!d} />
diff --git a/AquaNet/src/pages/UserHome.svelte b/AquaNet/src/pages/UserHome.svelte
index 166da993..26672453 100644
--- a/AquaNet/src/pages/UserHome.svelte
+++ b/AquaNet/src/pages/UserHome.svelte
@@ -294,8 +294,6 @@
 <style lang="sass">
 @import "../vars"
 
-$gap: 20px
-
 #user-home
   .user-pfp
     display: flex
diff --git a/AquaNet/src/vars.sass b/AquaNet/src/vars.sass
index 0e34c50f..26a2c793 100644
--- a/AquaNet/src/vars.sass
+++ b/AquaNet/src/vars.sass
@@ -19,5 +19,6 @@ $w-max: 900px
 $grad-special: linear-gradient(90deg, #ffee94, #ffb798, #ffa3e5, #ebff94)
 
 $border-radius: 12px
+$gap: 20px
 
 $transition: all 0.25s