Discover our most loved creators, top community supporters giving hearts, and all-time points champions across streamers and viewers!
Your Wallet Balance: 0 PTS
Hearts Received:0
Hearts Given:0
#1 Points Leader: Standby
Top Strix Spotlight: Standby
Top Community Spotlight: Standby
Individual Member Points Standings: This leaderboard ranks every community member strictly by their personal cumulative points earned. Spending points for perks does not decrease your leaderboard ranking!
MEMBER LIFETIME POINTS
Hearts Received Standings: Measures community love received across creators and viewers. Supporters can vote once every 24 hours.
COMMUNITY HEARTS
Hearts Given Standings: Celebrates our top community supporters! Every heart you give awards you +5 Community Points to your wallet.
TOP SUPPORTERS
Strix Spotlight Standings: Tracks how many times community streamers have held the official 30-minute queue spotlight on the homepage.
STRIX SPOTLIGHT (QUEUE)
Community Spotlight Standings: Tracks how many times creators have been boosted with Community Spotlight (5,000 PTS redemptions from the Points Shop).
Rankings updated dynamically based on real member activity
0 members
How Leaderboard Rankings Work
Fair, transparent individual member scoring for both broadcasters and viewers
Member Points Standings
Tracks every point earned by each member individually. Streamers and viewers are separated into distinct ladders so everyone has fair competition! Spending points will never decrease your rank.
Hearts Received
Measures community love received across creators and viewers. Supporters can vote once every 24 hours for any community member, not locked to live broadcast status.
Hearts Given
Celebrates our most active viewers and supporters! Every heart you give awards you +5 Community Points to your wallet and climbs you up the Hearts Given leaderboard.
Strix Spotlight
Tracks how many times community streamers have held the official 30-minute queue spotlight on the homepage while broadcasting live on Twitch.
Community Spotlight
Tracks how many times creators have received a Community Spotlight boost (5,000 PTS) activated by members from the Points Shop!
`;
}
if (window.lucide) lucide.createIcons();
}
function showToast(msg, showLoginBtn = false) {
const toast = document.getElementById('leaderboardToast');
const text = document.getElementById('leaderboardToastText');
const action = document.getElementById('leaderboardToastAction');
if (toast && text) {
text.textContent = msg;
if (action) {
if (showLoginBtn) {
action.innerHTML = `
`;
} else {
action.innerHTML = `
View Wallet →
`;
}
}
toast.classList.remove('hidden');
if (window.toastTimer) clearTimeout(window.toastTimer);
window.toastTimer = setTimeout(() => toast.classList.add('hidden'), 5000);
if (window.lucide) lucide.createIcons();
}
}
function handleVoteLike(streamerId) {
const streamer = ALL_COMMUNITY_MEMBERS.find(s =>
String(s.id) === String(streamerId) ||
String(s.login).toLowerCase() === String(streamerId).toLowerCase()
);
if (!streamer) return;
if (typeof StrixLikes !== 'undefined' && !StrixLikes.isLoggedIn()) {
showToast('🔒 Please log in with your Twitch account to send hearts and vote!', true);
return;
}
const res = StrixLikes.like(streamer);
showToast(res.message, !res.success && res.requireLogin);
// Update header points display in real-time
const navBal = document.getElementById('nav-points-bal');
if (navBal && typeof StrixPoints !== 'undefined') {
navBal.textContent = StrixPoints.getBalance().toLocaleString() + ' PTS';
}
renderLeaderboard();
}
function renderLeaderboard() {
const cleanMembers = ALL_COMMUNITY_MEMBERS.filter(m => m && m.login);
const currentUser = (typeof StrixLikes !== 'undefined' && StrixLikes.getCurrentUser) ? StrixLikes.getCurrentUser() : null;
// Global metrics across community
const allLikesMap = StrixLikes.getLeaderboard ? StrixLikes.getLeaderboard(cleanMembers, 'all') : [];
const totalCommunityLikes = allLikesMap.reduce((acc, s) => acc + (s.likes || 0), 0);
const heartsGivenList = StrixLikes.getHeartsGivenLeaderboard ? StrixLikes.getHeartsGivenLeaderboard(cleanMembers, 'all') : [];
const totalCommunityHeartsGiven = heartsGivenList.reduce((acc, m) => acc + (m.heartsGiven || 0), 0);
const allPointsList = StrixPoints.getPointsLeaderboard ? StrixPoints.getPointsLeaderboard(cleanMembers, 'all') : [];
const totalAllTimePoints = allPointsList.reduce((acc, m) => acc + (m.allTimePoints || 0), 0);
// Update Hero stats
const heroPointsEl = document.getElementById('heroTotalPointsCount');
const heroLikesEl = document.getElementById('heroTotalLikesCount');
const heroLikesLabel = document.getElementById('heroLikesLabel');
const heroGivenEl = document.getElementById('heroTotalHeartsGivenCount');
const heroGivenLabel = document.getElementById('heroHeartsGivenLabel');
const heroLeaderEl = document.getElementById('heroLeaderName');
const heroWalletEl = document.getElementById('heroYourWalletCount');
if (heroPointsEl) heroPointsEl.textContent = totalAllTimePoints.toLocaleString() + ' PTS';
if (currentUser) {
const uId = currentUser.id ? String(currentUser.id) : (currentUser.login || '');
const myLikes = StrixLikes.getLikes(uId, currentUser.heartsReceived || 0);
const myGiven = StrixLikes.getHeartsGiven(currentUser.id, currentUser.login, currentUser.heartsGiven || 0);
if (heroLikesLabel) heroLikesLabel.textContent = 'Your Hearts Received:';
if (heroLikesEl) heroLikesEl.textContent = myLikes.toLocaleString();
if (heroGivenLabel) heroGivenLabel.textContent = 'Your Hearts Given:';
if (heroGivenEl) heroGivenEl.textContent = myGiven.toLocaleString();
if (heroWalletEl && typeof StrixPoints !== 'undefined') {
heroWalletEl.textContent = StrixPoints.getBalance().toLocaleString() + ' PTS';
}
} else {
if (heroLikesLabel) heroLikesLabel.textContent = 'Hearts Received:';
if (heroLikesEl) heroLikesEl.textContent = totalCommunityLikes.toLocaleString();
if (heroGivenLabel) heroGivenLabel.textContent = 'Hearts Given:';
if (heroGivenEl) heroGivenEl.textContent = totalCommunityHeartsGiven.toLocaleString();
}
// Update Top Strix Spotlight and Community Spotlight Streamers in Hero
const allStreamers = cleanMembers.filter(m => isMemberStreamer(m));
const sortedStrixAll = [...allStreamers].sort((a, b) => (b.timesFeatured || 0) - (a.timesFeatured || 0));
const heroStrixEl = document.getElementById('heroTopStrixName');
if (heroStrixEl) {
if (sortedStrixAll.length > 0 && (sortedStrixAll[0].timesFeatured || 0) > 0) {
heroStrixEl.textContent = `${sortedStrixAll[0].displayName || sortedStrixAll[0].login} (${sortedStrixAll[0].timesFeatured}x)`;
} else if (sortedStrixAll.length > 0) {
heroStrixEl.textContent = `${sortedStrixAll[0].displayName || sortedStrixAll[0].login}`;
} else {
heroStrixEl.textContent = 'Standby';
}
}
const sortedCommunityAll = [...allStreamers].sort((a, b) => (b.timesSpecialFeatured || 0) - (a.timesSpecialFeatured || 0));
const heroCommunityEl = document.getElementById('heroTopCommunityName');
if (heroCommunityEl) {
if (sortedCommunityAll.length > 0 && (sortedCommunityAll[0].timesSpecialFeatured || 0) > 0) {
heroCommunityEl.textContent = `${sortedCommunityAll[0].displayName || sortedCommunityAll[0].login} (${sortedCommunityAll[0].timesSpecialFeatured}x)`;
} else if (sortedCommunityAll.length > 0) {
heroCommunityEl.textContent = `${sortedCommunityAll[0].displayName || sortedCommunityAll[0].login}`;
} else {
heroCommunityEl.textContent = 'Standby';
}
}
let ranked = [];
const podiumTitle = document.getElementById('podiumSectionTitle');
const podiumSubtitle = document.getElementById('podiumSectionSubtitle');
const tableTitle = document.getElementById('tableHeaderTitle');
const tableSubtitle = document.getElementById('tableHeaderSubtitle');
const tableHeader = document.getElementById('leaderboardTableHeader');
// SECTION 1: TOTAL POINTS LEADERBOARD (BOTH USERS & STREAMERS)
if (currentMode === 'points') {
ranked = StrixPoints.getPointsLeaderboard(cleanMembers, pointsRoleFilter);
const roleLabel = pointsRoleFilter === 'streamer' ? 'Streamers' : (pointsRoleFilter === 'viewer' ? 'Viewers / Users' : 'All Members (Users & Streamers)');
if (podiumTitle) podiumTitle.textContent = `Top ${roleLabel} Points Champions`;
if (podiumSubtitle) podiumSubtitle.textContent = `Ranked by total lifetime points earned (spending never decreases leaderboard standing)`;
if (tableTitle) tableTitle.innerHTML = `${roleLabel} Total Points Standings`;
if (tableSubtitle) tableSubtitle.textContent = `Cumulative lifetime points earned since joining`;
if (heroLeaderEl) heroLeaderEl.textContent = ranked.length > 0 ? `${ranked[0].displayName || ranked[0].login} (${ranked[0].allTimePoints.toLocaleString()} PTS)` : 'Standby';
if (tableHeader) {
if (pointsRoleFilter === 'streamer') {
tableHeader.innerHTML = `
Rank
Streamer
Supporter Tier
Spotlights
All-Time Points
Profile
`;
} else {
tableHeader.innerHTML = `
Rank
Member
Role
Supporter Tier
All-Time Points
Profile
`;
}
}
// SECTION 2: HEARTS RECEIVED (NOT LOCKED TO LIVE STATUS)
} else if (currentMode === 'likes') {
ranked = StrixLikes.getLeaderboard(cleanMembers, likesRoleFilter);
const roleLabel = likesRoleFilter === 'streamer' ? 'Streamers' : (likesRoleFilter === 'viewer' ? 'Viewers' : 'All Members (Streamers & Viewers)');
if (podiumTitle) podiumTitle.textContent = `Most Loved ${roleLabel} (Hearts Received)`;
if (podiumSubtitle) podiumSubtitle.textContent = `Community members ranked by total hearts received (not locked to live status)`;
if (tableTitle) tableTitle.innerHTML = `${roleLabel} Hearts Received Standings`;
if (tableSubtitle) tableSubtitle.textContent = `Heart votes received from community supporters (24h rate limit)`;
if (heroLeaderEl) heroLeaderEl.textContent = ranked.length > 0 ? `${ranked[0].displayName || ranked[0].login} (${ranked[0].likes.toLocaleString()} ❤️)` : 'Standby';
if (tableHeader) {
if (likesRoleFilter === 'streamer') {
tableHeader.innerHTML = `
Rank
Streamer
Status
Spotlights
Hearts Received
Support Member
`;
} else {
tableHeader.innerHTML = `
Rank
Member
Role
Status
Hearts Received
Support Member
`;
}
}
// SECTION 3: HEARTS GIVEN (TOP SUPPORTERS - STREAMERS & VIEWERS)
} else if (currentMode === 'heartsgiven') {
ranked = StrixLikes.getHeartsGivenLeaderboard(cleanMembers, heartsRoleFilter);
const roleLabel = heartsRoleFilter === 'streamer' ? 'Streamers' : (heartsRoleFilter === 'viewer' ? 'Viewers' : 'Streamers & Viewers');
if (podiumTitle) podiumTitle.textContent = `Top Supporters (Hearts Given) - ${roleLabel}`;
if (podiumSubtitle) podiumSubtitle.textContent = `Community supporters who gave hearts to creators (+5 PTS earned per vote)`;
if (tableTitle) tableTitle.innerHTML = `${roleLabel} Hearts Given Standings`;
if (tableSubtitle) tableSubtitle.textContent = `Number of heart votes given to support creators (+5 PTS earned per vote)`;
if (heroLeaderEl) heroLeaderEl.textContent = ranked.length > 0 ? `${ranked[0].displayName || ranked[0].login} (${(ranked[0].heartsGiven || 0).toLocaleString()} Given)` : 'Standby';
if (tableHeader) {
if (heartsRoleFilter === 'streamer') {
tableHeader.innerHTML = `
Rank
Supporter
Supporter Tier
Spotlights
Community Hearts Given
Profile
`;
} else {
tableHeader.innerHTML = `
Rank
Supporter
Role
Supporter Tier
Community Hearts Given
Profile
`;
}
}
// SECTION 4: STRIX SPOTLIGHT (INDEPENDENT CATEGORY - QUEUE ROTATIONS)
} else if (currentMode === 'strix') {
let list = allStreamers;
if (strixLiveOnly) {
list = list.filter(s => s.isLive);
}
list = [...list].sort((a, b) => {
const qA = a.timesFeatured || 0;
const qB = b.timesFeatured || 0;
if (qB !== qA) return qB - qA;
return (b.allTimePoints || 0) - (a.allTimePoints || 0);
});
ranked = list.map((s, idx) => ({
...s,
rank: idx + 1
}));
if (podiumTitle) podiumTitle.textContent = 'Top Strix Spotlight Streamers';
if (podiumSubtitle) podiumSubtitle.textContent = 'Creators ranked strictly by number of times featured in the 30-minute homepage queue';
if (tableTitle) tableTitle.innerHTML = 'Strix Spotlight Standings';
if (tableSubtitle) tableSubtitle.textContent = 'Ranked independently by times featured in the 30-minute queue rotation';
if (heroLeaderEl) heroLeaderEl.textContent = ranked.length > 0 ? `${ranked[0].displayName || ranked[0].login} (${ranked[0].timesFeatured || 0}x)` : 'Standby';
if (tableHeader) {
tableHeader.innerHTML = `
Rank
Streamer
Status
Followers
Strix Spotlight
Support / Profile
`;
}
// SECTION 5: COMMUNITY SPOTLIGHT (INDEPENDENT CATEGORY - SHOP BOOSTS)
} else if (currentMode === 'community') {
let list = allStreamers;
if (communityLiveOnly) {
list = list.filter(s => s.isLive);
}
list = [...list].sort((a, b) => {
const vA = a.timesSpecialFeatured || 0;
const vB = b.timesSpecialFeatured || 0;
if (vB !== vA) return vB - vA;
return (b.allTimePoints || 0) - (a.allTimePoints || 0);
});
ranked = list.map((s, idx) => ({
...s,
rank: idx + 1
}));
if (podiumTitle) podiumTitle.textContent = 'Top Community Spotlight Streamers';
if (podiumSubtitle) podiumSubtitle.textContent = 'Creators ranked strictly by Community Spotlight boosts (5,000 PTS) redeemed from the Points Shop';
if (tableTitle) tableTitle.innerHTML = 'Community Spotlight Standings';
if (tableSubtitle) tableSubtitle.textContent = 'Ranked independently by Community Spotlight redemptions from the Points Shop';
if (heroLeaderEl) heroLeaderEl.textContent = ranked.length > 0 ? `${ranked[0].displayName || ranked[0].login} (${ranked[0].timesSpecialFeatured || 0}x)` : 'Standby';
if (tableHeader) {
tableHeader.innerHTML = `
Rank
Streamer
Status
Followers
Community Spotlight
Support / Profile
`;
}
}
// Apply Real-Time Search Filter if active
let displayRanked = ranked;
if (searchQuery) {
displayRanked = ranked.filter(m => {
const dName = (m.displayName || '').toLowerCase();
const login = (m.login || '').toLowerCase();
const game = (m.game || '').toLowerCase();
const role = m.isStreamer ? 'streamer' : 'viewer';
return dName.includes(searchQuery) || login.includes(searchQuery) || game.includes(searchQuery) || role.includes(searchQuery);
});
}
const countSpan = document.getElementById('rankedCountSpan');
if (countSpan) countSpan.textContent = displayRanked.length;
renderPodium(displayRanked, currentMode);
renderTable(displayRanked, currentMode);
if (window.lucide) lucide.createIcons();
}
// Unified Modern Podium Renderer
function renderPodium(ranked, mode) {
const podiumEl = document.getElementById('podiumCardsGrid');
if (!podiumEl) return;
if (!ranked || ranked.length === 0) {
if (searchQuery) {
podiumEl.innerHTML = renderEmptyPodium(`No community members matched "${searchQuery}". Clear your search to view all standings.`);
} else if (mode === 'points') {
podiumEl.innerHTML = renderEmptyPodium('Season 1 Points are live! Connect your Twitch account to start earning points and climb the podium.');
} else if (mode === 'likes') {
podiumEl.innerHTML = renderEmptyPodium('No hearts have been received yet. Click Vote on any community member to send hearts and boost their ranking!');
} else if (mode === 'heartsgiven') {
podiumEl.innerHTML = renderEmptyPodium('No hearts have been given yet! Click the heart on any creator to become our #1 supporter.');
} else if (mode === 'strix') {
podiumEl.innerHTML = renderEmptyPodium('No streamers have held the Strix Spotlight yet. Streamers are automatically placed when broadcasting live on Twitch!');
} else if (mode === 'community') {
podiumEl.innerHTML = renderEmptyPodium('No Community Spotlights have been redeemed yet. Visit the Points Shop to boost your favorite creator with 5,000 PTS!');
} else {
podiumEl.innerHTML = renderEmptyPodium('No members in current standings.');
}
return;
}
const top3 = ranked.slice(0, 3);
// Build Podium Cards
if (top3.length === 1) {
// 1 Member: Centered Champion Card
podiumEl.innerHTML = `
${medalIcon}