Skip to content

Commit a3a013e

Browse files
andremcorreiaandremcorreia
committed
Build Update
1 parent 8a22376 commit a3a013e

8 files changed

Lines changed: 13932 additions & 153 deletions

File tree

‎index.apple-touch-icon.png‎

-11 Bytes
Loading

‎index.audio.worklet.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ class GodotProcessor extends AudioWorkletProcessor {
167167
GodotProcessor.write_input(this.input_buffer, input);
168168
this.input.write(this.input_buffer);
169169
} else {
170-
// this.port.postMessage('Input buffer is full! Skipping input frame.'); // Uncomment this line to debug input buffer.
170+
this.port.postMessage('Input buffer is full! Skipping input frame.');
171171
}
172172
}
173173
const process_output = GodotProcessor.array_has_data(outputs);
@@ -184,7 +184,7 @@ class GodotProcessor extends AudioWorkletProcessor {
184184
this.port.postMessage({ 'cmd': 'read', 'data': chunk });
185185
}
186186
} else {
187-
// this.port.postMessage('Output buffer has not enough frames! Skipping output frame.'); // Uncomment this line to debug output buffer.
187+
this.port.postMessage('Output buffer has not enough frames! Skipping output frame.');
188188
}
189189
}
190190
this.process_notify();

‎index.html‎

Lines changed: 151 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -2,125 +2,197 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, user-scalable=no">
66
<title>tangram</title>
77
<style>
8-
html, body, #canvas {
8+
body {
9+
touch-action: none;
910
margin: 0;
11+
border: 0 none;
1012
padding: 0;
11-
border: 0;
12-
}
13-
14-
body {
15-
color: white;
13+
text-align: center;
1614
background-color: black;
17-
overflow: hidden;
18-
touch-action: none;
1915
}
2016

2117
#canvas {
2218
display: block;
19+
margin: 0;
20+
color: white;
2321
}
2422

2523
#canvas:focus {
2624
outline: none;
2725
}
2826

29-
#status, #status-splash, #status-progress {
30-
position: absolute;
31-
left: 0;
32-
right: 0;
27+
.godot {
28+
font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
29+
color: #e0e0e0;
30+
background-color: #3b3943;
31+
background-image: linear-gradient(to bottom, #403e48, #35333c);
32+
border: 1px solid #45434e;
33+
box-shadow: 0 0 1px 1px #2f2d35;
3334
}
3435

35-
#status, #status-splash {
36-
top: 0;
37-
bottom: 0;
38-
}
36+
/* Status display */
3937

4038
#status {
41-
background-color: #242424;
39+
position: absolute;
40+
left: 0;
41+
top: 0;
42+
right: 0;
43+
bottom: 0;
4244
display: flex;
43-
flex-direction: column;
4445
justify-content: center;
4546
align-items: center;
47+
/* don't consume click events - make children visible explicitly */
4648
visibility: hidden;
4749
}
4850

49-
#status-splash {
50-
max-height: 100%;
51-
max-width: 100%;
52-
margin: auto;
51+
#status-progress {
52+
width: 366px;
53+
height: 7px;
54+
background-color: #38363A;
55+
border: 1px solid #444246;
56+
padding: 1px;
57+
box-shadow: 0 0 2px 1px #1B1C22;
58+
border-radius: 2px;
59+
visibility: visible;
5360
}
5461

55-
#status-progress, #status-notice {
56-
display: none;
62+
@media only screen and (orientation:portrait) {
63+
#status-progress {
64+
width: 61.8%;
65+
}
5766
}
5867

59-
#status-progress {
60-
bottom: 10%;
61-
width: 50%;
62-
margin: 0 auto;
68+
#status-progress-inner {
69+
height: 100%;
70+
width: 0;
71+
box-sizing: border-box;
72+
transition: width 0.5s linear;
73+
background-color: #202020;
74+
border: 1px solid #222223;
75+
box-shadow: 0 0 1px 1px #27282E;
76+
border-radius: 3px;
77+
}
78+
79+
#status-indeterminate {
80+
height: 42px;
81+
visibility: visible;
82+
position: relative;
83+
}
84+
85+
#status-indeterminate > div {
86+
width: 4.5px;
87+
height: 0;
88+
border-style: solid;
89+
border-width: 9px 3px 0 3px;
90+
border-color: #2b2b2b transparent transparent transparent;
91+
transform-origin: center 21px;
92+
position: absolute;
6393
}
6494

