183 lines
6.1 KiB
HTML
183 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<!-- This file license is CC0 (https://creativecommons.org/publicdomain/zero/1.0/). -->
|
|
<!-- Original code by @SpartanJ https://github.com/SpartanJ/eepp/blob/8552941da19380d7a629c4da80a976aec5d39e5c/bin/emscripten-fs.html -->
|
|
<html lang="en-us">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
|
|
<!-- <title>Example</title> -->
|
|
<style>
|
|
body { margin: 0; background-color: black }
|
|
.emscripten {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
margin: 0px;
|
|
border: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: block;
|
|
image-rendering: optimizeSpeed;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: -o-crisp-edges;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
image-rendering: optimize-contrast;
|
|
image-rendering: crisp-edges;
|
|
image-rendering: pixelated;
|
|
-ms-interpolation-mode: nearest-neighbor;
|
|
}
|
|
.loader {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
border-top: 3px solid #3daee9;
|
|
border-right: 3px solid transparent;
|
|
box-sizing: border-box;
|
|
animation: rotation 1s linear infinite;
|
|
}
|
|
.loader-cont {
|
|
display: flex;
|
|
width: 100vw;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
align-items: center;
|
|
}
|
|
@keyframes rotation {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
|
<div id="cont" class="loader-cont">
|
|
<span class="loader"></span>
|
|
</div>
|
|
<script type='text/javascript'>
|
|
var loaderCont;
|
|
|
|
function getDemoScript(name) {
|
|
if (name)
|
|
return name;
|
|
return "index.js";
|
|
}
|
|
|
|
function getParameter(name) {
|
|
let url_string = window.location.href;
|
|
let url = new URL(url_string);
|
|
return url.searchParams.get(name);
|
|
}
|
|
|
|
function loadScript(url, callback) {
|
|
loaderCont = document.getElementById('cont');
|
|
let head = document.head;
|
|
let script = document.createElement('script');
|
|
script.type = 'text/javascript';
|
|
script.src = url;
|
|
script.onreadystatechange = callback;
|
|
script.onload = callback;
|
|
head.appendChild(script);
|
|
}
|
|
|
|
var Module = {
|
|
preRun: [],
|
|
postRun: [],
|
|
print: (function() {
|
|
return function(text) {
|
|
text = Array.prototype.slice.call(arguments).join(' ');
|
|
console.log(text);
|
|
};
|
|
})(),
|
|
printErr: function(text) {
|
|
text = Array.prototype.slice.call(arguments).join(' ');
|
|
console.error(text);
|
|
},
|
|
canvas: (function() {
|
|
var canvas = document.getElementById('canvas');
|
|
var dpi = window.devicePixelRatio;
|
|
canvas.width = window.innerWidth*dpi;
|
|
canvas.height = window.innerHeight*dpi;
|
|
|
|
window.addEventListener('resize', () => {
|
|
if (canvas.canResize) {
|
|
dpi = window.devicePixelRatio;
|
|
canvas.width = window.innerWidth*dpi;
|
|
canvas.height = window.innerHeight*dpi;
|
|
}
|
|
})
|
|
return canvas;
|
|
})(),
|
|
setStatus: function(text) {
|
|
console.log("status: " + text);
|
|
if (text == "Running...")
|
|
loaderCont.style.display = 'none';
|
|
},
|
|
monitorRunDependencies: function(left) {
|
|
// no run dependencies to log
|
|
},
|
|
arguments: window.location.search.substr(1).split('&')
|
|
};
|
|
window.onerror = function() {
|
|
console.log("onerror: " + event);
|
|
};
|
|
|
|
(function() {
|
|
loadScript(getDemoScript(getParameter("run")));
|
|
})();
|
|
</script>
|
|
|
|
{{{ SCRIPT }}}
|
|
|
|
<button onclick="openFullscreen();" style="position:relative; z-index: 1000; float: right;">⛶</button>
|
|
<!-- <button id="btn-audio" onclick="toggleAudio();" style="position:relative; z-index: 1000; float: right;">M</button> -->
|
|
<script>
|
|
function openFullscreen() {
|
|
var canvas = document.getElementById("canvas");
|
|
if (canvas.requestFullscreen) {
|
|
canvas.requestFullscreen();
|
|
} else if (canvas.webkitRequestFullscreen) { /* Safari */
|
|
canvas.webkitRequestFullscreen();
|
|
} else if (canvas.msRequestFullscreen) { /* IE11 */
|
|
canvas.msRequestFullscreen();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- <script type='text/javascript'>
|
|
var audioBtn = document.querySelector('#btn-audio');
|
|
|
|
// An array of all contexts to resume on the page
|
|
const audioContexList = [];
|
|
(function() {
|
|
// A proxy object to intercept AudioContexts and
|
|
// add them to the array for tracking and resuming later
|
|
self.AudioContext = new Proxy(self.AudioContext, {
|
|
construct(target, args) {
|
|
const result = new target(...args);
|
|
audioContexList.push(result);
|
|
if (result.state == "suspended") audioBtn.value = "RESUME";
|
|
return result;
|
|
}
|
|
});
|
|
})();
|
|
|
|
function toggleAudio() {
|
|
var resumed = false;
|
|
audioContexList.forEach(ctx => {
|
|
if (ctx.state == "suspended") { ctx.resume(); resumed = true; }
|
|
else if (ctx.state == "running") ctx.suspend();
|
|
});
|
|
|
|
if (resumed) audioBtn.value = "SUSPEND";
|
|
else audioBtn.value = "RESUME";
|
|
}
|
|
</script> -->
|
|
</body>
|
|
</html>
|