Hydra looks better by default

src/main.ts

@@ -222,7 +222,7 @@ export class Editor {
 
   updateKnownUniversesView = () => {
     let itemTemplate = document.getElementById(
-      "ui-known-universe-item-template",
+      "ui-known-universe-item-template"
     ) as HTMLTemplateElement;
     if (!itemTemplate) {
       console.warn("Missing template #ui-known-universe-item-template");
@@ -250,10 +250,10 @@ export class Editor {
         item
           .querySelector(".delete-universe")
           ?.addEventListener("click", () =>
-            api._deleteUniverseFromInterface(it),
+            api._deleteUniverseFromInterface(it)
           );
         return item;
-      }),
+      })
     );
 
     existing_universes.innerHTML = "";
@@ -334,7 +334,7 @@ export class Editor {
 
     this.view.dispatch({
       effects: this.chosenLanguage.reconfigure(
-        this.editor_mode == "notes" ? [markdown()] : [javascript()],
+        this.editor_mode == "notes" ? [markdown()] : [javascript()]
       ),
     });
 
@@ -343,7 +343,7 @@ export class Editor {
 
   setButtonHighlighting(
     button: "play" | "pause" | "stop" | "clear",
-    highlight: boolean,
+    highlight: boolean
   ) {
     document.getElementById("play-label")!.textContent =
       button !== "pause" ? "Pause" : "Play";
@@ -391,7 +391,7 @@ export class Editor {
     // All other buttons must lose the highlighting
     document
       .querySelectorAll(
-        possible_selectors.filter((_, index) => index != selector).join(","),
+        possible_selectors.filter((_, index) => index != selector).join(",")
       )
       .forEach((button) => {
         button.children[0].classList.remove("animate-pulse");
@@ -437,28 +437,28 @@ export class Editor {
   flashBackground(color: string, duration: number): void {
     const domElement = this.view.dom;
     const gutters = domElement.getElementsByClassName(
-      "cm-gutter",
+      "cm-gutter"
     ) as HTMLCollectionOf<HTMLElement>;
 
     domElement.classList.add("fluid-bg-transition");
     Array.from(gutters).forEach((gutter) =>
-      gutter.classList.add("fluid-bg-transition"),
+      gutter.classList.add("fluid-bg-transition")
     );
 
     domElement.style.backgroundColor = color;
     Array.from(gutters).forEach(
-      (gutter) => (gutter.style.backgroundColor = color),
+      (gutter) => (gutter.style.backgroundColor = color)
     );
 
     setTimeout(() => {
       domElement.style.backgroundColor = "";
       Array.from(gutters).forEach(
-        (gutter) => (gutter.style.backgroundColor = ""),
+        (gutter) => (gutter.style.backgroundColor = "")
       );
 
       domElement.classList.remove("fluid-bg-transition");
       Array.from(gutters).forEach((gutter) =>
-        gutter.classList.remove("fluid-bg-transition"),
+        gutter.classList.remove("fluid-bg-transition")
       );
     }, duration);
   }
@@ -466,7 +466,7 @@ export class Editor {
   private initializeElements(): void {
     for (const [key, value] of Object.entries(singleElements)) {
       this.interface[key] = document.getElementById(
-        value,
+        value
       ) as ElementMap[keyof ElementMap];
     }
   }
@@ -474,7 +474,7 @@ export class Editor {
   private initializeButtonGroups(): void {
     for (const [key, ids] of Object.entries(buttonGroups)) {
       this.buttonElements[key] = ids.map(
-        (id) => document.getElementById(id) as HTMLButtonElement,
+        (id) => document.getElementById(id) as HTMLButtonElement
       );
     }
   }
@@ -501,20 +501,19 @@ export class Editor {
       enableStreamCapture: false,
     });
     this.hydra = this.hydra_backend.synth;
+    (globalThis as any).hydra = this.hydra;
+    this.hydra.setResolution(1024, 768);
   }
 
   private setCanvas(canvas: HTMLCanvasElement): void {
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
-
     const dpr = window.devicePixelRatio || 1;
-
     // Assuming the canvas takes up the whole window
-    canvas.width = window.innerWidth * dpr * 0.25;
-    canvas.height = window.innerHeight * dpr * 0.25;
-
+    canvas.width = window.innerWidth * dpr;
+    canvas.height = window.innerHeight * dpr;
     if (ctx) {
-      ctx.scale(dpr * 0.5, dpr * 0.5);
+      ctx.scale(dpr, dpr);
     }
   }
 }