first commit

README.md

@@ -0,0 +1 @@
+# conductor

assets/svg/Gong.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.23 20.87"><defs><style>.cls-1{fill:#fff;stroke-width:0px;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style></defs><g id="Layer_1-2"><path class="cls-1" d="M20.2,10.52c0,3.15-2.5,5.71-5.59,5.71s-5.58-2.55-5.58-5.71,2.5-5.71,5.58-5.71,5.59,2.55,5.59,5.71"/><path class="cls-2" d="M0,.5c3.67,0,6.64,4.45,6.64,9.94S3.67,20.37,0,20.37"/><path class="cls-2" d="M29.23,20.37c-3.67,0-6.64-4.45-6.64-9.94S25.56.5,29.23.5"/></g></svg>

assets/svg/Orchestral Bass.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.33 18.79"><defs><style>.cls-1{fill:#fff;stroke-width:0px;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style></defs><g id="Layer_1-2"><path class="cls-1" d="M19.09,7.44c0,4.11-3.32,7.44-7.42,7.44s-7.42-3.33-7.42-7.44S7.56,0,11.66,0s7.42,3.33,7.42,7.44"/><path class="cls-2" d="M22.83,9.31c0,4.96-5,8.98-11.16,8.98S.5,14.27.5,9.31"/></g></svg>

assets/svg/Snare.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.27 23.95"><defs><style>.cls-1{fill:#fff;stroke-width:0px;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style></defs><g id="Layer_1-2"><polyline class="cls-2" points="14.97 23.55 .78 12.61 10.65 3.86"/><path class="cls-1" d="M14.98,0c-1.35,2.55-2.72,6.05-3.05,8.78l-1.84-4.44-4.31-2.26c2.8-.05,6.49-1.02,9.2-2.08"/><line class="cls-2" x1=".76" y1="23.55" x2="7.02" y2="17.42"/></g></svg>

assets/svg/Stave.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330.51 33.72"><defs><style>.cls-1{stroke:#828383;stroke-width:.5px;}.cls-1,.cls-2{fill:none;}.cls-3{clip-path:url(#clippath-2);}.cls-2{stroke-width:0px;}.cls-4{clip-path:url(#clippath-1);}.cls-5{opacity:.75;}.cls-6{clip-path:url(#clippath);}</style><clipPath id="clippath"><rect class="cls-2" width="330.51" height="33.72"/></clipPath><clipPath id="clippath-1"><rect class="cls-2" y="0" width="330.51" height="33.72"/></clipPath><clipPath id="clippath-2"><rect class="cls-2" x="-25" y="-22" width="380.51" height="56.72"/></clipPath></defs><g id="Layer_1-2"><g class="cls-6"><g class="cls-4"><g class="cls-5"><g class="cls-3"><rect class="cls-1" x=".25" y=".25" width="33" height="33.22"/><rect class="cls-1" x="132.26" y=".25" width="33" height="33.22"/><rect class="cls-1" x="66.26" y=".25" width="33" height="33.22"/><rect class="cls-1" x="198.27" y=".25" width="33" height="33.22"/><rect class="cls-1" x="264.26" y=".25" width="33" height="33.22"/><rect class="cls-1" x="33.26" y=".25" width="33" height="33.22"/><rect class="cls-1" x="165.27" y=".25" width="33" height="33.22"/><rect class="cls-1" x="99.25" y=".25" width="33" height="33.22"/><rect class="cls-1" x="231.27" y=".25" width="33" height="33.22"/><rect class="cls-1" x="297.26" y=".25" width="33" height="33.22"/><rect class="cls-1" x=".25" y=".25" width="330.01" height="6.56"/><rect class="cls-1" x=".25" y="13.58" width="330.01" height="6.56"/><rect class="cls-1" x=".25" y="6.91" width="330.01" height="6.56"/><rect class="cls-1" x=".25" y="20.24" width="330.01" height="6.56"/><rect class="cls-1" x=".25" y="26.91" width="330.01" height="6.56"/></g></g></g></g></g></svg>

assets/svg/Surdo Napa.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.43 23.52"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:.87px;}</style></defs><g id="Layer_1-2"><polygon class="cls-1" points="6.71 22.55 .71 10.73 12.72 10.73 6.71 22.55"/><path class="cls-1" d="M1.03,4.12h11.36M2.7.32l8.03,7.6M10.73.32L2.7,7.92"/></g></svg>

