Add friend avatars

src/client/beatleader.ts

@@ -166,6 +166,32 @@ export async function fetchMutualFriendIds(playerId: string, maxPages = 100): Pr
 	return fetchFriendIds(playerId, "mutual", maxPages);
 }
 
+function normalizeFollowerEntry(entry: BeatLeaderFollower): BeatLeaderFollower {
+	return {
+		...entry,
+		id: String(entry.id),
+	};
+}
+
+/** Friend list for the given mode, with `avatar` / `name` from BeatLeader follower payloads. */
+export async function fetchFriends(playerId: string, mode: FriendMode, maxPages = 100): Promise<BeatLeaderFollower[]> {
+	const canonicalPlayerId = await resolveBeatLeaderPlayerId(playerId);
+	const [following, followers] = await Promise.all([
+		fetchAllFollowers(canonicalPlayerId, "Following", maxPages),
+		fetchAllFollowers(canonicalPlayerId, "Followers", maxPages),
+	]);
+	const followingIds = new Set(following.map((entry) => String(entry.id)));
+	if (mode === "following") {
+		return following.map((entry) => normalizeFollowerEntry(entry as BeatLeaderFollower));
+	}
+	if (mode === "followers") {
+		return followers.map((entry) => normalizeFollowerEntry(entry as BeatLeaderFollower));
+	}
+	return followers
+		.filter((entry) => followingIds.has(String(entry.id)))
+		.map((entry) => normalizeFollowerEntry(entry as BeatLeaderFollower));
+}
+
 export async function fetchFriendIds(playerId: string, mode: FriendMode, maxPages = 100): Promise<Set<string>> {
 	const canonicalPlayerId = await resolveBeatLeaderPlayerId(playerId);
 	const [following, followers] = await Promise.all([
@@ -186,18 +212,7 @@ export async function fetchFriendIds(playerId: string, mode: FriendMode, maxPage
 }
 
 export async function fetchMutualFriends(playerId: string, maxPages = 100): Promise<BeatLeaderFollower[]> {
-	const canonicalPlayerId = await resolveBeatLeaderPlayerId(playerId);
-	const [following, followers] = await Promise.all([
-		fetchAllFollowers(canonicalPlayerId, "Following", maxPages),
-		fetchAllFollowers(canonicalPlayerId, "Followers", maxPages),
-	]);
-	const followingIds = new Set(following.map((entry) => String(entry.id)));
-	return followers
-		.filter((entry) => followingIds.has(String(entry.id)))
-		.map((entry) => ({
-			...entry,
-			id: String(entry.id),
-		}));
+	return fetchFriends(playerId, "mutual", maxPages);
 }
 
 export function normalizeAccuracy(value: number | null | undefined): number | null {

src/client/index.ts

@@ -1,4 +1,5 @@
 import type {
+	BeatLeaderScore,
 	BeatSaberPlusEvent,
 	ChatRequestEntry,
 	ChatRequestPayload,
@@ -9,7 +10,7 @@ import { fetchBeatSaverMapById, fetchBeatSaverMeta } from "./beatsaver.ts";
 import {
 	fetchAllMapScoresByHash,
 	fetchBLLeaderboardsByHash,
-	fetchFriendIds,
+	fetchFriends,
 	type FriendMode,
 	normalizeAccuracy,
 } from "./beatleader.ts";
@@ -190,6 +191,14 @@ function updateScore(score: Score) {
 	accuracy.classList.toggle("failed", score.currentHealth === 0);
 }
 
+function avatarFromScore(score: BeatLeaderScore): string | null {
+	if (typeof score.player === "object" && score.player?.avatar) {
+		return score.player.avatar;
+	}
+	const url = score.playerAvatar?.trim();
+	return url || null;
+}
+
 function clearFriendScores(message: string) {
 	friendScoresList.replaceChildren();
 	friendScoresEmpty.textContent = message;
@@ -198,7 +207,7 @@ function clearFriendScores(message: string) {
 	friendScoresPanel.classList.remove("has-items", "is-loading");
 }
 
-function renderFriendScores(items: Array<{ name: string; acc: number }>) {
+function renderFriendScores(items: Array<{ name: string; acc: number; avatar: string | null }>) {
 	friendScoresList.replaceChildren();
 	friendScoresPanel.classList.toggle("has-items", items.length > 0);
 	friendScoresPanel.classList.remove("is-loading");
@@ -208,13 +217,19 @@ function renderFriendScores(items: Array<{ name: string; acc: number }>) {
 	for (const item of items) {
 		const li = document.createElement("li");
 		li.className = "friend-score-item";
+		const avatar = document.createElement("img");
+		avatar.className = "friend-avatar";
+		avatar.alt = "";
+		avatar.decoding = "async";
+		avatar.loading = "lazy";
+		avatar.src = item.avatar?.trim() || "images/unknown.svg";
 		const name = document.createElement("span");
 		name.className = "friend-name";
 		name.textContent = item.name;
 		const acc = document.createElement("span");
 		acc.className = "friend-acc";
 		acc.textContent = `${item.acc.toFixed(2)}%`;
-		li.append(name, acc);
+		li.append(acc, avatar, name);
 		friendScoresList.appendChild(li);
 	}
 }
@@ -238,15 +253,17 @@ async function refreshMapFriendScores() {
 	friendScoresEmpty.textContent = "Loading mutual friend scores...";
 	const requestId = ++friendScoreRequestId;
 	try {
-		const [leaderboards, mutualFriendIds] = await Promise.all([
+		const [leaderboards, friends] = await Promise.all([
 			fetchBLLeaderboardsByHash(hash),
-			fetchFriendIds(playerId, settings.friendMode),
+			fetchFriends(playerId, settings.friendMode),
 		]);
 		if (requestId !== friendScoreRequestId) return;
 		if (leaderboards.length === 0) {
 			clearFriendScores("No BeatLeader leaderboards found");
 			return;
 		}
+		const friendById = new Map(friends.map((f) => [f.id, f]));
+		const mutualFriendIds = new Set(friends.map((f) => f.id));
 		if (mutualFriendIds.size === 0) {
 			const relationLabel = settings.friendMode === "following"
 				? "No followed BeatLeader players"
@@ -258,21 +275,25 @@ async function refreshMapFriendScores() {
 		}
 		const scores = await fetchAllMapScoresByHash(hash, leaderboards);
 		if (requestId !== friendScoreRequestId) return;
-		const bestByPlayer = new Map<string, { name: string; acc: number }>();
+		const bestByPlayer = new Map<string, { name: string; acc: number; avatar: string | null }>();
 		for (const score of scores) {
-			const playerId = score.playerId ?? (typeof score.player === "object" ? score.player?.id : null);
-			const playerKey = playerId == null ? "" : String(playerId);
+			const scorePlayerId = score.playerId ?? (typeof score.player === "object" ? score.player?.id : null);
+			const playerKey = scorePlayerId == null ? "" : String(scorePlayerId);
 			if (!playerKey || !mutualFriendIds.has(playerKey)) continue;
 			const acc = normalizeAccuracy(score.accuracy ?? score.acc);
 			if (acc === null) continue;
 			const existing = bestByPlayer.get(playerKey);
 			if (!existing || acc > existing.acc) {
+				const friendMeta = friendById.get(playerKey);
 				const playerName =
 					score.playerName ||
 					(typeof score.player === "object" ? score.player?.name : typeof score.player === "string" ? score.player : null);
+				const fromScore = avatarFromScore(score);
+				const fromFriend = friendMeta?.avatar?.trim() || null;
 				bestByPlayer.set(playerKey, {
-					name: playerName || playerKey,
+					name: playerName || friendMeta?.name || playerKey,
 					acc,
+					avatar: fromScore ?? fromFriend,
 				});
 			}
 		}

src/client/types.ts

@@ -114,6 +114,7 @@ export interface BeatLeaderScore {
 	modifiedScore?: number | null;
 	playerId?: string | number | null;
 	playerName?: string | null;
+	playerAvatar?: string | null;
 	player?: BeatLeaderPlayer | string | null;
 }