104 lines
4.6 KiB
HTML
104 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Undâr Compiler</title>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.min.css" rel="stylesheet" type="text/css" />
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/ace.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/mode-java.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/mode-forth.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/theme-one_dark.min.js"></script>
|
|
</head>
|
|
<body class="min-h-screen bg-base-100 text-base-content">
|
|
|
|
<div class="navbar bg-base-300 shadow-lg">
|
|
<div class="flex-1">
|
|
<span class="text-xl font-bold px-4">Undâr Compiler</span>
|
|
</div>
|
|
<div class="flex-none gap-2 px-4">
|
|
<select id="emitter" class="select select-bordered w-full max-w-xs">
|
|
<option value="1">Uxntal Emitter</option>
|
|
<option value="0" disabled>Reality Engine Emitter</option>
|
|
</select>
|
|
<button id="compile-btn" class="btn btn-primary" disabled>
|
|
<span id="btn-text">Loading...</span>
|
|
<span id="btn-loading" class="loading loading-spinner loading-sm hidden"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mx-auto p-4">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 h-[calc(100vh-100px)]">
|
|
<div class="card bg-base-200 shadow-xl flex flex-col">
|
|
<div class="card-title p-4 pb-0">Source</div>
|
|
<div class="card-body flex-1 p-4 pt-2">
|
|
<div id="input" class="w-full h-full rounded-lg overflow-hidden border border-base-300"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-base-200 shadow-xl flex flex-col">
|
|
<div class="card-title p-4 pb-0">Output</div>
|
|
<div class="card-body flex-1 p-4 pt-2">
|
|
<div id="output" class="w-full h-full rounded-lg overflow-hidden border border-base-300"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var inputEditor;
|
|
var outputEditor;
|
|
|
|
var Module = {
|
|
onRuntimeInitialized: function() {
|
|
const emitterEl = document.getElementById('emitter');
|
|
const compileBtn = document.getElementById('compile-btn');
|
|
const btnText = document.getElementById('btn-text');
|
|
const btnLoading = document.getElementById('btn-loading');
|
|
|
|
inputEditor = ace.edit("input");
|
|
inputEditor.session.setMode("ace/mode/java");
|
|
inputEditor.setTheme("ace/theme/one_dark");
|
|
inputEditor.setOptions({ fontSize: "14px" });
|
|
|
|
outputEditor = ace.edit("output");
|
|
outputEditor.session.setMode("ace/mode/forth");
|
|
outputEditor.setTheme("ace/theme/one_dark");
|
|
outputEditor.setReadOnly(true);
|
|
outputEditor.setOptions({ fontSize: "14px" });
|
|
|
|
btnText.innerText = "Compile";
|
|
compileBtn.disabled = false;
|
|
|
|
const compile = Module.cwrap('undar_compile', 'string', ['number', 'string']);
|
|
|
|
compileBtn.addEventListener('click', function() {
|
|
const sourceCode = inputEditor.getValue();
|
|
const emitterType = parseInt(emitterEl.value, 10);
|
|
|
|
btnText.classList.add("hidden");
|
|
btnLoading.classList.remove("hidden");
|
|
compileBtn.disabled = true;
|
|
outputEditor.setValue("Compiling...", -1);
|
|
|
|
setTimeout(() => {
|
|
try {
|
|
const result = compile(emitterType, sourceCode);
|
|
outputEditor.setValue((result === null) ? "Compilation Error" : result, -1);
|
|
} catch (e) {
|
|
outputEditor.setValue("WASM Runtime Error:\n" + e.message, -1);
|
|
} finally {
|
|
btnLoading.classList.add("hidden");
|
|
btnText.classList.remove("hidden");
|
|
compileBtn.disabled = false;
|
|
}
|
|
}, 50);
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
<script src="undar.js"></script>
|
|
</body>
|
|
</html> |