138 lines
5.1 KiB
HTML
138 lines
5.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">
|
||
|
|
<title>McRogueFace</title>
|
||
|
|
<style>
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
html, body {
|
||
|
|
width: 100%; height: 100%; overflow: hidden;
|
||
|
|
background: #000;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
padding: env(safe-area-inset-top) env(safe-area-inset-right)
|
||
|
|
env(safe-area-inset-bottom) env(safe-area-inset-left);
|
||
|
|
}
|
||
|
|
#canvas {
|
||
|
|
display: block; position: absolute;
|
||
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
||
|
|
image-rendering: pixelated;
|
||
|
|
image-rendering: crisp-edges;
|
||
|
|
-ms-interpolation-mode: nearest-neighbor;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
.loading {
|
||
|
|
position: fixed; inset: 0; display: flex;
|
||
|
|
flex-direction: column; justify-content: center;
|
||
|
|
align-items: center; background: #000; color: #eee;
|
||
|
|
font-family: 'Segoe UI', system-ui, sans-serif;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
.loading.hidden { display: none; }
|
||
|
|
.spinner {
|
||
|
|
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); } }
|
||
|
|
#status {
|
||
|
|
margin-top: 15px;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #888;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
|
||
|
|
<div class="loading" id="loading">
|
||
|
|
<div class="spinner"></div>
|
||
|
|
<p id="status">Loading...</p>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
var canvasElement = document.getElementById('canvas');
|
||
|
|
var loadingElement = document.getElementById('loading');
|
||
|
|
var statusElement = document.getElementById('status');
|
||
|
|
|
||
|
|
var runtimeReady = false;
|
||
|
|
|
||
|
|
function updateCanvasSize() {
|
||
|
|
var w = Math.floor(window.innerWidth);
|
||
|
|
var h = Math.floor(window.innerHeight);
|
||
|
|
if (runtimeReady) {
|
||
|
|
// Notify C++ engine, which updates SDL + viewport system
|
||
|
|
Module.ccall('notify_canvas_resize', null, ['number', 'number'], [w, h]);
|
||
|
|
} else {
|
||
|
|
// Before runtime init, set canvas backing buffer directly
|
||
|
|
canvasElement.width = w;
|
||
|
|
canvasElement.height = h;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
updateCanvasSize();
|
||
|
|
window.addEventListener('resize', updateCanvasSize);
|
||
|
|
|
||
|
|
// Focus canvas on click
|
||
|
|
canvasElement.addEventListener('click', function() {
|
||
|
|
canvasElement.focus();
|
||
|
|
});
|
||
|
|
canvasElement.addEventListener('mousedown', function() {
|
||
|
|
if (document.activeElement !== canvasElement) {
|
||
|
|
canvasElement.focus();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var Module = {
|
||
|
|
print: function(text) {
|
||
|
|
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||
|
|
console.log(text);
|
||
|
|
},
|
||
|
|
printErr: function(text) {
|
||
|
|
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||
|
|
console.error(text);
|
||
|
|
},
|
||
|
|
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.textContent = 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() {
|
||
|
|
runtimeReady = true;
|
||
|
|
loadingElement.classList.add('hidden');
|
||
|
|
canvasElement.focus();
|
||
|
|
// Trigger resize so C++ picks up the actual canvas dimensions
|
||
|
|
window.dispatchEvent(new Event('resize'));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
Module.setStatus('Downloading...');
|
||
|
|
|
||
|
|
window.onerror = function(event) {
|
||
|
|
Module.setStatus('Error! See console.');
|
||
|
|
};
|
||
|
|
|
||
|
|
if (typeof resolveGlobalSymbol === 'undefined') {
|
||
|
|
window.resolveGlobalSymbol = function(name, direct) {
|
||
|
|
return {
|
||
|
|
sym: Module['_' + name] || Module[name],
|
||
|
|
type: 'function'
|
||
|
|
};
|
||
|
|
};
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
{{{ SCRIPT }}}
|
||
|
|
</body>
|
||
|
|
</html>
|