showing xp gain

frontend/src/styles/nav.scss

@@ -65,6 +65,15 @@
           background: var(--main-color);
           border-radius: var(--roundness);
         }
+        .xpGain {
+          position: absolute;
+          left: 100%;
+          margin-left: 0.5rem;
+          top: 0;
+          transform: translateY(-50%);
+          font-size: 0.75rem;
+          color: var(--main-color);
+        }
       }
     }
   }

frontend/src/ts/elements/account-button.ts

@@ -81,6 +81,8 @@ export async function updateXpBar(
 
   $("#menu .xpBar").stop(true, true).css("opacity", 0);
 
+  $("#menu .xpBar .xpGain").text(`+${addedXp}`);
+
   await Misc.promiseAnimation(
     $("#menu .xpBar"),
     {
@@ -169,7 +171,9 @@ export async function updateXpBar(
     $("#menu .xpBar")
       .stop(true, true)
       .css("opacity", 1)
-      .animate({ opacity: 0 }, 250);
+      .animate({ opacity: 0 }, 250, () => {
+        $("#menu .xpBar .xpGain").text(``);
+      });
   }, 1000);
 }
 

frontend/static/html/top.html

@@ -115,6 +115,7 @@
         <div class="level">1</div>
         <div class="xpBar">
           <div class="bar"></div>
+          <div class="xpGain"></div>
         </div>
       </div>
     </a>