Initial commit
This commit is contained in:
github-classroom[bot]
+177
@@ -0,0 +1,177 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ChocoPy Web IDE</title>
|
||||
<link rel="stylesheet" href="css/normalize.css" />
|
||||
<link rel="stylesheet" href="css/sakura.css" />
|
||||
<script
|
||||
src="js/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<style>
|
||||
.example {
|
||||
border: 1px solid black;
|
||||
width: 50em;
|
||||
height: 20em;
|
||||
}
|
||||
|
||||
.compile-error-marker {
|
||||
position: absolute;
|
||||
background-color: rgba(255, 200, 200, 0.3);
|
||||
}
|
||||
|
||||
.compile-button {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Compile Me!</h1>
|
||||
|
||||
<select id="p1">
|
||||
<option value="s">My Parser</option>
|
||||
<option value="r" selected>Reference Parser</option>
|
||||
</select>
|
||||
|
||||
<button id='parseButton' class='compile-button'>Parse Syntax</button>
|
||||
|
||||
<br />
|
||||
|
||||
<select id="p2">
|
||||
<option value="s">My Semantic Analysis</option>
|
||||
<option value="r" selected>Reference Semantic Analysis</option>
|
||||
</select>
|
||||
|
||||
<button id='staticCheckButton' class='compile-button'>Run Static Checks</button>
|
||||
|
||||
<br />
|
||||
|
||||
<select id="p3">
|
||||
<option value="s">My Code Generator</option>
|
||||
<option value="r" selected>Reference Code Generator</option>
|
||||
</select>
|
||||
|
||||
<button id='compileButton' class='compile-button'>Compile to RISC-V</button>
|
||||
|
||||
|
||||
<pre class="example"></pre>
|
||||
|
||||
<script>
|
||||
var compileService = "/compile";
|
||||
var Range = require('ace/range').Range;
|
||||
|
||||
function makeEditor(example) {
|
||||
var parseButton = $("#parseButton");
|
||||
var staticCheckButton = $("#staticCheckButton");
|
||||
var compileButton = $("#compileButton");
|
||||
var editor = ace.edit(example, {
|
||||
theme: "ace/theme/github",
|
||||
mode: "ace/mode/python",
|
||||
fontSize: "1em"
|
||||
});
|
||||
|
||||
|
||||
var errorMarkers = []
|
||||
|
||||
function clearMarkers() {
|
||||
editor.session.clearAnnotations();
|
||||
for (var marker of errorMarkers) {
|
||||
editor.session.removeMarker(marker);
|
||||
}
|
||||
errorMarkers.length = 0;
|
||||
}
|
||||
|
||||
|
||||
editor.on('change', () => {
|
||||
clearMarkers();
|
||||
});
|
||||
|
||||
$(".compile-button").click((e) => {
|
||||
var button = e.target.id;
|
||||
console.assert(button == 'parseButton' ||
|
||||
button == 'staticCheckButton' ||
|
||||
button == 'compileButton');
|
||||
|
||||
var parse = true; // always run stage 1
|
||||
var check = button != 'parseButton'; // run unless only stage 1 requested
|
||||
var codegen = button == 'compileButton'; // run only when stage 3 requested
|
||||
|
||||
clearMarkers();
|
||||
var code = editor.getValue();
|
||||
var p1 = parse ? $("#p1").val() : "";
|
||||
var p2 = check ? $("#p2").val() : "";
|
||||
var p3 = codegen ? $("#p3").val() : "";
|
||||
if (codegen) {
|
||||
var resultWindow = window.open('venus.html?v=0.2.4' , '_blank');
|
||||
if (resultWindow == null) {
|
||||
console.error("Could not open new window...");
|
||||
return; // Cannot show result
|
||||
}
|
||||
resultWindow.onload = () => resultWindow.codeMirror.setValue("# Compiling... Please be patient. This can take a few seconds.\n" +
|
||||
"# (The first compilation takes the longest)");
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: compileService,
|
||||
type: "POST",
|
||||
contentType: "application/json; charset=utf-8",
|
||||
dataType: "json",
|
||||
data: JSON.stringify({input: code, passes:p1+p2+p3}),
|
||||
success: function(result) {
|
||||
if (result.asm) {
|
||||
var asm = result.asm;
|
||||
console.log(resultWindow.codeMirror);
|
||||
resultWindow.codeMirror.setValue("# Compiled ChocoPy Program to RISC-V assembly\n" +
|
||||
"# Execute (run or step-through) using the 'Simulator' tab above \n" +
|
||||
"# Output will appear on the bottom-left of the simulator\n" + asm);
|
||||
} else if (result.errors && result.errors.errors && result.errors.errors.length > 0) {
|
||||
if (codegen) { resultWindow.close(); }
|
||||
var annotations = []
|
||||
|
||||
for (var error of result.errors.errors) {
|
||||
var loc = error.location;
|
||||
var msg = error.message;
|
||||
var startLine = loc[0] - 1;
|
||||
var startCol = loc[1] - 1;
|
||||
var endLine = loc[2] - 1;
|
||||
var endCol = loc[3] - 1;
|
||||
var range = new Range(startLine, startCol, endLine, endCol+1);
|
||||
errorMarkers.push(editor.session.addMarker(range, "compile-error-marker", "text", true));
|
||||
|
||||
annotations.push({
|
||||
row: Math.min(Math.max(0, startLine), editor.session.getLength()-1),
|
||||
text: msg,
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
|
||||
editor.session.setAnnotations(annotations);
|
||||
} else if (!codegen && result.kind && result.kind == "Program") {
|
||||
if (check) {
|
||||
alert("This program is semantically valid!");
|
||||
} else {
|
||||
alert("This program parses!");
|
||||
}
|
||||
} else {
|
||||
alert("Unknown error: Should not reach here :-\\");
|
||||
}
|
||||
},
|
||||
error: (xhr) => {
|
||||
var w = window;
|
||||
if (resultWindow) { w = resultWindow; }
|
||||
w.alert("Request to compile service failed :-(\n\n" +
|
||||
(xhr.responseText || "Unknown error"));
|
||||
if (resultWindow) { resultWindow.close(); }
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$(".example").each((i, e) => makeEditor(e))
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user