Urho3D/bin/shell.html
2020-05-09 02:17:20 +03:00

261 lines
10 KiB
HTML

<!doctype html>
<html lang="en-us">
<head>
<meta charset=utf-8>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Urho3D</title>
<style>
body, html {
padding: 0;
margin: 0;
margin: 0;
overflow: hidden;
}
.emscripten {
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
}
div.emscripten {
text-align: center;
}
#fullscreen-button {
position: absolute;
width: 2em;
height: 2em;
left: 50%;
top: 4px;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
stroke: #999999;
stroke-width: 10px;
}
#fullscreen-button:hover {
fill: #999999;
cursor: pointer;
}
#canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
border: 1px solid #000000;
border: none;
cursor: default !important;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div class="centered">
<div class="emscripten" id="status">Downloading...</div>
<progress hidden id="progress" max=100 value=10></progress>
</div>
<canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1 width=100 height=100 style="display: none;"></canvas>
<div id="fullscreen-button" onclick="enterFullscreen()" style="display: none;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path d="M93.1,139.6l46.5-46.5L93.1,46.5L139.6,0H0v139.6l46.5-46.5L93.1,139.6z M93.1,372.4l-46.5,46.5L0,372.4V512h139.6
l-46.5-46.5l46.5-46.5L93.1,372.4z M372.4,139.6H139.6v232.7h232.7V139.6z M325.8,325.8H186.2V186.2h139.6V325.8z M372.4,0
l46.5,46.5l-46.5,46.5l46.5,46.5l46.5-46.5l46.5,46.5V0H372.4z M418.9,372.4l-46.5,46.5l46.5,46.5L372.4,512H512V372.4l-46.5,46.5
L418.9,372.4z"/>
</svg>
</div>
<script>
var canvasElement = document.getElementById('canvas');
var devicePixelRatio = window.devicePixelRatio || 1;
var canvasWidth = 0;
var canvasHeight = 0;
// Detect the visible width and height of the window
function calculateCanvasSize() {
canvasWidth = parseInt(window.getComputedStyle(canvasElement).getPropertyValue('width')) * devicePixelRatio;
canvasHeight = parseInt(window.getComputedStyle(canvasElement).getPropertyValue('height')) * devicePixelRatio;
}
calculateCanvasSize();
// Detect fullscreen change and resize canvas resolution accordingly
function viewportResizeHandler() {
if (document.hidden) {
return;
}
calculateCanvasSize();
if (Module['JSCanvasSize']) {
if (isFullScreen()) {
Module.JSCanvasSize(screen.width * devicePixelRatio, screen.height * devicePixelRatio, true, devicePixelRatio);
} else {
Module.JSCanvasSize(canvasWidth, canvasHeight, false, devicePixelRatio);
}
}
}
function visibilityChanged() {
if (document.hidden) {
return;
}
// Overwrite some emscripten functions that break the input
__registerFocusEventCallback = function() {
if (!JSEvents.focusEvent) JSEvents.focusEvent = _malloc(256);
};
__registerFullscreenChangeEventCallback = function() {
if (!JSEvents.fullscreenChangeEvent) JSEvents.fullscreenChangeEvent = _malloc(280);
};
setTimeout(() => {
viewportResizeHandler();
}, 100);
}
document.addEventListener('fullscreenchange', viewportResizeHandler, false);
document.addEventListener('mozfullscreenchange', viewportResizeHandler, false);
document.addEventListener('webkitfullscreenchange', viewportResizeHandler, false);
document.addEventListener('MSFullscreenChange', viewportResizeHandler, false);
document.addEventListener('visibilitychange', visibilityChanged, false);
document.addEventListener('msvisibilitychange', visibilityChanged, false);
document.addEventListener('webkitvisibilitychange', visibilityChanged, false);
var resizeTimeout = false;
// When window size has changed, resize the canvas accordingly
window.addEventListener('resize', function(evt) {
// resize event is called before the resizing has finished, we must wait a bit so the new calculations use the new viewport size
if (resizeTimeout) {
clearTimeout(resizeTimeout);
}
resizeTimeout = setTimeout(() => {
viewportResizeHandler(evt);
}, 1000);
});
// Enter the fullscreen mode
function enterFullscreen(show) {
if (show === undefined) show = !isFullScreen();
if (show) {
if (canvasElement.requestFullscreen) canvasElement.requestFullscreen();
else if (canvasElement.webkitRequestFullScreen) canvasElement.webkitRequestFullScreen();
else if (canvasElement.mozRequestFullScreen) canvasElement.mozRequestFullScreen();
else if (canvasElement.msRequestFullscreen) canvasElement.msRequestFullscreen();
} else {
if (document.exitFullscreen) document.exitFullscreen();
else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
else if (document.msExitFullscreen) document.msExitFullscreen();
}
}
function isFullScreen() {
return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
}
// App is ready to launch, make canvas and fullscreen button visible
function ready() {
document.getElementById('canvas').style.display = 'block';
document.getElementById('fullscreen-button').style.display = 'block';
if (document.hidden) {
return;
}
// Overwrite some emscripten functions that break the input
__registerFocusEventCallback = function() {
if (!JSEvents.focusEvent) JSEvents.focusEvent = _malloc(256);
};
__registerFullscreenChangeEventCallback = function() {
if (!JSEvents.fullscreenChangeEvent) JSEvents.fullscreenChangeEvent = _malloc(280);
};
setTimeout(() => {
viewportResizeHandler();
}, 100);
}
var Module = {
preRun: [],
postRun: [],
canvas: canvasElement,
forcedAspectRatio: false,
print: function (text) {
console.log(text);
},
printErr: function(text) {
console.error(text);
},
// Urho3D called method which tells the canvas the current renderer resolution, based on E_SCREENMODE event values
SetRendererSize: function(width, height) {
console.log('Engine renderer size changed to', width, height);
calculateCanvasSize();
if (document.hidden) {
return;
}
var aspectRatio = width / height;
canvasElement.width = width;
canvasElement.height = height;
// Compare calculated canvas resolution with the actual renderer resolution
if (canvasWidth === width && canvasHeight === height) {
return;
}
// Renderer resolution is wrong, update it with the calculated values
console.log('Renderer and canvas resolution mismatch, updating renderer resolution width', this.canvas.width, 'to', width, 'and height', this.canvas.height, 'to', height);
Module.JSCanvasSize(canvasWidth, canvasHeight, false, devicePixelRatio);
},
// Retrieve the current status of the application
setStatus: function(text) {
if (text === 'Running...') {
ready();
}
if (Module.setStatus.interval) clearInterval(Module.setStatus.interval);
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
var statusElement = document.getElementById('status');
var progressElement = document.getElementById('progress');
if (m) {
text = m[1];
progressElement.value = parseInt(m[2])*100;
progressElement.max = parseInt(m[4])*100;
progressElement.hidden = false;
} else {
progressElement.value = null;
progressElement.max = null;
progressElement.hidden = true;
}
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.');
},
};
Module.setStatus('Downloading...');
</script>
{{{ SCRIPT }}}
</body>
</html>