Sheldan/abstracto
1
0
Fork 0
mirror of https://github.com/Sheldan/abstracto.git synced 2026-01-03 16:27:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sheldan
2024-11-05 22:57:51 +01:00
parent d5bf70f586
commit 879c1b0173
5 changed files with 57 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
ui/experience-tracking/src/components/LeaderboardEntry.tsx
View File

@@ -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}
</>
);

5
ui/experience-tracking/src/data/leaderboard.tsx
View File

@@ -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 {