2026-01-31 14:36:22 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>McRogueFace - WebGL</title>
|
|
|
|
|
<style>
|
2026-01-31 15:31:18 -05:00
|
|
|
* {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
2026-01-31 14:36:22 -05:00
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
background: #1a1a2e;
|
|
|
|
|
font-family: 'Segoe UI', system-ui, sans-serif;
|
|
|
|
|
color: #eee;
|
2026-01-31 15:31:18 -05:00
|
|
|
min-height: 100vh;
|
2026-01-31 14:36:22 -05:00
|
|
|
}
|
2026-01-31 15:31:18 -05:00
|
|
|
.container {
|
|
|
|
|
max-width: 1400px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
2026-01-31 14:36:22 -05:00
|
|
|
margin-bottom: 10px;
|
2026-01-31 15:31:18 -05:00
|
|
|
}
|
|
|
|
|
h1 {
|
|
|
|
|
margin: 0;
|
2026-01-31 14:36:22 -05:00
|
|
|
color: #e94560;
|
|
|
|
|
}
|
|
|
|
|
#status {
|
|
|
|
|
color: #888;
|
|
|
|
|
}
|
2026-01-31 15:31:18 -05:00
|
|
|
.main-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 20px;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
.game-panel {
|
|
|
|
|
flex: 1;
|
|
|
|
|
min-width: 300px;
|
2026-01-31 14:36:22 -05:00
|
|
|
}
|
|
|
|
|
#canvas {
|
2026-01-31 16:45:10 -05:00
|
|
|
/* border: 2px solid #e94560; -- disabled per Emscripten docs, causes alignment issues */
|
2026-01-31 14:36:22 -05:00
|
|
|
background: #000;
|
|
|
|
|
display: block;
|
2026-01-31 15:31:18 -05:00
|
|
|
max-width: 100%;
|
|
|
|
|
height: auto;
|
2026-01-31 14:36:22 -05:00
|
|
|
/* Crisp pixel rendering - no smoothing/interpolation */
|
|
|
|
|
image-rendering: pixelated;
|
|
|
|
|
image-rendering: crisp-edges;
|
|
|
|
|
-ms-interpolation-mode: nearest-neighbor;
|
2026-01-31 15:31:18 -05:00
|
|
|
/* Ensure canvas can receive focus */
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
#canvas:focus {
|
|
|
|
|
box-shadow: 0 0 10px rgba(78, 204, 163, 0.5);
|
|
|
|
|
}
|
|
|
|
|
.repl-panel {
|
|
|
|
|
width: 400px;
|
|
|
|
|
min-width: 300px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
background: #16213e;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.repl-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 10px 15px;
|
|
|
|
|
background: #0f3460;
|
|
|
|
|
border-bottom: 1px solid #e94560;
|
|
|
|
|
}
|
|
|
|
|
.repl-header h3 {
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #e94560;
|
|
|
|
|
}
|
|
|
|
|
.repl-buttons {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
.repl-buttons button {
|
|
|
|
|
padding: 6px 12px;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
}
|
|
|
|
|
#runBtn {
|
|
|
|
|
background: #4ecca3;
|
|
|
|
|
color: #1a1a2e;
|
|
|
|
|
}
|
|
|
|
|
#runBtn:hover {
|
|
|
|
|
background: #3db892;
|
|
|
|
|
}
|
|
|
|
|
#resetBtn {
|
|
|
|
|
background: #e94560;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
#resetBtn:hover {
|
|
|
|
|
background: #d63050;
|
|
|
|
|
}
|
|
|
|
|
#clearBtn {
|
|
|
|
|
background: #666;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
#clearBtn:hover {
|
|
|
|
|
background: #555;
|
|
|
|
|
}
|
|
|
|
|
.repl-buttons button:disabled {
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
}
|
|
|
|
|
#codeEditor {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 250px;
|
|
|
|
|
padding: 12px;
|
|
|
|
|
border: none;
|
|
|
|
|
background: #0f0f23;
|
|
|
|
|
color: #4ecca3;
|
|
|
|
|
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
resize: vertical;
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
#codeEditor::placeholder {
|
|
|
|
|
color: #555;
|
|
|
|
|
}
|
|
|
|
|
.repl-output-header {
|
|
|
|
|
padding: 8px 15px;
|
|
|
|
|
background: #0f3460;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #888;
|
|
|
|
|
border-top: 1px solid #333;
|
|
|
|
|
}
|
|
|
|
|
#replOutput {
|
|
|
|
|
flex: 1;
|
|
|
|
|
min-height: 150px;
|
|
|
|
|
max-height: 250px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
padding: 12px;
|
|
|
|
|
background: #0a0a15;
|
|
|
|
|
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
color: #ccc;
|
|
|
|
|
}
|
|
|
|
|
#replOutput .error {
|
|
|
|
|
color: #e94560;
|
|
|
|
|
}
|
|
|
|
|
#replOutput .success {
|
|
|
|
|
color: #4ecca3;
|
2026-01-31 14:36:22 -05:00
|
|
|
}
|
|
|
|
|
#output {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
width: 100%;
|
2026-01-31 15:31:18 -05:00
|
|
|
max-height: 150px;
|
2026-01-31 14:36:22 -05:00
|
|
|
overflow-y: auto;
|
|
|
|
|
background: #0f0f23;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
border: 1px solid #333;
|
2026-01-31 15:31:18 -05:00
|
|
|
border-radius: 4px;
|
2026-01-31 14:36:22 -05:00
|
|
|
}
|
|
|
|
|
.spinner {
|
2026-01-31 15:31:18 -05:00
|
|
|
margin: 20px auto;
|
2026-01-31 14:36:22 -05:00
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
border: 5px solid #333;
|
|
|
|
|
border-top-color: #e94560;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
animation: spin 1s linear infinite;
|
|
|
|
|
}
|
|
|
|
|
@keyframes spin {
|
|
|
|
|
to { transform: rotate(360deg); }
|
|
|
|
|
}
|
2026-01-31 15:31:18 -05:00
|
|
|
.toggle-repl {
|
|
|
|
|
display: none;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
padding: 8px 16px;
|
|
|
|
|
background: #0f3460;
|
|
|
|
|
border: 1px solid #e94560;
|
|
|
|
|
color: #e94560;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 900px) {
|
|
|
|
|
.main-content {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.repl-panel {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/* Keyboard shortcut hint */
|
|
|
|
|
.shortcut-hint {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: #666;
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
}
|
2026-01-31 14:36:22 -05:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2026-01-31 15:31:18 -05:00
|
|
|
<div class="container">
|
|
|
|
|
<header>
|
|
|
|
|
<h1>McRogueFace</h1>
|
|
|
|
|
<div id="status">Downloading...</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div id="spinner" class="spinner"></div>
|
|
|
|
|
|
|
|
|
|
<div class="main-content">
|
|
|
|
|
<div class="game-panel">
|
|
|
|
|
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="repl-panel" id="replPanel">
|
|
|
|
|
<div class="repl-header">
|
|
|
|
|
<h3>Python REPL</h3>
|
|
|
|
|
<div class="repl-buttons">
|
|
|
|
|
<button id="runBtn" disabled>Run</button>
|
|
|
|
|
<button id="resetBtn" disabled>Reset</button>
|
|
|
|
|
<button id="clearBtn">Clear</button>
|
|
|
|
|
<span class="shortcut-hint">Ctrl+Enter to run</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<textarea id="codeEditor" placeholder="Write Python code here...
|
|
|
|
|
|
|
|
|
|
import mcrfpy
|
|
|
|
|
scene = mcrfpy.Scene('test')
|
|
|
|
|
frame = mcrfpy.Frame(100, 100, 200, 150)
|
|
|
|
|
scene.ui.append(frame)
|
|
|
|
|
mcrfpy.setScene('test')
|
|
|
|
|
"></textarea>
|
|
|
|
|
<div class="repl-output-header">Output</div>
|
|
|
|
|
<div id="replOutput"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="output"></div>
|
|
|
|
|
</div>
|
2026-01-31 14:36:22 -05:00
|
|
|
|
|
|
|
|
<script type='text/javascript'>
|
|
|
|
|
var statusElement = document.getElementById('status');
|
|
|
|
|
var spinnerElement = document.getElementById('spinner');
|
|
|
|
|
var outputElement = document.getElementById('output');
|
|
|
|
|
var canvasElement = document.getElementById('canvas');
|
2026-01-31 15:31:18 -05:00
|
|
|
var codeEditor = document.getElementById('codeEditor');
|
|
|
|
|
var replOutput = document.getElementById('replOutput');
|
|
|
|
|
var runBtn = document.getElementById('runBtn');
|
|
|
|
|
var resetBtn = document.getElementById('resetBtn');
|
|
|
|
|
var clearBtn = document.getElementById('clearBtn');
|
2026-01-31 14:36:22 -05:00
|
|
|
|
|
|
|
|
// Pre-set canvas size
|
|
|
|
|
canvasElement.width = 1024;
|
|
|
|
|
canvasElement.height = 768;
|
|
|
|
|
|
|
|
|
|
var Module = {
|
|
|
|
|
print: (function() {
|
|
|
|
|
return function(text) {
|
|
|
|
|
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
|
|
|
|
console.log(text);
|
|
|
|
|
outputElement.textContent += text + '\n';
|
|
|
|
|
outputElement.scrollTop = outputElement.scrollHeight;
|
|
|
|
|
};
|
|
|
|
|
})(),
|
|
|
|
|
printErr: function(text) {
|
|
|
|
|
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
|
|
|
|
console.error(text);
|
|
|
|
|
outputElement.textContent += '[ERR] ' + text + '\n';
|
|
|
|
|
outputElement.scrollTop = outputElement.scrollHeight;
|
|
|
|
|
},
|
|
|
|
|
canvas: canvasElement,
|
|
|
|
|
setStatus: function(text) {
|
|
|
|
|
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
|
|
|
|
if (text === Module.setStatus.last.text) return;
|
|
|
|
|
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
|
|
|
|
var now = Date.now();
|
|
|
|
|
if (m && now - Module.setStatus.last.time < 30) return;
|
|
|
|
|
Module.setStatus.last.time = now;
|
|
|
|
|
Module.setStatus.last.text = text;
|
|
|
|
|
if (m) {
|
|
|
|
|
text = m[1];
|
|
|
|
|
}
|
|
|
|
|
statusElement.innerHTML = text;
|
|
|
|
|
},
|
|
|
|
|
totalDependencies: 0,
|
|
|
|
|
monitorRunDependencies: function(left) {
|
|
|
|
|
this.totalDependencies = Math.max(this.totalDependencies, left);
|
|
|
|
|
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
|
|
|
|
},
|
|
|
|
|
onRuntimeInitialized: function() {
|
|
|
|
|
console.log('Emscripten runtime initialized');
|
|
|
|
|
spinnerElement.style.display = 'none';
|
2026-01-31 15:31:18 -05:00
|
|
|
|
|
|
|
|
// Enable REPL buttons
|
|
|
|
|
runBtn.disabled = false;
|
|
|
|
|
resetBtn.disabled = false;
|
|
|
|
|
|
|
|
|
|
// Make FS available globally for console access
|
|
|
|
|
window.FS = Module.FS;
|
|
|
|
|
|
|
|
|
|
// Create convenient Python execution functions
|
|
|
|
|
window.runPython = function(code) {
|
|
|
|
|
return Module.ccall('run_python_string_with_output', 'string', ['string'], [code]);
|
|
|
|
|
};
|
|
|
|
|
window.resetGame = function() {
|
|
|
|
|
return Module.ccall('reset_python_environment', 'number', [], []);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
replOutput.innerHTML = '<span class="success">Python REPL ready. Enter code and click Run (or Ctrl+Enter).</span>\n';
|
|
|
|
|
|
|
|
|
|
// Focus canvas after a short delay to ensure SDL is ready
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
canvasElement.focus();
|
|
|
|
|
// Trigger a synthetic resize to ensure SDL is properly initialized
|
|
|
|
|
window.dispatchEvent(new Event('resize'));
|
|
|
|
|
}, 100);
|
2026-01-31 14:36:22 -05:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Module.setStatus('Downloading...');
|
|
|
|
|
|
|
|
|
|
window.onerror = function(event) {
|
|
|
|
|
Module.setStatus('Error! See console for details.');
|
|
|
|
|
spinnerElement.style.display = 'none';
|
|
|
|
|
};
|
|
|
|
|
|
2026-01-31 15:31:18 -05:00
|
|
|
// Stub for resolveGlobalSymbol
|
2026-01-31 14:36:22 -05:00
|
|
|
if (typeof resolveGlobalSymbol === 'undefined') {
|
|
|
|
|
window.resolveGlobalSymbol = function(name, direct) {
|
|
|
|
|
return {
|
|
|
|
|
sym: Module['_' + name] || Module[name],
|
|
|
|
|
type: 'function'
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-31 15:31:18 -05:00
|
|
|
// Prevent browser zoom on canvas
|
2026-01-31 14:36:22 -05:00
|
|
|
document.addEventListener('wheel', function(e) {
|
|
|
|
|
if (e.ctrlKey) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopImmediatePropagation();
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}, { passive: false, capture: true });
|
|
|
|
|
|
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
|
|
|
if (e.ctrlKey && (e.key === '+' || e.key === '-' || e.key === '=' || e.key === '_')) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopImmediatePropagation();
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}, { capture: true });
|
2026-01-31 15:31:18 -05:00
|
|
|
|
|
|
|
|
// Click on canvas to focus it (for keyboard input)
|
|
|
|
|
canvasElement.addEventListener('click', function() {
|
|
|
|
|
canvasElement.focus();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Also handle mousedown to ensure focus happens before SDL processes the click
|
|
|
|
|
canvasElement.addEventListener('mousedown', function() {
|
|
|
|
|
if (document.activeElement !== canvasElement) {
|
|
|
|
|
canvasElement.focus();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// REPL functionality
|
|
|
|
|
function runCode() {
|
|
|
|
|
var code = codeEditor.value;
|
|
|
|
|
if (!code.trim()) return;
|
|
|
|
|
|
|
|
|
|
replOutput.innerHTML += '<span style="color:#666">>>> </span><span style="color:#888">' + escapeHtml(code.split('\n')[0]) + (code.includes('\n') ? '...' : '') + '</span>\n';
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
var result = window.runPython(code);
|
|
|
|
|
if (result) {
|
|
|
|
|
// Check if result contains error indicators
|
|
|
|
|
if (result.includes('Traceback') || result.includes('Error:')) {
|
|
|
|
|
replOutput.innerHTML += '<span class="error">' + escapeHtml(result) + '</span>\n';
|
|
|
|
|
} else {
|
|
|
|
|
// Show result (could be print output or repr of expression)
|
|
|
|
|
replOutput.innerHTML += '<span class="success">' + escapeHtml(result) + '</span>\n';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
replOutput.innerHTML += '<span class="error">JavaScript Error: ' + escapeHtml(e.toString()) + '</span>\n';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
replOutput.scrollTop = replOutput.scrollHeight;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function resetEnvironment() {
|
|
|
|
|
replOutput.innerHTML += '<span style="color:#888">>>> Resetting environment...</span>\n';
|
|
|
|
|
try {
|
|
|
|
|
window.resetGame();
|
|
|
|
|
replOutput.innerHTML += '<span class="success">Environment reset.</span>\n';
|
|
|
|
|
} catch (e) {
|
|
|
|
|
replOutput.innerHTML += '<span class="error">Reset error: ' + escapeHtml(e.toString()) + '</span>\n';
|
|
|
|
|
}
|
|
|
|
|
replOutput.scrollTop = replOutput.scrollHeight;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function clearOutput() {
|
|
|
|
|
replOutput.innerHTML = '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function escapeHtml(text) {
|
|
|
|
|
var div = document.createElement('div');
|
|
|
|
|
div.textContent = text;
|
|
|
|
|
return div.innerHTML;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Button handlers
|
|
|
|
|
runBtn.addEventListener('click', runCode);
|
|
|
|
|
resetBtn.addEventListener('click', resetEnvironment);
|
|
|
|
|
clearBtn.addEventListener('click', clearOutput);
|
|
|
|
|
|
|
|
|
|
// Keyboard shortcut: Ctrl+Enter to run
|
|
|
|
|
// IMPORTANT: Stop propagation to prevent SDL from consuming keystrokes
|
|
|
|
|
codeEditor.addEventListener('keydown', function(e) {
|
|
|
|
|
e.stopPropagation(); // Prevent SDL from receiving this event
|
|
|
|
|
|
|
|
|
|
if (e.ctrlKey && e.key === 'Enter') {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
if (!runBtn.disabled) {
|
|
|
|
|
runCode();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// Tab key inserts spaces instead of changing focus
|
|
|
|
|
if (e.key === 'Tab') {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
var start = this.selectionStart;
|
|
|
|
|
var end = this.selectionEnd;
|
|
|
|
|
this.value = this.value.substring(0, start) + ' ' + this.value.substring(end);
|
|
|
|
|
this.selectionStart = this.selectionEnd = start + 4;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Stop all keyboard events from reaching SDL when REPL is focused
|
|
|
|
|
codeEditor.addEventListener('keyup', function(e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
});
|
|
|
|
|
codeEditor.addEventListener('keypress', function(e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
});
|
2026-01-31 14:36:22 -05:00
|
|
|
</script>
|
|
|
|
|
{{{ SCRIPT }}}
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
