From c3685ad1d5e05f2efe17f5a16f7295d480ee3e15 Mon Sep 17 00:00:00 2001
From: Hugo H <hugo@haaxman.co.uk>
Date: Sat, 29 Nov 2025 20:11:05 +0000
Subject: [PATCH] Added python stuff

---
 editor.html        | 100 ++++++++++++++++++++++++++++------
 skulpt+xterm.html  |  81 ++++++++++++++++++++++++++++
 skulpt.html        |  52 ++++++++++++++++++
 skulpttesting.html | 132 +++++++++++++++++++++++++++++++++++++++++++++
 xtermjs.html       |  65 ++++++++++++++++++++++
 5 files changed, 414 insertions(+), 16 deletions(-)
 create mode 100644 skulpt+xterm.html
 create mode 100644 skulpt.html
 create mode 100644 skulpttesting.html
 create mode 100644 xtermjs.html
diff --git a/editor.html b/editor.html
index f28e803..dc308c1 100644
--- a/editor.html
+++ b/editor.html
@@ -4,13 +4,17 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Code Editor</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css" />
+    <script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script>
+    <script src="http://skulpt.org/js/skulpt.min.js"></script>
+    <script src="http://skulpt.org/js/skulpt-stdlib.js"></script>
 </head>
 <body>
     <style>
         body {
             display: flex;
             height: calc(100vh-1.5vw);
-            background-color: #363636;
+            background-color: #131212;
             margin: 1.5vw;
             padding: 0px;
             overflow: hidden;
@@ -41,6 +45,11 @@
             overflow: hidden;
             margin-bottom: 1vw;
         }
+        #canvas{
+            height: 100%;
+            width:100%;
+            background: white;
+        }
         .terminal{
             width: 58vw;
             height: auto;
@@ -48,18 +57,10 @@
             border-radius: 10px;
             overflow: hidden;
         }
-        #terminalBlock{
-            resize: none;
+        #terminal{
             width: 100%;
-            height: 100%;
-            background-color: #2f3129;
+            height: 100%;    
         }
-        /*.left{
-            float: left;
-        }
-        .right{
-            float: right;
-        }*/
 
         .left {
             display: flex;
@@ -72,26 +73,32 @@
             flex-direction: column;
         }
     </style>
+
     <div class="left">
         <div class="canvas">
             <canvas id="canvas" style="height: 100%;width:100%;background: white;"></canvas>
         </div>
         <div class="terminal">
-            <textarea id="terminalBlock"></textarea>
+            <div id="terminal"></div>
         </div>
     </div>
+
     <div class="right">
+
         <div class="codeEditor">
-            <div style="overflow: hidden; height: 4vw;width: 100%;background: #2f3129;">
+            <div style="overflow: hidden; height: 3vw;width: 100%;background: #181a15;">
                 <p style="float: left;">main.py</p>
-                <button style="height: 100%; aspect-ratio: 1/1; float: right; border-radius: 0px; border: none;padding: 1.2vw; 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 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% - 4vw);width:100%;"></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: #2f3129;border: 0px;color: white;padding-left: 1vw;"></input>
+            <input type="text" placeholder="Documentation" style="height: 100%;width: 100%;background: #181a15;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", {
@@ -99,6 +106,67 @@
             mode: "ace/mode/python",
             value: "print('Hello world!')"
         });
