allow using console interface within project

src/code_runner.js

@@ -3,6 +3,8 @@ export class CodeRunner {
         this.console = console;
         this.codeStopper = codeStopper;
         this.isRunning = false;
+
+        window.playgroundConsole = this.console;
     }
 
     setCode(code) {
@@ -18,13 +20,13 @@ export class CodeRunner {
 
         // Use RNG to prevent caching
         const encodedText = encodeURIComponent(
-            this.code + `/*(tph): ${Math.random()}*/`,
+            `let console=playgroundConsole;${this.code}/*(tph): ${Math.random()}*/`,
         );
 
         try {
             await import(`data:text/javascript;charset=utf-8,${encodedText}`);
         } catch (error) {
-            this.console.log(error);
+            this.console.error(error);
         }
     }
 

src/playground_console.js

@@ -4,6 +4,29 @@ export class PlaygroundConsole {
     }
 
     log(text) {
-        this.elem.textContent += `\n${text}\n`;
+        const el = document.createElement("span");
+        el.textContent = `\n${text}\n`;
+        this.elem.appendChild(el);
+    }
+
+    error(text) {
+        const el = document.createElement("span");
+        el.className = "error";
+        el.textContent = `\n${text}\n`;
+        this.elem.appendChild(el);
+    }
+
+    debug(text) {
+        const el = document.createElement("span");
+        el.className = "debug";
+        el.textContent = `\n${text}\n`;
+        this.elem.appendChild(el);
+    }
+
+    info(text) {
+        const el = document.createElement("span");
+        el.className = "info";
+        el.textContent = `\n${text}\n`;
+        this.elem.appendChild(el);
     }
 }

style.css

@@ -121,6 +121,15 @@ div#buttons button {
     width: 100%;
     white-space: pre-wrap;
 }
+
+#console .error {
+    color: #D32F2F;
+}
+
+#console .info, #console .debug {
+    color: #BDBDBD;
+}
+
 #console input {
     width: 100%;
     margin: 0;