From 113769643a22268d3f0a295ea219e66bda6d1516 Mon Sep 17 00:00:00 2001
From: Raymond <101374892+raymonable@users.noreply.github.com>
Date: Wed, 26 Feb 2025 19:46:59 -0500
Subject: [PATCH] feat: add additional information on user home

adds display name (if available), moves game name (if display name is visible) and shows username (if available)
---
 AquaNet/src/pages/UserHome.svelte | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/AquaNet/src/pages/UserHome.svelte b/AquaNet/src/pages/UserHome.svelte
index 49c4d9c2..5816ba82 100644
--- a/AquaNet/src/pages/UserHome.svelte
+++ b/AquaNet/src/pages/UserHome.svelte
@@ -122,9 +122,22 @@
       <img use:pfp={d.user.aquaUser} alt="" class="pfp" on:error={pfpNotFound}>
       <div class="name-box">
         <div class="name-left">
-          <h2>{d.user.name}</h2>
+          
           {#if d.user.aquaUser}
+            {#if d.user.aquaUser.displayName}
+              <h2>{d.user.aquaUser?.displayName}</h2>
+            {:else}
+              <h2>{d.user.name}</h2>
+            {/if}
+            <div class="game-name">
+              {#if d.user.aquaUser.displayName}
+                {d.user.name}
+              {/if}
+              (@{d.user.aquaUser.username})
+            </div>
             <div class="country">{countryCodeToEmoji(d.user.aquaUser?.country)}</div>
+          {:else}
+            <h2>{d.user.name}</h2>
           {/if}
         </div>
         {#if typeof d.user.rival === 'boolean' && game === 'mai2'}
@@ -378,6 +391,16 @@
       .name-left
         display: flex
         gap: 1em
+        position: relative
+
+        .game-name
+          position: absolute
+          left: 0.5em
+          bottom: 0
+          transform: translate(0, 75%)
+          opacity: 50%
+          white-space: nowrap
+          max-width: 50%
 
   .pfp
     width: 100px