95+
#status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
96+
#status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
97+
#status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
98+
#status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
99+
#status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
100+
#status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
101+
#status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
102+
#status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
103+
65104
#status-notice {
66-
background-color: #5b3943;
67-
border-radius: 0.5rem;
68-
border: 1px solid #9b3943;
69-
color: #e0e0e0;
70-
font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
105+
margin: 0 100px;
71106
line-height: 1.3;
72-
margin: 0 2rem;
73-
overflow: hidden;
74-
padding: 1rem;
75-
text-align: center;
76-
z-index: 1;
107+
visibility: visible;
108+
padding: 4px 6px;
109+
visibility: visible;
77110
}
78111
</style>
79-
<link id="-gd-engine-icon" rel="icon" type="image/png" href="index.icon.png" />
80-
<link rel="apple-touch-icon" href="index.apple-touch-icon.png"/>
112+
<link id='-gd-engine-icon' rel='icon' type='image/png' href='index.icon.png' />
113+
<link rel='apple-touch-icon' href='index.apple-touch-icon.png'/>
81114

82115
</head>
83116
<body>
84117
<canvas id="canvas">
85-
Your browser does not support the canvas tag.
118+
HTML5 canvas appears to be unsupported in the current browser.<br >
119+
Please try updating or use a different browser.
86120
</canvas>
87-
88-
<noscript>
89-
Your browser does not support JavaScript.
90-
</noscript>
91-
92121
<div id="status">
93-
<img id="status-splash" src="index.png" alt="">
94-
<progress id="status-progress"></progress>
95-
<div id="status-notice"></div>
122+
<div id="status-progress" style="display: none;" oncontextmenu="event.preventDefault();">
123+
<div id ="status-progress-inner"></div>
124+
</div>
125+
<div id="status-indeterminate" style="display: none;" oncontextmenu="event.preventDefault();">
126+
<div></div>
127+
<div></div>
128+
<div></div>
129+
<div></div>
130+
<div></div>
131+
<div></div>
132+
<div></div>
133+
<div></div>
134+
</div>
135+
<div id="status-notice" class="godot" style="display: none;"></div>
96136
</div>
97137

98138
<script src="index.js"></script>
99139
<script>
100-
const GODOT_CONFIG = {"args":[],"canvasResizePolicy":2,"ensureCrossOriginIsolationHeaders":true,"executable":"index","experimentalVK":false,"fileSizes":{"index.pck":17896608,"index.wasm":43016933},"focusCanvas":true,"gdextensionLibs":[]};
101-
const GODOT_THREADS_ENABLED = false;
140+
const GODOT_CONFIG = {"args":[],"canvasResizePolicy":2,"executable":"index","experimentalVK":false,"fileSizes":{"index.pck":23273104,"index.wasm":35708238},"focusCanvas":true,"gdextensionLibs":[]};
102141
const engine = new Engine(GODOT_CONFIG);
103142

