274 lines
8.9 KiB
JavaScript
274 lines
8.9 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// Problem search
|
|
const problemSearch = document.getElementById('problemSearch');
|
|
const problemsContainer = document.getElementById('problemsContainer');
|
|
const problemItems = problemsContainer?.querySelectorAll('.problem-item') || [];
|
|
|
|
problemSearch?.addEventListener('input', () => {
|
|
const term = problemSearch.value.toLowerCase().trim();
|
|
problemItems.forEach(item => {
|
|
const name = item.dataset.name?.toLowerCase() || '';
|
|
const desc = item.dataset.desc?.toLowerCase() || '';
|
|
const shouldShow = !term || name.includes(term) || desc.includes(term);
|
|
item.style.display = shouldShow ? '' : 'none';
|
|
});
|
|
});
|
|
|
|
// Leaderboard functionality
|
|
const problemFilter = document.getElementById('problemFilter');
|
|
const runtimeFilter = document.getElementById('runtimeFilter');
|
|
const leaderboardBody = document.getElementById('leaderboardBody');
|
|
const sortableHeaders = document.querySelectorAll('.sortable');
|
|
|
|
let currentSort = { column: 'rank', direction: 'asc' };
|
|
let allRows = [];
|
|
|
|
// Initialize rows array
|
|
function initializeRows() {
|
|
allRows = Array.from(leaderboardBody.querySelectorAll('tr')).map(row => {
|
|
return {
|
|
element: row,
|
|
user: row.dataset.user || '',
|
|
problem: row.dataset.problem || '',
|
|
runtime: parseFloat(row.dataset.runtime) || 0,
|
|
memory: parseFloat(row.dataset.memory) || 0,
|
|
timestamp: new Date(row.dataset.timestamp || Date.now()).getTime(),
|
|
language: row.dataset.language || '',
|
|
originalIndex: Array.from(leaderboardBody.children).indexOf(row)
|
|
};
|
|
});
|
|
}
|
|
|
|
function updateRankClasses() {
|
|
const visibleRows = allRows.filter(row => row.element.style.display !== 'none');
|
|
visibleRows.forEach((rowData, index) => {
|
|
const rank = index + 1;
|
|
const row = rowData.element;
|
|
|
|
// Update rank cell
|
|
const rankCell = row.cells[0];
|
|
if (rankCell) rankCell.textContent = rank;
|
|
|
|
// Update rank classes
|
|
row.className = row.className.replace(/\brank-\d+\b/g, '');
|
|
if (rank === 1) row.classList.add('rank-1');
|
|
else if (rank <= 3) row.classList.add('rank-top3');
|
|
});
|
|
}
|
|
|
|
function calculateOverallRanking() {
|
|
const visibleRows = allRows.filter(row => row.element.style.display !== 'none');
|
|
|
|
if (visibleRows.length === 0) return;
|
|
|
|
// Group submissions by problem to find the best performance for each
|
|
const problemBests = {};
|
|
|
|
visibleRows.forEach(rowData => {
|
|
const problem = rowData.problem;
|
|
if (!problemBests[problem]) {
|
|
problemBests[problem] = {
|
|
bestRuntime: Infinity,
|
|
bestMemory: Infinity
|
|
};
|
|
}
|
|
|
|
problemBests[problem].bestRuntime = Math.min(problemBests[problem].bestRuntime, rowData.runtime);
|
|
problemBests[problem].bestMemory = Math.min(problemBests[problem].bestMemory, rowData.memory);
|
|
});
|
|
|
|
// Calculate normalized scores for each submission
|
|
visibleRows.forEach(rowData => {
|
|
const problemBest = problemBests[rowData.problem];
|
|
|
|
// Prevent division by zero
|
|
const runtimeScore = problemBest.bestRuntime > 0 ?
|
|
rowData.runtime / problemBest.bestRuntime : 1;
|
|
const memoryScore = problemBest.bestMemory > 0 ?
|
|
rowData.memory / problemBest.bestMemory : 1;
|
|
|
|
// Weighted overall score (70% runtime, 30% memory)
|
|
rowData.overallScore = runtimeScore * 0.7 + memoryScore * 0.3;
|
|
});
|
|
|
|
// Sort by overall score (lower is better), then by timestamp (earlier is better for ties)
|
|
visibleRows.sort((a, b) => {
|
|
const scoreDiff = a.overallScore - b.overallScore;
|
|
if (Math.abs(scoreDiff) > 0.000001) return scoreDiff; // Use small epsilon for float comparison
|
|
|
|
// If scores are essentially equal, prefer earlier submission
|
|
return a.timestamp - b.timestamp;
|
|
});
|
|
|
|
// Reorder DOM elements and update ranks
|
|
visibleRows.forEach((rowData, index) => {
|
|
leaderboardBody.appendChild(rowData.element);
|
|
});
|
|
|
|
updateRankClasses();
|
|
}
|
|
|
|
function filterLeaderboard() {
|
|
const problemTerm = (problemFilter?.value || '').toLowerCase().trim();
|
|
const runtimeType = runtimeFilter?.value || 'all';
|
|
|
|
// Reset all rows to visible first
|
|
allRows.forEach(rowData => {
|
|
rowData.element.style.display = '';
|
|
});
|
|
|
|
// Apply problem filter
|
|
if (problemTerm) {
|
|
allRows.forEach(rowData => {
|
|
const problemMatch = rowData.problem.toLowerCase().includes(problemTerm);
|
|
if (!problemMatch) {
|
|
rowData.element.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Apply runtime filter (best/worst per user per problem)
|
|
if (runtimeType === 'best' || runtimeType === 'worst') {
|
|
const userProblemGroups = {};
|
|
|
|
// Group by user + problem combination
|
|
allRows.forEach(rowData => {
|
|
if (rowData.element.style.display === 'none') return;
|
|
|
|
const key = `${rowData.user}::${rowData.problem}`;
|
|
if (!userProblemGroups[key]) {
|
|
userProblemGroups[key] = [];
|
|
}
|
|
userProblemGroups[key].push(rowData);
|
|
});
|
|
|
|
// Hide all except best/worst for each user-problem combination
|
|
Object.values(userProblemGroups).forEach(group => {
|
|
if (group.length <= 1) return;
|
|
|
|
// Sort by runtime
|
|
group.sort((a, b) => a.runtime - b.runtime);
|
|
|
|
const keepIndex = runtimeType === 'best' ? 0 : group.length - 1;
|
|
group.forEach((rowData, index) => {
|
|
if (index !== keepIndex) {
|
|
rowData.element.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
calculateOverallRanking();
|
|
}
|
|
|
|
function getCellValue(rowData, column) {
|
|
switch (column) {
|
|
case 'rank':
|
|
return parseInt(rowData.element.cells[0]?.textContent) || 0;
|
|
case 'user':
|
|
return rowData.user.toLowerCase();
|
|
case 'problem':
|
|
return rowData.problem.toLowerCase();
|
|
case 'runtime':
|
|
return rowData.runtime;
|
|
case 'memory':
|
|
return rowData.memory;
|
|
case 'timestamp':
|
|
return rowData.timestamp;
|
|
case 'language':
|
|
return rowData.language.toLowerCase();
|
|
default:
|
|
return '';
|
|
}
|
|
}
|
|
|
|
function sortLeaderboard(column, direction) {
|
|
if (column === 'rank') {
|
|
calculateOverallRanking();
|
|
return;
|
|
}
|
|
|
|
const visibleRows = allRows.filter(row => row.element.style.display !== 'none');
|
|
|
|
visibleRows.sort((a, b) => {
|
|
const valueA = getCellValue(a, column);
|
|
const valueB = getCellValue(b, column);
|
|
|
|
let comparison = 0;
|
|
if (typeof valueA === 'number' && typeof valueB === 'number') {
|
|
comparison = valueA - valueB;
|
|
} else {
|
|
comparison = valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
|
|
}
|
|
|
|
return direction === 'asc' ? comparison : -comparison;
|
|
});
|
|
|
|
// Reorder DOM elements
|
|
visibleRows.forEach(rowData => {
|
|
leaderboardBody.appendChild(rowData.element);
|
|
});
|
|
|
|
updateRankClasses();
|
|
}
|
|
|
|
// Event listeners for sorting
|
|
sortableHeaders.forEach(header => {
|
|
header.addEventListener('click', () => {
|
|
const column = header.dataset.sort;
|
|
if (!column) return;
|
|
|
|
// Remove sorting classes from all headers
|
|
sortableHeaders.forEach(h => h.classList.remove('sort-asc', 'sort-desc'));
|
|
|
|
// Toggle sort direction
|
|
if (currentSort.column === column) {
|
|
currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
|
|
} else {
|
|
currentSort.column = column;
|
|
currentSort.direction = 'asc';
|
|
}
|
|
|
|
// Add sorting class to current header
|
|
header.classList.add(`sort-${currentSort.direction}`);
|
|
|
|
sortLeaderboard(column, currentSort.direction);
|
|
});
|
|
});
|
|
|
|
// Filter event listeners
|
|
problemFilter?.addEventListener('input', filterLeaderboard);
|
|
runtimeFilter?.addEventListener('change', filterLeaderboard);
|
|
|
|
// Rank info popout
|
|
const rankInfoBtn = document.getElementById('rankInfoBtn');
|
|
const rankingExplanation = document.getElementById('rankingExplanation');
|
|
|
|
rankInfoBtn?.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
rankingExplanation?.classList.toggle('active');
|
|
rankInfoBtn?.classList.toggle('active');
|
|
});
|
|
|
|
// Close ranking explanation when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (rankingExplanation?.classList.contains('active') &&
|
|
!rankingExplanation.contains(e.target) &&
|
|
!rankInfoBtn?.contains(e.target)) {
|
|
rankingExplanation.classList.remove('active');
|
|
rankInfoBtn?.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Initialize everything
|
|
if (leaderboardBody && leaderboardBody.children.length > 0) {
|
|
initializeRows();
|
|
calculateOverallRanking();
|
|
|
|
// Set initial sort indicator
|
|
const defaultHeader = document.querySelector('[data-sort="rank"]');
|
|
if (defaultHeader) {
|
|
defaultHeader.classList.add('sort-asc');
|
|
}
|
|
}
|
|
}); |