add visualizer help prompt

index.html

@@ -372,6 +372,9 @@
               <div id="console" class="bg-white dark:bg-dark-2 h-full"></div>
             </div>
             <div id="visualizerContainer" class="flex-1 bg-white dark:bg-dark-2 hidden">
+              <div id="visualizer-help" class="w-full h-full flex items-center justify-center text-[#666] dark:text-[#bbb] transition">
+                <b>Start WebChucK for visualizer</b>
+              </div>
               <canvas id="visualizer" class="w-full h-full"></canvas>
             </div>
           </div>

src/components/gui/gui.ts

@@ -22,7 +22,7 @@ const BUTTON_MARGIN = 10 * RATIO;
 const BUTTON_SIZE = 70 * RATIO;
 const SLIDER_MARGIN = 15 * RATIO;
 const SLIDER_HEIGHT = 48 * RATIO;
-const TITLE_SIZE = 15 * RATIO;
+const TITLE_SIZE = 16 * RATIO;
 const SLIDERS_PER_ROW = 2;
 
 /**

src/components/visualizer.ts

@@ -43,6 +43,8 @@ export default class Visualizer {
     private spectrumFill: string = spectrumFillLight;
 
     constructor(canvas: HTMLCanvasElement, analyserNode: AnalyserNode) {
+        document.getElementById("visualizer-help")?.remove(); 
+
         const visualizerDefaultOptions = {
             frameSize: 2048,
             drawWaveform: true,
@@ -57,8 +59,6 @@ export default class Visualizer {
         this.frequencyData = new Float32Array(
             visualizerDefaultOptions.frameSize / 2
         );
-
-        // Set theme
         this.theme(getColorScheme() === "dark");
     }
 

src/host.ts

@@ -157,7 +157,7 @@ export async function startChuck() {
                 .then(() => theChuck.runFile("scoreplayer.ck")),
         ]);
     } catch (error) {
-        // Failed to load EZScore
+        console.error("Failed to load EZScore", error);
     }
 }