new problem and deleted the obsolete problem loader
This commit is contained in:
@@ -1,164 +1,274 @@
|
||||
// =======================
|
||||
// Problem search
|
||||
// =======================
|
||||
const problemSearch = document.getElementById('problemSearch');
|
||||
const problemsContainer = document.getElementById('problemsContainer');
|
||||
const problemItems = problemsContainer.querySelectorAll('.problem-item');
|
||||
|
||||
problemSearch.addEventListener('input', () => {
|
||||
const searchTerm = problemSearch.value.toLowerCase();
|
||||
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() || '';
|
||||
item.style.display = (name.includes(searchTerm) || desc.includes(searchTerm)) ? '' : 'none';
|
||||
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 filtering
|
||||
// =======================
|
||||
const userSearch = document.getElementById('userSearch');
|
||||
const problemFilter = document.getElementById('problemFilter');
|
||||
const runtimeFilter = document.getElementById('runtimeFilter');
|
||||
const leaderboardBody = document.getElementById('leaderboardBody');
|
||||
const leaderboardRows = Array.from(leaderboardBody.querySelectorAll('tr'));
|
||||
const sortableHeaders = document.querySelectorAll('.sortable');
|
||||
// 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 = [];
|
||||
|
||||
let currentSort = { column: null, direction: 'asc' };
|
||||
// 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 filterLeaderboard() {
|
||||
const userTerm = userSearch.value.toLowerCase();
|
||||
const problemTerm = problemFilter.value.toLowerCase();
|
||||
const runtimeType = runtimeFilter.value;
|
||||
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');
|
||||
});
|
||||
}
|
||||
|
||||
leaderboardRows.forEach(row => {
|
||||
const user = row.dataset.user.toLowerCase();
|
||||
const problem = row.dataset.problem.toLowerCase();
|
||||
const runtime = parseFloat(row.dataset.runtime);
|
||||
function calculateOverallRanking() {
|
||||
const visibleRows = allRows.filter(row => row.element.style.display !== 'none');
|
||||
|
||||
if (visibleRows.length === 0) return;
|
||||
|
||||
const showUser = user.includes(userTerm);
|
||||
const showProblem = problem.includes(problemTerm);
|
||||
// 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);
|
||||
});
|
||||
|
||||
let showRuntime = true;
|
||||
if (runtimeType === 'best') {
|
||||
const userProblemRows = leaderboardRows.filter(r =>
|
||||
r.dataset.user === row.dataset.user &&
|
||||
r.dataset.problem === row.dataset.problem
|
||||
);
|
||||
const bestRuntime = Math.min(...userProblemRows.map(r => parseFloat(r.dataset.runtime)));
|
||||
showRuntime = runtime === bestRuntime;
|
||||
} else if (runtimeType === 'worst') {
|
||||
const userProblemRows = leaderboardRows.filter(r =>
|
||||
r.dataset.user === row.dataset.user &&
|
||||
r.dataset.problem === row.dataset.problem
|
||||
);
|
||||
const worstRuntime = Math.max(...userProblemRows.map(r => parseFloat(r.dataset.runtime)));
|
||||
showRuntime = runtime === worstRuntime;
|
||||
// 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';
|
||||
}
|
||||
|
||||
row.style.display = (showUser && showProblem && showRuntime) ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
// =======================
|
||||
// Helper: Get cell value
|
||||
// =======================
|
||||
function getCellValue(row, column) {
|
||||
const index = Array.from(document.querySelectorAll('th')).findIndex(th => th.dataset.sort === column);
|
||||
let val = row.cells[index].textContent.trim();
|
||||
|
||||
if (['runtime', 'memory', 'rank'].includes(column)) return parseFloat(val) || 0;
|
||||
if (column === 'timestamp') return new Date(val).getTime();
|
||||
return val.toLowerCase();
|
||||
}
|
||||
|
||||
function compareValues(a, b, direction) {
|
||||
if (typeof a === 'number' && typeof b === 'number') {
|
||||
return direction === 'asc' ? a - b : b - a;
|
||||
});
|
||||
}
|
||||
if (a < b) return direction === 'asc' ? -1 : 1;
|
||||
if (a > b) return direction === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
}
|
||||
|
||||
// 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();
|
||||
}
|
||||
|
||||
// =======================
|
||||
// Calculate "Overall" score
|
||||
// =======================
|
||||
function calculateOverallRank() {
|
||||
const rows = Array.from(leaderboardBody.querySelectorAll('tr'));
|
||||
const runtimes = rows.map(r => parseFloat(r.dataset.runtime) || Infinity);
|
||||
const memories = rows.map(r => parseFloat(r.dataset.memory) || Infinity);
|
||||
|
||||
const minRuntime = Math.min(...runtimes);
|
||||
const minMemory = Math.min(...memories);
|
||||
|
||||
rows.forEach(row => {
|
||||
const runtimeScore = (parseFloat(row.dataset.runtime) || Infinity) / minRuntime;
|
||||
const memoryScore = (parseFloat(row.dataset.memory) || Infinity) / minMemory;
|
||||
// Weighted score: runtime 70%, memory 30%
|
||||
const score = runtimeScore * 0.7 + memoryScore * 0.3;
|
||||
row.dataset.overallScore = score;
|
||||
});
|
||||
}
|
||||
|
||||
// =======================
|
||||
// Sorting
|
||||
// =======================
|
||||
function sortLeaderboard(column, direction) {
|
||||
let rows = Array.from(leaderboardBody.querySelectorAll('tr'));
|
||||
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') {
|
||||
calculateOverallRank();
|
||||
rows.sort((a, b) => parseFloat(a.dataset.overallScore) - parseFloat(b.dataset.overallScore));
|
||||
// Update displayed rank
|
||||
rows.forEach((row, index) => {
|
||||
row.cells[0].textContent = index + 1;
|
||||
});
|
||||
} else {
|
||||
rows.sort((rowA, rowB) => {
|
||||
const valA = getCellValue(rowA, column);
|
||||
const valB = getCellValue(rowB, column);
|
||||
return compareValues(valA, valB, direction);
|
||||
});
|
||||
calculateOverallRanking();
|
||||
return;
|
||||
}
|
||||
|
||||
rows.forEach(row => leaderboardBody.appendChild(row));
|
||||
}
|
||||
|
||||
// =======================
|
||||
// Event listeners
|
||||
// =======================
|
||||
userSearch.addEventListener('input', filterLeaderboard);
|
||||
problemFilter.addEventListener('input', filterLeaderboard);
|
||||
runtimeFilter.addEventListener('change', filterLeaderboard);
|
||||
|
||||
sortableHeaders.forEach(header => {
|
||||
header.addEventListener('click', () => {
|
||||
const column = header.dataset.sort;
|
||||
|
||||
sortableHeaders.forEach(h => h.classList.remove('sort-asc', 'sort-desc'));
|
||||
|
||||
if (currentSort.column === column) {
|
||||
currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
currentSort.column = column;
|
||||
currentSort.direction = 'asc';
|
||||
}
|
||||
|
||||
header.classList.add(`sort-${currentSort.direction}`);
|
||||
sortLeaderboard(column, currentSort.direction);
|
||||
|
||||
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;
|
||||
});
|
||||
});
|
||||
|
||||
const rankInfoBtn = document.getElementById('rankInfoBtn');
|
||||
const rankingExplanation = document.getElementById('rankingExplanation');
|
||||
// Reorder DOM elements
|
||||
visibleRows.forEach(rowData => {
|
||||
leaderboardBody.appendChild(rowData.element);
|
||||
});
|
||||
|
||||
updateRankClasses();
|
||||
}
|
||||
|
||||
rankInfoBtn.addEventListener('click', () => {
|
||||
if (rankingExplanation.style.display === 'none' || rankingExplanation.style.display === '') {
|
||||
rankingExplanation.style.display = 'block';
|
||||
rankInfoBtn.classList.add('active');
|
||||
} else {
|
||||
rankingExplanation.style.display = 'none';
|
||||
rankInfoBtn.classList.remove('active');
|
||||
// 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');
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user