From 0e31c0ea1d43893bd2027ee0f989296996d4e803 Mon Sep 17 00:00:00 2001
From: joe <spuriousmeaning@gmail.com>
Date: Thu, 24 Apr 2025 13:19:06 +0100
Subject: [PATCH] layout done

---
 assets/instruments/instruments.json         | 2 +-
 assets/instruments/orchestral-bass/bass.svg | 2 +-
 src/midi.js                                 | 1 -
 src/script.js                               | 5 ++---
 styles.css                                  | 9 +++++----
 5 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/assets/instruments/instruments.json b/assets/instruments/instruments.json
index 4ad71d1..a080fac 100644
--- a/assets/instruments/instruments.json
+++ b/assets/instruments/instruments.json
@@ -92,7 +92,7 @@
     "midi-channel-name": "conductorToms",
     "image": {
       "filename": "toms.svg",
-      "yPos": "81%",
+      "yPos": "62%",
       "width": "100",
       "height": "100"
     }
diff --git a/assets/instruments/orchestral-bass/bass.svg b/assets/instruments/orchestral-bass/bass.svg
index 334fb75..8499d8d 100644
--- a/assets/instruments/orchestral-bass/bass.svg
+++ b/assets/instruments/orchestral-bass/bass.svg
@@ -1 +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" width="100" height="100"><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>
\ No newline at end of file
+<?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" width="200" height="200"><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>
\ No newline at end of file
diff --git a/src/midi.js b/src/midi.js
index d602d83..a60c744 100644
--- a/src/midi.js
+++ b/src/midi.js
@@ -1,6 +1,5 @@
 export async function sendMidiMessage(midiChannelName, sampleNumber) {
   try {
-    const midiAccess = await navigator.requestMIDIAccess();
     const availableMidiOutputs = midiAccess.outputs.values();
     let midiOut;
 
diff --git a/src/script.js b/src/script.js
index 26e9fc1..2e1463c 100644
--- a/src/script.js
+++ b/src/script.js
@@ -4,8 +4,8 @@ import { DataStream } from "./socket.js";
 import { Renderer } from "./render.js";
 
 document.addEventListener("DOMContentLoaded", async () => {
-  sendMidiMessage();
 
+  const midiAccess = await navigator.requestMIDIAccess();
   const conductor = new Conductor();
   await conductor.init();
   const dataStream = new DataStream();
@@ -24,8 +24,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     const randomSampleNumber = Math.floor(Math.random() * numSamples);
 
     renderer.placeIcon(selectedInstrument);
-    sendMidiMessage(selectedInstrument.midiChannelName, randomSampleNumber + 1);
-    console.log(selectedInstrument.midiChannelName, randomSampleNumber + 1);
+    sendMidiMessage(selectedInstrument.midiChannelName, randomSampleNumber + 1, midiAccess);
   });
 
   dataStream.init();
diff --git a/styles.css b/styles.css
index 0621e6e..9617a4d 100644
--- a/styles.css
+++ b/styles.css
@@ -78,6 +78,7 @@ html {
     position: absolute;
     top: 0;
     left: -10px;
+    height: 12vh;
     width: 102%; /* Matches JS padding */
     display: block;
     pointer-events: none;
@@ -89,7 +90,7 @@ html {
     position: relative;
     display: block;
     width: 100%;
-    height: 10vh;
+    height: 12vh;
     background-color: rgb(24,24,24);
     padding-top: 30px;
     padding-bottom: 20px;
@@ -183,7 +184,7 @@ html {
     background-color: rgb(24,24,24);
     /* height: 20vh; */
     font-family: Helvetica;
-    font-size: clamp(18px,1.1vw, 18px);
+    font-size: clamp(14px,1.1vw, 18px);
 
 }
 
@@ -214,9 +215,9 @@ html {
     top: 0;
     bottom: 0;
     width: 2px;
-    height: 82%;
+    height: 92%;
     background-color: red;
-    z-index: 999;
+    z-index: 0;
     animation: moveRight 10s linear infinite;
     will-change: transform;
 }