ayr-lang
Version:
A toy array language
175 lines (149 loc) • 8.03 kB
HTML
<html id="html-style" style="color: black; background-color: white; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: xx-large">
<head>
<title>ayr Interpreter</title>
<script>require = null;module = null;</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
pre, input, code {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: large;
}
#txtarea {
height: 225px;
}
#out {
height: 180px;
}
#debug_output {
max-height: none;
color: #fff;
}
#out, #debug_output {
white-space: pre;
}
textarea, #txtarea, #out, #debug_output {
font-family: monospace, monospace;
font-size: medium;
}
body {
margin: 20px;
}
h1, button {
display: inline;
vertical-align: middle;
}
h1 {
margin-bottom: 1/20px;
}
button {
margin-left: 30px;
margin-bottom: 10px;
margin-top: 12px;
}
#template {
font-family: Consolas,"courier new";
color: crimson;
background-color: #f1f1f1;
font-size: 100%;
}
#dropdowndiv {
width: 200px;
margin-top: 10px;
margin-bottom: 10px;
}
#dropdowndiv button {
margin: 0;
}
#flags {
width: 10%;
margin-left: 30px;
margin-bottom: 10px;
margin-top: 12px;
display: inline;
vertical-align: middle;
}
</style>
</head>
<body>
<h1>ayr Interpreter</h1>
<button style="border:1px solid;background-color:#fff" onclick="RUNCODE(header.value + '\n' + code.value + '\n' + footer.value, ins.value, flags.value || '')">Run (Esc):<span id="bytes">0</span> byte(s)</button>
<button onclick="fetchLink()" style="border:1px solid; background-color:#fff">Permalink</button>
<button onclick="toggleTemplate()" id="se-template-toggle" style="border:1px solid; background-color: #fff">Show SE Template</button>
<input type="TextBox" id="flags" class="form-control" placeholder="Flags, no spaces or dashes"></input>
<p>Definitely not plagiarized directly from the Arn online interpreter</p>
<br>
<div class="form-group" id="txtgroup">
<textarea title="header" id="code-header" class="form-control" placeholder="Program Header" spellcheck="false" style="font-size: large; display: inline-block; margin-bottom: 5px; width: 100%; height: 60px;"></textarea>
<textarea title="code" id="code" class="form-control" placeholder="Main Program" spellcheck="false" style="font-size: large; display: inline-block; margin-bottom: 5px; width: 100%; height: 60px;"></textarea>
<textarea title="footer" id="code-footer" class="form-control" placeholder="Program Footer" spellcheck="false" style="font-size: large; display: inline-block; margin-bottom: 5px; width: 100%; height: 60px;"></textarea>
<textarea id="ins" class="form-control" placeholder="Program Input" spellcheck="false" style="font-size: large; display: inline-block; margin-bottom: 5px; height: 60px; width: 100%;"></textarea>
</div>
<div id="se-template" style="display: none;">
<textarea id="template" placeholder="StackExchange post template" readonly="" margin:0="" style="margin: 0px; border:#fff; width: 100%; height: 309px;"></textarea>
<button style="border: 1px solid; background-color: #fff; margin: 0px;" onclick="template.select();document.execCommand('copy');">Copy</button>
</div>
<div id="debug_output" class="well pre-scrollable" style="background-color: #333;">Output goes here</div>
<script type="text/javascript" src="ayr.js"></script><script type="text/javascript" src="site/main.js"></script>
<script type="text/javascript">
console.log=(...txt)=>out.innerHTML+=txt.join(" ")+"\n"
function encodeLink(a){return btoa(a).replace(/=/g,"@")}
function decodeLink(a){return atob(a.replace(/@/g,"="))}
function qstr(qs){var s=location.href.split("#");if(s.length>1)return s[1]}
function toggleTemplate() {
stackTemplate();
let div = document.getElementById("se-template");
let button = document.getElementById("se-template-toggle");
if (div.style.display === "none") {
div.style.display = "inline";
button.innerHTML = "Hide SE Template";
} else {
div.style.display = "none";
button.innerHTML = "Show SE Template";
}
}
var code = document.getElementById("code");
var header = document.getElementById("code-header");
var footer = document.getElementById("code-footer");
var bytes = document.getElementById("bytes");
var template = document.getElementById("template");
var ins = document.getElementById("ins");
var out = document.getElementById("debug_output");
var flags = document.getElementById("flags");
if(qstr("code").length) [header.value, code.value, footer.value, ins.value, flags.value] = qstr("code").split("/").map(decodeLink);
bytes.innerHTML = code.value.length;
stackTemplate();
// out.innerHTML = runArn(code.value, ins.value);
function stackTemplate() {
let h = "# [ayr](https://github.com/ZippyMagician/ayr)" +
(flags.value.replace(/e/g, "") ? " `-" + flags.value.replace(/e/g, "") + "`" : "") +
", " +
code.value.length +
" bytes\n\n";
template.value = h +
'```\n' + code.value + '\n```' + '\n[Try it!](https://zippymagician.github.io/ayr#' +
[header.value, code.value, footer.value, ins.value, flags.value].map(n=>encodeLink(n)).join("/") +
")\n\n# Explained\n\nELABORATE HERE";
}
function fetchLink() {
out.innerHTML = '[`' +
code.value + '` ' + bytes.innerHTML + ' bytes](https://zippymagician.github.io/ayr#' +
[header.value, code.value, footer.value, ins.value, flags.value].map(n=>encodeLink(n)).join("/") + ')';
}
</script>
<script type="text/javascript">
code.addEventListener('input', function () {
bytes.innerHTML = code.value.length;
stackTemplate();
});
code.addEventListener('keyup', function () {
bytes.innerHTML = code.value.length;
stackTemplate();
});
document.addEventListener("keydown", e => {
bytes.innerHTML = code.value.length;
if(e.code === "Escape") RUNCODE(header.value + '\n' + code.value + '\n' + footer.value, ins.value, flags.value || "");
});
</script>
</body>
</html>