172 lines
5.3 KiB
HTML
172 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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: #131212;
|
|
margin: 1.5vw;
|
|
padding: 0px;
|
|
overflow: hidden;
|
|
}
|
|
p{
|
|
color: white;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
margin: 1vw;
|
|
}
|
|
.codeEditor{
|
|
width: 37vw;
|
|
height: 85vh;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
margin-bottom: 1vw;
|
|
}
|
|
.documentationLookup{
|
|
width: 37vw;
|
|
height: 7vh;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
.canvas{
|
|
width: 58vw;
|
|
/* height: 33.75vw; */
|
|
aspect-ratio: 16/9;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
margin-bottom: 1vw;
|
|
}
|
|
#canvas{
|
|
height: 100%;
|
|
width:100%;
|
|
background: white;
|
|
}
|
|
.terminal{
|
|
width: 58vw;
|
|
height: auto;
|
|
flex-grow: 1;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
#terminal{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.left {
|
|
display: flex;
|
|
margin-right: 1vw;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
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">
|
|
<div id="terminal"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right">
|
|
|
|
<div class="codeEditor">
|
|
<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: 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>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="https://www.unpkg.com/ace-builds@latest/src-noconflict/ace.js" crossorigin="anonymous"></script>
|
|
<script>
|
|
ace.edit("editor", {
|
|
theme: "ace/theme/monokai",
|
|
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> |