script.js

document.addEventListener("DOMContentLoaded", () => {
  const canvas = document.querySelector("#canvas");
  const width = document.querySelector("input[name=width]");
  const exportButton = document.querySelector("button#export");
  const primary = document.querySelector("input[name=primary]");
  const secondary = document.querySelector("input[name=secondary]");

  width.addEventListener("change", (e) => {
    createCanvas(canvas, parseInt(e.target.value));
  });

  primary.addEventListener("change", (e) => {
    document.documentElement.style.setProperty("--primary", e.target.value);
  });

  secondary.addEventListener("change", (e) => {
    document.documentElement.style.setProperty("--secondary", e.target.value);
  });

  exportButton.addEventListener("click", generate);

  createCanvas(canvas, parseInt(width.value));
});

function createCanvas(canvas, width) {
  canvas.innerHTML = "";
  for (i = 0; i < 5; i++) {
    let row = document.createElement("div");
    row.classList.add("row");
    for (j = 0; j < width; j++) {
      let element = document.createElement("select");
      element.classList.add("cell");

      let opt1 = document.createElement("option");
      opt1.setAttribute("value", "empty");
      opt1.innerText = "Empty";

      let opt2 = document.createElement("option");
      opt2.setAttribute("value", "primary");
      opt2.innerText = "Primary";

      let opt3 = document.createElement("option");
      opt3.setAttribute("value", "secondary");
      opt3.innerText = "Secondary";

      element.appendChild(opt1);
      element.appendChild(opt2);
      element.appendChild(opt3);

      element.addEventListener("change", (e) => {
        e.target.setAttribute("value", e.target.value);
      });

      row.appendChild(element);
    }
    canvas.appendChild(row);
  }
}

function generate() {
  const char = document.querySelector("input[name=char]");
  const output_destination = document.querySelector("code.export-destination");
  const width = document.querySelector("input[name=width]");
  const canvas = document.querySelector("#canvas");

  let data = [[], [], [], [], []];

  canvas.childNodes.forEach((row, i) => {
    row.childNodes.forEach((cell) => {
      data[i].push(cell.value == "empty" ? 0 : cell.value == "primary" ? 1 : 2);
    });
  });

  output_destination.innerText = `'${char.value}' => Some(Glyph {
    width: ${width.value},
    pixels: &[
        &[${data[0].join(",")}],
        &[${data[1].join(",")}],
        &[${data[2].join(",")}],
        &[${data[3].join(",")}],
        &[${data[4].join(",")}],
    ],
}),`;
  output_destination.classList.remove("empty");
}