forked from solstice/sols.dev
88 lines
3.4 KiB
HTML
88 lines
3.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Solstice Playground</title>
|
||
|
|
<link rel="stylesheet" href="https://sols.dev/index.css">
|
||
|
|
<style>
|
||
|
|
textarea {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="box">
|
||
|
|
<h1>Solstice Playground</h1>
|
||
|
|
|
||
|
|
<textarea class="code" id="editor" spellcheck="false" placeholder="Enter Solstice code here..." rows="20">
|
||
|
|
puts "Hello from Solstice via WebAssembly!"
|
||
|
|
puts "Let's do some math:"
|
||
|
|
puts 10 + 20 + 12
|
||
|
|
</textarea>
|
||
|
|
|
||
|
|
<div id="controls">
|
||
|
|
<button id="runBtn" style="font-size: 20px;">Loading WASM...</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Output:</h3>
|
||
|
|
<pre class="code" id="output">Output will appear here. Click "Run Code" to run!</pre>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
import createSolsticeModule from './playground.js';
|
||
|
|
|
||
|
|
let solsticeModule = null;
|
||
|
|
const outputDiv = document.getElementById('output');
|
||
|
|
const runBtn = document.getElementById('runBtn');
|
||
|
|
const editor = document.getElementById('editor');
|
||
|
|
|
||
|
|
// Initialize the Emscripten module
|
||
|
|
createSolsticeModule({
|
||
|
|
// Redirect stdout to our output div
|
||
|
|
print: (text) => {
|
||
|
|
outputDiv.textContent += text + "\n";
|
||
|
|
console.log(text);
|
||
|
|
},
|
||
|
|
// Redirect stderr to our output div (and console)
|
||
|
|
printErr: (text) => {
|
||
|
|
outputDiv.textContent += "[stderr] " + text + "\n";
|
||
|
|
console.error(text);
|
||
|
|
}
|
||
|
|
}).then((instance) => {
|
||
|
|
solsticeModule = instance;
|
||
|
|
runBtn.textContent = "Run Code";
|
||
|
|
runBtn.disabled = false;
|
||
|
|
console.log("Solstice WASM module loaded successfully");
|
||
|
|
}).catch(err => {
|
||
|
|
console.error("Failed to load WASM module:", err);
|
||
|
|
outputDiv.innerHTML = '<span class="error">Error loading WASM module. See console for details.</span>';
|
||
|
|
runBtn.textContent = "Load Failed";
|
||
|
|
});
|
||
|
|
|
||
|
|
runBtn.addEventListener('click', () => {
|
||
|
|
if (!solsticeModule) return;
|
||
|
|
|
||
|
|
outputDiv.textContent = ""; // Clear previous output
|
||
|
|
const code = editor.value;
|
||
|
|
|
||
|
|
try {
|
||
|
|
// Call the C++ function 'run_source' exported via EMSCRIPTEN_KEEPALIVE
|
||
|
|
// int run_source(char* code)
|
||
|
|
solsticeModule.ccall(
|
||
|
|
'run_source', // function name
|
||
|
|
'number', // return type
|
||
|
|
['string'], // argument types
|
||
|
|
[code] // arguments
|
||
|
|
);
|
||
|
|
} catch (e) {
|
||
|
|
outputDiv.innerHTML += `\n<span class="error">[Runtime Error] ${e}</span>`;
|
||
|
|
console.error(e);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|