Cookies_Public/AquaDX
4
0
Fork 1
mirror of https://github.com/MewoLab/AquaDX.git synced 2025-10-25 20:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

[+] Leaderboard hover

Browse Source
This commit is contained in:
Azalea 2024-04-22 10:30:34 -04:00
parent 1fd030f909
commit d3adec5a23
3 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
AquaNet/src/pages/Ranking.svelte
View File

@ -6,6 +6,8 @@
import type { GameName } from "../libs/scoring"; import type { GameName } from "../libs/scoring";
import { GAME_TITLE } from "../libs/i18n"; import { GAME_TITLE } from "../libs/i18n";
import { t } 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'; export let game: GameName = 'mai2';
@ -19,6 +21,8 @@
d = { users }; d = { users };
}) })
.catch((e) => error = e.message); .catch((e) => error = e.message);
let hoveringUser = "";
</script> </script>
<main class="content leaderboard"> <main class="content leaderboard">
@ -33,7 +37,7 @@
{#if d} {#if d}
<div class="leaderboard-container"> <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="rank">{t("Leaderboard.Rank")}</span>
<span class="name"></span> <span class="name"></span>
<span class="rating">{t("Leaderboard.Rating")}</span> <span class="rating">{t("Leaderboard.Rating")}</span>
@ -42,7 +46,7 @@
<span class="ap">{t("Leaderboard.AP")}</span> <span class="ap">{t("Leaderboard.AP")}</span>
</div> </div>
{#each d.users as user, i (user.rank)} {#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="rank">#{user.rank}</span>
<span class="name"> <span class="name">
{#if user.username !== ""} {#if user.username !== ""}
@ -58,6 +62,10 @@
</div> </div>
{/each} {/each}
</div> </div>
<Tooltip triggeredBy=".name">
<UserCard username={hoveringUser} {game} />
</Tooltip>
{/if} {/if}
<StatusOverlays error={error} loading={!d} /> <StatusOverlays error={error} loading={!d} />

2
AquaNet/src/pages/UserHome.svelte
View File

@ -294,8 +294,6 @@
<style lang="sass"> <style lang="sass">
@import "../vars" @import "../vars"
$gap: 20px
#user-home #user-home
.user-pfp .user-pfp
display: flex display: flex

1
AquaNet/src/vars.sass
View File

@ -19,5 +19,6 @@ $w-max: 900px
$grad-special: linear-gradient(90deg, #ffee94, #ffb798, #ffa3e5, #ebff94) $grad-special: linear-gradient(90deg, #ffee94, #ffb798, #ffa3e5, #ebff94)
$border-radius: 12px $border-radius: 12px
$gap: 20px
$transition: all 0.25s $transition: all 0.25s