[AB-xxx] displaying more information on the external leaderboard

abstracto-application/abstracto-modules/experience-tracking/experience-tracking-impl/src/main/java/dev/sheldan/abstracto/experience/api/LeaderboardController.java

@@ -8,6 +8,7 @@ import dev.sheldan.abstracto.core.service.management.ServerManagementService;
 import dev.sheldan.abstracto.experience.model.api.UserExperienceDisplay;
 import dev.sheldan.abstracto.experience.model.database.AExperienceRole;
 import dev.sheldan.abstracto.experience.model.database.AUserExperience;
+import dev.sheldan.abstracto.experience.service.ExperienceLevelService;
 import dev.sheldan.abstracto.experience.service.management.UserExperienceManagementService;
 import net.dv8tion.jda.api.entities.Guild;
 import net.dv8tion.jda.api.entities.Member;
@@ -37,6 +38,9 @@ public class LeaderboardController {
     @Autowired
     private GuildService guildService;
 
+    @Autowired
+    private ExperienceLevelService experienceLevelService;
+
     @GetMapping(value = "/leaderboards/{serverId}", produces = "application/json")
     public Page<UserExperienceDisplay> getLeaderboard(@PathVariable("serverId") Long serverId,
                                                       @PageableDefault(value = 25, page = 0)
@@ -55,6 +59,8 @@ public class LeaderboardController {
         AExperienceRole experienceRole = aUserExperience.getCurrentExperienceRole();
         UserDisplay userDisplay = null;
         RoleDisplay roleDisplay = null;
+        Long experienceNeededToNextLevel = experienceLevelService.calculateExperienceToNextLevel(aUserExperience.getCurrentLevel().getLevel(), aUserExperience.getExperience());
+        Long nextLevelExperience = experienceLevelService.calculateNextLevel(aUserExperience.getCurrentLevel().getLevel()).getExperienceNeeded();
         if(experienceRole != null) {
             Role role = guild.getRoleById(experienceRole.getRole().getId());
             if(role != null) {
@@ -66,6 +72,9 @@ public class LeaderboardController {
         if(member != null) {
             userDisplay = UserDisplay.fromMember(member);
         }
+        Long currentExpNeeded = aUserExperience.getCurrentLevel().getExperienceNeeded();
+        Long experienceWithinLevel = aUserExperience.getExperience() - currentExpNeeded;
+        Long experienceNeededForCurrentLevel = nextLevelExperience - currentExpNeeded;
         return UserExperienceDisplay
                 .builder()
                 .id(String.valueOf(userId))
@@ -73,6 +82,11 @@ public class LeaderboardController {
                 .level(aUserExperience.getLevelOrDefault())
                 .rank((int) pageable.getOffset() + page.getContent().indexOf(aUserExperience) + 1)
                 .experience(aUserExperience.getExperience())
+                .experienceToNextLevel(experienceNeededToNextLevel)
+                .currentLevelExperienceNeeded(experienceNeededForCurrentLevel)
+                .experienceOnCurrentLevel(experienceWithinLevel)
+                .percentage(((float) experienceWithinLevel / experienceNeededForCurrentLevel) * 100)
+                .nextLevelExperienceNeeded(nextLevelExperience)
                 .role(roleDisplay)
                 .member(userDisplay)
                 .build();

abstracto-application/abstracto-modules/experience-tracking/experience-tracking-impl/src/main/java/dev/sheldan/abstracto/experience/command/Rank.java

@@ -107,13 +107,13 @@ public class Rank extends AbstractConditionableCommand {
         Long currentExpNeeded = experienceObj.getCurrentLevel().getExperienceNeeded();
         Long experienceNeededToNextLevel = experienceLevelService.calculateExperienceToNextLevel(experienceObj.getCurrentLevel().getLevel(), experienceObj.getExperience());
         Long nextLevelExperience = experienceLevelService.calculateNextLevel(experienceObj.getCurrentLevel().getLevel()).getExperienceNeeded();
-        Long levelExperience = nextLevelExperience - currentExpNeeded;
+        Long experienceNeededForCurrentLevel = nextLevelExperience - currentExpNeeded;
-        Long inLevelExperience = experienceObj.getExperience() - currentExpNeeded;
+        Long experienceWithinLevel = experienceObj.getExperience() - currentExpNeeded;
         rankModel.setExperienceForCurrentLevel(currentExpNeeded);
-        rankModel.setCurrentLevelPercentage(((float) inLevelExperience / levelExperience) * 100);
+        rankModel.setCurrentLevelPercentage(((float) experienceWithinLevel / experienceNeededForCurrentLevel) * 100);
-        rankModel.setLevelExperience(levelExperience);
+        rankModel.setLevelExperience(experienceNeededForCurrentLevel);
         rankModel.setExperienceToNextLevel(experienceNeededToNextLevel);
-        rankModel.setInLevelExperience(inLevelExperience);
+        rankModel.setInLevelExperience(experienceWithinLevel);
         rankModel.setNextLevelExperience(nextLevelExperience);
         return templateService.renderEmbedTemplate(RANK_POST_EMBED_TEMPLATE, rankModel, toRender.getGuild().getIdLong());
     }

abstracto-application/abstracto-modules/experience-tracking/experience-tracking-impl/src/main/java/dev/sheldan/abstracto/experience/model/api/UserExperienceDisplay.java

@@ -16,4 +16,9 @@ public class UserExperienceDisplay {
     private Long experience;
     private Long messages;
     private RoleDisplay role;
+    private Long experienceToNextLevel;
+    private Long experienceOnCurrentLevel;
+    private Long currentLevelExperienceNeeded;
+    private Float percentage;
+    private Long nextLevelExperienceNeeded;
 }

ui/experience-tracking/src/components/LeaderboardEntry.tsx

@@ -13,9 +13,32 @@ export const LeaderboardEntry = ({member, index}: { member: ExperienceMember, in
         <span className="inline-flex items-center h-16">
             {member.id.toString()}
         </span>;
+
+    function getDisplayPercentage() {
+        let increased = member.percentage * 100;
+        if(increased % 100 == 0) {
+            return Math.trunc(increased / 100)
+        } else {
+            return Math.trunc(increased) / 100;
+        }
+    }
+
+    function getPercentageDisplay() {
+        return `${member.experienceOnCurrentLevel.toLocaleString()}/${member.currentLevelExperienceNeeded.toLocaleString()} (${getDisplayPercentage()}%)`
+    }
+
+    let memberDetail = <tr>
+        <td colSpan={5}>
+            <div className={`bg-slate-700`}>
+                <div className={`${index % 2 === 0 ? "bg-gray-600" : "bg-gray-800"} text-center`} style={{width: getDisplayPercentage() + '%'}}>
+                    <span style={{color: nameColor, whiteSpace: "nowrap"}}>{getPercentageDisplay()}</span>
+                </div>
+            </div>
+        </td>
+    </tr>;
     return (
         <>
-            <tr className={`${index % 2 === 0 ? "bg-gray-600" : "bg-gray-800"} h-full`} style={{ minHeight: 64}}>
+            <tr className={`${index % 2 === 0 ? "bg-gray-600" : "bg-gray-800"} h-full`} style={{minHeight: 64}}>
                 <td
                     className="text-center">
                     {member.rank}
@@ -23,16 +46,17 @@ export const LeaderboardEntry = ({member, index}: { member: ExperienceMember, in
                 <td className="px-2 py-3 font-medium whitespace-nowrap text-white flex items-center gap-2">
                     {memberDisplay}
                 </td>
-                <td className="px-1 py-3 text-center">
+                <td className="px-1 py-3 text-center" style={{color: nameColor}}>
                     {member.experience.toLocaleString()}
                 </td>
-                <td className="px-1 py-3 text-center">
+                <td className="px-1 py-3 text-center" style={{color: nameColor}}>
                     {member.messages.toLocaleString()}
                 </td>
-                <td className="px-2 py-3 text-center">
+                <td className="px-2 py-3 text-center" style={{color: nameColor}}>
                     {member.level.toString()}
                 </td>
             </tr>
+                {memberDetail}
 
         </>
     );

ui/experience-tracking/src/data/leaderboard.tsx

@@ -6,6 +6,11 @@ export interface ExperienceMember {
     messages: bigint;
     member: Member | null;
     role: Role | null;
+    experienceToNextLevel: number;
+    experienceOnCurrentLevel: number;
+    percentage: number;
+    nextLevelExperienceNeeded: number;
+    currentLevelExperienceNeeded: number;
 }
 
 export interface Member {