129 lines
3.2 KiB
HTML
129 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>Lonely Ruins</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;
|
|
}
|
|
.progress-container progress{
|
|
width:100%;
|
|
}
|
|
.game-screen-container{
|
|
margin:0 auto;
|
|
width:640px;
|
|
padding-top:10px;
|
|
}
|
|
.game-screen-container canvas{
|
|
border: 1px solid #808080;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
box-shadow: 0px 0px 5px #808080;
|
|
}
|
|
</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>
|
|
<canvas class="game-screen" id="canvas" style="display:none;"
|
|
oncontextmenu="event.preventDefault()"></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");
|
|
});
|
|
}],
|
|
postRun: [],
|
|
canvas: document.getElementById('canvas'),
|
|
progressContainer: document.getElementById('progress-container'),
|
|
progressCode: document.getElementById('progress-code'),
|
|
progressData: document.getElementById('progress-data'),
|
|
print: function(text) {
|
|
if(console && console.log){
|
|
console.log(text);
|
|
}
|
|
},
|
|
printErr: function(text) {
|
|
this.print(text);
|
|
},
|
|
setStatus: function(text) {
|
|
this.print(text);
|
|
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
|
if(m){
|
|
this.progressData.value = parseInt(m[2]);
|
|
this.progressData.max = parseInt(m[4]);
|
|
}
|
|
},
|
|
totalDependencies: 0,
|
|
monitorRunDependencies: function(left) {
|
|
this.totalDependencies = Math.max(this.totalDependencies, left);
|
|
if(!left){
|
|
// All loaded
|
|
this.progressContainer.style.display="none";
|
|
this.canvas.style.display="block";
|
|
}
|
|
},
|
|
LaunchCode: function (){
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', "game.js", true);
|
|
xhr.responseType = 'text';
|
|
xhr.onprogress = function(event) {
|
|
this.progressCode.value = event.loaded;
|
|
this.progressCode.max = event.total;
|
|
}.bind(this);
|
|
xhr.onload = function(event) {
|
|
var packageData = xhr.response;
|
|
// Launch loaded code
|
|
eval.call(null,packageData);
|
|
};
|
|
xhr.onerror = function(event) {
|
|
alert(event);
|
|
};
|
|
xhr.send(null);
|
|
}
|
|
};
|
|
Module.LaunchCode();
|
|
</script>
|
|
<!-- <script async type="text/javascript" src="game.js"></script> -->
|
|
</body>
|
|
</html> |