summaryrefslogtreecommitdiffstats
path: root/misc/dist
diff options
context:
space:
mode:
authorpatwork <patwork@gmail.com>2024-04-25 02:09:48 +0200
committerpatwork <patwork@gmail.com>2024-04-25 11:12:55 +0200
commit7c8a4a9daba4261571a7c7877be93b0ceca649ce (patch)
tree418e0e94f15e570a1d245f243c919a86730b8264 /misc/dist
parente0f58a31946800635501fc4f6f8c4f74c5c5e321 (diff)
downloadredot-engine-7c8a4a9daba4261571a7c7877be93b0ceca649ce.tar.gz
Added splash image support and new progress bar for web export
Diffstat (limited to 'misc/dist')
-rw-r--r--misc/dist/html/full-size.html206
1 files changed, 64 insertions, 142 deletions
diff --git a/misc/dist/html/full-size.html b/misc/dist/html/full-size.html
index 8ae25362f8..874fe2695e 100644
--- a/misc/dist/html/full-size.html
+++ b/misc/dist/html/full-size.html
@@ -2,135 +2,95 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, user-scalable=no">
+ <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<title>$GODOT_PROJECT_NAME</title>
<style>
-body {
- touch-action: none;
+html, body, #canvas {
margin: 0;
- border: 0 none;
padding: 0;
- text-align: center;
+ border: 0;
+}
+
+body {
+ color: white;
background-color: black;
+ overflow: hidden;
+ touch-action: none;
}
#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 {
+#status, #status-splash, #status-progress {
position: absolute;
left: 0;
- top: 0;
right: 0;
+}
+
+#status, #status-splash {
+ top: 0;
bottom: 0;
+}
+
+#status {
+ background-color: #38363A;
display: flex;
+ flex-direction: column;
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-splash {
+ max-height: 100%;
+ max-width: 100%;
+ margin: auto;
}
-#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-progress, #status-notice {
+ display: none;
}
-#status-indeterminate {
- height: 42px;
- 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-progress {
+ bottom: 10%;
+ width: 50%;
+ margin: 0 auto;
}
-#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;
+ background-color: #5b3943;
+ border-radius: 0.5rem;
+ border: 1px solid #9b3943;
+ color: #e0e0e0;
+ font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
line-height: 1.3;
- visibility: visible;
- padding: 4px 6px;
- visibility: visible;
+ margin: 0 2rem;
+ overflow: hidden;
+ padding: 1rem;
+ text-align: center;
+ z-index: 1;
}
</style>
$GODOT_HEAD_INCLUDE
</head>
<body>
<canvas id="canvas">
- HTML5 canvas appears to be unsupported in the current browser.<br >
- Please try updating or use a different browser.
+ Your browser does not support the canvas tag.
</canvas>
+
+ <noscript>
+ Your browser does not support JavaScript.
+ </noscript>
+
<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>
+ <img id="status-splash" src="$GODOT_SPLASH" alt="">
+ <progress id="status-progress"></progress>
+ <div id="status-notice"></div>
</div>
<script src="$GODOT_URL"></script>
@@ -140,58 +100,25 @@ const GODOT_THREADS_ENABLED = $GODOT_THREADS_ENABLED;
const engine = new Engine(GODOT_CONFIG);
(function () {
- const INDETERMINATE_STATUS_STEP_MS = 100;
+ const statusOverlay = document.getElementById('status');
const statusProgress = document.getElementById('status-progress');
- const statusProgressInner = document.getElementById('status-progress-inner');
- const statusIndeterminate = document.getElementById('status-indeterminate');
const statusNotice = document.getElementById('status-notice');
let initializing = true;
- let statusMode = 'hidden';
-
- let animationCallbacks = [];
- function animate(time) {
- animationCallbacks.forEach((callback) => callback(time));
- requestAnimationFrame(animate);
- }
- requestAnimationFrame(animate);
-
- function animateStatusIndeterminate(ms) {
- const 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';
- }
- }
+ let statusMode = '';
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');
+ if (mode === 'hidden') {
+ statusOverlay.remove();
+ initializing = false;
+ return;
}
+ statusOverlay.style.visibility = 'visible';
+ statusProgress.style.display = mode === 'progress' ? 'block' : 'none';
+ statusNotice.style.display = mode === 'notice' ? 'block' : 'none';
statusMode = mode;
}
@@ -217,6 +144,7 @@ const engine = new Engine(GODOT_CONFIG);
const missing = Engine.getMissingFeatures({
threads: GODOT_THREADS_ENABLED,
});
+
if (missing.length !== 0) {
if (GODOT_CONFIG['serviceWorker'] && GODOT_CONFIG['ensureCrossOriginIsolationHeaders'] && 'serviceWorker' in navigator) {
// There's a chance that installing the service worker would fix the issue
@@ -242,25 +170,19 @@ const engine = new Engine(GODOT_CONFIG);
displayFailureNotice(missingMsg + missing.join('\n'));
}
} else {
- setStatusMode('indeterminate');
+ setStatusMode('progress');
engine.startGame({
'onProgress': function (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);
- }
+ if (current > 0 && total > 0) {
+ statusProgress.value = current;
+ statusProgress.max = total;
} else {
- setStatusMode('indeterminate');
+ statusProgress.removeAttribute('value');
+ statusProgress.removeAttribute('max');
}
},
}).then(() => {
setStatusMode('hidden');
- initializing = false;
}, displayFailureNotice);
}
}());