Arrumando botões de volume e pan, criação de novos compassos.

assets/js/creations/main.js

@@ -36,6 +36,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const openModalCloseBtn = document.getElementById("open-modal-close-btn");
   const loadFromComputerBtn = document.getElementById("load-from-computer-btn");
   const sidebarToggle = document.getElementById("sidebar-toggle");
+  const addBarBtn = document.getElementById("add-bar-btn");
 
   newProjectBtn.addEventListener("click", () => {
     if (
@@ -51,18 +52,32 @@ document.addEventListener("DOMContentLoaded", () => {
       metronomeEnabled: false,
       originalXmlDoc: null,
     });
+    // Reseta os inputs para o padrão
+    document.getElementById('bpm-input').value = 140;
+    document.getElementById('bars-input').value = 1;
+    document.getElementById('compasso-a-input').value = 4;
+    document.getElementById('compasso-b-input').value = 4;
     renderApp();
   });
 
+  addBarBtn.addEventListener("click", () => {
+    const barsInput = document.getElementById("bars-input");
+    if (barsInput) {
+      adjustValue(barsInput, 1);
+    }
+  });
+
   openMmpBtn.addEventListener("click", showOpenProjectModal);
   loadFromComputerBtn.addEventListener("click", () => mmpFileInput.click());
-  mmpFileInput.addEventListener("change", (event) => {
+  
+  mmpFileInput.addEventListener("change", async (event) => {
     const file = event.target.files[0];
     if (file) {
-      handleFileLoad(file);
+      await handleFileLoad(file);
       closeOpenProjectModal();
     }
   });
+
   saveMmpBtn.addEventListener("click", generateMmpFile);
   addInstrumentBtn.addEventListener("click", addTrackToState);
   removeInstrumentBtn.addEventListener("click", removeLastTrackFromState);
@@ -90,10 +105,10 @@ document.addEventListener("DOMContentLoaded", () => {
   inputs.forEach((input) => {
     input.addEventListener("input", (event) => {
       enforceNumericInput(event);
-      if (appState.isPlaying && event.target.id.startsWith("compasso-")) {
+      if (appState.isPlaying && (event.target.id.startsWith("compasso-") || event.target.id === 'bars-input')) {
         stopPlayback();
       }
-      if (event.target.id.startsWith("compasso-")) {
+      if (event.target.id.startsWith("compasso-") || event.target.id === 'bars-input') {
         redrawSequencer();
       }
     });
@@ -109,6 +124,7 @@ document.addEventListener("DOMContentLoaded", () => {
     button.addEventListener("click", () => {
       const targetId = button.dataset.target + "-input";
       const targetInput = document.getElementById(targetId);
+      const step = parseInt(button.dataset.step, 10) || 1;
       if (targetInput) {
         adjustValue(targetInput, step);
       }
@@ -118,4 +134,4 @@ document.addEventListener("DOMContentLoaded", () => {
   // Inicia a aplicação
   loadAndRenderSampleBrowser();
   renderApp();
-});
+});