MMPCreator

assets/js/creations/main.js

@@ -0,0 +1,121 @@
+// js/main.js
+import {
+  appState,
+  addTrackToState,
+  removeLastTrackFromState,
+} from "./state.js";
+import {
+  togglePlayback,
+  stopPlayback,
+  rewindPlayback,
+  initializeAudioContext,
+} from "./audio.js";
+import { handleFileLoad, generateMmpFile } from "./file.js";
+import {
+  renderApp,
+  redrawSequencer,
+  loadAndRenderSampleBrowser,
+  showOpenProjectModal,
+  closeOpenProjectModal,
+} from "./ui.js";
+import { adjustValue, enforceNumericInput } from "./utils.js";
+
+// --- INICIALIZAÇÃO E EVENTOS FINAIS ---
+document.addEventListener("DOMContentLoaded", () => {
+  const newProjectBtn = document.getElementById("new-project-btn");
+  const openMmpBtn = document.getElementById("open-mmp-btn");
+  const saveMmpBtn = document.getElementById("save-mmp-btn");
+  const addInstrumentBtn = document.getElementById("add-instrument-btn");
+  const removeInstrumentBtn = document.getElementById("remove-instrument-btn");
+  const playBtn = document.getElementById("play-btn");
+  const stopBtn = document.getElementById("stop-btn");
+  const rewindBtn = document.getElementById("rewind-btn");
+  const metronomeBtn = document.getElementById("metronome-btn");
+  const mmpFileInput = document.getElementById("mmp-file-input");
+  const openProjectModal = document.getElementById("open-project-modal");
+  const openModalCloseBtn = document.getElementById("open-modal-close-btn");
+  const loadFromComputerBtn = document.getElementById("load-from-computer-btn");
+  const sidebarToggle = document.getElementById("sidebar-toggle");
+
+  newProjectBtn.addEventListener("click", () => {
+    if (
+      appState.tracks.length > 0 &&
+      !confirm("Você tem certeza? Alterações não salvas serão perdidas.")
+    )
+      return;
+    Object.assign(appState, {
+      tracks: [],
+      isPlaying: false,
+      playbackIntervalId: null,
+      currentStep: 0,
+      metronomeEnabled: false,
+      originalXmlDoc: null,
+    });
+    renderApp();
+  });
+
+  openMmpBtn.addEventListener("click", showOpenProjectModal);
+  loadFromComputerBtn.addEventListener("click", () => mmpFileInput.click());
+  mmpFileInput.addEventListener("change", (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      handleFileLoad(file);
+      closeOpenProjectModal();
+    }
+  });
+  saveMmpBtn.addEventListener("click", generateMmpFile);
+  addInstrumentBtn.addEventListener("click", addTrackToState);
+  removeInstrumentBtn.addEventListener("click", removeLastTrackFromState);
+  playBtn.addEventListener("click", togglePlayback);
+  stopBtn.addEventListener("click", stopPlayback);
+  rewindBtn.addEventListener("click", rewindPlayback);
+  metronomeBtn.addEventListener("click", () => {
+    initializeAudioContext();
+    appState.metronomeEnabled = !appState.metronomeEnabled;
+    metronomeBtn.classList.toggle("active", appState.metronomeEnabled);
+  });
+  openModalCloseBtn.addEventListener("click", closeOpenProjectModal);
+  openProjectModal.addEventListener("click", (e) => {
+    if (e.target === openProjectModal) closeOpenProjectModal();
+  });
+  sidebarToggle.addEventListener("click", () => {
+    document.body.classList.toggle("sidebar-hidden");
+    const icon = sidebarToggle.querySelector("i");
+    icon.className = document.body.classList.contains("sidebar-hidden")
+      ? "fa-solid fa-caret-right"
+      : "fa-solid fa-caret-left";
+  });
+
+  const inputs = document.querySelectorAll(".value-input");
+  inputs.forEach((input) => {
+    input.addEventListener("input", (event) => {
+      enforceNumericInput(event);
+      if (appState.isPlaying && event.target.id.startsWith("compasso-")) {
+        stopPlayback();
+      }
+      if (event.target.id.startsWith("compasso-")) {
+        redrawSequencer();
+      }
+    });
+    input.addEventListener("wheel", (event) => {
+      event.preventDefault();
+      const step = event.deltaY < 0 ? 1 : -1;
+      adjustValue(event.target, step);
+    });
+  });
+
+  const buttons = document.querySelectorAll(".adjust-btn");
+  buttons.forEach((button) => {
+    button.addEventListener("click", () => {
+      const targetId = button.dataset.target + "-input";
+      const targetInput = document.getElementById(targetId);
+      if (targetInput) {
+        adjustValue(targetInput, step);
+      }
+    });
+  });
+
+  // Inicia a aplicação
+  loadAndRenderSampleBrowser();
+  renderApp();
+});