From 7c8a4a9daba4261571a7c7877be93b0ceca649ce Mon Sep 17 00:00:00 2001 From: patwork Date: Thu, 25 Apr 2024 02:09:48 +0200 Subject: [PATCH] Added splash image support and new progress bar for web export --- misc/dist/html/full-size.html | 212 ++++++++------------------ platform/web/export/export_plugin.cpp | 1 + 2 files changed, 68 insertions(+), 145 deletions(-) diff --git a/misc/dist/html/full-size.html b/misc/dist/html/full-size.html index 8ae25362f8d..874fe2695e6 100644 --- a/misc/dist/html/full-size.html +++ b/misc/dist/html/full-size.html @@ -2,135 +2,95 @@ - + $GODOT_PROJECT_NAME $GODOT_HEAD_INCLUDE - HTML5 canvas appears to be unsupported in the current browser.
- Please try updating or use a different browser. + Your browser does not support the canvas tag. + + +
- - - + + +
@@ -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); } }()); diff --git a/platform/web/export/export_plugin.cpp b/platform/web/export/export_plugin.cpp index 41c969b5f4a..92da7799e7a 100644 --- a/platform/web/export/export_plugin.cpp +++ b/platform/web/export/export_plugin.cpp @@ -170,6 +170,7 @@ void EditorExportPlatformWeb::_fix_html(Vector &p_html, const Refget("variant/thread_support")) { replaces["$GODOT_THREADS_ENABLED"] = "true";