From 5cd470c980d84ee54b727af684b93b6feff5a7be Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 20:06:43 +0200
Subject: [PATCH] feat(badge-leaderboard): render avatar heads with the local
 renderer

The leaderboard rows pulled each avatar head from habbo.com's imaging
service (`https://www.habbo.com/habbo-imaging/avatarimage?...headonly=1`)
via a plain <img>. The avatar `figure` is already present in the leaderboard
data (served by the CMS `/api/badges/leaderboard` endpoint), so there is no
need for an external request - render it locally instead.

Swap the <img> for the renderer-backed `LayoutAvatarImageView` (headOnly),
which draws the head through `GetAvatarRenderManager().createAvatarImage(...)`.
The head-only render is an absolutely-positioned background div rather than an
<img>, so the avatar CSS is reworked to frame it (relative, overflow-hidden
box with a head crop mirrored from the friends list), and the now-unused
`getAvatarHeadUrl` helper is removed.

Removes the last runtime dependency on habbo.com for this panel; avatars now
come entirely from the local renderer.
---
 .../BadgeLeaderboardView.tsx                  | 10 ++----
 src/css/badges/BadgeLeaderboardView.css       | 36 +++++++++----------
 2 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/src/components/badge-leaderboard/BadgeLeaderboardView.tsx b/src/components/badge-leaderboard/BadgeLeaderboardView.tsx
index 7af23d0..fa31cc3 100644
--- a/src/components/badge-leaderboard/BadgeLeaderboardView.tsx
+++ b/src/components/badge-leaderboard/BadgeLeaderboardView.tsx
@@ -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>
diff --git a/src/css/badges/BadgeLeaderboardView.css b/src/css/badges/BadgeLeaderboardView.css
index 0d87c0e..d3ca100 100644
--- a/src/css/badges/BadgeLeaderboardView.css
+++ b/src/css/badges/BadgeLeaderboardView.css
@@ -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 {