Create Globals component

boonier · Jan 30, 2025 · bc0206e · bc0206e
1 parent 6d5a57a
commit bc0206e
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 26 deletions.
diff --git a/src/components/Globals.svelte b/src/components/Globals.svelte
@@ -0,0 +1,16 @@
+<script>
+  // your script goes here
+</script>
+
+<aside>
+  <div class="controls controls__patch-performance">
+    <div class="program-change">
+      <ControlGroup title="Program">
+        <ProgramChange title="Patch No." />
+      </ControlGroup>
+    </div>
+  </div>
+  <div class="controls">
+    <Button label="Play note" />
+  </div>
+</aside>
diff --git a/src/components/ToneManager.svelte b/src/components/ToneManager.svelte
@@ -57,19 +57,6 @@
     <Tone id={3} isActive={selectedTone === 2} />
     <Tone id={4} isActive={selectedTone === 3} />
   </article>
-
-  <aside>
-    <div class="controls controls__patch-performance">
-      <div class="program-change">
-        <ControlGroup title="Program">
-          <ProgramChange title="Patch No." />
-        </ControlGroup>
-      </div>
-    </div>
-    <div class="controls">
-      <Button label="Play note" />
-    </div>
-  </aside>
 </section>
 
 <style>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -10,6 +10,12 @@
     playTestNote,
   } from "$lib/handlers.js";
 
+  //TODO move to Globals component
+  import ControlGroup from "../components/ControlGroup.svelte";
+  import Button from "../components/Button.svelte";
+  import ProgramChange from "../components/ProgramChange.svelte";
+  //TODO end
+
   let isLoading = true;
   let ioContent = ``;
   let inputDevices = [];
@@ -47,14 +53,29 @@
 
 <MidiSetup on:setup={handleMidiSetup} />
 
-{#if !isLoading}
-  <DeviceSelectors
-    {inputDevices}
-    {outputDevices}
-    bind:offsetInputPort
-    bind:offsetOutputPort
-  />
-{/if}
+<section class="global-controls">
+  {#if !isLoading}
+    <DeviceSelectors
+      {inputDevices}
+      {outputDevices}
+      bind:offsetInputPort
+      bind:offsetOutputPort
+    />
+  {/if}
+
+  <section>
+    <div class="controls controls__patch-performance">
+      <div class="program-change">
+        <ControlGroup title="Program">
+          <ProgramChange title="Patch No." />
+        </ControlGroup>
+      </div>
+    </div>
+    <div class="controls">
+      <Button label="Play note" />
+    </div>
+  </section>
+</section>
 
 {#if showDebug}
   <pre>effectiveInputPort: {effectiveInputPort}</pre>
@@ -76,16 +97,13 @@
 {/if}
 
 <style>
-  section {
-    margin: 10px;
-  }
-
   /* .tones-container {
     border: 1px solid #535353;
   } */
 
-  section {
+  .global-controls {
     display: flex;
+    margin: 10px;
   }
   article {
     flex: 2;