haxmas-day-7/script.js

const date = new Date();
const days = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();

const ornamentPositions = [
  // Row 1
  { x: 0, y: 0 },
  { x: 16, y: 0 },
  { x: 32, y: 0 },
  { x: 48, y: 0 },
  { x: 64, y: 0 },
  { x: 80, y: 0 },
  // Row 2
  { x: 0, y: 16 },
  { x: 16, y: 16 },
  { x: 32, y: 16 },
  { x: 48, y: 16 },
  { x: 64, y: 16 },
  { x: 80, y: 16 },
  // Row 3
  { x: 0, y: 32 },
  { x: 16, y: 32 },
  { x: 32, y: 32 },
  { x: 48, y: 32 },
  { x: 64, y: 32 },
  { x: 80, y: 32 },
  // Row 4
  { x: 0, y: 48 },
  { x: 16, y: 48 },
  { x: 32, y: 48 },
  { x: 48, y: 48 },
  { x: 64, y: 48 },
  { x: 80, y: 48 },
];

const stars = ["⭐", "💫", "💖", "🎄", "🏴‍☠️", "👾", "✨", "🌟"];

function changeStar() {
  let randomIndex = Math.floor(Math.random() * stars.length);
  document.getElementById("star").innerText = stars[randomIndex];
}

function getTreeX(y) {
  const center = 132;
  const maxWidth = 100;
  const minWidth = 10;

  const progress = Math.min(Math.max((y - 50) / 350, 0), 1);
  const widthAtY = minWidth + (maxWidth - minWidth) * progress;

  return center + (Math.random() - 0.5) * 2 * widthAtY;
}

document.addEventListener("DOMContentLoaded", () => {
  const decorations = document.getElementById("decorations");
  const dateText = document.getElementById("date");
  const star = document.getElementById("star");

  dateText.innerText = days + "/" + month + "/" + year;

  let ornamentCount = 5;
  if (month === 12) {
    ornamentCount = Math.max(25 - days, 0);
  }

  for (let i = 0; i < ornamentCount; i++) {
    const randomPos =
      ornamentPositions[Math.floor(Math.random() * ornamentPositions.length)];

    const ornament = document.createElement("div");
    ornament.className = "ornament";
    ornament.id = "ornament" + i;

    ornament.style.backgroundPosition = `-${randomPos.x}px -${randomPos.y}px`;

    const y = Math.random() * 300 + 80;
    const x = getTreeX(y);

    ornament.style.left = x + "px";
    ornament.style.top = y + "px";

    decorations.appendChild(ornament);
  }

  star.addEventListener("click", changeStar);
});