diff options
Diffstat (limited to 'misc/dist/html/editor.html')
| -rw-r--r-- | misc/dist/html/editor.html | 320 |
1 files changed, 223 insertions, 97 deletions
diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html index 5b6ad2df65..4785f54973 100644 --- a/misc/dist/html/editor.html +++ b/misc/dist/html/editor.html @@ -1,34 +1,91 @@ <!DOCTYPE html> -<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''> +<html xmlns="http://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' /> - <title></title> - <style type='text/css'> + <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="#478cbf" /> + <meta name="msapplication-navbutton-color" content="#478cbf" /> + <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 { + /* More visible outline for better keyboard navigation. */ + outline: 0.125rem solid hsl(220, 100%, 62.5%); + /* Make the outline always appear above other elements. */ + /* Otherwise, one of its sides can be hidden by tabs in the Download and More layouts. */ + position: relative; + } body { touch-action: none; + font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; margin: 0; border: 0 none; padding: 0; text-align: center; - background-color: black; + background-color: #333b4f; overflow: hidden; } + a { + color: hsl(205, 100%, 75%); + text-decoration-color: hsla(205, 100%, 75%, 0.3); + text-decoration-thickness: 0.125rem; + } + + a:hover { + filter: brightness(117.5%); + } + + a:active { + filter: brightness(82.5%); + } + + #tabs-buttons { + /* Match the default background color of the editor window for a seamless appearance. */ + background-color: #202531; + } + + #tab-game { + /* Use a pure black background to better distinguish the running project */ + /* from the editor window, and to use a more neutral background color (no tint). */ + background-color: black; + /* Make the background span the entire page height. */ + min-height: 100vh; + } + #canvas, #gameCanvas { display: block; margin: 0; color: white; } - #canvas:focus, #gameCanvas:focus { + /* Don't show distracting focus outlines for the main tabs' contents. */ + #tab-editor canvas:focus, + #tab-game canvas:focus, + #canvas:focus, + #gameCanvas: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); @@ -36,6 +93,40 @@ box-shadow: 0 0 1px 1px #2f2d35; } + .btn { + appearance: none; + color: #e0e0e0; + background-color: #262c3b; + border: 1px solid #202531; + padding: 0.5rem 1rem; + margin: 0 0.5rem; + } + + .btn:not(:disabled):hover { + color: #e0e1e5; + border-color: #666c7b; + } + + .btn:active { + border-color: #699ce8; + color: #699ce8; + } + + .btn:disabled { + color: #aaa; + border-color: #242937; + } + + .btn.tab-btn { + padding: 0.3rem 1rem; + } + + .btn.close-btn { + padding: 0.3rem 1rem; + margin-left: -0.75rem; + font-weight: 700; + } + /* Status display * ============== */ @@ -116,44 +207,56 @@ </head> <body> <div id="tabs-buttons"> - <button id="btn-tab-loader" class="tab-btn" onclick="showTab('loader')">Loader</button> - <button id="btn-tab-editor" class="tab-btn" disabled="disabled" onclick="showTab('editor')">Editor</button> - <button id="btn-close-editor" class="close-btn" disabled="disabled" onclick="closeEditor()">X</button> - <button id="btn-tab-game" class="tab-btn" disabled="disabled" onclick="showTab('game')">Game</button> - <button id="btn-close-game" class="close-btn" disabled="disabled" onclick="closeGame()">X</button> + <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> </div> - <div id='tabs'> - <div id='tab-loader'> - <div style="color: white;" id="persistence"> + <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 /> - <label for="zip-file">Preload project zip: </label><input id="zip-file" type="file" id="files" name="files"/> + <img src="logo.svg" alt="Godot Engine logo" width="1024" height="414" style="width: auto; height: auto; max-width: 85%; max-height: 250px" /> + <br /> + @GODOT_VERSION@ + <br /> + <a href="releases/">Need an old version?</a> + <br /> + <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 /> - <button id="startButton">Start Godot Editor</button> +<a href="demo.zip">(Try this for example)</a> <br /> <br /> - <button onclick="clearPersistence()">Clear persistent data</button> + <button id="startButton" class="btn" style="margin-bottom: 4rem; font-weight: 700">Start Godot editor</button> + <br /> + <button class="btn" onclick="clearPersistence()" style="margin-bottom: 1.5rem">Clear persistent data</button> + <br /> + <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> @@ -163,14 +266,20 @@ <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> + window.addEventListener("load", () => { + if ("serviceWorker" in navigator) { + navigator.serviceWorker.register("service.worker.js"); + } + }); + </script> + <script src="godot.tools.js"></script> + <script>//<![CDATA[ - <script type='text/javascript' src='godot.tools.js'></script> - <script type='text/javascript'>//<![CDATA[ - - var engine = new Engine; + var editor = null; var game = null; var setStatusMode; var setStatusNotice; @@ -192,12 +301,11 @@ }); } - if (!window.confirm("Are you sure you want to delete all the locally stored files?")) { + if (!window.confirm("Are you sure you want to delete all the locally stored files?\nClicking \"OK\" will permanently remove your projects and editor settings!")) { return; } Promise.all([ - deleteDB("/home/web_user/projects"), - deleteDB("/home/web_user/.config") + deleteDB("/home/web_user"), ]).then(function(results) { alert("Done."); }).catch(function (err) { @@ -219,6 +327,10 @@ tabs.forEach(function (elem) { if (elem.id == 'tab-' + name) { elem.style.display = 'block'; + if (name == 'editor' || name == 'game') { + const canvas = document.getElementById(name + '-canvas'); + canvas.focus(); + } } else { elem.style.display = 'none'; } @@ -252,15 +364,14 @@ function closeEditor() { closeGame(); - if (engine) { - engine.requestQuit(); + if (editor) { + editor.requestQuit(); } } function startEditor(zip) { - const INDETERMINATE_STATUS_STEP_MS = 100; - const persistentPaths = ['/home/web_user/.config', '/home/web_user/projects']; + const persistentPaths = ['/home/web_user']; var editorCanvas = document.getElementById('editor-canvas'); var gameCanvas = document.getElementById('game-canvas'); @@ -268,6 +379,7 @@ var statusProgressInner = document.getElementById('status-progress-inner'); var statusIndeterminate = document.getElementById('status-indeterminate'); var statusNotice = document.getElementById('status-notice'); + var headerDiv = document.getElementById('tabs-buttons'); var initializing = true; var statusMode = 'hidden'; @@ -281,22 +393,28 @@ } requestAnimationFrame(animate); + var lastScale = 0; + var lastWidth = 0; + var lastHeight = 0; function adjustCanvasDimensions() { var scale = window.devicePixelRatio || 1; - var header = document.getElementById('tabs-buttons'); - var headerHeight = header.offsetHeight + 1; + var headerHeight = headerDiv.offsetHeight + 1; var width = window.innerWidth; var height = window.innerHeight - headerHeight; - editorCanvas.width = width * scale; - editorCanvas.height = height * scale; - editorCanvas.style.width = width + "px"; - editorCanvas.style.height = height + "px"; + if (lastScale !== scale || lastWidth !== width || lastHeight !== height) { + editorCanvas.width = width * scale; + editorCanvas.height = height * scale; + editorCanvas.style.width = width + "px"; + editorCanvas.style.height = height + "px"; + lastScale = scale; + lastWidth = width; + lastHeight = height; + } } animationCallbacks.push(adjustCanvasDimensions); adjustCanvasDimensions(); setStatusMode = function setStatusMode(mode) { - if (statusMode === mode || !initializing) return; [statusProgress, statusIndeterminate, statusNotice].forEach(elem => { @@ -322,10 +440,9 @@ 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 => { @@ -336,7 +453,6 @@ } setStatusNotice = function setStatusNotice(text) { - while (statusNotice.lastChild) { statusNotice.removeChild(statusNotice.lastChild); } @@ -347,25 +463,23 @@ }); }; - 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'); - }, 100); - } - } else { - setStatusMode('indeterminate'); - } - }); - - engine.setPersistentPaths(persistentPaths); + const gameConfig = { + 'persistentPaths': persistentPaths, + 'unloadAfterInit': false, + 'canvas': gameCanvas, + 'canvasResizePolicy': 1, + 'onExit': function () { + setGameTabEnabled(false); + showTab('editor'); + game = null; + }, + }; - engine.setOnExecute(function(args) { + var OnEditorExit = function () { + showTab('loader'); + setLoaderEnabled(true); + }; + function Execute(args) { 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; @@ -378,42 +492,60 @@ return; } setGameTabEnabled(true); - game = new Engine(); - game.setPersistentPaths(persistentPaths); - game.setUnloadAfterInit(false); - game.setOnExecute(engine.onExecute); - game.setCanvas(gameCanvas); - game.setCanvasResizedOnStart(true); - game.setOnExit(function() { - setGameTabEnabled(false); - showTab('editor'); - game = null; - }); + game = new Engine(gameConfig); showTab('game'); game.init().then(function() { requestAnimationFrame(function() { - game.start.apply(game, args).then(function() { + game.start({'args': args}).then(function() { gameCanvas.focus(); }); }); }); } else { // New editor instances will be run in the same canvas. We want to wait for it to exit. - engine.setOnExit(function(code) { + OnEditorExit = function(code) { setLoaderEnabled(true); setTimeout(function() { - engine.init().then(function() { + editor.init().then(function() { setLoaderEnabled(false); - engine.setOnExit(function() { + OnEditorExit = function() { showTab('loader'); setLoaderEnabled(true); - }); - engine.start.apply(engine, args); + }; + editor.start({'args': args, 'persistentDrops': is_project_manager}); }); }, 0); - engine.setOnExit(null); - }); + OnEditorExit = null; + }; } - }); + } + + const editorConfig = { + 'unloadAfterInit': false, + 'onProgress': function progressFunction (current, total) { + if (total > 0) { + statusProgressInner.style.width = current/total * 100 + '%'; + setStatusMode('progress'); + if (current === total) { + // wait for progress bar animation + setTimeout(() => { + setStatusMode('indeterminate'); + }, 100); + } + } else { + setStatusMode('indeterminate'); + } + }, + 'canvas': editorCanvas, + 'canvasResizePolicy': 0, + 'onExit': function() { + if (OnEditorExit) { + OnEditorExit(); + } + }, + 'onExecute': Execute, + 'persistentPaths': persistentPaths, + }; + editor = new Engine(editorConfig); function displayFailureNotice(err) { var msg = err.message || err; @@ -427,26 +559,20 @@ displayFailureNotice('WebGL not available'); } else { setStatusMode('indeterminate'); - engine.setCanvas(editorCanvas); - engine.setUnloadAfterInit(false); // Don't want to reload when starting game. - engine.init('godot.tools').then(function() { + editor.init('godot.tools').then(function() { if (zip) { - engine.copyToFS("/home/web_user/preload.zip", zip); + editor.copyToFS("/tmp/preload.zip", zip); } try { // Avoid user creating project in the persistent root folder. - engine.copyToFS("/home/web_user/projects/keep", new Uint8Array()); + editor.copyToFS("/home/web_user/keep", new Uint8Array()); } catch(e) { // File exists } //selectVideoMode(); showTab('editor'); setLoaderEnabled(false); - engine.setOnExit(function() { - showTab('loader'); - setLoaderEnabled(true); - }); - engine.start('--video-driver', video_driver).then(function() { + editor.start({'args': ['--project-manager', '--video-driver', video_driver], 'persistentDrops': true}).then(function() { setStatusMode('hidden'); initializing = false; }); |