impr(profile): add level percentage when hovering over progress bar (…

…vjgtigers) (#5276)
monkeytypegame · Apr 5, 2024 · e37bf19 · e37bf19
1 parent 2dbd7af
commit e37bf19
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 14 deletions.
diff --git a/frontend/src/html/header.html b/frontend/src/html/header.html
@@ -114,7 +114,7 @@ <h1 class="text">
       <div class="avatar hidden"></div>
       <div class="text"></div>
       <div class="levelAndBar">
-        <div class="level">1</div>
+        <div class="level" data-balloon-pos="up">1</div>
         <div class="xpBar">
           <div class="bar"></div>
           <div class="xpGain"></div>

diff --git a/frontend/src/html/pages/account.html b/frontend/src/html/pages/account.html
@@ -46,7 +46,7 @@
           </div>
           <div class="levelAndBar">
             <div class="level" data-balloon-pos="up">-</div>
-            <div class="xpBar">
+            <div class="xpBar" data-balloon-pos="up">
               <div class="bar" style="width: 0%"></div>
             </div>
             <div class="xp" data-balloon-pos="up">-/-</div>

diff --git a/frontend/src/html/pages/profile.html b/frontend/src/html/pages/profile.html
@@ -38,7 +38,7 @@
           </div>
           <div class="levelAndBar">
             <div class="level" data-balloon-pos="up">-</div>
-            <div class="xpBar">
+            <div class="xpBar" data-balloon-pos="up">
               <div class="bar" style="width: 0%"></div>
             </div>
             <div class="xp" data-balloon-pos="up">-/-</div>

diff --git a/frontend/src/styles/profile.scss b/frontend/src/styles/profile.scss
@@ -414,10 +414,14 @@
         grid-template-columns: auto 1fr auto;
         gap: 1rem;
         align-items: center;
+        .level,
+        .xp {
+          line-height: 0;
+        }
         .xpBar {
-          pointer-events: none;
+          pointer-events: auto;
           height: 0.5rem;
-          bottom: -0.25rem;
+          bottom: 0rem;
           width: 100%;
           left: 0;
           background: var(--bg-color);

diff --git a/frontend/src/ts/elements/profile.ts b/frontend/src/ts/elements/profile.ts
@@ -305,19 +305,19 @@ export async function update(
       `${Numbers.abbreviateNumber(xpToDisplay)}/${Numbers.abbreviateNumber(
         xpForLevel
       )}`
-    );
-  details
-    .find(".xpBar .bar")
-    .css("width", `${(xpToDisplay / xpForLevel) * 100}%`);
-  details
-    .find(".xp")
+    )
     .attr(
       "aria-label",
       `${Numbers.abbreviateNumber(
         xpForLevel - xpToDisplay
       )} xp until next level`
     );
-
+  details
+    .find(".xpBar .bar")
+    .css("width", `${(xpToDisplay / xpForLevel) * 100}%`);
+  details
+    .find(".xpBar")
+    .attr("aria-label", `${((xpToDisplay / xpForLevel) * 100).toFixed(2)}%`);
   //lbs
 
   if (banned) {

diff --git a/frontend/src/ts/pages/profile.ts b/frontend/src/ts/pages/profile.ts
@@ -29,8 +29,8 @@ function reset(): void {
 	          <div class="streak" data-balloon-pos="up">-</div>
           </div>
           <div class="levelAndBar">
-            <div class="level">-</div>
-            <div class="xpBar">
+            <div class="level" data-balloon-pos="up">-</div>
+            <div class="xpBar" data-balloon-pos="up">
               <div class="bar" style="width: 0%;"></div>
             </div>
             <div class="xp" data-balloon-pos="up">-/-</div>