strumming-metronome/src/ui.js

A simple JavaScript metronome for strumming practice.

import { metronomeTables } from './constants.js';

export function setupButtonToggles(metronomeTable) {
  metronomeTable.querySelectorAll(".metronome-arrow-up-btn").forEach(button => {
    button.addEventListener("click", () => {
      button.classList.toggle("metronome-selected-button");
      if (button.firstElementChild.className === "metronome-arrow-up-black-icon") {
        button.firstElementChild.className = "metronome-arrow-up-blue-icon";
      } else {
        button.firstElementChild.className = "metronome-arrow-up-black-icon";
      }
    });
  });
  
  metronomeTable.querySelectorAll(".metronome-arrow-down-btn").forEach(button => {
    button.addEventListener("click", () => {
      button.classList.toggle("metronome-selected-button");
      if (button.firstElementChild.className === "metronome-arrow-down-black-icon") {
        button.firstElementChild.className = "metronome-arrow-down-blue-icon";
      } else {
        button.firstElementChild.className = "metronome-arrow-down-black-icon";
      }
    });
  });
}

export function resetVisualStates(beats, downQuarterBeatButtons, upQuarterBeatButtons) {
  beats.forEach(beat => beat.style.color = "black");
  
  downQuarterBeatButtons.forEach(btn => {
    if (btn.classList.contains("metronome-selected-button")) {
      btn.firstElementChild.className = "metronome-arrow-down-blue-icon";
    } else {
      btn.firstElementChild.className = "metronome-arrow-down-black-icon";
    }
    btn.classList.remove("metronome-active-btn");
  });
  
  upQuarterBeatButtons.forEach(btn => {
    if (btn.classList.contains("metronome-selected-button")) {
      btn.firstElementChild.className = "metronome-arrow-up-blue-icon";
    } else {
      btn.firstElementChild.className = "metronome-arrow-up-black-icon";
    }
    btn.classList.remove("metronome-active-btn");
  });
}

export function setPlayingState(icon, text, button) {
  icon.classList.remove("metronome-play-icon");
  icon.classList.add("metronome-stop-icon");
  text.textContent = "Stop";
  button.classList.add("running");
}

export function setStoppedState(icon, text, button) {
  icon.classList.remove("metronome-stop-icon");
  icon.classList.add("metronome-play-icon");
  text.textContent = "Play";
  button.classList.remove("running");
}

export function setControlsEnabled(enabled, timeSignature, bpmInput, upQuarterBeatButtons, downQuarterBeatButtons, subdivision) {
  if (enabled) {
    timeSignature.removeAttribute("disabled");
    bpmInput.removeAttribute("disabled");
    if (subdivision) {
      subdivision.removeAttribute("disabled");
    }
    upQuarterBeatButtons.forEach(btn => btn.removeAttribute("disabled"));
    downQuarterBeatButtons.forEach(btn => btn.removeAttribute("disabled"));
  } else {
    timeSignature.setAttribute("disabled", true);
    bpmInput.setAttribute("disabled", true);
    if (subdivision) {
      subdivision.setAttribute("disabled", true);
    }
    upQuarterBeatButtons.forEach(btn => btn.setAttribute("disabled", true));
    downQuarterBeatButtons.forEach(btn => btn.setAttribute("disabled", true));
  }
}

export function injectTable(timeSelection) {
  const metronomeTable = document.querySelector("#metronome-table");
  metronomeTable.innerHTML = metronomeTables[timeSelection];
  return metronomeTable;
}