880e0ec2f3
* (html5) Can now pass in a url to "auto-download" and play a dmod. Example: http://www.rtsoft.com/web/dink?dmod=rtsoft.com/web/srchmili.dmod - in theory, you can now do dink.exe -game http://www.rtsoft.com/web/dink?dmod=rtsoft.com/web/srchmili.dmod from windows as well and it should download git-svn-id: svn://rtsoft.com/rtsvn/projects/RTDink@1610 353e56fe-9613-0410-8469-b96ad8e6f29c
250 lines
7.4 KiB
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>
|