Merged code editor with skulpt and xterm.js

editor.html

@@ -17,7 +17,7 @@
             background-color: #131212;
             margin: 1.5vw;
             padding: 0px;
-            overflow: hidden;
+            /*overflow: hidden;*/
         }
         p{
             color: white;
@@ -52,8 +52,7 @@
         }
         .terminal{
             width: 58vw;
-            height: auto;
+            height: 8vw;
-            flex-grow: 1;
             border-radius: 10px;
             overflow: hidden;
         }
@@ -61,7 +60,11 @@
             width: 100%;
             height: 100%;
         }
-
+        .xterm-screen{
+            padding: 0.75vw;
+            background: #2F3129;
+            overflow: scroll;
+        }
         .left {
             display: flex;
             margin-right: 1vw;
@@ -86,35 +89,37 @@
     <div class="right">
 
         <div class="codeEditor">
-            <div style="overflow: hidden; height: 3vw;width: 100%;background: #181a15;">
+            <div style="overflow: hidden; height: 3vw;width: 100%;background: #2F3129;">
                 <p style="float: left;">main.py</p>
-                <button style="height: 100%; aspect-ratio: 1/1; float: right; border-radius: 0px; border: none;padding: 0.75vw; background: #282923;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#aaa" d="M91.2 36.9c-12.4-6.8-27.4-6.5-39.6 .7S32 57.9 32 72l0 368c0 14.1 7.5 27.2 19.6 34.4s27.2 7.5 39.6 .7l336-184c12.8-7 20.8-20.5 20.8-35.1s-8-28.1-20.8-35.1l-336-184z"/></svg></button>
+                <button onclick="stopCurrentCode()" style="height: 100%; aspect-ratio: 1/1; float: right; border-radius: 0px; border: none;padding: 0.75vw; background: #282923;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#aaa" d="M64 32l320 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96C0 60.7 28.7 32 64 32z"/></svg></button>
+                <button onclick="runCurrentCode()" style="height: 100%; aspect-ratio: 1/1; float: right; border-radius: 0px; border: none;padding: 0.75vw; background: #282923;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#aaa" d="M91.2 36.9c-12.4-6.8-27.4-6.5-39.6 .7S32 57.9 32 72l0 368c0 14.1 7.5 27.2 19.6 34.4s27.2 7.5 39.6 .7l336-184c12.8-7 20.8-20.5 20.8-35.1s-8-28.1-20.8-35.1l-336-184z"/></svg></button>
             </div>
             <div id='editor' style="height: calc(100% - 3vw);width:100%;"></div>
         </div>
 
         <div class="documentationLookup">
-            <input type="text" placeholder="Documentation" style="height: 100%;width: 100%;background: #181a15;border: 0px;color: white;padding-left: 1vw;"></input>
+            <input type="text" placeholder="Documentation" style="height: 100%;width: 100%;background: #2F3129;border: 0px;color: white;padding-left: 1vw;"></input>
         </div>
 
     </div>
 
     <script src="https://www.unpkg.com/ace-builds@latest/src-noconflict/ace.js" crossorigin="anonymous"></script>
     <script>
-        ace.edit("editor", {
+        codeEditor = ace.edit("editor", {
             theme: "ace/theme/monokai",
             mode: "ace/mode/python",
             value: "print('Hello world!')"
         });
 
-        document.addEventListener('DOMContentLoaded', () => {
+        let StopExecution;
-        const term = new Terminal({ cursorBlink: true });
+        let term;
-        term.open(document.getElementById('terminal'));
-
         let inputResolve;
         let inputBuffer = '';
         let acceptingInput = false;
 
+        term = new Terminal({ cursorBlink: true });
+        term.open(document.getElementById('terminal'));
+
         function outf(text) {
             term.write(text.replace(/\n/g, '\r\n'));
         }
@@ -149,7 +154,6 @@
                 inputBuffer += key;
                 term.write(key);
             }
-        });
 
         function runCode(code) {
             term.clear();
@@ -163,10 +167,29 @@
             .catch(err => outf(err.toString() + '\n'));
         }
 
-
-    runCode('name = input("Name: ")\nprint("Hello, " + name)');
-
         });
+
+        function stopCurrentCode() {
+            StopExecution = true;
+        }
+
+        function runCurrentCode() {
+            StopExecution = false;
+            code = codeEditor.getValue();
+            term.clear();
+            Sk.configure({
+                output: outf,
+                read: x => Sk.builtinFiles.files[x],
+                inputfun: inputf,
+                inputfunTakesPrompt: true
+            });
+            Sk.misceval.asyncToPromise(() => Sk.importMainWithBody('<stdin>', false, code, true), {
+                "*": () => {
+                    if (StopExecution) throw "Execution interrupted"
+                }
+            })
+            .catch(err => outf(err.toString() + '\n'));
+        }
     </script>
 </body>
 </html>