Add Hydra iframe and rendering

pastagang · Jan 2, 2025 · a7eb8f0 · a7eb8f0
1 parent 84e20c8
commit a7eb8f0
Show file tree

Hide file tree

Showing 8 changed files with 588 additions and 93 deletions.
diff --git a/hydra.html b/hydra.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <body style="background-color: #111">
+  <style>
+      #canvas {
+          width: 100%;
+          height: 100%;
+      }
+  </style>
+  <script>
+    window.global = window;
+  </script>
+    <script type="module">
+      // this is expected to run in an iframe
+      // this way, hydra runs in an iframe
+      // so it wont mess with the global scope
+      // + we can sandbox the evaluation
+      // the js here is only for plumbing postMessages
+      // + creating the hydra session
+
+      import { HydraSession } from "./src/hydra";
+      function send(type, msg) {
+        window.parent.postMessage({ type, msg });
+      }
+
+      const hydra = new HydraSession({
+        onError: (...args) => send("onError", args),
+        canvas: document.getElementById("canvas"),
+        onHighlight: (...args) => {
+          send("onHighlight", [docId, phase]);
+        },
+      });
+
+      window.parent.hydra = hydra;
+
+      window.addEventListener("message", (event) => {
+        if (event.origin !== window.location.origin) {
+          return;
+        }
+        if (event.data.type === "eval") {
+          hydra.eval(event.data.msg);
+        }
+      });
+
+      console.log("hydra iframe loaded", hydra);
+    </script>
+    <canvas id="canvas" />
+  />
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -177,5 +177,6 @@ <h1>Are you sure?</h1>
     <script type="module" src="./src/settings.js"></script>
     <script type="module" src="./src/confirm.js"></script>
     <iframe src="/strudel" id="strudel"></iframe>
+    <iframe src="/hydra" id="hydra"></iframe>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@strudel/transpiler": "^1.1.0",
     "@strudel/webaudio": "^1.1.0",
     "codemirror": "^6.0.1",
+    "hydra-synth": "^1.3.29",
     "y-codemirror.next": "github:felixroos/y-codemirror.next#c8528d36744b7fa62661fddf3d6493ce71b3dcc4",
     "y-indexeddb": "^9.0.9",
     "y-protocols": "^1.0.5",