feat: add start button to task

Author: joshunrau

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

@@ -228,7 +228,25 @@ export default defineInstrument({
       const root = document.createElement('div');
       root.id = 'root';
       document.body.appendChild(root);
-      runTask(root, done);
+
+      const initialContent = document.createElement('div');
+      initialContent.classList.add('initial-content');
+
+      const title = document.createElement('h3');
+      title.innerText = 'Welcome to the Breakout Task';
+      const startButton = document.createElement('button');
+      startButton.type = 'button';
+      startButton.innerText = 'Start';
+
+      initialContent.appendChild(title);
+      initialContent.appendChild(startButton);
+
+      root.appendChild(initialContent);
+
+      startButton.addEventListener('click', () => {
+        root.removeChild(initialContent);
+        runTask(root, done);
+      });
     }
   },
   details: {

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

@@ -16,3 +16,30 @@ canvas {
   height: 100vh;
   width: 100vw;
 }
+
+.initial-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.initial-content h3 {
+  font-size: 1.25rem;
+}
+
+.initial-content button {
+  background-color: blue;
+  border: none;
+  border-radius: 0.25rem;
+  color: white;
+  padding: 6px 12px;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+.initial-content button:hover {
+  opacity: 60%;
+}