var width = 100 / 6; 
var height = 100 / 4;

var current_width = 0;
var current_height = 0;

function getRandomColor() { //from https://stackoverflow.com/questions/1484506/random-color-generator
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
   

for(var i = 0; i < 24; i++){
    var box = document.getElementById("day-"+i.toString())

    box.style.position = "absolute"
    box.style.backgroundColor = getRandomColor()

    box.style.height = height.toString()+"%"
    box.style.width = width.toString()+"%"
    box.style.border = "2px solid black"
    box.style.display = "flex"
    box.style.alignItems = "center"
    box.style.justifyContent = "center"
    box.style.fontSize = "24px"
    box.style.fontWeight = "bold"
    box.textContent = (i + 1)

    box.style.top = current_height.toString()+"%"
    box.style.left = current_width.toString()+"%"

    current_width += width
    if((i+1) % 6 == 0){
      current_width = 0
      current_height += height
    }
}

const current_date = new Date();
const today = current_date.getDate();
const month = current_date.getMonth();

for (let i = 0; i < 24; i++) {
  let box = document.getElementById("day-" + i);
  if (!box) continue;

  box.addEventListener("click", function () {
    let day = Number.parseInt(box.textContent);
    
    if (month === 11 && day <= today) {
      box.style.backgroundColor = 'white';
      box.textContent = "\u{1F381}";
    } else {
      alert("Noch schläft das Türchen – wie ein Geschenk unter dem Baum.");
    }
  });
}