assets/svg/Surdo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.43 23.67"><defs><style>.cls-1{fill:#fff;stroke-width:0px;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:.87px;}</style></defs><g id="Layer_1-2"><polygon class="cls-2" points="6.71 22.71 .71 10.89 12.72 10.89 6.71 22.71"/><path class="cls-1" d="M11.33,4.54c0,2.51-2.07,4.54-4.62,4.54S2.09,7.05,2.09,4.54,4.16,0,6.71,0s4.62,2.03,4.62,4.54"/></g></svg>

assets/svg/Timpani Large.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.29 23.81"><defs><style>.cls-1{fill:#fff;stroke-width:0px;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style></defs><g id="Layer_1-2"><polyline class="cls-2" points="0 .5 19.76 .5 5.02 11.32 15.28 19.98"/><path class="cls-1" d="M19.84,23.81c-2.83-1.05-6.66-2.01-9.57-2.06l4.48-2.23,1.92-4.4c.35,2.7,1.76,6.17,3.18,8.69"/><line class="cls-2" x1="1.74" y1="23.81" x2="1.74" y2=".47"/></g></svg>

assets/svg/Timpani Small.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.32 23.67"><defs><style>.cls-1{fill:#fff;stroke-width:0px;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style></defs><g id="Layer_1-2"><polyline class="cls-2" points="15.02 .4 .79 11.21 10.3 19.39"/><path class="cls-1" d="M15.22,23.67c-2.73-1.05-6.43-2.01-9.24-2.06l4.33-2.23,1.85-4.39c.34,2.7,1.7,6.16,3.07,8.68"/></g></svg>

assets/svg/Toms.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.43 23.96"><defs><style>.cls-1{fill:#fff;stroke-width:0px;}.cls-2{stroke-miterlimit:10;}.cls-2,.cls-3{fill:none;stroke:#fff;stroke-width:.87px;}</style></defs><g id="Layer_1-2"><polygon class="cls-2" points="6.71 22.99 .71 11.18 12.72 11.18 6.71 22.99"/><path class="cls-1" d="M9.11,7.86c0,1.3-1.07,2.36-2.4,2.36s-2.4-1.05-2.4-2.36,1.07-2.36,2.4-2.36,2.4,1.06,2.4,2.36"/><path class="cls-1" d="M9.11,2.36c0,1.3-1.07,2.36-2.4,2.36s-2.4-1.06-2.4-2.36S5.39,0,6.71,0s2.4,1.06,2.4,2.36"/><line class="cls-3" x1="3.46" y1="16.34" x2="9.97" y2="16.34"/></g></svg>

assets/svg/Tubular Bells.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.32 23.97"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;}</style></defs><g id="Layer_1-2"><path class="cls-1" d="M14.82,7.72c0,3.99-3.21,7.22-7.16,7.22S.5,11.71.5,7.72,3.7.5,7.66.5s7.16,3.24,7.16,7.22Z"/><path class="cls-1" d="M7.66,13.21c-1.53,3.42-3.07,6.84-4.6,10.26h9.2c-1.53-3.42-3.07-6.84-4.6-10.26Z"/><ellipse class="cls-1" cx="7.66" cy="7.72" rx="4.55" ry="4.68"/></g></svg>

assets/svg/time-pointer.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="3" height="1200">
+   
+<line style="fill: rgb(0, 216, 0); stroke: rgb(0, 216, 0);" x1="1" y1="1" x2="1" y2="1200"></line>
+
+</svg>

index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vertical Line Animation</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="title">Conductor</div>
+
+    <div class="sheet-music-window" id="music-window">
+      <object
+        type="image/svg+xml"
+        data="/assets/svg/time-pointer.svg"
+        class="time-indicator"
+        id="time-indicator"
+      ></object>
+    </div>
+    <script src="/src/script.js"></script>
+  </body>
+</html>

src/script.js

