From 27d8aa6d7daad50a8a8ffd871acf29da50ee4069 Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Mon, 3 Aug 2020 20:09:57 -0400
Subject: [PATCH] multiple lines

---
 app.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app.js b/app.js
index 897c2d6..465cc49 100644
--- a/app.js
+++ b/app.js
@@ -3,6 +3,8 @@ const numBeats = 7;
 const beatValue = 8;
 const widthPerBeat = 40;
 let numBars = 0;
+let numBarsOnCurrentLine = 0;
+let numLines = 0;
 
 // Create an SVG renderer and attach it to the DIV element named "boo".
 const musicSection = document.querySelector("#music");
@@ -41,7 +43,7 @@ const returnNewNote = () => {
 
 const createBar = () => {
     const staveWidth = numBeats*widthPerBeat;
-    const stave = new VF.Stave(numBars*staveWidth, 40, staveWidth);
+    const stave = new VF.Stave(numBarsOnCurrentLine*staveWidth, 40 + (numLines * 150), staveWidth);
 
     // Add a clef and time signature.
     if(numBars === 0){
@@ -80,8 +82,13 @@ const createBar = () => {
     Vex.Flow.Formatter.FormatAndDraw(context, stave, allNotes);
     beams.forEach(function(b) {b.setContext(context).draw()})
     numBars++;
+    numBarsOnCurrentLine++;
+    if(numBarsOnCurrentLine === 4){
+        numLines++;
+        numBarsOnCurrentLine = 0;
+    }
 }
 
-for(let i = 0; i < 4; i++){
+for(let i = 0; i < 13; i++){
     createBar();
 }