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');