VAR/GameLib
1
1
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Apply formating to index.html

Browse Source
This commit is contained in:
Valeriano A.R.
2021-05-02 05:03:51 +02:00
committed by Valeriano A.R
parent 5d185aa480
commit a9abfaa1a2
1 changed files with 109 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
Example.GameLib/web/index.html
View File

@@ -1,146 +1,156 @@
<!doctype html> <!doctype html>
<html> <html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Game</title>
</head>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color:#000000;
color: #777777;
font-size: 10pt;
}
h1{
text-align: left;
margin-top: 0;
margin-bottom: 1em;
font-size: 16pt;
font-weight: bold;
}
.header{
margin:0 auto;
width:600px;
padding-top:10px;
text-align:center;
}
.progress-container{
border: 1px solid #808080;
border-radius: 5px;
padding: 5px;
box-shadow: 0px 0px 5px #808080;
width: 600px;
display: block;
margin: 0 auto;
}
.progress-container progress{
width: 100%;
}
.game-screen-container{
display:block;
width: 100%;
padding-top: 10px;
}
.game-screen-container canvas{
border: 1px solid #808080;
border-radius: 5px;
padding: 5px;
box-shadow: 0px 0px 5px #808080;
margin: 0 auto;
}
</style>
<body>
<div class="game-screen-container">
<div id="progress-container" class="progress-container">
<h1>Loading...</h1>
<span>Code:</span></br>
<progress id="progress-code" max="1" value="0"></progress></br>
</br>
<span>Data:</span></br>
<progress id="progress-data" max="1" value="0"></progress></br>
</div>
<div style="width:0;height:0;position:absolute;display:block;overflow:hidden;">
<input type="button" id="btnFocus" value="focus" />
</div>
<canvas class="game-screen" id="canvas" style="display:none;"
oncontextmenu="event.preventDefault()" onclick="document.getElementById('btnFocus').focus();"></canvas>
</div>
<script type='text/javascript'> <head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Game</title>
</head>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #000000;
color: #777777;
font-size: 10pt;
}
h1 {
text-align: left;
margin-top: 0;
margin-bottom: 1em;
font-size: 16pt;
font-weight: bold;
}
.header {
margin: 0 auto;
width: 600px;
padding-top: 10px;
text-align: center;
}
.progress-container {
border: 1px solid #808080;
border-radius: 5px;
padding: 5px;
box-shadow: 0px 0px 5px #808080;
width: 600px;
display: block;
margin: 0 auto;
}
.progress-container progress {
width: 100%;
}
.game-screen-container {
display: block;
width: 100%;
padding-top: 10px;
}
.game-screen-container canvas {
border: 1px solid #808080;
border-radius: 5px;
padding: 5px;
box-shadow: 0px 0px 5px #808080;
margin: 0 auto;
}
</style>
<body>
<div class="game-screen-container">
<div id="progress-container" class="progress-container">
<h1>Loading...</h1>
<span>Code:</span></br>
<progress id="progress-code" max="1" value="0"></progress></br>
</br>
<span>Data:</span></br>
<progress id="progress-data" max="1" value="0"></progress></br>
</div>
<div style="width:0;height:0;position:absolute;display:block;overflow:hidden;">
<input type="button" id="btnFocus" value="focus" />
</div>
<canvas class="game-screen" id="canvas" style="display:none;" oncontextmenu="event.preventDefault()"
onclick="document.getElementById('btnFocus').focus();"></canvas>
</div>
<script type='text/javascript'>
var Module = { var Module = {
preRun: [function (){ preRun: [function () {
FS.mkdir('/saves'); FS.mkdir('/saves');
FS.mount(IDBFS, {}, '/saves'); FS.mount(IDBFS, {}, '/saves');
addRunDependency("SaveDir"); addRunDependency("SaveDir");
FS.syncfs(true, function (err) { FS.syncfs(true, function (err) {
removeRunDependency("SaveDir"); removeRunDependency("SaveDir");
}); });
}], }],
postRun: [], postRun: [],
progressContainer: document.getElementById('progress-container'), progressContainer: document.getElementById('progress-container'),
progressCode: document.getElementById('progress-code'), progressCode: document.getElementById('progress-code'),
progressData: document.getElementById('progress-data'), progressData: document.getElementById('progress-data'),
printErr: function(text) { printErr: function (text) {
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' '); if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
if(console && console.log){ if (console && console.log) {
console.log(text); console.log(text);
} }
}, },
canvas: (function() { canvas: (function () {
var canvas = document.getElementById('canvas'); var canvas = document.getElementById('canvas');
// As a default initial behavior, pop up an alert when webgl context is lost. To make your // As a default initial behavior, pop up an alert when webgl context is lost. To make your
// application robust, you may want to override this behavior before shipping! // application robust, you may want to override this behavior before shipping!
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2 // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false); canvas.addEventListener("webglcontextlost", function (e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
return canvas; return canvas;
})(), })(),
setStatus: function(text) { setStatus: function (text) {
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/); var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
if(m){ if (m) {
this.progressData.value = parseInt(m[2]); this.progressData.value = parseInt(m[2]);
this.progressData.max = parseInt(m[4]); this.progressData.max = parseInt(m[4]);
} }
}, },
totalDependencies: 0, totalDependencies: 0,
monitorRunDependencies: function(left) { monitorRunDependencies: function (left) {
this.totalDependencies = Math.max(this.totalDependencies, left); this.totalDependencies = Math.max(this.totalDependencies, left);
if(!left){ if (!left) {
// All loaded // All loaded
this.progressContainer.style.display="none"; this.progressContainer.style.display = "none";
this.canvas.style.display="block"; this.canvas.style.display = "block";
} }
}, },
LaunchCode: function (){ LaunchCode: function () {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', "game.js", true); xhr.open('GET', "game.js", true);
xhr.responseType = 'text'; xhr.responseType = 'text';
xhr.onprogress = function(event) { xhr.onprogress = function (event) {
this.progressCode.value = event.loaded; this.progressCode.value = event.loaded;
this.progressCode.max = event.total; this.progressCode.max = event.total;
}.bind(this); }.bind(this);
xhr.onload = function(event) { xhr.onload = function (event) {
var packageData = xhr.response; var packageData = xhr.response;
// Launch loaded code // Launch loaded code
try{ try {
eval.call(null,packageData); eval.call(null, packageData);
}catch(e){ } catch (e) {
alert("Error "+parent+" "+e); alert("Error " + parent + " " + e);
parent.postMessage("Error",""); parent.postMessage("Error", "");
} }
}; };
xhr.onerror = function(event) { xhr.onerror = function (event) {
alert(event); alert(event);
}; };
xhr.send(null); xhr.send(null);
} }
}; };
Module.LaunchCode(); Module.LaunchCode();
</script> </script>
</body> </body>
</html> </html>