mirror of
https://github.com/Steffo99/looping-for-loops.git
synced 2024-11-22 08:04:23 +00:00
yes
This commit is contained in:
commit
231c62b733
11 changed files with 1076 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
.idea/
|
||||||
1
CNAME
Normal file
1
CNAME
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
catjump.tk
|
||||||
280
HTML5.html
Normal file
280
HTML5.html
Normal file
|
|
@ -0,0 +1,280 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
|
||||||
|
<head>
|
||||||
|
<meta charset='utf-8' />
|
||||||
|
<meta name='viewport' content='width=device-width, user-scalable=no' />
|
||||||
|
<link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
|
||||||
|
<title>Cat Jump</title>
|
||||||
|
<style type='text/css'>
|
||||||
|
|
||||||
|
#limiter {
|
||||||
|
width: 1280px;
|
||||||
|
height: 720px;
|
||||||
|
margin: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
touch-action: none;
|
||||||
|
margin: 0;
|
||||||
|
border: 0 none;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.godot {
|
||||||
|
font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
|
||||||
|
color: #e0e0e0;
|
||||||
|
background-color: #3b3943;
|
||||||
|
background-image: linear-gradient(to bottom, #403e48, #35333c);
|
||||||
|
border: 1px solid #45434e;
|
||||||
|
box-shadow: 0 0 1px 1px #2f2d35;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Status display
|
||||||
|
* ============== */
|
||||||
|
|
||||||
|
#status {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
/* don't consume click events - make children visible explicitly */
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#status-progress {
|
||||||
|
width: 366px;
|
||||||
|
height: 7px;
|
||||||
|
background-color: #38363A;
|
||||||
|
border: 1px solid #444246;
|
||||||
|
padding: 1px;
|
||||||
|
box-shadow: 0 0 2px 1px #1B1C22;
|
||||||
|
border-radius: 2px;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (orientation:portrait) {
|
||||||
|
#status-progress {
|
||||||
|
width: 61.8%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#status-progress-inner {
|
||||||
|
height: 100%;
|
||||||
|
width: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: width 0.5s linear;
|
||||||
|
background-color: #202020;
|
||||||
|
border: 1px solid #222223;
|
||||||
|
box-shadow: 0 0 1px 1px #27282E;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#status-indeterminate {
|
||||||
|
visibility: visible;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#status-indeterminate > div {
|
||||||
|
width: 4.5px;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 9px 3px 0 3px;
|
||||||
|
border-color: #2b2b2b transparent transparent transparent;
|
||||||
|
transform-origin: center 21px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
|
||||||
|
#status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
|
||||||
|
#status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
|
||||||
|
#status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
|
||||||
|
#status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
|
||||||
|
#status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
|
||||||
|
#status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
|
||||||
|
#status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
|
||||||
|
|
||||||
|
#status-notice {
|
||||||
|
margin: 0 100px;
|
||||||
|
line-height: 1.3;
|
||||||
|
visibility: visible;
|
||||||
|
padding: 4px 6px;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>
|
||||||
|
Cat Jump
|
||||||
|
</h1>
|
||||||
|
<div id="limiter">
|
||||||
|
<canvas id='canvas'>
|
||||||
|
HTML5 canvas appears to be unsupported in the current browser.<br />
|
||||||
|
Please try updating or use a different browser.
|
||||||
|
</canvas>
|
||||||
|
<div id='status'>
|
||||||
|
<div id='status-progress' style='display: none;' oncontextmenu='event.preventDefault();'><div id ='status-progress-inner'></div></div>
|
||||||
|
<div id='status-indeterminate' style='display: none;' oncontextmenu='event.preventDefault();'>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
<div id='status-notice' class='godot' style='display: none;'></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type='text/javascript' src='HTML5.js'></script>
|
||||||
|
<script type='text/javascript'>//<![CDATA[
|
||||||
|
|
||||||
|
var engine = new Engine;
|
||||||
|
var setStatusMode;
|
||||||
|
var setStatusNotice;
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
|
||||||
|
const EXECUTABLE_NAME = 'HTML5';
|
||||||
|
const MAIN_PACK = 'HTML5.pck';
|
||||||
|
const INDETERMINATE_STATUS_STEP_MS = 100;
|
||||||
|
|
||||||
|
var canvas = document.getElementById('canvas');
|
||||||
|
var statusProgress = document.getElementById('status-progress');
|
||||||
|
var statusProgressInner = document.getElementById('status-progress-inner');
|
||||||
|
var statusIndeterminate = document.getElementById('status-indeterminate');
|
||||||
|
var statusNotice = document.getElementById('status-notice');
|
||||||
|
|
||||||
|
var initializing = true;
|
||||||
|
var statusMode = 'hidden';
|
||||||
|
|
||||||
|
var animationCallbacks = [];
|
||||||
|
function animate(time) {
|
||||||
|
animationCallbacks.forEach(callback => callback(time));
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
|
||||||
|
function adjustCanvasDimensions() {
|
||||||
|
var scale = window.devicePixelRatio || 1;
|
||||||
|
var width = window.innerWidth;
|
||||||
|
var height = window.innerHeight;
|
||||||
|
canvas.width = width * scale;
|
||||||
|
canvas.height = height * scale;
|
||||||
|
canvas.style.width = width + "px";
|
||||||
|
canvas.style.height = height + "px";
|
||||||
|
}
|
||||||
|
animationCallbacks.push(adjustCanvasDimensions);
|
||||||
|
adjustCanvasDimensions();
|
||||||
|
|
||||||
|
setStatusMode = function setStatusMode(mode) {
|
||||||
|
|
||||||
|
if (statusMode === mode || !initializing)
|
||||||
|
return;
|
||||||
|
[statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
|
||||||
|
elem.style.display = 'none';
|
||||||
|
});
|
||||||
|
animationCallbacks = animationCallbacks.filter(function(value) {
|
||||||
|
return (value != animateStatusIndeterminate);
|
||||||
|
});
|
||||||
|
switch (mode) {
|
||||||
|
case 'progress':
|
||||||
|
statusProgress.style.display = 'block';
|
||||||
|
break;
|
||||||
|
case 'indeterminate':
|
||||||
|
statusIndeterminate.style.display = 'block';
|
||||||
|
animationCallbacks.push(animateStatusIndeterminate);
|
||||||
|
break;
|
||||||
|
case 'notice':
|
||||||
|
statusNotice.style.display = 'block';
|
||||||
|
break;
|
||||||
|
case 'hidden':
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
throw new Error('Invalid status mode');
|
||||||
|
}
|
||||||
|
statusMode = mode;
|
||||||
|
}
|
||||||
|
|
||||||
|
function animateStatusIndeterminate(ms) {
|
||||||
|
|
||||||
|
var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
|
||||||
|
if (statusIndeterminate.children[i].style.borderTopColor == '') {
|
||||||
|
Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
|
||||||
|
child.style.borderTopColor = '';
|
||||||
|
});
|
||||||
|
statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setStatusNotice = function setStatusNotice(text) {
|
||||||
|
|
||||||
|
while (statusNotice.lastChild) {
|
||||||
|
statusNotice.removeChild(statusNotice.lastChild);
|
||||||
|
}
|
||||||
|
var lines = text.split('\n');
|
||||||
|
lines.forEach((line) => {
|
||||||
|
statusNotice.appendChild(document.createTextNode(line));
|
||||||
|
statusNotice.appendChild(document.createElement('br'));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
engine.setProgressFunc((current, total) => {
|
||||||
|
|
||||||
|
if (total > 0) {
|
||||||
|
statusProgressInner.style.width = current/total * 100 + '%';
|
||||||
|
setStatusMode('progress');
|
||||||
|
if (current === total) {
|
||||||
|
// wait for progress bar animation
|
||||||
|
setTimeout(() => {
|
||||||
|
setStatusMode('indeterminate');
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setStatusMode('indeterminate');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function displayFailureNotice(err) {
|
||||||
|
var msg = err.message || err;
|
||||||
|
console.error(msg);
|
||||||
|
setStatusNotice(msg);
|
||||||
|
setStatusMode('notice');
|
||||||
|
initializing = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!Engine.isWebGLAvailable()) {
|
||||||
|
displayFailureNotice('WebGL not available');
|
||||||
|
} else {
|
||||||
|
setStatusMode('indeterminate');
|
||||||
|
engine.setCanvas(canvas);
|
||||||
|
engine.startGame(EXECUTABLE_NAME, MAIN_PACK).then(() => {
|
||||||
|
setStatusMode('hidden');
|
||||||
|
initializing = false;
|
||||||
|
}, displayFailureNotice);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
//]]></script>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
458
HTML5.js
Normal file
458
HTML5.js
Normal file
File diff suppressed because one or more lines are too long
BIN
HTML5.pck
Normal file
BIN
HTML5.pck
Normal file
Binary file not shown.
BIN
HTML5.png
Normal file
BIN
HTML5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
34
HTML5.png.import
Normal file
34
HTML5.png.import
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
[remap]
|
||||||
|
|
||||||
|
importer="texture"
|
||||||
|
type="StreamTexture"
|
||||||
|
path="res://.import/HTML5.png-377e7f091c431e25c851324c732011d6.stex"
|
||||||
|
metadata={
|
||||||
|
"vram_texture": false
|
||||||
|
}
|
||||||
|
|
||||||
|
[deps]
|
||||||
|
|
||||||
|
source_file="res://Builds/HTML5/HTML5.png"
|
||||||
|
dest_files=[ "res://.import/HTML5.png-377e7f091c431e25c851324c732011d6.stex" ]
|
||||||
|
|
||||||
|
[params]
|
||||||
|
|
||||||
|
compress/mode=0
|
||||||
|
compress/lossy_quality=0.7
|
||||||
|
compress/hdr_mode=0
|
||||||
|
compress/bptc_ldr=0
|
||||||
|
compress/normal_map=0
|
||||||
|
flags/repeat=0
|
||||||
|
flags/filter=true
|
||||||
|
flags/mipmaps=false
|
||||||
|
flags/anisotropic=false
|
||||||
|
flags/srgb=2
|
||||||
|
process/fix_alpha_border=true
|
||||||
|
process/premult_alpha=false
|
||||||
|
process/HDR_as_SRGB=false
|
||||||
|
process/invert_color=false
|
||||||
|
stream=false
|
||||||
|
size_limit=0
|
||||||
|
detect_3d=true
|
||||||
|
svg/scale=1.0
|
||||||
BIN
HTML5.wasm
Normal file
BIN
HTML5.wasm
Normal file
Binary file not shown.
BIN
favicon.png
Normal file
BIN
favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
34
favicon.png.import
Normal file
34
favicon.png.import
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
[remap]
|
||||||
|
|
||||||
|
importer="texture"
|
||||||
|
type="StreamTexture"
|
||||||
|
path="res://.import/favicon.png-5e87c643df9aed65e39e3f682b0ba66f.stex"
|
||||||
|
metadata={
|
||||||
|
"vram_texture": false
|
||||||
|
}
|
||||||
|
|
||||||
|
[deps]
|
||||||
|
|
||||||
|
source_file="res://Builds/HTML5/favicon.png"
|
||||||
|
dest_files=[ "res://.import/favicon.png-5e87c643df9aed65e39e3f682b0ba66f.stex" ]
|
||||||
|
|
||||||
|
[params]
|
||||||
|
|
||||||
|
compress/mode=0
|
||||||
|
compress/lossy_quality=0.7
|
||||||
|
compress/hdr_mode=0
|
||||||
|
compress/bptc_ldr=0
|
||||||
|
compress/normal_map=0
|
||||||
|
flags/repeat=0
|
||||||
|
flags/filter=true
|
||||||
|
flags/mipmaps=false
|
||||||
|
flags/anisotropic=false
|
||||||
|
flags/srgb=2
|
||||||
|
process/fix_alpha_border=true
|
||||||
|
process/premult_alpha=false
|
||||||
|
process/HDR_as_SRGB=false
|
||||||
|
process/invert_color=false
|
||||||
|
stream=false
|
||||||
|
size_limit=0
|
||||||
|
detect_3d=true
|
||||||
|
svg/scale=1.0
|
||||||
268
index.html
Normal file
268
index.html
Normal file
|
|
@ -0,0 +1,268 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
|
||||||
|
<head>
|
||||||
|
<meta charset='utf-8' />
|
||||||
|
<meta name='viewport' content='width=device-width, user-scalable=no' />
|
||||||
|
<link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
|
||||||
|
<title>Looping for Lööps</title>
|
||||||
|
<style type='text/css'>
|
||||||
|
|
||||||
|
body {
|
||||||
|
touch-action: none;
|
||||||
|
margin: 0;
|
||||||
|
border: 0 none;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.godot {
|
||||||
|
font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
|
||||||
|
color: #e0e0e0;
|
||||||
|
background-color: #3b3943;
|
||||||
|
background-image: linear-gradient(to bottom, #403e48, #35333c);
|
||||||
|
border: 1px solid #45434e;
|
||||||
|
box-shadow: 0 0 1px 1px #2f2d35;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Status display
|
||||||
|
* ============== */
|
||||||
|
|
||||||
|
#status {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
/* don't consume click events - make children visible explicitly */
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#status-progress {
|
||||||
|
width: 366px;
|
||||||
|
height: 7px;
|
||||||
|
background-color: #38363A;
|
||||||
|
border: 1px solid #444246;
|
||||||
|
padding: 1px;
|
||||||
|
box-shadow: 0 0 2px 1px #1B1C22;
|
||||||
|
border-radius: 2px;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (orientation:portrait) {
|
||||||
|
#status-progress {
|
||||||
|
width: 61.8%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#status-progress-inner {
|
||||||
|
height: 100%;
|
||||||
|
width: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: width 0.5s linear;
|
||||||
|
background-color: #202020;
|
||||||
|
border: 1px solid #222223;
|
||||||
|
box-shadow: 0 0 1px 1px #27282E;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#status-indeterminate {
|
||||||
|
visibility: visible;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#status-indeterminate > div {
|
||||||
|
width: 4.5px;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 9px 3px 0 3px;
|
||||||
|
border-color: #2b2b2b transparent transparent transparent;
|
||||||
|
transform-origin: center 21px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
|
||||||
|
#status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
|
||||||
|
#status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
|
||||||
|
#status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
|
||||||
|
#status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
|
||||||
|
#status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
|
||||||
|
#status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
|
||||||
|
#status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
|
||||||
|
|
||||||
|
#status-notice {
|
||||||
|
margin: 0 100px;
|
||||||
|
line-height: 1.3;
|
||||||
|
visibility: visible;
|
||||||
|
padding: 4px 6px;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id='canvas'>
|
||||||
|
HTML5 canvas appears to be unsupported in the current browser.<br />
|
||||||
|
Please try updating or use a different browser.
|
||||||
|
</canvas>
|
||||||
|
<div id='status'>
|
||||||
|
<div id='status-progress' style='display: none;' oncontextmenu='event.preventDefault();'><div id ='status-progress-inner'></div></div>
|
||||||
|
<div id='status-indeterminate' style='display: none;' oncontextmenu='event.preventDefault();'>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
<div id='status-notice' class='godot' style='display: none;'></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type='text/javascript' src='HTML5.js'></script>
|
||||||
|
<script type='text/javascript'>//<![CDATA[
|
||||||
|
|
||||||
|
var engine = new Engine;
|
||||||
|
var setStatusMode;
|
||||||
|
var setStatusNotice;
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
|
||||||
|
const EXECUTABLE_NAME = 'HTML5';
|
||||||
|
const MAIN_PACK = 'HTML5.pck';
|
||||||
|
const INDETERMINATE_STATUS_STEP_MS = 100;
|
||||||
|
|
||||||
|
var canvas = document.getElementById('canvas');
|
||||||
|
var statusProgress = document.getElementById('status-progress');
|
||||||
|
var statusProgressInner = document.getElementById('status-progress-inner');
|
||||||
|
var statusIndeterminate = document.getElementById('status-indeterminate');
|
||||||
|
var statusNotice = document.getElementById('status-notice');
|
||||||
|
|
||||||
|
var initializing = true;
|
||||||
|
var statusMode = 'hidden';
|
||||||
|
|
||||||
|
var animationCallbacks = [];
|
||||||
|
function animate(time) {
|
||||||
|
animationCallbacks.forEach(callback => callback(time));
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
|
||||||
|
function adjustCanvasDimensions() {
|
||||||
|
var scale = window.devicePixelRatio || 1;
|
||||||
|
var width = window.innerWidth;
|
||||||
|
var height = window.innerHeight;
|
||||||
|
canvas.width = width * scale;
|
||||||
|
canvas.height = height * scale;
|
||||||
|
canvas.style.width = width + "px";
|
||||||
|
canvas.style.height = height + "px";
|
||||||
|
}
|
||||||
|
animationCallbacks.push(adjustCanvasDimensions);
|
||||||
|
adjustCanvasDimensions();
|
||||||
|
|
||||||
|
setStatusMode = function setStatusMode(mode) {
|
||||||
|
|
||||||
|
if (statusMode === mode || !initializing)
|
||||||
|
return;
|
||||||
|
[statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
|
||||||
|
elem.style.display = 'none';
|
||||||
|
});
|
||||||
|
animationCallbacks = animationCallbacks.filter(function(value) {
|
||||||
|
return (value != animateStatusIndeterminate);
|
||||||
|
});
|
||||||
|
switch (mode) {
|
||||||
|
case 'progress':
|
||||||
|
statusProgress.style.display = 'block';
|
||||||
|
break;
|
||||||
|
case 'indeterminate':
|
||||||
|
statusIndeterminate.style.display = 'block';
|
||||||
|
animationCallbacks.push(animateStatusIndeterminate);
|
||||||
|
break;
|
||||||
|
case 'notice':
|
||||||
|
statusNotice.style.display = 'block';
|
||||||
|
break;
|
||||||
|
case 'hidden':
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
throw new Error('Invalid status mode');
|
||||||
|
}
|
||||||
|
statusMode = mode;
|
||||||
|
}
|
||||||
|
|
||||||
|
function animateStatusIndeterminate(ms) {
|
||||||
|
|
||||||
|
var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
|
||||||
|
if (statusIndeterminate.children[i].style.borderTopColor == '') {
|
||||||
|
Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
|
||||||
|
child.style.borderTopColor = '';
|
||||||
|
});
|
||||||
|
statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setStatusNotice = function setStatusNotice(text) {
|
||||||
|
|
||||||
|
while (statusNotice.lastChild) {
|
||||||
|
statusNotice.removeChild(statusNotice.lastChild);
|
||||||
|
}
|
||||||
|
var lines = text.split('\n');
|
||||||
|
lines.forEach((line) => {
|
||||||
|
statusNotice.appendChild(document.createTextNode(line));
|
||||||
|
statusNotice.appendChild(document.createElement('br'));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
engine.setProgressFunc((current, total) => {
|
||||||
|
|
||||||
|
if (total > 0) {
|
||||||
|
statusProgressInner.style.width = current/total * 100 + '%';
|
||||||
|
setStatusMode('progress');
|
||||||
|
if (current === total) {
|
||||||
|
// wait for progress bar animation
|
||||||
|
setTimeout(() => {
|
||||||
|
setStatusMode('indeterminate');
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setStatusMode('indeterminate');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function displayFailureNotice(err) {
|
||||||
|
var msg = err.message || err;
|
||||||
|
console.error(msg);
|
||||||
|
setStatusNotice(msg);
|
||||||
|
setStatusMode('notice');
|
||||||
|
initializing = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!Engine.isWebGLAvailable()) {
|
||||||
|
displayFailureNotice('WebGL not available');
|
||||||
|
} else {
|
||||||
|
setStatusMode('indeterminate');
|
||||||
|
engine.setCanvas(canvas);
|
||||||
|
engine.startGame(EXECUTABLE_NAME, MAIN_PACK).then(() => {
|
||||||
|
setStatusMode('hidden');
|
||||||
|
initializing = false;
|
||||||
|
}, displayFailureNotice);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
//]]></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
Loading…
Reference in a new issue