+
+        document.addEventListener('DOMContentLoaded', () => {
+        const term = new Terminal({ cursorBlink: true });
+        term.open(document.getElementById('terminal'));
+
+        let inputResolve;
+        let inputBuffer = '';
+        let acceptingInput = false;
+
+        function outf(text) {
+            term.write(text.replace(/\n/g, '\r\n'));
+        }
+
+        function inputf(promptText = '') {
+            return new Promise(resolve => {
+                inputBuffer = '';
+                inputResolve = resolve;
+                acceptingInput = true;
+                term.write(promptText);
+            });
+        }
+
+        term.onKey(e => {
+            if (!acceptingInput) return;
+            const key = e.key;
+            const ev = e.domEvent;
+
+            if (ev.key === 'Enter') {
+                term.write('\r\n');
+                if (inputResolve) {
+                    inputResolve(inputBuffer);
+                    inputResolve = null;
+                    acceptingInput = false;
+                }
+            } else if (ev.key === 'Backspace') {
+                if (inputBuffer.length > 0) {
+                    inputBuffer = inputBuffer.slice(0, -1);
+                    term.write('\b \b');
+                }
+            } else if (key.length === 1) {
+                inputBuffer += key;
+                term.write(key);
+            }
+        });
+
+        function runCode(code) {
+            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))
+            .catch(err => outf(err.toString() + '\n'));
+        }
+
+
+    runCode('name = input("Name: ")\nprint("Hello, " + name)');
+
+        });
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/skulpt+xterm.html b/skulpt+xterm.html
new file mode 100644
index 0000000..9a98eb6
--- /dev/null
+++ b/skulpt+xterm.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Python in Xterm.js</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css" />
+<script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script>
+<script src="http://skulpt.org/js/skulpt.min.js"></script>
+<script src="http://skulpt.org/js/skulpt-stdlib.js"></script>
+<style>
+    #terminal {
+        width: 100%;
+        height: 100vh;
+    }
+</style>
+</head>
+<body>
+<div id="terminal"></div>
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    const term = new Terminal({ cursorBlink: true });
+    term.open(document.getElementById('terminal'));
+
+    let inputResolve;
+    let inputBuffer = '';
+    let acceptingInput = false;
+
+    function outf(text) {
+        term.write(text.replace(/\n/g, '\r\n'));
+    }
+
+    function inputf(promptText = '') {
+        return new Promise(resolve => {
+            inputBuffer = '';
+            inputResolve = resolve;
+            acceptingInput = true;
+            term.write(promptText);
+        });
+    }
+
+    term.onKey(e => {
+        if (!acceptingInput) return;
+        const key = e.key;
+        const ev = e.domEvent;
+
+        if (ev.key === 'Enter') {
+            term.write('\r\n');
+            if (inputResolve) {
+                inputResolve(inputBuffer);
+                inputResolve = null;
+                acceptingInput = false;
+            }
+        } else if (ev.key === 'Backspace') {
+            if (inputBuffer.length > 0) {
+                inputBuffer = inputBuffer.slice(0, -1);
+                term.write('\b \b');
+            }
+        } else if (key.length === 1) {
+            inputBuffer += key;
+            term.write(key);
+        }
+    });
+
+    function runCode(code) {
+        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))
+          .catch(err => outf(err.toString() + '\n'));
+    }
+
+    // Example code to run immediately
+    runCode('name = input("Name: ")\nprint("Hello, " + name)');
+});
+</script>
+</body>
+</html>
diff --git a/skulpt.html b/skulpt.html
new file mode 100644
index 0000000..d7044f4
--- /dev/null
+++ b/skulpt.html
@@ -0,0 +1,52 @@
+<html>
+  <head>
+    <script src="http://skulpt.org/js/skulpt.min.js"></script>
+    <script src="http://skulpt.org/js/skulpt-stdlib.js"></script>
+  </head>
+  <body>
+    <script>
+    let cb;
+
+    function outf(t) {
+        document.getElementById("output").innerHTML += t;
+    }
+
+    function inputf(prompt) {
+        document.getElementById("promptLbl").textContent = prompt;
+        const box = document.getElementById("inpBox");
+        document.getElementById("inpC").style.display = "block";
+        box.value = "";
+        box.focus();
+        return new Promise(r => cb = r);
+    }
+
+    function submitInput() {
+        const box = document.getElementById("inpBox");
+        document.getElementById("inpC").style.display = "none";
+        cb(box.value);
+    }
+
+    function runit() {
+        document.getElementById("output").innerHTML = "";
+        document.getElementById("inpC").style.display = "none";
+        Sk.configure({
+            output: outf,
+            read: x => Sk.builtinFiles.files[x],
+            inputfun: inputf,
+            inputfunTakesPrompt: true
+        });
+        Sk.misceval.asyncToPromise(() => Sk.importMainWithBody(" < stdin > ", false, document.getElementById("yourcode").value, true));
+    }
+    </script>
+    <textarea id="yourcode" cols="40" rows="6">name = raw_input("Name: ")
+print "Hello, " + name
+</textarea>
+    <button onclick="runit()">Run</button>
+    <pre id="output"></pre>
+    <div id="inpC" style="display:none;">
+      <label id="promptLbl"></label>
+      <input id="inpBox" onkeypress="event.key==='Enter' && submitInput()">
+      <button onclick="submitInput()">OK</button>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/skulpttesting.html b/skulpttesting.html
new file mode 100644
index 0000000..7e6ab7f
--- /dev/null
+++ b/skulpttesting.html
@@ -0,0 +1,132 @@
+<html> 
+<head> 
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> 
+<script src="http://skulpt.org/js/skulpt.min.js" type="text/javascript"></script> 
+<script src="http://skulpt.org/js/skulpt-stdlib.js" type="text/javascript"></script> 
+<style>
+  /* Simple styling for better separation of input/output */
+  #input-container {
+    margin-top: 10px;
+    padding: 10px;
+    border: 1px solid #ccc;
+  }
+  #skulpt-input {
+    width: 80%;
+    padding: 5px;
+  }
+</style>
+</head> 
+
+<body> 
+
+<script type="text/javascript"> 
+// output functions are configurable.  This one just appends some text
+// to a pre element.
+function outf(text) { 
+    var mypre = document.getElementById("output"); 
+    mypre.innerHTML = mypre.innerHTML + text; 
+} 
+
+function builtinRead(x) {
+    if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
+            throw "File not found: '" + x + "'";
+    return Sk.builtinFiles["files"][x];
+}
+
+// --- Custom Inline Input Function ---
+var inputCallback;
+
+function inputf(prompt) {
+    // Display the prompt text to the user
+    document.getElementById("input-prompt").textContent = prompt;
+
+    // Show the input container
+    document.getElementById("input-container").style.display = 'block';
+
+    // Set focus on the input field
+    var inputField = document.getElementById("skulpt-input");
+    inputField.value = ''; // Clear previous input
+    inputField.focus();
+
+    // Return a promise that Skulpt will wait for
+    return new Promise(function(resolve, reject) {
+        inputCallback = resolve;
+    });
+}
+
+// Function to handle the submission of inline input
+function submitInput() {
+    var inputField = document.getElementById("skulpt-input");
+    var inputValue = inputField.value;
+
+    // Hide the input container again
+    document.getElementById("input-container").style.display = 'none';
+
+    // Fulfill the promise with the user's input value
+    if (inputCallback) {
+        inputCallback(inputValue);
+        inputCallback = null; // Clear the callback
+    }
+}
+// ------------------------------------
+
+// Here's everything you need to run a python program in skulpt
+function runit() { 
+   var prog = document.getElementById("yourcode").value; 
+   var mypre = document.getElementById("output"); 
+   mypre.innerHTML = ''; 
+   
+   // Hide the input container when a new run starts
+   document.getElementById("input-container").style.display = 'none';
+
+   Sk.pre = "output";
+   // Configure the custom input function: inputf
+   Sk.configure({output:outf, read:builtinRead, input:inputf}); 
+   
+   (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
+   var myPromise = Sk.misceval.asyncToPromise(function() {
+       return Sk.importMainWithBody("<stdin>", false, prog, true);
+   });
+   myPromise.then(function(mod) {
+       console.log('success');
+   },
+       function(err) {
+       // Display errors in the output area
+       outf(err.toString() + '\n');
+       console.log(err.toString());
+   });
+} 
+
+// Allow pressing 'Enter' in the input field to submit
+document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById('skulpt-input').addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault(); // Prevent default form submission
+            submitInput();
+        }
+    });
+});
+</script> 
+
+<h3>Try This</h3> 
+<form> 
+<textarea id="yourcode" cols="40" rows="10">
+name = raw_input("What is your name? ")
+print "Hello, " + name + "!"
+print "This is a demonstration of inline input."
+</textarea><br /> 
+<button type="button" onclick="runit()">Run</button> 
+</form> 
+
+<pre id="output" ></pre> 
+
+<div id="input-container" style="display:none;">
+    <label id="input-prompt"></label>
+    <input type="text" id="skulpt-input" />
+    <button type="button" onclick="submitInput()">Submit Input</button>
+</div>
+<div id="mycanvas"></div> 
+
+</body> 
+
+</html>
\ No newline at end of file
diff --git a/xtermjs.html b/xtermjs.html
new file mode 100644
index 0000000..cc94aba
--- /dev/null
+++ b/xtermjs.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Xterm.js Console</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css" />
+    <style>
+        body { margin: 0; height: 100vh; display: flex; flex-direction: column; }
+        #terminal { flex: 1; }
+    </style>
+</head>
+<body>
+    <div id="terminal"></div>
+
+    <script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script>
+    <script>
+        const { Terminal } = window;
+
+        const term = new Terminal({ cursorBlink: true });
+        term.open(document.getElementById('terminal'));
+
+        let inputResolve;
+        let inputBuffer = '';
+        let acceptingInput = false;
+
+        function printTermLn(text) {
+            term.write(text.replace(/\n/g, '\r\n'));
+        }
+
+        function readTermLn(promptText = '') {
+            return new Promise((resolve) => {
+                inputBuffer = '';
+                inputResolve = resolve;
+                acceptingInput = true;
+                term.write(promptText);
+            });
+        }
+
+        term.onKey(e => {
+            if (!acceptingInput) return;
+
+            const key = e.key;
+            const ev = e.domEvent;
+
+            if (ev.key === 'Enter') {
+                term.write('\r\n');
+                if (inputResolve) {
+                    inputResolve(inputBuffer);
+                    inputResolve = null;
+                    acceptingInput = false;
+                }
+            } else if (ev.key === 'Backspace') {
+                if (inputBuffer.length > 0) {
+                    inputBuffer = inputBuffer.slice(0, -1);
+                    term.write('\b \b');
+                }
+            } else if (key.length === 1) {
+                inputBuffer += key;
+                term.write(key);
+            }
+        });
+    </script>
+</body>
+</html>
