rattatwinko/QPP
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stashcom

Browse Source
This commit is contained in:
rattatwinko
2025-08-14 22:05:20 +02:00
parent 04dc638cf0
commit 6079813e2c
12 changed files with 957 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
src/templates/script.js
View File

@@ -1,39 +1,22 @@
// Toggle leaderboard visibility
const toggleBtn = document.getElementById('toggleLeaderboard');
const leaderboardSection = document.getElementById('leaderboardSection');
const contentContainer = document.getElementById('contentContainer');
toggleBtn.addEventListener('click', () => {
if (leaderboardSection.style.display === 'none') {
leaderboardSection.style.display = '';
toggleBtn.textContent = 'Hide';
contentContainer.classList.remove('single-column');
} else {
leaderboardSection.style.display = 'none';
toggleBtn.textContent = 'Show';
contentContainer.classList.add('single-column');
}
});
// Problem search functionality
// =======================
// 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();
problemItems.forEach(item => {
const name = item.dataset.name.toLowerCase();
const desc = item.dataset.desc?.toLowerCase() || '';
if (name.includes(searchTerm) || desc.includes(searchTerm)) {
item.style.display = '';
} else {
item.style.display = 'none';
}
});
const searchTerm = problemSearch.value.toLowerCase();
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';
});
});
// Leaderboard filtering and sorting
// =======================
// Leaderboard filtering
// =======================
const userSearch = document.getElementById('userSearch');
const problemFilter = document.getElementById('problemFilter');
const runtimeFilter = document.getElementById('runtimeFilter');
@@ -41,112 +24,141 @@ const leaderboardBody = document.getElementById('leaderboardBody');
const leaderboardRows = Array.from(leaderboardBody.querySelectorAll('tr'));
const sortableHeaders = document.querySelectorAll('.sortable');
// Current sort state
let currentSort = {
column: null,
direction: 'asc'
};
let currentSort = { column: null, direction: 'asc' };
// Filter leaderboard
function filterLeaderboard() {
const userTerm = userSearch.value.toLowerCase();
const problemTerm = problemFilter.value.toLowerCase();
const runtimeType = runtimeFilter.value;
const userTerm = userSearch.value.toLowerCase();
const problemTerm = problemFilter.value.toLowerCase();
const runtimeType = runtimeFilter.value;
leaderboardRows.forEach(row => {
const user = row.dataset.user.toLowerCase();
const problem = row.dataset.problem.toLowerCase();
const runtime = parseFloat(row.dataset.runtime);
const showUser = user.includes(userTerm);
const showProblem = problem.includes(problemTerm);
let showRuntime = true;
if (runtimeType === 'best') {
// Find if this is the best runtime for this user+problem combo
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') {
// Find if this is the worst runtime for this user+problem combo
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;
}
leaderboardRows.forEach(row => {
const user = row.dataset.user.toLowerCase();
const problem = row.dataset.problem.toLowerCase();
const runtime = parseFloat(row.dataset.runtime);
if (showUser && showProblem && showRuntime) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
const showUser = user.includes(userTerm);
const showProblem = problem.includes(problemTerm);
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;
}
row.style.display = (showUser && showProblem && showRuntime) ? '' : 'none';
});
}
// Sort leaderboard
function sortLeaderboard(column, direction) {
const rows = Array.from(leaderboardBody.querySelectorAll('tr'));
const index = Array.from(document.querySelectorAll('th')).findIndex(th => th.dataset.sort === column);
// =======================
// 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();
rows.sort((a, b) => {
let aValue = a.cells[index].textContent;
let bValue = b.cells[index].textContent;
// Special handling for numeric columns
if (column === 'runtime' || column === 'memory' || column === 'rank') {
aValue = parseFloat(aValue) || 0;
bValue = parseFloat(bValue) || 0;
return direction === 'asc' ? aValue - bValue : bValue - aValue;
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;
}
// Special handling for timestamps
if (column === 'timestamp') {
aValue = new Date(aValue).getTime();
bValue = new Date(bValue).getTime();
return direction === 'asc' ? aValue - bValue : bValue - aValue;
}
// Default string comparison
aValue = aValue.toLowerCase();
bValue = bValue.toLowerCase();
if (aValue < bValue) return direction === 'asc' ? -1 : 1;
if (aValue > bValue) return direction === 'asc' ? 1 : -1;
if (a < b) return direction === 'asc' ? -1 : 1;
if (a > b) return direction === 'asc' ? 1 : -1;
return 0;
});
// Re-append rows in sorted order
rows.forEach(row => leaderboardBody.appendChild(row));
}
// Set up event listeners
// =======================
// 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'));
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);
});
}
rows.forEach(row => leaderboardBody.appendChild(row));
}
// =======================
// Event listeners
// =======================
userSearch.addEventListener('input', filterLeaderboard);
problemFilter.addEventListener('input', filterLeaderboard);
runtimeFilter.addEventListener('change', filterLeaderboard);
// Set up sorting
sortableHeaders.forEach(header => {
header.addEventListener('click', () => {
const column = header.dataset.sort;
// Reset all sort indicators
sortableHeaders.forEach(h => {
h.classList.remove('sort-asc', 'sort-desc');
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);
});
// Determine new sort direction
if (currentSort.column === column) {
currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
} else {
currentSort.column = column;
currentSort.direction = 'asc';
}
// Apply new sort
header.classList.add(`sort-${currentSort.direction}`);
sortLeaderboard(column, currentSort.direction);
});
});
const rankInfoBtn = document.getElementById('rankInfoBtn');
const rankingExplanation = document.getElementById('rankingExplanation');
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');
}
});