refactor: pass root

Author: joshunrau

packages/instrument-library/src/interactive/breakout-task/index.ts

@@ -25,14 +25,11 @@ function getScale() {
   return ratios.at(-1)!;
 }
 
-function runTask(onComplete: (data: Data) => void) {
+function runTask(root: HTMLDivElement, onComplete: (data: Data) => void) {
   const startTime = Date.now();
   const ratio = window.devicePixelRatio * 3;
   const scale = getScale();
 
-  const wrapper = document.createElement('div');
-  wrapper.classList.add('canvas-wrapper');
-
   const canvas = document.createElement('canvas');
 
   const height = BASE_HEIGHT * scale;
@@ -43,8 +40,7 @@ function runTask(onComplete: (data: Data) => void) {
   canvas.style.width = width + 'px';
   canvas.style.height = height + 'px';
 
-  wrapper.appendChild(canvas);
-  document.body.appendChild(wrapper);
+  root.appendChild(canvas);
 
   const ctx = canvas.getContext('2d')!;
   ctx.scale(ratio, ratio);
@@ -229,7 +225,10 @@ export default defineInstrument({
   },
   content: {
     render(done) {
-      runTask(done);
+      const root = document.createElement('div');
+      root.id = 'root';
+      document.body.appendChild(root);
+      runTask(root, done);
     }
   },
   details: {

packages/instrument-library/src/interactive/breakout-task/styles.css

@@ -9,7 +9,7 @@ canvas {
   margin: 0 auto;
 }
 
-.canvas-wrapper {
+#root {
   display: flex;
   justify-content: center;
   align-items: center;