feat: optimized highlighted players

This commit is contained in:
TrèsAbhi committed 2023-11-11 20:59:48 -06:00
1 parent 4b6de934a5
commit 7e4f195f94
1 file changed
+36 -21
+36 -21
View File
@@ -78,9 +78,9 @@ export default function Page() {
const [loadingProgress, setLoadingProgress] = useState< const [loadingProgress, setLoadingProgress] = useState<
[number, number] | null [number, number] | null
>(null); >(null);
const [highlightedPlayerId, setHighlightedPlayerId] = useState<number | null>( const [highlightedPlayer, setHighlightedPlayer] = useState<
null, { type: 'id'; id: number } | { type: 'position'; position: number } | null
); >(null);
const { data: ratingsInfo } = useSWR( const { data: ratingsInfo } = useSWR(
`ratings-info-${region}-${season}`, `ratings-info-${region}-${season}`,
@@ -311,9 +311,7 @@ export default function Page() {
if (closest === null || closestPosition === null) return; if (closest === null || closestPosition === null) return;
if (closestPositionDistance === 0) { if (closestPositionDistance === 0) {
setHighlightedPlayerId( setHighlightedPlayer({ type: 'position', position: targetPosition });
(closest as BlitzkriegRatingsLeaderboardEntry).id,
);
setPage(Math.floor(targetPosition / rowsPerPage)); setPage(Math.floor(targetPosition / rowsPerPage));
return; return;
@@ -349,15 +347,15 @@ export default function Page() {
setLoadingProgress(null); setLoadingProgress(null);
setPage(Math.floor(targetPosition / rowsPerPage)); setPage(Math.floor(targetPosition / rowsPerPage));
setHighlightedPlayerId( setHighlightedPlayer({ type: 'position', position: closestPosition });
neighbors!.find((neighbor) => neighbor.number - 1 === targetPosition)!
.spa_id,
);
} else { } else {
setPage(Math.floor(targetPosition / rowsPerPage)); setPage(Math.floor(targetPosition / rowsPerPage));
if (players) { if (players) {
setHighlightedPlayerId(players[region][season][targetPosition].id); setHighlightedPlayer({
type: 'id',
id: players[region][season][targetPosition].id,
});
} }
} }
} }
@@ -381,7 +379,10 @@ export default function Page() {
setPage(Math.floor(playerIndex / rowsPerPage)); setPage(Math.floor(playerIndex / rowsPerPage));
if (players) { if (players) {
setHighlightedPlayerId(players[region][season][playerIndex].id); setHighlightedPlayer({
type: 'id',
id: players[region][season][playerIndex].id,
});
} }
} }
@@ -551,9 +552,10 @@ export default function Page() {
setPage(newPage); setPage(newPage);
if (players) { if (players) {
setHighlightedPlayerId( setHighlightedPlayer({
players[region][season][position].id, type: 'id',
); id: players[region][season][position].id,
});
cacheNeighbors( cacheNeighbors(
players[region][season][position].id, players[region][season][position].id,
rowsPerPage * 3, rowsPerPage * 3,
@@ -583,9 +585,10 @@ export default function Page() {
if (firstPlayerIndex === -1) return; if (firstPlayerIndex === -1) return;
setPage(Math.floor(firstPlayerIndex / rowsPerPage)); setPage(Math.floor(firstPlayerIndex / rowsPerPage));
setHighlightedPlayerId( setHighlightedPlayer({
players[region][season][firstPlayerIndex].id, type: 'id',
); id: players[region][season][firstPlayerIndex].id,
});
} }
}} }}
> >
@@ -744,7 +747,10 @@ export default function Page() {
player.account_id, player.account_id,
rowsPerPage * 3, rowsPerPage * 3,
); );
setHighlightedPlayerId(player.account_id); setHighlightedPlayer({
type: 'id',
id: player.account_id,
});
} else { } else {
if (!ratingsInfo || ratingsInfo.detail) return; if (!ratingsInfo || ratingsInfo.detail) return;
let playerIndex = -1; let playerIndex = -1;
@@ -768,7 +774,10 @@ export default function Page() {
); );
setPage(playerPage); setPage(playerPage);
setHighlightedPlayerId(player.account_id); setHighlightedPlayer({
type: 'id',
id: player.account_id,
});
} }
}} }}
> >
@@ -834,7 +843,13 @@ export default function Page() {
score={players[region][season]?.[index]?.score} score={players[region][season]?.[index]?.score}
clan={id ? names[region][id]?.clan : undefined} clan={id ? names[region][id]?.clan : undefined}
key={index} key={index}
highlight={highlightedPlayerId === id} highlight={
highlightedPlayer
? highlightedPlayer.type === 'id'
? highlightedPlayer.id === id
: highlightedPlayer.position === index
: undefined
}
/> />
); );
}) })