summaryrefslogtreecommitdiff
path: root/platform/javascript/godot_shell.html
diff options
context:
space:
mode:
authoreska <eska@eska.me>2016-10-30 23:10:17 +0100
committereska <eska@eska.me>2016-10-31 01:28:01 +0100
commitd6f2862429399844ebdd16b61da3a3c9d14fba36 (patch)
tree063bf4bebefabc373119f50e7a76471fc6b7140d /platform/javascript/godot_shell.html
parent7384a6519f377ff926906ae37844c6e8044ae083 (diff)
Add option 'wasm' to compile to WebAssembly in web export
WebAssembly is still experimental, so disabled by default. The HTML shell file now uses $GODOT_BASE, a placeholder for the base filename, instead of $GODOT_JS, $GODOT_MEM and $GODOT_FS.
Diffstat (limited to 'platform/javascript/godot_shell.html')
-rw-r--r--platform/javascript/godot_shell.html357
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>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-02 03:38:00 +0000