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 { AddLinkEventTracker, GetSessionDataManager, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
import { CSSProperties, FC, useEffect, useMemo, useState } from 'react'; import { CSSProperties, FC, useEffect, useMemo, useState } from 'react';
import { BadgeLeaderboardBoard, BadgeLeaderboardEntry, BadgeRarityKey, fetchBadgeLeaderboard, getCachedBadgeLeaderboard, LocalizeText } from '../../api'; 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 { import {
badgeEmblemAchievement, badgeEmblemAchievement,
badgeEmblemCommon, 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 RARITY_ORDER: BadgeRarityKey[] = [ 'common', 'rare', 'epic', 'legendary', 'mythical', 'unique' ];
const PAGE_SIZE = 10; 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 => 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__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__rank ${ rankClassName }` }>{ entry.rank }</div>
<div className="nitro-badge-leaderboard__avatar"> <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> </div>
<Text className="nitro-badge-leaderboard__username" bold>{ entry.username }</Text> <Text className="nitro-badge-leaderboard__username" bold>{ entry.username }</Text>
<Text className="nitro-badge-leaderboard__score" bold>{ entry.score }</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 { .nitro-badge-leaderboard__avatar {
width: 54px; position: relative;
height: 36px; width: 40px;
display: flex; height: 40px;
align-items: center; overflow: hidden;
justify-content: center;
overflow: visible;
margin: 0 auto; margin: 0 auto;
align-self: center; align-self: center;
} }
.nitro-badge-leaderboard__avatar .avatar-image, /* The renderer-backed LayoutAvatarImageView (headOnly) draws the avatar head as
.nitro-badge-leaderboard__avatar-image { an absolutely-positioned background div (`.avatar-image`), not an <img>. Frame
display: block; it the same way the friends list does, scaled up for the larger row. */
width: auto !important; .nitro-badge-leaderboard__avatar .avatar-image {
height: auto !important; position: absolute !important;
max-width: 54px; inset: 0 !important;
max-height: 62px; width: 100% !important;
left: auto !important; height: 100% !important;
right: auto !important; margin: 0 !important;
top: auto !important; background-repeat: no-repeat;
bottom: auto !important; background-size: 82px auto !important;
margin: 0 auto; background-position: -20px -24px !important;
transform: none !important;
image-rendering: pixelated; image-rendering: pixelated;
object-fit: contain;
} }
.nitro-badge-leaderboard__username { .nitro-badge-leaderboard__username {