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.
This commit is contained in:
simoleo89
2026-06-06 20:06:43 +02:00
parent 110363ab1c
commit 5cd470c980
2 changed files with 19 additions and 27 deletions
+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 {