script.js

function copyEmailToClipboard(event) {
  event.preventDefault();
  const href = event.currentTarget.getAttribute("href");
  const email = href.replace("mailto:", "");

  // Use the Clipboard API to write the text
  navigator.clipboard
    .writeText(email)
    .then(() => {
      alert("Email address copied: " + email);
    })
    .catch((err) => {
      console.error("Could not copy text: ", err);
    });
}

const projects = document.querySelectorAll(".proj-container");
const projBtns = document.querySelectorAll("#proj-list-container button");
const projNumBtns = document.querySelectorAll(".proj-num-btn");
let currentActiveTarget = "colourmania";

projBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    const target = btn.dataset.target;
    currentActiveTarget = target;
    projects.forEach((project) => {
      project.classList.toggle("active", project.dataset.view === target);
      console.log(target);
    });
    projNumBtns.forEach((btn) => {
      btn.classList.toggle("active", btn.dataset.target === target);
    });
  });
  //   btn.addEventListener("mouseenter", () => {
  //     const target = btn.dataset.target;
  //     projNumBtns.forEach((btn) => {
  //       btn.classList.toggle("active", btn.dataset.target === target);
  //     });
  //   });
  //   btn.addEventListener("mouseleave", () => {
  //     projNumBtns.forEach((numBtn) => {
  //       numBtn.classList.toggle(
  //         "active",
  //         numBtn.dataset.target === currentActiveTarget
  //       );
  //     });
  //   });
});

createCanvas(4, 50);

function createCanvas(rows, cols) {
  const container = document.querySelector(".sketch-container");
  //   if (!initialise) {
  //     container.replaceChildren();
  //   }
  for (let i = 0; i < rows; i++) {
    const row = document.createElement("div");
    row.style.display = "flex";
    for (let j = 0; j < cols; j++) {
      const square = document.createElement("div");
      square.classList.add("pixel");
      square.setAttribute(
        "style",
        "border-left: 3px solid black; border-top: 3px solid black; flex: 1; aspect-ratio: 1/1;"
      );
      if (j === cols - 1) {
        square.style.borderRight = "3px solid black";
      }
      if (i === rows - 1) {
        square.style.borderBottom = "3px solid black";
      }
      row.appendChild(square);
    }
    container.appendChild(row);
  }
  container.addEventListener("mouseover", (event) => {
    if (
      event.target.classList.contains("pixel") &&
      !event.target.classList.contains("coloured")
    ) {
      event.target.style.backgroundColor = generateRandomColor();
      event.target.classList.add("coloured");
    }
  });
}

const generateRandomColor = () => {
  // 1. Pick a random Hue (0-360)
  const h = Math.floor(Math.random() * 360);

  // 2. Fix Saturation at 80% and Lightness at 50% for vibrancy
  const s = 80;
  const l = 50;

  // 3. Convert HSL to Hex
  const l_alt = l / 100;
  const a = (s * Math.min(l_alt, 1 - l_alt)) / 100;

  const f = (n) => {
    const k = (n + h / 30) % 12;
    const color = l_alt - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
    return Math.round(255 * color)
      .toString(16)
      .padStart(2, "0");
  };

  return `#${f(0)}${f(8)}${f(4)}`;
};

// function getSize() {
//   let size = Number(window.prompt("Choose the size of the square canvas", ""));
//   if (size < 0 || size > 99) {
//     size = Number(window.prompt("Choose the size of the square canvas", ""));
//   }
//   createCanvas(size, false);
// }

// const changeSize = document.querySelector("button");
// changeSize.addEventListener("click", getSize);