add console clearing, allow use of console within itself

index.html

@@ -80,7 +80,7 @@
                     </div>
 
                     <div id="console">
-                        <pre><code id="console-code">Karlkode 1.0</code></pre>
+                        <pre id="console-code"></pre>
                         <input
                             id="console-input"
                             type="text"
@@ -101,7 +101,7 @@
                         <pre
                             id="editor"
                         >
-const lib = karlkoder.lib();
+export const lib = karlkoder.lib();
 
 lib.clear("green");
 

src/code_runner.js

@@ -15,6 +15,7 @@ export class CodeRunner {
     async run() {
         this.isRunning = true;
 
+        this.console.clear();
         this.console.log("Running code...");
 
         this.codeStopper.start();
@@ -57,7 +58,7 @@ export class CodeRunner {
         }
 
         // Evaluate code
-        const func = new Function(`"use strict";return ${code}`);
+        const func = new Function(`"use strict";let console=playgroundConsole;return ${code}`);
 
         try {
             const result = func();

src/gamelib.js

@@ -40,7 +40,7 @@ export class Gamelib {
             try {
                 loopFunction(deltaT);
             } catch (error) {
-                this.console.log(error);
+                this.console.error(error);
             }
         }, 16);
 

src/index.js

@@ -19,6 +19,10 @@ const playgroundConsole = new PlaygroundConsole(
     document.querySelector("#console-code"),
 );
 
+window.addEventListener('DOMContentLoaded', () => {
+    playgroundConsole.log("Karlkode 1.0");
+});
+
 const codeStopper = new CodeStopper();
 
 const spriteProvider = new SpriteProvider();

src/playground_console.js

@@ -31,4 +31,8 @@ export class PlaygroundConsole {
         el.textContent = "" + text;
         this.elem.appendChild(el);
     }
+
+    clear() {
+        this.elem.textContent = "";
+    }
 }

style.css

@@ -351,11 +351,8 @@ footer {
     transition: border-color 200ms ease-in-out;
 }
 
-#project-name:hover, #project-name:active {
+#project-name:hover, #project-name:focus {
     border-color: white;
-}
-
-#project-name:focus {
     outline: none;
 }