104143
(function () {
105-
const statusOverlay = document.getElementById('status');
144+
const INDETERMINATE_STATUS_STEP_MS = 100;
106145
const statusProgress = document.getElementById('status-progress');
146+
const statusProgressInner = document.getElementById('status-progress-inner');
147+
const statusIndeterminate = document.getElementById('status-indeterminate');
107148
const statusNotice = document.getElementById('status-notice');
108149

109150
let initializing = true;
110-
let statusMode = '';
151+
let statusMode = 'hidden';
152+
153+
let animationCallbacks = [];
154+
function animate(time) {
155+
animationCallbacks.forEach((callback) => callback(time));
156+
requestAnimationFrame(animate);
157+
}
158+
requestAnimationFrame(animate);
159+
160+
function animateStatusIndeterminate(ms) {
161+
const i = Math.floor((ms / INDETERMINATE_STATUS_STEP_MS) % 8);
162+
if (statusIndeterminate.children[i].style.borderTopColor === '') {
163+
Array.prototype.slice.call(statusIndeterminate.children).forEach((child) => {
164+
child.style.borderTopColor = '';
165+
});
166+
statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
167+
}
168+
}
111169

112170
function setStatusMode(mode) {
113171
if (statusMode === mode || !initializing) {
114172
return;
115173
}
116-
if (mode === 'hidden') {
117-
statusOverlay.remove();
118-
initializing = false;
119-
return;
174+
[statusProgress, statusIndeterminate, statusNotice].forEach((elem) => {
175+
elem.style.display = 'none';
176+
});
177+
animationCallbacks = animationCallbacks.filter(function (value) {
178+
return (value !== animateStatusIndeterminate);
179+
});
180+
switch (mode) {
181+
case 'progress':
182+
statusProgress.style.display = 'block';
183+
break;
184+
case 'indeterminate':
185+
statusIndeterminate.style.display = 'block';
186+
animationCallbacks.push(animateStatusIndeterminate);
187+
break;
188+
case 'notice':
189+
statusNotice.style.display = 'block';
190+
break;
191+
case 'hidden':
192+
break;
193+
default:
194+
throw new Error('Invalid status mode');
120195
}
121-
statusOverlay.style.visibility = 'visible';
122-
statusProgress.style.display = mode === 'progress' ? 'block' : 'none';
123-
statusNotice.style.display = mode === 'notice' ? 'block' : 'none';
124196
statusMode = mode;
125197
}
126198

@@ -136,60 +208,37 @@
136208
}
137209

138210
function displayFailureNotice(err) {
139-
console.error(err);
140-
if (err instanceof Error) {
141-
setStatusNotice(err.message);
142-
} else if (typeof err === 'string') {
143-
setStatusNotice(err);
144-
} else {
145-
setStatusNotice('An unknown error occured');
146-
}
211+
const msg = err.message || err;
212+
console.error(msg);
213+
setStatusNotice(msg);
147214
setStatusMode('notice');
148215
initializing = false;
149216
}
150217

151-
const missing = Engine.getMissingFeatures({
152-
threads: GODOT_THREADS_ENABLED,
153-
});
154-
218+
const missing = Engine.getMissingFeatures();
155219
if (missing.length !== 0) {
156-
if (GODOT_CONFIG['serviceWorker'] && GODOT_CONFIG['ensureCrossOriginIsolationHeaders'] && 'serviceWorker' in navigator) {
157-
// There's a chance that installing the service worker would fix the issue
158-
Promise.race([
159-
navigator.serviceWorker.getRegistration().then((registration) => {
160-
if (registration != null) {
161-
return Promise.reject(new Error('Service worker already exists.'));
162-
}
163-
return registration;
164-
}).then(() => engine.installServiceWorker()),
165-
// For some reason, `getRegistration()` can stall
166-
new Promise((resolve) => {
167-
setTimeout(() => resolve(), 2000);
168-
}),
169-
]).catch((err) => {
170-
console.error('Error while registering service worker:', err);
171-
}).then(() => {
172-
window.location.reload();
173-
});
174-
} else {
175-
// Display the message as usual
176-
const missingMsg = 'Error\nThe following features required to run Godot projects on the Web are missing:\n';
177-
displayFailureNotice(missingMsg + missing.join('\n'));
178-
}
220+
const missingMsg = 'Error\nThe following features required to run Godot projects on the Web are missing:\n';
221+
displayFailureNotice(missingMsg + missing.join('\n'));
179222
} else {
180-
setStatusMode('progress');
223+
setStatusMode('indeterminate');
181224
engine.startGame({
182225
'onProgress': function (current, total) {
183-
if (current > 0 && total > 0) {
184-
statusProgress.value = current;
185-
statusProgress.max = total;
226+
if (total > 0) {
227+
statusProgressInner.style.width = `${(current / total) * 100}%`;
228+
setStatusMode('progress');
229+
if (current === total) {
230+
// wait for progress bar animation
231+
setTimeout(() => {
232+
setStatusMode('indeterminate');
233+
}, 500);
234+
}
186235
} else {
187-
statusProgress.removeAttribute('value');
188-
statusProgress.removeAttribute('max');
236+
setStatusMode('indeterminate');
189237
}
190238
},
191239
}).then(() => {
192240
setStatusMode('hidden');
241+
initializing = false;
193242
}, displayFailureNotice);
194243
}
195244
}());

‎index.icon.png‎

6 Bytes
Loading

‎index.js‎

Lines changed: 13618 additions & 49 deletions
Large diffs are not rendered by default.

‎index.pck‎

5.13 MB
Binary file not shown.

‎index.wasm‎

-6.97 MB
Binary file not shown.

0 commit comments

Comments
 (0)