73 lines
2.5 KiB
JavaScript
73 lines
2.5 KiB
JavaScript
function sortByNthElement(arr, n) {
|
|
return arr.sort((a, b) => {
|
|
// Compare the n-th element of each sub-array (a[n] and b[n])
|
|
if (a[n] < b[n]) return -1; // a[n] comes before b[n]
|
|
if (a[n] > b[n]) return 1; // a[n] comes after b[n]
|
|
return 0; // a[n] is equal to b[n]
|
|
});
|
|
}
|
|
|
|
data = [[["Ryan",0.123,"rust","part1"],["Danmax",0.506,"rust","part1"],["Shanee and Giedrius",0.009,"rust","both"],["Shanee",1,"rust","both"],["Kris",1.5,"golang","both"],["Shanee",8,"python","both"],["Liam",8,"csharp","part1"],["Max",0.646,"cpp","both"],["Kris",30,"elixir","both"]],[],[["Max",0.0001,"rust","both"]]]
|
|
data[day-1] = sortByNthElement(data[day-1], 1)
|
|
|
|
let full_percent = data[day-1][data[day-1].length-1][1]*1.15 // 30 + 5 = 35
|
|
|
|
let div = document.getElementById('attempts');
|
|
let style = document.getElementById('style');
|
|
let newPageHTML = ``
|
|
let newStyle = `<style>`
|
|
|
|
for (let i = 0; i < data[day-1].length; i++) {
|
|
newPageHTML += `<div id="bar-${i}" class="${data[day-1][i][3]}"></div><div id="data-${i}">${data[day-1][i][0]} (${data[day-1][i][3]}): ${data[day-1][i][1]}s <img src="/images/${data[day-1][i][2]}.png" height="15"></div>`
|
|
};
|
|
for (let i = 0; i < data[day-1].length; i++) {
|
|
newStyle += `
|
|
#data-${i} {
|
|
position: absolute;
|
|
left: ${(data[day-1][i][1]/full_percent)*100}%;
|
|
top: ${((i+1)*5)+5}%;
|
|
}
|
|
#bar-${i} {
|
|
width: ${(data[day-1][i][1]/full_percent)*100}%;
|
|
height: 5px;
|
|
position: absolute;
|
|
top: ${((i+1)*5)+6}%;
|
|
left: 0;
|
|
}
|
|
`
|
|
};
|
|
newStyle += "</style>"
|
|
|
|
style.innerHTML = newStyle;
|
|
div.innerHTML = newPageHTML
|
|
|
|
// Function to create the ruler
|
|
function createRuler(containerId) {
|
|
const container = document.getElementById(containerId);
|
|
const ruler = document.createElement('div');
|
|
ruler.classList.add('ruler');
|
|
|
|
ruler.style.width = 100 + '%';
|
|
|
|
// Loop to create marks along the ruler
|
|
for (let i = 0; i < full_percent; i++) {
|
|
const mark = document.createElement('div');
|
|
mark.classList.add('mark');
|
|
mark.style.left = (i/full_percent * 100) + '%';
|
|
|
|
// Change mark style based on intervals
|
|
if (i % 10 == 0) { // A longest mark every 10 marks
|
|
mark.classList.add('longest-mark');
|
|
} else if (i % 2 == 0) { // A long mark every other mark
|
|
mark.classList.add('long-mark');
|
|
}
|
|
|
|
ruler.appendChild(mark);
|
|
}
|
|
|
|
container.appendChild(ruler);
|
|
}
|
|
|
|
// Call the function to create a ruler with 80% of the screen width and 0.01 (1%) mark spacing
|
|
createRuler('ruler-container');
|