@@ -0,0 +1,79 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const svgFiles = [
+        { fileName: 'Gong.svg', yPos: '20%' },
+        { fileName: 'Orchestral Bass.svg', yPos: '10%' },
+        { fileName: 'Snare.svg', yPos: '20%' },
+        { fileName: 'Surdo Napa.svg', yPos: '30%' },
+        { fileName: 'Surdo.svg', yPos: '25%' },
+        { fileName: 'Timpani Large.svg', yPos: '40%' },
+        { fileName: 'Timpani Small.svg', yPos: '30%' },
+        { fileName: 'Toms.svg', yPos: '25%' },
+        { fileName: 'Tubular Bells.svg', yPos: '0%' }
+    ];
+    const numStaves = 6;
+    const numFiles = svgFiles.length;
+    const sheetWindow = document.getElementById("music-window");
+
+    for (let i = 1; i <= numStaves; i++) {
+        const staveWrapper = document.createElement('div');
+        staveWrapper.classList.add(`stave-wrapper`);
+        staveWrapper.setAttribute("id", `stave-wrapper-${i}`);
+        staveWrapper.style.position = 'relative';
+        const staveObject = document.createElement('object');
+        staveObject.type = 'image/svg+xml';
+        staveObject.data = 'assets/svg/Stave.svg';
+        staveObject.classList.add('stave-svg');
+
+        staveWrapper.appendChild(staveObject);
+        sheetWindow.appendChild(staveWrapper);
+    }
+
+    const timeIndicator = document.querySelector('#time-indicator');
+
+    // Debugging log to ensure the element is found
+    if (timeIndicator) {
+        console.log('timeIndicator element found');
+    } else {
+        console.log('timeIndicator element not found');
+    }
+
+    timeIndicator.addEventListener("animationiteration", () => {
+        const icons = document.querySelectorAll('.event-icon');
+
+        icons.forEach((icon) => {
+            icon.classList.add('fade-out');
+            icon.addEventListener('transitionend', () => {
+                icon.remove();
+            });
+        });
+    });
+
+    document.addEventListener('click', () => {
+
+        const randomStaveNumber = Math.floor(Math.random() * numStaves + 1);
+        const randomFileNumber = Math.floor(Math.random() * numFiles + 1);
+        const rect = timeIndicator.getBoundingClientRect();
+        const sheetLeft = sheetWindow.getBoundingClientRect().left;
+        const xPosition = rect.left + window.scrollX - sheetLeft;
+
+        console.log(`${svgFiles[randomStaveNumber].fileName}`);
+
+        const newObject = document.createElement('div');
+        newObject.classList.add('event-icon');
+        newObject.style.position = 'absolute';
+        newObject.style.left = `${xPosition}px`;
+        newObject.style.top = `${svgFiles[randomFileNumber].yPos}`;
+        const eventIcon = document.createElement('object');
+        eventIcon.type = 'image/svg+xml';
+        eventIcon.data = `assets/svg/${svgFiles[randomFileNumber].fileName}`;
+        eventIcon.style.width = '35px';
+        eventIcon.style.height = '35px';
+        // eventIcon.style.backgroundColor = 'red';
+
+        newObject.appendChild(eventIcon);
+
+        const staveWrapper = document.getElementById(`stave-wrapper-${randomStaveNumber}`);
+        staveWrapper.appendChild(newObject);
+    });
+
+})

styles.css

@@ -0,0 +1,62 @@
+
+body {
+    display: flex;
+    flex-direction: column;
+    /* justify-content: center; */
+    align-items: center;
+    background-color: rgb(24, 24, 24);
+    position: absoulute;
+    height: 100vh;
+}
+
+.sheet-music-window {
+    position: relative;
+    width: 80vw;
+    max-width: 700px;
+    height: auto;
+    margin: 0;
+    background-color: rgb(49, 45, 45);
+    
+}
+
+.title {    
+    height: 20vh;
+    position: relative;
+}
+
+.stave-wrapper {
+    position: relative;
+    background-color: rgb(24,24,24);
+    border: 1px solid rgb(24,24,24);
+    padding: 30px;
+}
+
+.time-indicator {
+    top: 0;
+    left: 0;
+    position: absolute;
+    width: 2px; /* Adjust width of SVG as needed */
+    height: 100%; /* Adjust height of SVG as needed */
+    animation: moveRight 10s linear infinite;
+    z-index: 2; /* Ensure it is above other elements */
+}
+
+.fade-out {
+    opacity: 0;
+    transition: opacity 0.8s ease;
+}
+
+@keyframes moveRight {
+    0% { 
+        left: 0; 
+        opacity: 1;
+    }
+    95% { 
+        /* left: 95%; Move to the right edge minus any margins */
+        opacity: 1;
+    }
+    100% { 
+        left: 100%; 
+        opacity: 0;
+    }
+}