piscript/piscript.html at main · rolandbrake/piscript · GitHub

1
<!doctypehtml><html lang=en><head><meta charset=UTF-8><meta content="width=device-width,initial-scale=1"name=viewport><link href=pi.ico rel=icon type=image/x-icon><link href=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css rel=stylesheet><link href=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/dracula.min.css rel=stylesheet><script src=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/javascript/javascript.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/keymap/sublime.min.js></script><title>Piscript Web</title><style>*{box-sizing:border-box}body,html{margin:0;padding:0;height:100%;background:#121212;font-family:sans-serif;color:#fff}#console-container{width:100%;flex:1;overflow-y:auto;background:#111;color:#0f0;font-family:monospace;font-size:.9rem;padding:.5rem;border-top:2px solid #333}#container{display:flex;flex-direction:row;height:100vh;width:100vw}#left,#right{flex:1;padding:1rem;display:flex;flex-direction:column}#left{max-width:50%;background-color:#1e1e1e;border-right:2px solid #333}#editor{flex:1;width:100%;height:80%;resize:none;background:#2c2c2c;color:#fff;border:1px solid #444;border-radius:6px;padding:1rem;font-family:consolas,monospace;font-size:.9rem;scrollbar-color:#444 #1e1e1e;scrollbar-width:thin}.CodeMirror{height:100%!important;background:#2c2c2c;color:#fff;font-family:monospace;font-size:.9rem;border-radius:6px}.CodeMirror-scrollbar-filler{background-color:transparent!important}button{margin-top:1rem;padding:.5rem 1rem;font-size:1rem;background:#007acc;color:#fff;border:none;border-radius:0;cursor:pointer;transition:background .2s ease-in-out;align-self:flex-start}button:hover{background:#005fa3}#right{display:flex;flex-direction:column;align-items:center;background-color:#1e1e1e;padding:1rem;height:100%;overflow:hidden}canvas{flex:2;height:80%;max-width:100%;image-rendering:pixelated;border:2px solid #444;background-color:#29adff;margin-bottom:1rem}@media (max-width:768px){#container{flex-direction:column-reverse;height:100vh}#left{max-width:100%;min-height:50vh;height:50vh;border-right:none;border-top:2px solid #333;overflow:hidden}#right{height:50vh;padding:1rem;box-sizing:border-box}canvas{width:100%!important;height:auto!important;display:block;aspect-ratio:1/1}#console-container{height:40%;overflow-y:auto}}.button-group{display:flex;gap:.5rem;margin-top:1rem}button:disabled{background:#555;cursor:not-allowed;opacity:.6}</style></head><body><div id=container><div id=left><div id=editor></div><div class=button-group><button id=run>Run</button> <button id=stop disabled>Stop</button></div></div><div id=right><canvas height=128 id=canvas tabindex=-1 width=128></canvas><div id=console-container><div id=console-output></div></div></div></div><script>function onExecutionFinished(){console.log("Execution finished (from C)"),document.getElementById("run").disabled=!1,document.getElementById("stop").disabled=!0,isRunning=!1}let isRunning=!1;function writeToConsole(e){const n=document.getElementById("console-output"),t=document.createElement("div");t.textContent=e,n.appendChild(t),n.scrollTop=n.scrollHeight,n.offsetHeight}var Module={canvas:document.getElementById("canvas"),noInitialRun:!0,print:writeToConsole,printErr:writeToConsole,onRuntimeInitialized(){document.getElementById("run").disabled=!1}};let startMain,editor=CodeMirror(document.getElementById("editor"),{mode:"javascript",theme:"dracula",lineNumbers:!0,value:"/* ENTER YOUR CODE HERE */",keyMap:"sublime"});document.getElementById("run").addEventListener("click",(async()=>{if(isRunning)return;Module.cwrap("set_source",null,["string"])(editor.getValue()),document.getElementById("console-output").innerHTML="",document.getElementById("run").disabled=!0,document.getElementById("stop").disabled=!1,isRunning=!0,startMain||(startMain=Module._main),canvas.focus(),startMain()})),document.getElementById("stop").addEventListener("click",(()=>{if(console.log("stop"),!isRunning)return;Module.cwrap("stop_execution",null,[])(),document.getElementById("run").disabled=!1,document.getElementById("stop").disabled=!0,isRunning=!1}))</script><script src=piscript.js async></script></body></html>