duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #206 from simoleo89/feat/badge-leaderboard-local-avatars

Browse Source 
feat(badge-leaderboard): render avatar heads with the local renderer
This commit is contained in:
DuckieTM
2026-06-07 08:20:29 +02:00
committed by GitHub
parent 3678928763 5cd470c980
commit 0d2c170998
2 changed files with 19 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/badge-leaderboard/BadgeLeaderboardView.tsx
+2 -8
View File
@@ -1,7 +1,7 @@
import { AddLinkEventTracker, GetSessionDataManager, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
import { CSSProperties, FC, useEffect, useMemo, useState } from 'react';
import { BadgeLeaderboardBoard, BadgeLeaderboardEntry, BadgeRarityKey, fetchBadgeLeaderboard, getCachedBadgeLeaderboard, LocalizeText } from '../../api';
import { Column, DraggableWindow, DraggableWindowPosition, Flex, Text } from '../../common';
import { Column, DraggableWindow, DraggableWindowPosition, Flex, LayoutAvatarImageView, Text } from '../../common';
import {
badgeEmblemAchievement,
badgeEmblemCommon,
@@ -40,12 +40,6 @@ const RARITY_ASSETS: Record<BadgeRarityKey, { frame: string; emblem: string }> =
const RARITY_ORDER: BadgeRarityKey[] = [ 'common', 'rare', 'epic', 'legendary', 'mythical', 'unique' ];
const PAGE_SIZE = 10;
const getAvatarHeadUrl = (figure: string): string =>
{
if(!figure) return '';
return `https://www.habbo.com/habbo-imaging/avatarimage?figure=${ encodeURIComponent(figure) }&direction=2&head_direction=2&gesture=sml&size=m&headonly=1`;
};
export const BadgeLeaderboardView: FC<{}> = props =>
{
@@ -310,7 +304,7 @@ const LeaderboardRow: FC<LeaderboardRowProps> = props =>
<div className={ `nitro-badge-leaderboard__row ${ isCurrentUser ? 'is-current-user' : '' } ${ ((rowIndex % 2) === 0) ? 'is-even' : 'is-odd' }` }>
<div className={ `nitro-badge-leaderboard__rank ${ rankClassName }` }>{ entry.rank }</div>
<div className="nitro-badge-leaderboard__avatar">
<img className="nitro-badge-leaderboard__avatar-image" src={ getAvatarHeadUrl(entry.figure) } alt="" loading="lazy" />
<LayoutAvatarImageView figure={ entry.figure } headOnly direction={ 2 } />
</div>
<Text className="nitro-badge-leaderboard__username" bold>{ entry.username }</Text>
<Text className="nitro-badge-leaderboard__score" bold>{ entry.score }</Text>
src/css/badges/BadgeLeaderboardView.css
+17 -19
View File
@@ -258,30 +258,28 @@
}
.nitro-badge-leaderboard__avatar {
width: 54px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
position: relative;
width: 40px;
height: 40px;
overflow: hidden;
margin: 0 auto;
align-self: center;
}
.nitro-badge-leaderboard__avatar .avatar-image,
.nitro-badge-leaderboard__avatar-image {
display: block;
width: auto !important;
height: auto !important;
max-width: 54px;
max-height: 62px;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
margin: 0 auto;
/* The renderer-backed LayoutAvatarImageView (headOnly) draws the avatar head as
an absolutely-positioned background div (`.avatar-image`), not an <img>. Frame
it the same way the friends list does, scaled up for the larger row. */
.nitro-badge-leaderboard__avatar .avatar-image {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
background-repeat: no-repeat;
background-size: 82px auto !important;
background-position: -20px -24px !important;
transform: none !important;
image-rendering: pixelated;
object-fit: contain;
}
.nitro-badge-leaderboard__username {