HTML5 start-up overhaul

- Implement promise-based JS interface for custom HTML page integration - Add download progress callback - Add progress bar and indeterminate spinner to default HTML page - Try downloading files multiple times when failing - Get rid of godotfs.js - Separate steps for engine initialization, game initialization and game start - Allow multiple games on one HTML page - Substitution placeholders only used in .html file - Placeholders renamed: $GODOT_BASE => $GODOT_BASENAME, $GODOT_TMEM -> $GODOT_TOTAL_MEMORY - Emscripten Module is now Engine.RuntimeEnvironment (no longer a global)
author: Leon Krause <lk@leonkrause.com> 2017-08-13 13:10:04 +0200
committer: Leon Krause <lk@leonkrause.com> 2017-09-11 20:56:29 +0200
commit: 4db801aaeac130a74197ab43e531ce2533414eb9 (patch)
tree: 65cb628baaea9b9c680557b41f603bba276306bf /platform/javascript/godot_shell.html
parent: b4ad899ef64df6e341a4cbe52a15109cd3d6b2eb (diff)
1 files changed, 0 insertions, 347 deletions
diff --git a/platform/javascript/godot_shell.html b/platform/javascript/godot_shell.html
deleted file mode 100644
index ee7399a129..0000000000
--- a/platform/javascript/godot_shell.html
+++ /dev/null
@@ -1,347 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
-<head>
-	<meta charset="utf-8" />
-	<title></title>
-	<style type="text/css">
-		body {
-			margin: 0;
-			border: 0 none;
-			padding: 0;
-			text-align: center;
-			background-color: #222226;
-			font-family: 'Droid Sans', Arial, sans-serif;
-		}
-
-
-		/* Godot Engine default theme style
-		 * ================================ */
-
-		.godot {
-			color: #e0e0e0;
-			background-color: #3b3943;
-			background-image: linear-gradient(to bottom, #403e48, #35333c);
-			border: 1px solid #45434e;
-			box-shadow: 0 0 1px 1px #2f2d35;
-		}
-
-		button.godot {
-			font-family: 'Droid Sans', Arial, sans-serif; /* override user agent style */
-			padding: 1px 5px;
-			background-color: #37353f;
-			background-image: linear-gradient(to bottom, #413e49, #3a3842);
-			border: 1px solid #514f5d;
-			border-radius: 1px;
-			box-shadow: 0 0 1px 1px #2a2930;
-		}
-
-		button.godot:hover {
-			color: #f0f0f0;
-			background-color: #44414e;
-			background-image: linear-gradient(to bottom, #494652, #423f4c);
-			border: 1px solid #5a5667;
-			box-shadow: 0 0 1px 1px #26252b;
-		}
-
-		button.godot:active {
-			color: #fff;
-			background-color: #3e3b46;
-			background-image: linear-gradient(to bottom, #36343d, #413e49);
-			border: 1px solid #4f4c59;
-			box-shadow: 0 0 1px 1px #26252b;
-		}
-
-		button.godot:disabled {
-			color: rgba(230, 230, 230, 0.2);
-			background-color: #3d3d3d;
-			background-image: linear-gradient(to bottom, #434343, #393939);
-			border: 1px solid #474747;
-			box-shadow: 0 0 1px 1px #2d2b33;
-		}
-
-
-		/* Canvas / wrapper
-		 * ================ */
-
-		#container {
-			display: inline-block; /* scale with canvas */
-			vertical-align: top; /* prevent extra height */
-			position: relative; /* root for absolutely positioned overlay */
-			margin: 0;
-			border: 0 none;
-			padding: 0;
-			background-color: #0c0c0c;
-		}
-
-		#canvas {
-			display: block;
-			margin: 0 auto;
-			/* canvas must have border and padding set to zero to
-			 * calculate cursor coordinates correctly */
-			border: 0 none;
-			padding: 0;
-			color: white;
-		}
-
-		#canvas:focus {
-			outline: none;
-		}
-
-
-		/* Status display
-		 * ============== */
-
-		#status-container {
-			position: absolute;
-			left: 0;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			/* don't consume click events - make children visible explicitly */
-			visibility: hidden;
-		}
-
-		#status {
-			line-height: 1.3;
-			cursor: pointer;
-			visibility: visible;
-			padding: 4px 6px;
-		}
-
-
-		/* Debug output
-		 * ============ */
-
-		#output-panel {
-			display: none;
-			max-width: 700px;
-			font-size: small;
-			margin: 6px auto 0;
-			padding: 0 4px 4px;
-			text-align: left;
-			line-height: 2.2;
-		}
-
-		#output-header {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-		}
-
-		#output-container {
-			padding: 6px;
-			background-color: #2c2a32;
-			box-shadow: inset 0 0 1px 1px #232127;
-			color: #bbb;
-		}
-
-		#output-scroll {
-			line-height: 1;
-			height: 12em;
-			overflow-y: scroll;
-			white-space: pre-wrap;
-			font-size: small;
-			font-family: "Lucida Console", Monaco, monospace;
-		}
-	</style>
-$GODOT_HEAD_INCLUDE
-</head>
-<body>
-	<div id="container">
-		<canvas id="canvas" width="640" height="480" tabindex="0" oncontextmenu="event.preventDefault();">
-			HTML5 canvas appears to be unsupported in the current browser.<br />
-			Please try updating or use a different browser.
-		</canvas>
-		<div id="status-container">
-			<span id="status" class="godot" onclick="this.style.visibility='hidden';">Downloading page...</span>
-		</div>
-	</div>
-	<div id="output-panel" class="godot">
-		<div id="output-header">
-			Output:
-			<button class="godot" type="button" autocomplete="off" onclick="Presentation.clearOutput();">Clear</button>
-		</div>
-		<div id="output-container"><div id="output-scroll"></div></div>
-	</div>
-
-	<!-- Scripts -->
-	<script type="text/javascript">//<![CDATA[
-		var Presentation = (function() {
-			var statusElement = document.getElementById("status");
-			var canvasElement = document.getElementById("canvas");
-
-			var presentation = {
-				postRun: [],
-				setStatusVisible: function setStatusVisible(visible) {
-					statusElement.style.visibility = (visible ? "visible" : "hidden");
-				},
-				setStatus: function setStatus(text) {
-					if (text.length === 0) {
-						// emscripten sets empty string as status after "Running..."
-						// per timeout, but another status may have been set by then
-						if (Presentation.setStatus.lastText === "Running...")
-							Presentation.setStatusVisible(false);
-						return;
-					}
-					Presentation.setStatus.lastText = text;
-					while (statusElement.lastChild) {
-						statusElement.removeChild(statusElement.lastChild);
-					}
-					var lines = text.split("\n");
-					lines.forEach(function(line, index) {
-						statusElement.appendChild(document.createTextNode(line));
-						statusElement.appendChild(document.createElement("br"));
-					});
-					var closeNote = document.createElement("span");
-					closeNote.style.fontSize = "small";
-					closeNote.textContent = "click to close";
-					statusElement.appendChild(closeNote);
-					Presentation.setStatusVisible(true);
-				},
-				isWebGL2Available: function isWebGL2Available() {
-					var context;
-					try {
-						context = canvasElement.getContext("webgl2") || canvasElement.getContext("experimental-webgl2");
-					} catch (e) {}
-					return !!context;
-				},
-			};
-
-			window.onerror = function(event) { presentation.setStatus("Failure during start-up\nSee JavaScript console") };
-
-			if ($GODOT_DEBUG_ENABLED) { // debugging enabled
-				var outputRoot = document.getElementById("output-panel");
-				var outputElement = document.getElementById("output-scroll");
-				const maxOutputMessages = 400;
-
-				presentation.setOutputVisible = function setOutputVisible(visible) {
-					outputRoot.style.display = (visible ? "block" : "none");
-				};
-				presentation.clearOutput = function clearOutput() {
-					while (outputElement.firstChild) {
-						outputElement.firstChild.remove();
-					}
-				};
-
-				presentation.setOutputVisible(true);
-
-				presentation.print = function print(text) {
-					if (arguments.length > 1) {
-						text = Array.prototype.slice.call(arguments).join(" ");
-					}
-					if (text.length <= 0) return;
-					while (outputElement.childElementCount >= maxOutputMessages) {
-						outputElement.firstChild.remove();
-					}
-					var msg = document.createElement("div");
-					if (String.prototype.trim.call(text).startsWith("**ERROR**")
-						|| String.prototype.trim.call(text).startsWith("**EXCEPTION**")) {
-						msg.style.color = "#d44";
-					} else if (String.prototype.trim.call(text).startsWith("**WARNING**")) {
-						msg.style.color = "#ccc000";
-					} else if (String.prototype.trim.call(text).startsWith("**SCRIPT ERROR**")) {
-						msg.style.color = "#c6d";
-					}
-					msg.textContent = text;
-					var scrollToBottom = outputElement.scrollHeight - (outputElement.clientHeight + outputElement.scrollTop) < 10;
-					outputElement.appendChild(msg);
-					if (scrollToBottom) {
-						outputElement.scrollTop = outputElement.scrollHeight;
-					}
-				};
-
-				presentation.postRun.push(function() {
-					window.onerror = function(event) { presentation.print("**EXCEPTION**:", event) };
-				});
-
-			} else {
-				presentation.postRun.push(function() { window.onerror = null; });
-			}
-
-			return presentation;
-		})();
-
-		// Emscripten interface
-		var Module = (function() {
-			const BASE_NAME = '$GODOT_BASE';
-			var module = {
-				thisProgram: BASE_NAME,
-				wasmBinaryFile: BASE_NAME + '.wasm',
-				TOTAL_MEMORY: $GODOT_TMEM,
-				print: function print(text) {
-					if (arguments.length > 1) {
-						text = Array.prototype.slice.call(arguments).join(" ");
-					}
-					console.log(text);
-					if (typeof Presentation !== "undefined" && typeof Presentation.print === "function") {
-						Presentation.print(text);
-					}
-				},
-				printErr: function printErr(text) {
-					if (arguments.length > 1) {
-						text = Array.prototype.slice.call(arguments).join(" ");
-					}
-					console.error(text);
-					if (typeof Presentation !== "undefined" && typeof Presentation.print === "function") {
-						Presentation.print("**ERROR**:", text)
-					}
-				},
-				canvas: document.getElementById("canvas"),
-				setStatus: function setStatus(text) {
-					var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
-					var now = Date.now();
-					if (m) {
-						if (now - Date.now() < 30) // if this is a progress update, skip it if too soon
-							return;
-						text = m[1];
-					}
-					if (typeof Presentation !== "undefined" && typeof Presentation.setStatus == "function") {
-						Presentation.setStatus(text);
-					}
-				}
-			};
-
-			// As a default initial behavior, pop up an alert when WebGL context is lost. To make your
-			// application robust, you may want to override this behavior before shipping!
-			// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
-			module.canvas.addEventListener("webglcontextlost", function(e) { alert("WebGL context lost. Plase reload the page."); e.preventDefault(); }, false);
-
-			if (typeof Presentation !== "undefined" && Presentation.postRun instanceof Array) {
-				module.postRun = Presentation.postRun;
-			}
-
-			return module;
-		})();
-
-		if (!Presentation.isWebGL2Available()) {
-			Presentation.setStatus("WebGL 2 appears to be unsupported.\nPlease update browser and drivers.");
-			Presentation.preventLoading = true;
-		} else {
-			Presentation.setStatus("Downloading...");
-		}
-
-		if (Presentation.preventLoading) {
-			// prevent *fs.js and Emscripten's SCRIPT placeholder from loading any files
-			Presentation._XHR_send = XMLHttpRequest.prototype.send;
-			XMLHttpRequest.prototype.send = function() {};
-			Presentation._Node_appendChild = Node.prototype.appendChild;
-			Node.prototype.appendChild = function(node) {
-				if (!(node instanceof HTMLScriptElement)) {
-					return Presentation._Node_appendChild.call(this, node);
-				}
-			}
-		}
-	//]]></script>
-	<script type="text/javascript" src="$GODOT_BASEfs.js"></script>
-{{{ SCRIPT }}}
-	<script type="text/javascript">
-		if (Presentation.preventLoading) {
-			XMLHttpRequest.prototype.send = Presentation._XHR_send;
-			Node.prototype.appendChild = Presentation._Node_appendChild;
-		}
-	</script>
-</body>
-</html>
author	Leon Krause <lk@leonkrause.com>	2017-08-13 13:10:04 +0200
committer	Leon Krause <lk@leonkrause.com>	2017-09-11 20:56:29 +0200
commit	4db801aaeac130a74197ab43e531ce2533414eb9 (patch)
tree	65cb628baaea9b9c680557b41f603bba276306bf /platform/javascript/godot_shell.html
parent	b4ad899ef64df6e341a4cbe52a15109cd3d6b2eb (diff)