[AB-xxx] adding rank to leaderboard page

changing design of leaderboard page fixing role not having an id
Sheldan · Mar 26, 2024 · 675da8d · 675da8d
1 parent e91bece
commit 675da8d
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 46 deletions.
diff --git a/...acking-impl/src/main/java/dev/sheldan/abstracto/experience/api/LeaderboardController.java b/...acking-impl/src/main/java/dev/sheldan/abstracto/experience/api/LeaderboardController.java
@@ -44,11 +44,12 @@ public Page<UserExperienceDisplay> getLeaderboard(@PathVariable("serverId") Long
                                                     Pageable pageable) {
         AServer server = serverManagementService.loadServer(serverId);
         Guild guild = guildService.getGuildById(serverId);
-        return userExperienceManagementService.loadAllUsersPaginated(server, pageable)
-                .map(userExperience -> convertFromUser(guild, userExperience));
+        Page<AUserExperience> allElements = userExperienceManagementService.loadAllUsersPaginated(server, pageable);
+        return allElements
+                .map(userExperience -> convertFromUser(guild, userExperience, pageable, allElements));
     }
 
-    private UserExperienceDisplay convertFromUser(Guild guild, AUserExperience aUserExperience) {
+    private UserExperienceDisplay convertFromUser(Guild guild, AUserExperience aUserExperience, Pageable pageable, Page<AUserExperience> page) {
         Long userId = aUserExperience.getUser().getUserReference().getId();
         Member member = guild.getMember(UserSnowflake.fromId(userId));
         AExperienceRole experienceRole = aUserExperience.getCurrentExperienceRole();
@@ -70,6 +71,7 @@ private UserExperienceDisplay convertFromUser(Guild guild, AUserExperience aUser
                 .id(userId)
                 .messages(aUserExperience.getMessageCount())
                 .level(aUserExperience.getLevelOrDefault())
+                .rank((int) pageable.getOffset() + page.getContent().indexOf(aUserExperience) + 1)
                 .experience(aUserExperience.getExperience())
                 .role(roleDisplay)
                 .member(userDisplay)

diff --git a/...-impl/src/main/java/dev/sheldan/abstracto/experience/model/api/UserExperienceDisplay.java b/...-impl/src/main/java/dev/sheldan/abstracto/experience/model/api/UserExperienceDisplay.java
@@ -11,6 +11,7 @@
 public class UserExperienceDisplay {
     private UserDisplay member;
     private Long id;
+    private Integer rank;
     private Integer level;
     private Long experience;
     private Long messages;

diff --git a/...n/core/core-int/src/main/java/dev/sheldan/abstracto/core/models/frontend/RoleDisplay.java b/...n/core/core-int/src/main/java/dev/sheldan/abstracto/core/models/frontend/RoleDisplay.java
@@ -18,7 +18,8 @@ public class RoleDisplay {
 
     public static RoleDisplay fromRole(Role role) {
         RoleDisplayBuilder builder = builder()
-                .name(role.getName());
+                .name(role.getName())
+                .id(role.getIdLong());
         Color roleColor = role.getColor();
         if(roleColor != null) {
             builder.r(roleColor.getRed()).

diff --git a/ui/experience-tracking/src/components/ExperienceConfigDisplay.tsx b/ui/experience-tracking/src/components/ExperienceConfigDisplay.tsx
@@ -6,6 +6,7 @@ export const ExperienceConfigDisplay = ({serverId}: { serverId: bigint }) => {
 
     const [roles, setRoles] = useState<ExperienceRole[]>([])
     const [hasError, setError] = useState(false)
+    const [isOpen, setOpen] = useState(false)
     async function loadConfig() {
         try {
             const configResponse = await fetch(`/experience/v1/leaderboards/${serverId}/config`)
@@ -23,37 +24,39 @@ export const ExperienceConfigDisplay = ({serverId}: { serverId: bigint }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     },[])
 
+    function toggleOpen() {
+        setOpen(!isOpen)
+    }
+
     return (
         <>
             {!hasError ?
-                <div className="py-10">
-                    <h2 className="text-4xl font-extrabold leading-none tracking-tight text-white">Role
-                        config</h2>
-                        <table className="w-full text-gray-400">
-                            <thead
-                                className="text-xs uppercase bg-gray-700 text-gray-400">
-                                <tr>
-                                    <th className="px-6 py-3 w-1/2">Role</th>
-                                    <th className="px-6 py-3 w-1/8">Level</th>
-                                </tr>
-                            </thead>
-                            <tbody>
+                <div className="bg-gray-800 p-4 mx-auto w-4/5 rounded-lg">
+                    <button className="w-full flex justify-between items-center p-2 px-4" onClick={toggleOpen}>
+                        <h2 className="text-xl font-extrabold leading-none tracking-tight text-gray-100">Role config</h2>
+                            <div>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className={`w-6 h-6 stroke-white stroke-2 duration-300 ${isOpen ? "rotate-180" : ""}`}>
+                                    <path strokeLinecap="round" strike-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
+                                </svg>
+                            </div>
+                    </button>
+                    <div className={`grid grid-cols-1 ${isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'} overflow-hidden duration-300`}>
+                        <div className="w-full gap-3 min-h-0 overflow-hidden flex flex-col items-start">
                             {roles.map(role =>
-                                <tr key={role.role.id} className="border-b bg-gray-800 border-gray-700">
-                                    <td className="px-6 py-4">
+                                <div key={role.role.id} className="border-gray-700 flex gap-2 p-2 px-4 items-center flex-row-reverse">
+                                    <p>
                                         <RoleDisplay role={role.role}/>
-                                    </td>
-                                    <td className="px-6 py-4 text-center">
+                                    </p>
+                                    <p className="font-bold text-gray-200">
                                         {role.level}
-                                    </td>
-                                </tr>)}
-                            </tbody>
-
-                        </table>
+                                    </p>
+                                </div>)}
+                        </div>
                         {roles.length === 0 ?
                             <div className="w-full flex items-center justify-center">
                                 <span className="text-gray-400">No roles</span>
                             </div> : ''}
+                    </div>
                 </div>
             : ''}
         </>

diff --git a/ui/experience-tracking/src/components/Leaderboard.tsx b/ui/experience-tracking/src/components/Leaderboard.tsx
@@ -51,7 +51,7 @@ export function Leaderboard({serverId}: { serverId: bigint }) {
     function loadMore() {
         loadLeaderboard(pageCount + 1, pageSize)
     }
-    let loadMoreButton = <button className="w-full bg-gray-500 hover:bg-gray-700 text-white" onClick={loadMore}>Load more</button>;
+    let loadMoreButton = <button className="w-full h-10 bg-gray-500 hover:bg-gray-700 text-white mt-4" onClick={loadMore}>Load more</button>;
     return (
         <>
             {!hasError ?
@@ -67,42 +67,42 @@ export function Leaderboard({serverId}: { serverId: bigint }) {
                                 alt="Icon"
                                 className="w-24"/>
                                 : ''}
-                            <h1 className="text-4xl font-extrabold leading-none tracking-tight md:text-5xl lg:text-6xl text-white">{'Leaderboard for ' + guildInfo.name}</h1>
+                            <h1 className="text-4xl font-extrabold leading-none tracking-tight md:text-5xl lg:text-6xl text-white px-5">{guildInfo.name + ' Leaderboard'}</h1>
                         </div>
 
                     </div>
-                    <div className="flex">
-                        <div className="text-sm text-left w-3/4 ">
+                    <div className="flex flex-col">
+                        <div>
+                            <ExperienceConfigDisplay serverId={serverId}/>
+                        </div>
+                        <div className="text-sm text-left w-full mt-4">
                             <table className="w-full text-gray-400">
                                 <thead
                                     className="text-xs uppercase bg-gray-700 text-gray-400">
                                 <tr>
-                                    <th scope="col" className="px-6 py-3 w-1/3">
+                                    <th scope="col" className="px-2 py-3 w-5">
+                                        Rank
+                                    </th>
+                                    <th scope="col" className="px-6 py-3 w-1/2">
                                         Member
                                     </th>
-                                    <th scope="col" className="px-6 py-3 w-1/6 text-center">
+                                    <th scope="col" className="px-6 py-3 w-1/4 text-center">
                                         Experience
                                     </th>
-                                    <th scope="col" className="px-6 py-3 w-1/6 text-center">
+                                    <th scope="col" className="px-6 py-3 w-1/4 text-center">
                                         Messages
                                     </th>
-                                    <th scope="col" className="px-6 py-3 w-1/6 text-center">
+                                    <th scope="col" className="px-6 py-3 w-5 text-center">
                                         Level
                                     </th>
-                                    <th scope="col" className="px-6 py-3 w-1/3 text-center">
-                                        Role
-                                    </th>
                                 </tr>
                                 </thead>
                                 <tbody>
-                                {members.map(member => <LeaderboardEntry key={member.id} member={member}/>)}
+                                {members.map((member, index) => <LeaderboardEntry key={member.id} index={index} member={member}/>)}
                                 </tbody>
                             </table>
                             {hasMore ? loadMoreButton : ''}
                         </div>
-                        <div className="w-1/4 px-3">
-                            <ExperienceConfigDisplay serverId={serverId}/>
-                        </div>
                     </div>
                 </>
                 : <ErrorDisplay/>}

diff --git a/ui/experience-tracking/src/components/LeaderboardEntry.tsx b/ui/experience-tracking/src/components/LeaderboardEntry.tsx
@@ -1,8 +1,7 @@
 import {ExperienceMember} from "../data/leaderboard";
-import {RoleDisplay} from "./RoleDisplay";
 import createStyle from "../utils/styleUtils";
 
-export const LeaderboardEntry = ({member}: { member: ExperienceMember }) => {
+export const LeaderboardEntry = ({member, index}: { member: ExperienceMember, index: number }) => {
     const userHasRole = member.role !== null;
     const memberExists = member.member !== null;
     const nameColor = userHasRole ? createStyle(member.role!) : ''
@@ -13,7 +12,11 @@ export const LeaderboardEntry = ({member}: { member: ExperienceMember }) => {
     </> : <>{member.id}</>;
     return (
         <>
-            <tr className="border-b bg-gray-800 border-gray-700">
+            <tr className={`${index % 2 === 0 ? "bg-gray-800" : "bg-gray-600"}`}>
+                <td
+                    className="text-center">
+                    {member.rank}
+                </td>
                 <td
                     className="px-2 py-4 font-medium whitespace-nowrap text-white flex items-center gap-3">
                     {memberDisplay}
@@ -27,9 +30,6 @@ export const LeaderboardEntry = ({member}: { member: ExperienceMember }) => {
                 <td className="px-6 py-4 text-center">
                     {member.level.toString()}
                 </td>
-                <td className="px-6 py-4 text-center">
-                    {userHasRole ? <RoleDisplay role={member.role!}/> : 'No role'}
-                </td>
             </tr>
 
         </>

diff --git a/ui/experience-tracking/src/data/leaderboard.tsx b/ui/experience-tracking/src/data/leaderboard.tsx
@@ -1,5 +1,6 @@
 export interface ExperienceMember {
     experience: bigint;
+    rank: number;
     id: bigint;
     level: number;
     messages: bigint;