DinkSmallwoodHD/html5/CustomMain3-2AspectRatioTemplate.html

250 lines
7.4 KiB
HTML

<!-- This unity webgl template is based on "A better Unity WebGL template" by greggman: https://github.com/greggman/better-unity-webgl-template -->
<!-- Also based on code by John Sharp: https://lyceum-allotments.github.io/2016/06/emscripten-and-sdl2-tutorial-part-7-get-naked-owl/ -->
<!-- Tweaks by Seth A. Robinson (rtsoft.com) - note, this is sort of a mess because I haven't fully intregrated the unity/emscripten stuff at this time. It works though -->
<script>
var appName = "RTTemplateName";
</script>
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>RTTemplateName</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
background: #444;
}
#gameContainer {
width: 100%;
height: 100%;
}
canvas.emscripten {
width: 100vw;
height: 66.66vw; /* height:width ratio = 9/16 = .5625 */
#background: black;
max-height: 100vh;
max-width: 150.00vh; /* 16/9 = 1.778 */
margin: auto;
position: absolute;
top:0;bottom:0; /* vertical center */
left:0;right:0; /* horizontal center */
display: block;
}
.logo {
display: block;
width: max-width: 100vw;
height: max-height: 70vh;
z-index: -1;
}
.progress {
margin: 1.5em;
border: 1px solid white;
width: 50vw;
display: none;
}
.progress .full {
margin: 2px;
background: white;
height: 1em;
transform-origin: top left;
}
#loader {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events:none;
}
.loadingtext {
color: white;
align-items: center;
justify-content: center;
}
.spinner,
.spinner:after {
border-radius: 50%;
width: 5em;
height: 5em;
}
.spinner {
margin: 10px;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
transform: translateZ(0);
animation: spinner-spin 1.1s infinite linear;
}
@keyframes spinner-spin
{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="gameContainer">
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
</div>
<div id="loader">
<img class="logo" src="WebLoaderData/logo.png">
<div class="spinner"></div>
<div class="loadingtext">Setting up...</div>
<div class="progress"><div class="full"></div></div>
</div>
</body>
<script>
var textNum = 0;
//Uncomment below to disable webassembly loading
//UnityLoader.SystemInfo.hasWasm = false;
var Module =
{
setStatus: function(text)
{
//console.log('SetStatus: ' + text)
const progress = document.querySelector("#loader .progress");
if (!Module.progress)
{
//set it up
progress.style.display = "block";
Module.progress = progress.querySelector(".full");
loader.querySelector(".spinner").style.display = "none";
Module.progress.style.transform = `scaleX(${0})`;
} else
{
//continue it
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
if (m)
{
loader.querySelector(".loadingtext").innerHTML = "Loading stuff...";
var cur = parseInt(m[2])*100;
var progressMax = parseInt(m[4])*100;
console.log('cur: ' + cur+' max: '+progressMax) ;
Module.progress.style.transform = `scaleX(${cur/progressMax})`;
} else
{
//done loading
UpdateText(); //will show index 0
loader.style.display = "none";
loader.querySelector(".spinner").style.display = "block";
}
}
},
print: function(text) {console.log('>> ' + text) },
printErr: function(text) { console.log(appName+' ERROR: ' + text) },
onRuntimeInitialized: function()
{
loader.querySelector(".spinner").style.display = "none";
loader.style.display = "none";
Module.ccall('mainf', null, null);
},
canvas: (function()
{
var canvas = document.getElementById('canvas');
return canvas;
})()
};
var start_function = function(o) {
loader.querySelector(".spinner").style.display = "none";
loader.style.display = "none";
Module.ccall('mainf', null, null);
};
</script>
<script>
(function() {
var memoryInitializer = appName+'.js.mem';
if (typeof Module['locateFile'] === 'function') {
memoryInitializer = Module['locateFile'](memoryInitializer);
} else if (Module['memoryInitializerPrefixURL']) {
memoryInitializer = Module['memoryInitializerPrefixURL'] + memoryInitializer;
}
var xhr = Module['memoryInitializerRequest'] = new XMLHttpRequest();
xhr.open('GET', memoryInitializer, true);
xhr.responseType = 'arraybuffer';
xhr.send(null);
})();
var script = document.createElement('script');
script.src = appName+".js";
document.body.appendChild(script);
var textIntervalHandle;
var textTimerIntervalMS = 5000; //how fast the text updates after the initial two
var textCommentArray = [
"This can really take a while.",
"Webgl apps like this are still relatively new, they will get faster to initialize in time.",
"While slow to initialize, this is safer to run and always up to date as compared to a downloadable that you would need to install.",
"Make sure you're using a 64 bit browser. Chrome or Firefox are good choices.",
"Did you know RTsoft has been making weird games since 1989? It's true, Seth is just that old.",
"It's looking like you'll be old too before this game starts.",
"You've gotta be bored out of your gourd by now. Sorry about the wait.",
"This doesn't work great on mobile. Chrome on Android *might* work, if you wait long enough.",
"It's possible this could take like 5 minutes. Wait if you want, or go try it on a powerful desktop machine maybe."
];
function UpdateText()
{
if (textCommentArray.length > textNum)
{
//we have more to show
const loader = document.querySelector("#loader");
loader.querySelector(".loadingtext").innerHTML = textCommentArray[textNum];
textNum++;
if (textNum > 1)
{
//keep rescheduling them after the first two messages
textIntervalHandle = window.setTimeout(UpdateText, textTimerIntervalMS);
}
}
}
</script>
</html>