main.js

import * as audio from "./audio.js";

const mouse = document.getElementById("mouse");

const inputElement = document.getElementById("input");

const MIN_VOLUME = 1;
const MAX_VOLUME = 15;
const MIN_FREQUENCY = 130;
const MAX_FREQUENCY = 250;

let MONTH_INPUT = 1;
let DAY_INPUT = 1;
let YEAR_INPUT = 1;

let CURRENT;

const debugElement = document.getElementById("debug");
const monthGridElement = document.getElementById("grid-month");
const dayGridElement = document.getElementById("grid-day");
const startScreen = document.getElementById("startscreen");

const yearGridElement = document.getElementById("grid-year");
yearGridElement.innerHTML = Array.from(Array(100).keys())
  .map((_v, i) => `<div>${1925 + i}</div>`)
  .join("");

function clamp(min, value, max) {
  return Math.min(Math.max(value, min), max);
}

let state = "start";

let grid = {
  element: document.getElementById("grid-month"),
  width: 4,
  height: 3,
};

document.addEventListener("keyup", function (e) {
  if (e.key === "d") {
    debugElement.style.display =
      debugElement.style.display === "none" ? "block" : "none";
  }
  if (state === "month" && e.key === " ") {
    MONTH_INPUT = CURRENT;
    state = "day";
    update();
  } else if (state === "day" && e.key === " ") {
    DAY_INPUT = CURRENT;
    state = "year";
    update();
  } else if (state === "year" && e.key === " ") {
    YEAR_INPUT = 1925 + CURRENT - 1;
    state = "start";
    update();
  }
});

function update() {
  if (state === "month") {
    monthGridElement.style.display = "grid";
    grid = {
      element: document.getElementById("grid-month"),
      width: 4,
      height: 3,
    };
  } else {
    monthGridElement.style.display = "none";
  }
  if (state === "day") {
    dayGridElement.style.display = "grid";
    grid = {
      element: document.getElementById("grid-day"),
      width: 6,
      height: 6,
    };
  } else {
    dayGridElement.style.display = "none";
  }
  if (state === "year") {
    yearGridElement.style.display = "grid";
    grid = {
      element: document.getElementById("grid-year"),
      width: 10,
      height: 10,
    };
  } else {
    yearGridElement.style.display = "none";
  }

  if (state === "month" || state == "day" || state == "year") {
    mouse.style.display = "block";
  } else {
    mouse.style.display = "none";
  }

  if (state === "start" || state === "end") {
    startScreen.style.display = "flex";
    inputElement.value = `${DAY_INPUT}.${MONTH_INPUT}.${YEAR_INPUT}`;
  } else {
    startScreen.style.display = "none";
  }
}

inputElement.addEventListener("focus", async () => {
  try {
    if (state == "start") {
      state = "month";
      update();
    }
    audio.start((avgVolume, avgFrequency) => {
      const freq = clamp(
        0,
        (avgFrequency - MIN_FREQUENCY) / (MAX_FREQUENCY - MIN_FREQUENCY),
        1
      );
      const vol = clamp(
        0,
        (avgVolume - MIN_VOLUME) / (MAX_VOLUME - MIN_VOLUME),
        1
      );

      mouse.style.left = `${window.innerWidth * vol}px`;
      mouse.style.top = `${window.innerHeight * freq}px`;

      const columns = Math.ceil(vol * grid.width);
      const rows = Math.floor(freq * grid.height);

      const n = rows * grid.width + columns;
      CURRENT = n;

      Array.from(grid.element.children).forEach((element, index) => {
        if (index < n) {
          element.style.background = "#f2cd37";
        } else {
          element.style.background = "#e7e7e7";
        }
      });
    });
  } catch (error) {
    console.error("Error accessing the microphone", error);
  }
});