1 files changed, 27 insertions, 7 deletions
diff --git a/src/ui/App.jsx b/src/ui/App.jsx
index 5ee21b7..eaca9a4 100644
--- a/src/ui/App.jsx
+++ b/src/ui/App.jsx
@@ -4,12 +4,13 @@
  */
 
 import * as React from "react";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import Relabi from "../relabi";
 import { Kalimba, Drums } from "../lib/instruments";
 
 export default function App() {
   const [relabi, setRelabi] = useState();
+  const relabiRef = useRef();
 
   /**
    * Instantiate the Relabi generator
@@ -26,7 +27,7 @@ export default function App() {
         bounds: [
           {
             level: -0.75,
-            color: "#f00",
+            color: "#f33",
             sounds: [
               { instrument: Drums, index: 0 },
               { instrument: Drums, index: 1 },
@@ -34,7 +35,7 @@ export default function App() {
           },
           {
             level: 0.75,
-            color: "#f00",
+            color: "#f83",
             sounds: [
               { instrument: Drums, index: 2 },
               { instrument: Drums, index: 3 },
@@ -42,7 +43,7 @@ export default function App() {
           },
           {
             level: -0.25,
-            color: "#00f",
+            color: "#3b8",
             sounds: [
               { instrument: Kalimba, frequency: 440 },
               { instrument: Kalimba, frequency: (440 * 3) / 2 },
@@ -50,7 +51,7 @@ export default function App() {
           },
           {
             level: 0.25,
-            color: "#00f",
+            color: "#36f",
             sounds: [
               { instrument: Kalimba, frequency: (440 * 6) / 5 },
               { instrument: Kalimba, frequency: (440 * 6) / 7 },
@@ -63,9 +64,28 @@ export default function App() {
     }
   }, [relabi]);
 
+  useEffect(() => {
+    if (relabi && relabiRef.current) {
+      relabi.canvas.appendCanvas(relabiRef.current);
+    }
+  }, [relabi, relabiRef.current]);
+
   /**
    * Render
    */
-
-  return <div>Relabi generator</div>;
+  return (
+    <div
+      style={{
+        height: "100%",
+        width: "100%",
+        padding: 0,
+        margin: 0,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+      }}
+    >
+      <div ref={relabiRef} />
+    </div>
+  );
 }