diff options
Diffstat (limited to 'platform/javascript/godot_shell.html')
| -rw-r--r-- | platform/javascript/godot_shell.html | 357 |
1 files changed, 357 insertions, 0 deletions
diff --git a/platform/javascript/godot_shell.html b/platform/javascript/godot_shell.html new file mode 100644 index 0000000000..3170d2bb9e --- /dev/null +++ b/platform/javascript/godot_shell.html @@ -0,0 +1,357 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<head> + <meta charset="utf-8" /> + <title>$GODOT_HEAD_TITLE</title> + $GODOT_HEAD_INCLUDE + <style type="text/css"> + body { + margin: 0; + border: 0 none; + padding: 0; + text-align: center; + background-color: black; + font-family: $GODOT_STYLE_FONT_FAMILY; + } + + + /* 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: $GODOT_STYLE_FONT_FAMILY; /* 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: #111; + } + + #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; + } + + + /* 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 { + visibility: visible; + padding: 4px 6px; + } + + + /* On-hover controls + * ================= */ + + #controls { + visibility: hidden; + opacity: 0.0; + transition: opacity 500ms ease-in-out 200ms; + position: absolute; + right: 16px; + top: 16px; + padding: 3px 5px; + font-size: small; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + } + + #container:hover > #controls { + opacity: 1.0; + transition: opacity 60ms ease-in-out; + } + + #controls > button, + #controls > label { + vertical-align: middle; + margin-left: 2px; + margin-right: 2px; + } + + #controls > label > input[type="checkbox"] { + /* override user agent style */ + margin-left: 0; + } + + label > input { + vertical-align: middle; + } + + #display-output { display: none; } + + + /* Debug output + * ============ */ + + #output { + display: none; + margin: 6px auto; + border: 2px groove grey; + padding: 4px; + outline: none; + text-align: left; + white-space: pre-wrap; + font-size: small; + color: #eee; + background-color: black; + font-family: "Lucida Console", Monaco, monospace; + } + + + /* Export style include + * ==================== */ + + $GODOT_STYLE_INCLUDE + </style> +</head> +<body> + <div id="container"> + <canvas id="canvas" width="$GODOT_CANVAS_WIDTH" height="$GODOT_CANVAS_HEIGHT" onclick="canvas.ownerDocument.defaultView.focus();" 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';">Loading page...</span> + </div> + <div id="controls" class="godot"> + <label id="display-output"><input id="output-toggle" type="checkbox" autocomplete="off" onchange="Presentation.setOutputVisible(this.checked);" />display output</label> + <!-- hidden until implemented + <label><input id="lock-cursor" type="checkbox" autocomplete="off" />lock cursor</label> + <label><input id="resize-canvas" type="checkbox" autocomplete="off" />resize canvas</label> + --> + <button id="fullscreen" class="godot" type="button" disabled="disabled" autocomplete="off" onclick="Presentation.goFullscreen();">fullscreen</button> + </div> + </div> + <!-- Firefox adds extra space to textarea, but shouldn't matter too much https://bugzilla.mozilla.org/show_bug.cgi?id=33654 --> + <textarea id="output" rows="10" cols="100" readonly="readonly" style="resize:none"></textarea> + + <script type="text/javascript">//<![CDATA[ + var Presentation = (function() { + var statusElement = document.getElementById("status"); + var outputElement = document.getElementById("output"); + var doneLoading = false; + + function onLoaded() { + doneLoading = true; + var fullscreenButtonElement = document.getElementById("fullscreen"); + fullscreenButtonElement.disabled = false; + } + + var presentation = { + statusElement: statusElement, + outputElement: outputElement, + setOutputVisible: function setOutputVisible(visible) { + outputElement.style.display = (visible?"block":"none"); + }, + setStatusVisible: function setStatusVisible(visible) { + statusElement.style.visibility = (visible?"visible":"hidden"); + }, + setStatus: function setStatus(text) { + if (!text || text.length === 0) { + Presentation.setStatusVisible(false); + onLoaded(); + } else { + Presentation.setStatusVisible(true); + statusElement.innerHTML = text; + } + }, + goFullscreen: function goFullscreen() { + if (doneLoading) Module.requestFullScreen(false, false); + } + }; + + if ($GODOT_CONTROLS_ENABLED) { // controls enabled + (function() { + var controlsElement = document.getElementById("controls"); + controlsElement.style.visibility="visible"; + })(); + } + + if ($GODOT_DEBUG_ENABLED) { // debugging enabled + (function() { + var outputToggleLabel = document.getElementById("display-output"); + var outputToggle = document.getElementById("output-toggle"); + + outputElement.value = ""; // clear browser cache + outputElement.style.display = "block"; + outputToggle.checked = true; + outputToggleLabel.style.display = "inline"; + + presentation.print = function print(text) { + if (outputElement.value.length !== 0) + outputElement.value += "\n"; + outputElement.value += text; + outputElement.scrollTop = outputElement.scrollHeight; // focus on bottom + }; + })(); + } + + return presentation; + })(); + + // Emscripten interface + var Module = (function() { + var print = (function() { + if (typeof Presentation.print === "function") { + return function print(text) { + if (arguments.length > 1) + text = Array.prototype.slice.call(arguments).join(" "); + console.log(text); + Presentation.print(text); + }; + } else { + return function print(text) { + if (arguments.length > 1) + text = Array.prototype.slice.call(arguments).join(" "); + console.log(text); + }; + } + })(); + + var canvas = (function() { + var canvasElement = document.getElementById("canvas"); + + // 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 + canvasElement.addEventListener("webglcontextlost", function(e) { alert("WebGL context lost. Plase reload the page."); e.preventDefault(); }, false); + + return canvasElement; + })(); + + var setStatus = (function() { + if (typeof Presentation.setStatus === "function") + return function setStatus(text) { + if (!Module.setStatus.last) + Module.setStatus.last = { time: Date.now(), text: "" }; + if (text === Module.setStatus.text) + return; + 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]; + } + Presentation.setStatus(text); + }; + else + return function setStatus(text) { + if (!Module.setStatus.last) + Module.setStatus.last = { time: Date.now(), text: "" }; + if (text === Module.setStatus.text) + return; + 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]; + } + }; + })(); + + return { + TOTAL_MEMORY: 268435456, + preRun: [], + postRun: [], + print: print, + printErr: function printErr(text) { + if (arguments.length > 1) + text = Array.prototype.slice.call(arguments).join(" "); + if (0) { // XXX disabled for safety `if (typeof dump == "function")` + dump(text + "\n"); // fast, straight to the real console + } else { + console.error(text); + } + }, + canvas: canvas, + setStatus: setStatus, + totalDependencies: 0, + monitorRunDependencies: function monitorRunDependencies(left) { + this.totalDependencies = Math.max(this.totalDependencies, left); + Module.setStatus(left ? "Preparing... (" + (this.totalDependencies-left) + "/" + this.totalDependencies + ")" : "All downloads complete."); + } + }; + })(); + + Presentation.setStatus("Downloading..."); + + window.onerror = function(event) { + // TODO: do not warn on ok events like simulating an infinite loop or exitStatus + Module.setStatus("Exception thrown, see JavaScript console"); + Module.setStatus = function(text) { + if (text) Module.printErr("[post-exception status] " + text); + }; + }; + //]]></script> + <script type="text/javascript" src="$GODOT_BASEfs.js"></script> + {{{ SCRIPT }}} +</body> +</html> |