2025-12-23 21:28:40 +11:00
|
|
|
<!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!"
|
2026-03-05 20:29:30 +11:00
|
|
|
</textarea>
|
2025-12-23 21:28:40 +11:00
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
2026-03-05 20:29:30 +11:00
|
|
|
<script src="playground.js"></script>
|
|
|
|
|
<script>
|
2025-12-23 21:28:40 +11:00
|
|
|
const outputDiv = document.getElementById('output');
|
2026-03-05 20:29:30 +11:00
|
|
|
const codeArea = document.getElementById('editor');
|
2025-12-23 21:28:40 +11:00
|
|
|
const runBtn = document.getElementById('runBtn');
|
|
|
|
|
|
2026-03-05 20:29:30 +11:00
|
|
|
// Emscripten provides a 'Module' object that fires 'onRuntimeInitialized'
|
|
|
|
|
Module.onRuntimeInitialized = () => {
|
|
|
|
|
outputDiv.innerText = "Ready to run.";
|
|
|
|
|
runBtn.innerText = "Run";
|
|
|
|
|
|
|
|
|
|
runBtn.addEventListener('click', () => {
|
|
|
|
|
const source = codeArea.value;
|
|
|
|
|
|
|
|
|
|
// Use 'ccall' to call the C function:
|
|
|
|
|
// ccall(name, returnType, [argTypes], [args])
|
|
|
|
|
const result = Module.ccall(
|
|
|
|
|
'solstice_run', // C function name
|
|
|
|
|
'string', // Return type
|
|
|
|
|
['string'], // Argument types
|
|
|
|
|
[source] // Arguments
|
2025-12-23 21:28:40 +11:00
|
|
|
);
|
2026-03-05 20:29:30 +11:00
|
|
|
|
|
|
|
|
outputDiv.innerText = result;
|
|
|
|
|
});
|
|
|
|
|
};
|
2025-12-23 21:28:40 +11:00
|
|
|
</script>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
