summaryrefslogtreecommitdiff
path: root/misc/dist/html/editor.html
diff options
context:
space:
mode:
Diffstat (limited to 'misc/dist/html/editor.html')
-rw-r--r--misc/dist/html/editor.html239
1 files changed, 210 insertions, 29 deletions
diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html
index 535721f418..7c44dd45a1 100644
--- a/misc/dist/html/editor.html
+++ b/misc/dist/html/editor.html
@@ -1,9 +1,28 @@
<!DOCTYPE html>
-<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
+<html xmlns="https://www.w3.org/1999/xhtml" lang="en">
<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' />
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
+ <meta name="author" content="Godot Engine" />
+ <meta name="description" content="Use the Godot Engine editor directly in your web browser, without having to install anything." />
+ <meta name="mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="application-name" content="Godot" />
+ <meta name="apple-mobile-web-app-title" content="Godot" />
+ <meta name="theme-color" content="#202531" />
+ <meta name="msapplication-navbutton-color" content="#202531" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+ <meta name="msapplication-starturl" content="/latest" />
+ <meta property="og:site_name" content="Godot Engine Web Editor" />
+ <meta property="og:url" name="twitter:url" content="https://editor.godotengine.org/releases/latest/" />
+ <meta property="og:title" name="twitter:title" content="Free and open source 2D and 3D game engine" />
+ <meta property="og:description" name="twitter:description" content="Use the Godot Engine editor directly in your web browser, without having to install anything." />
+ <meta property="og:image" name="twitter:image" content="https://godotengine.org/themes/godotengine/assets/og_image.png" />
+ <meta property="og:type" content="website" />
+ <meta name="twitter:card" content="summary" />
+ <link id="-gd-engine-icon" rel="icon" type="image/png" href="favicon.png" />
+ <link rel="apple-touch-icon" type="image/png" href="favicon.png" />
+ <link rel="manifest" href="manifest.json" />
<title>Godot Engine Web Editor (@GODOT_VERSION@)</title>
<style>
*:focus {
@@ -39,6 +58,34 @@
filter: brightness(82.5%);
}
+ .welcome-modal {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: hsla(0, 0%, 0%, 0.5);
+ text-align: left;
+ }
+
+ .welcome-modal-title {
+ text-align: center;
+ }
+
+ .welcome-modal-content {
+ background-color: #333b4f;
+ box-shadow: 0 0.25rem 0.25rem hsla(0, 0%, 0%, 0.5);
+ line-height: 1.5;
+ max-width: 38rem;
+ margin: 4rem auto 0 auto;
+ color: white;
+ border-radius: 0.5rem;
+ padding: 1rem 1rem 2rem 1rem;
+ }
+
#tabs-buttons {
/* Match the default background color of the editor window for a seamless appearance. */
background-color: #202531;
@@ -187,23 +234,78 @@
</style>
</head>
<body>
+ <div
+ id="welcome-modal"
+ class="welcome-modal"
+ role="dialog"
+ aria-labelledby="welcome-modal-title"
+ aria-describedby="welcome-modal-description"
+ onclick="if (event.target === this) closeWelcomeModal(false)"
+ >
+ <div class="welcome-modal-content">
+ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read before continuing</h2>
+ <div id="welcome-modal-description">
+ <p>
+ The Godot Web Editor has some limitations compared to the native version.
+ Its main focus is education and experimentation;
+ <strong>it is not recommended for production</strong>.
+ </p>
+ <p>
+ Refer to the
+ <a
+ href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html"
+ target="_blank"
+ rel="noopener"
+ >Web editor documentation</a> for usage instructions and limitations.
+ </p>
+ </div>
+ <div id="welcome-modal-description-no-cross-origin-isolation" style="display: none">
+ <p>
+ The web server does not support cross-origin isolation,
+ which is required for the Godot Web Editor to function.
+ </p>
+ <p>
+ <strong>Reasons for cross-origin isolation being disabled:</strong>
+ <ul>
+ <li id="welcome-modal-reason-not-secure">
+ This page is not served from a secure context (HTTPS <i>or</i> localhost).
+ </li>
+ <li>
+ This page may not be served with cross-origin isolation headers
+ (check with the developer tools' Network tab).
+ </li>
+ </ul>
+ </p>
+ <p>
+ If you are self-hosting the web editor,
+ refer to
+ <a
+ href="https://docs.godotengine.org/en/latest/tutorials/export/exporting_for_web.html#threads"
+ target="_blank"
+ rel="noopener"
+ >Exporting for the Web - Threads</a> for more information.
+ </p>
+ </div>
+ <div style="text-align: center">
+ <button id="welcome-modal-dismiss" class="btn" type="button" onclick="closeWelcomeModal(true)" style="margin-top: 1rem">
+ OK, don't show again
+ </button>
+ </div>
+ </div>
+ </div>
<div id="tabs-buttons">
<button id="btn-tab-loader" class="btn tab-btn" onclick="showTab('loader')">Loader</button>
<button id="btn-tab-editor" class="btn tab-btn" disabled="disabled" onclick="showTab('editor')">Editor</button>
<button id="btn-close-editor" class="btn close-btn" disabled="disabled" onclick="closeEditor()">×</button>
<button id="btn-tab-game" class="btn tab-btn" disabled="disabled" onclick="showTab('game')">Game</button>
<button id="btn-close-game" class="btn close-btn" disabled="disabled" onclick="closeGame()">×</button>
+ <button id="btn-tab-update" class="btn tab-btn" style="display: none;">Update</button>
</div>
- <div id='tabs'>
- <div id='tab-loader'>
+ <div id="tabs">
+ <div id="tab-loader">
<div style="color: #e0e0e0;" id="persistence">
- <label for="videoMode" style="display: none;">Select video driver:</label><br />
- <select id="videoMode" style="display: none;">
- <option value="GLES2" selected="selected">WebGL</option>
- <option value="GLES3">WebGL 2</option>
- </select>
<br />
- <img src="logo.svg" width="1024" height="414" style="width: auto; height: auto; max-width: 85%; max-height: 250px" />
+ <img src="logo.svg" alt="Godot Engine logo" width="1024" height="414" style="width: auto; height: auto; max-width: min(85%, 50vh); max-height: 250px" />
<br />
@GODOT_VERSION@
<br />
@@ -211,7 +313,14 @@
<br />
<br />
<br />
- <label for="zip-file" style="margin-right: 1rem">Preload project ZIP:</label> <input id="zip-file" type="file" id="files" name="files" style="margin-bottom: 1rem"/>
+ <label for="videoMode" style="margin-right: 1rem">Video driver:</label>
+ <select id="videoMode">
+ <option value="" selected="selected">Auto</option>
+ <option value="opengl3">WebGL 2</option>
+ </select>
+ <br />
+ <br />
+ <label for="zip-file" style="margin-right: 1rem">Preload project ZIP:</label> <input id="zip-file" type="file" name="files" style="margin-bottom: 1rem"/>
<br />
<a href="demo.zip">(Try this for example)</a>
<br />
@@ -223,21 +332,21 @@
<a href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html">Web editor documentation</a>
</div>
</div>
- <div id='tab-editor' style="display: none;">
- <canvas id='editor-canvas' tabindex="1">
+ <div id="tab-editor" style="display: none;">
+ <canvas id="editor-canvas" tabindex="1">
HTML5 canvas appears to be unsupported in the current browser.<br />
Please try updating or use a different browser.
</canvas>
</div>
- <div id='tab-game' style="display: none;">
- <canvas id='game-canvas' tabindex="2">
+ <div id="tab-game" style="display: none;">
+ <canvas id="game-canvas" tabindex="2">
HTML5 canvas appears to be unsupported in the current browser.<br />
Please try updating or use a different browser.
</canvas>
</div>
- <div id='tab-status' style="display: none;">
- <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 id="tab-status" style="display: none;">
+ <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>
@@ -247,18 +356,74 @@
<div></div>
<div></div>
</div>
- <div id='status-notice' class='godot' style='display: none;'></div>
+ <div id="status-notice" class="godot" style="display: none;"></div>
</div>
</div>
+ <script>//<![CDATA[
+ window.addEventListener("load", () => {
+ function notifyUpdate(sw) {
+ const btn = document.getElementById("btn-tab-update");
+ btn.onclick = function () {
+ if (!window.confirm("Are you sure you want to update?\nClicking \"OK\" will reload all active instances!")) {
+ return;
+ }
+ sw.postMessage("update");
+ btn.innerHTML = "Updating...";
+ btn.disabled = true;
+ };
+ btn.style.display = "";
+ }
+ if ("serviceWorker" in navigator) {
+ navigator.serviceWorker.register("service.worker.js").then(function (reg) {
+ if (reg.waiting) {
+ notifyUpdate(reg.waiting);
+ }
+ reg.addEventListener("updatefound", function () {
+ const update = reg.installing;
+ update.addEventListener("statechange", function () {
+ if (update.state === "installed") {
+ // It's a new install, claim and perform aggressive caching.
+ if (!reg.active) {
+ update.postMessage("claim");
+ } else {
+ notifyUpdate(update);
+ }
+ }
+ });
+ });
+ });
+ }
+
+ if (!crossOriginIsolated) {
+ // Display error dialog as threading support is required for the editor.
+ setButtonEnabled('startButton', false);
+ document.getElementById("welcome-modal-description").style.display = "none";
+ document.getElementById("welcome-modal-description-no-cross-origin-isolation").style.display = "block";
+ document.getElementById("welcome-modal-dismiss").style.display = "none";
+ document.getElementById("welcome-modal-reason-not-secure").style.display = window.isSecureContext ? "none" : "list-item";
+ }
+
+ if (!crossOriginIsolated || localStorage.getItem("welcomeModalDismissed") !== 'true') {
+ document.getElementById("welcome-modal").style.display = "block";
+ document.getElementById("welcome-modal-dismiss").focus();
+ }
+ });
- <script src='godot.tools.js'></script>
+ function closeWelcomeModal(dontShowAgain) {
+ document.getElementById("welcome-modal").style.display = "none";
+ if (dontShowAgain) {
+ localStorage.setItem("welcomeModalDismissed", 'true');
+ }
+ }
+ //]]></script>
+ <script src="godot.tools.js"></script>
<script>//<![CDATA[
var editor = null;
var game = null;
var setStatusMode;
var setStatusNotice;
- var video_driver = "GLES2";
+ var video_driver = "";
function clearPersistence() {
function deleteDB(path) {
@@ -389,6 +554,15 @@
animationCallbacks.push(adjustCanvasDimensions);
adjustCanvasDimensions();
+ function replaceCanvas(from) {
+ const out = document.createElement("canvas");
+ out.id = from.id;
+ out.tabIndex = from.tabIndex;
+ from.parentNode.replaceChild(out, from);
+ lastScale = 0;
+ return out;
+ }
+
setStatusMode = function setStatusMode(mode) {
if (statusMode === mode || !initializing)
return;
@@ -444,6 +618,7 @@
'canvas': gameCanvas,
'canvasResizePolicy': 1,
'onExit': function () {
+ gameCanvas = replaceCanvas(gameCanvas);
setGameTabEnabled(false);
showTab('editor');
game = null;
@@ -458,9 +633,10 @@
const is_editor = args.filter(function(v) { return v == '--editor' || v == '-e' }).length != 0;
const is_project_manager = args.filter(function(v) { return v == '--project-manager' }).length != 0;
const is_game = !is_editor && !is_project_manager;
- if (is_project_manager) {
- args.push('--video-driver', video_driver);
+ if (video_driver) {
+ args.push('--rendering-driver', video_driver);
}
+
if (is_game) {
if (game) {
console.error("A game is already running. Close it first");
@@ -471,7 +647,7 @@
showTab('game');
game.init().then(function() {
requestAnimationFrame(function() {
- game.start({'args': args}).then(function() {
+ game.start({'args': args, 'canvas': gameCanvas}).then(function() {
gameCanvas.focus();
});
});
@@ -486,7 +662,7 @@
showTab('loader');
setLoaderEnabled(true);
};
- editor.start({'args': args});
+ editor.start({'args': args, 'persistentDrops': is_project_manager, 'canvas': editorCanvas});
});
}, 0);
OnEditorExit = null;
@@ -513,6 +689,7 @@
'canvas': editorCanvas,
'canvasResizePolicy': 0,
'onExit': function() {
+ editorCanvas = replaceCanvas(editorCanvas);
if (OnEditorExit) {
OnEditorExit();
}
@@ -544,10 +721,14 @@
} catch(e) {
// File exists
}
- //selectVideoMode();
+ selectVideoMode();
showTab('editor');
setLoaderEnabled(false);
- editor.start({'args': ['--video-driver', video_driver]}).then(function() {
+ const args = ['--project-manager', '--single-window'];
+ if (video_driver) {
+ args.push('--rendering-driver', video_driver);
+ }
+ editor.start({'args': args, 'persistentDrops': true}).then(function() {
setStatusMode('hidden');
initializing = false;
});
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-09 05:56:23 +0000