Apply formating to index.html
This commit is contained in:
@@ -1,146 +1,156 @@
|
||||
<!doctype 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 = {
|
||||
preRun: [function (){
|
||||
FS.mkdir('/saves');
|
||||
FS.mount(IDBFS, {}, '/saves');
|
||||
addRunDependency("SaveDir");
|
||||
FS.syncfs(true, function (err) {
|
||||
removeRunDependency("SaveDir");
|
||||
});
|
||||
}],
|
||||
preRun: [function () {
|
||||
FS.mkdir('/saves');
|
||||
FS.mount(IDBFS, {}, '/saves');
|
||||
addRunDependency("SaveDir");
|
||||
FS.syncfs(true, function (err) {
|
||||
removeRunDependency("SaveDir");
|
||||
});
|
||||
}],
|
||||
postRun: [],
|
||||
progressContainer: document.getElementById('progress-container'),
|
||||
progressCode: document.getElementById('progress-code'),
|
||||
progressData: document.getElementById('progress-data'),
|
||||
printErr: function(text) {
|
||||
printErr: function (text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if(console && console.log){
|
||||
if (console && console.log) {
|
||||
console.log(text);
|
||||
}
|
||||
},
|
||||
canvas: (function() {
|
||||
canvas: (function () {
|
||||
var canvas = document.getElementById('canvas');
|
||||
|
||||
// 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!
|
||||
// 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;
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
setStatus: function (text) {
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
if(m){
|
||||
if (m) {
|
||||
this.progressData.value = parseInt(m[2]);
|
||||
this.progressData.max = parseInt(m[4]);
|
||||
}
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
monitorRunDependencies: function (left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
if(!left){
|
||||
if (!left) {
|
||||
// All loaded
|
||||
this.progressContainer.style.display="none";
|
||||
this.canvas.style.display="block";
|
||||
this.progressContainer.style.display = "none";
|
||||
this.canvas.style.display = "block";
|
||||
}
|
||||
},
|
||||
LaunchCode: function (){
|
||||
LaunchCode: function () {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', "game.js", true);
|
||||
xhr.responseType = 'text';
|
||||
xhr.onprogress = function(event) {
|
||||
xhr.onprogress = function (event) {
|
||||
this.progressCode.value = event.loaded;
|
||||
this.progressCode.max = event.total;
|
||||
}.bind(this);
|
||||
xhr.onload = function(event) {
|
||||
xhr.onload = function (event) {
|
||||
var packageData = xhr.response;
|
||||
// Launch loaded code
|
||||
try{
|
||||
eval.call(null,packageData);
|
||||
}catch(e){
|
||||
alert("Error "+parent+" "+e);
|
||||
parent.postMessage("Error","");
|
||||
try {
|
||||
eval.call(null, packageData);
|
||||
} catch (e) {
|
||||
alert("Error " + parent + " " + e);
|
||||
parent.postMessage("Error", "");
|
||||
}
|
||||
};
|
||||
xhr.onerror = function(event) {
|
||||
xhr.onerror = function (event) {
|
||||
alert(event);
|
||||
};
|
||||
xhr.send(null);
|
||||
}
|
||||
};
|
||||
Module.LaunchCode();
|
||||
</script>
|
||||
</body>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user