godot_shell.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>$GODOT_HEAD_TITLE</title>
  6. $GODOT_HEAD_INCLUDE
  7. <style type="text/css">
  8. body {
  9. margin: 0;
  10. border: 0 none;
  11. padding: 0;
  12. text-align: center;
  13. background-color: black;
  14. font-family: $GODOT_STYLE_FONT_FAMILY;
  15. }
  16. /* Godot Engine default theme style
  17. * ================================ */
  18. .godot {
  19. color: #e0e0e0;
  20. background-color: #3b3943;
  21. background-image: linear-gradient(to bottom, #403e48, #35333c);
  22. border: 1px solid #45434e;
  23. box-shadow: 0 0 1px 1px #2f2d35;
  24. }
  25. button.godot {
  26. font-family: $GODOT_STYLE_FONT_FAMILY; /* override user agent style */
  27. padding: 1px 5px;
  28. background-color: #37353f;
  29. background-image: linear-gradient(to bottom, #413e49, #3a3842);
  30. border: 1px solid #514f5d;
  31. border-radius: 1px;
  32. box-shadow: 0 0 1px 1px #2a2930;
  33. }
  34. button.godot:hover {
  35. color: #f0f0f0;
  36. background-color: #44414e;
  37. background-image: linear-gradient(to bottom, #494652, #423f4c);
  38. border: 1px solid #5a5667;
  39. box-shadow: 0 0 1px 1px #26252b;
  40. }
  41. button.godot:active {
  42. color: #fff;
  43. background-color: #3e3b46;
  44. background-image: linear-gradient(to bottom, #36343d, #413e49);
  45. border: 1px solid #4f4c59;
  46. box-shadow: 0 0 1px 1px #26252b;
  47. }
  48. button.godot:disabled {
  49. color: rgba(230, 230, 230, 0.2);
  50. background-color: #3d3d3d;
  51. background-image: linear-gradient(to bottom, #434343, #393939);
  52. border: 1px solid #474747;
  53. box-shadow: 0 0 1px 1px #2d2b33;
  54. }
  55. /* Canvas / wrapper
  56. * ================ */
  57. #container {
  58. display: inline-block; /* scale with canvas */
  59. vertical-align: top; /* prevent extra height */
  60. position: relative; /* root for absolutely positioned overlay */
  61. margin: 0;
  62. border: 0 none;
  63. padding: 0;
  64. background-color: #111;
  65. }
  66. #canvas {
  67. display: block;
  68. margin: 0 auto;
  69. /* canvas must have border and padding set to zero to
  70. * calculate cursor coordinates correctly */
  71. border: 0 none;
  72. padding: 0;
  73. }
  74. /* Status display
  75. * ============== */
  76. #status-container {
  77. position: absolute;
  78. left: 0;
  79. top: 0;
  80. right: 0;
  81. bottom: 0;
  82. display: flex;
  83. justify-content: center;
  84. align-items: center;
  85. /* don't consume click events - make children visible explicitly */
  86. visibility: hidden;
  87. }
  88. #status {
  89. visibility: visible;
  90. padding: 4px 6px;
  91. }
  92. /* On-hover controls
  93. * ================= */
  94. #controls {
  95. visibility: hidden;
  96. opacity: 0.0;
  97. transition: opacity 500ms ease-in-out 200ms;
  98. position: absolute;
  99. right: 16px;
  100. top: 16px;
  101. padding: 3px 5px;
  102. font-size: small;
  103. -moz-user-select: none;
  104. -webkit-user-select: none;
  105. -ms-user-select: none;
  106. }
  107. #container:hover > #controls {
  108. opacity: 1.0;
  109. transition: opacity 60ms ease-in-out;
  110. }
  111. #controls > button,
  112. #controls > label {
  113. vertical-align: middle;
  114. margin-left: 2px;
  115. margin-right: 2px;
  116. }
  117. #controls > label > input[type="checkbox"] {
  118. /* override user agent style */
  119. margin-left: 0;
  120. }
  121. label > input {
  122. vertical-align: middle;
  123. }
  124. #display-output { display: none; }
  125. /* Debug output
  126. * ============ */
  127. #output {
  128. display: none;
  129. margin: 6px auto;
  130. border: 2px groove grey;
  131. padding: 4px;
  132. outline: none;
  133. text-align: left;
  134. white-space: pre-wrap;
  135. font-size: small;
  136. color: #eee;
  137. background-color: black;
  138. font-family: "Lucida Console", Monaco, monospace;
  139. }
  140. /* Export style include
  141. * ==================== */
  142. $GODOT_STYLE_INCLUDE
  143. </style>
  144. </head>
  145. <body>
  146. <div id="container">
  147. <canvas id="canvas" width="$GODOT_CANVAS_WIDTH" height="$GODOT_CANVAS_HEIGHT" onclick="canvas.ownerDocument.defaultView.focus();" oncontextmenu="event.preventDefault();">
  148. HTML5 canvas appears to be unsupported in the current browser.<br />Please try updating or use a different browser.
  149. </canvas>
  150. <div id="status-container">
  151. <span id="status" class="godot" onclick="this.style.visibility='hidden';">Loading page...</span>
  152. </div>
  153. <div id="controls" class="godot">
  154. <label id="display-output"><input id="output-toggle" type="checkbox" autocomplete="off" onchange="Presentation.setOutputVisible(this.checked);" />display output</label>
  155. <!-- hidden until implemented
  156. <label><input id="lock-cursor" type="checkbox" autocomplete="off" />lock cursor</label>
  157. <label><input id="resize-canvas" type="checkbox" autocomplete="off" />resize canvas</label>
  158. -->
  159. <button id="fullscreen" class="godot" type="button" disabled="disabled" autocomplete="off" onclick="Presentation.goFullscreen();">fullscreen</button>
  160. </div>
  161. </div>
  162. <!-- Firefox adds extra space to textarea, but shouldn't matter too much https://bugzilla.mozilla.org/show_bug.cgi?id=33654 -->
  163. <textarea id="output" rows="10" cols="100" readonly="readonly" style="resize:none"></textarea>
  164. <script type="text/javascript">//<![CDATA[
  165. var Presentation = (function() {
  166. var statusElement = document.getElementById("status");
  167. var outputElement = document.getElementById("output");
  168. var doneLoading = false;
  169. function onLoaded() {
  170. doneLoading = true;
  171. var fullscreenButtonElement = document.getElementById("fullscreen");
  172. fullscreenButtonElement.disabled = false;
  173. }
  174. var presentation = {
  175. statusElement: statusElement,
  176. outputElement: outputElement,
  177. setOutputVisible: function setOutputVisible(visible) {
  178. outputElement.style.display = (visible?"block":"none");
  179. },
  180. setStatusVisible: function setStatusVisible(visible) {
  181. statusElement.style.visibility = (visible?"visible":"hidden");
  182. },
  183. setStatus: function setStatus(text) {
  184. if (!text || text.length === 0) {
  185. Presentation.setStatusVisible(false);
  186. onLoaded();
  187. } else {
  188. Presentation.setStatusVisible(true);
  189. statusElement.innerHTML = text;
  190. }
  191. },
  192. goFullscreen: function goFullscreen() {
  193. if (doneLoading) Module.requestFullScreen(false, false);
  194. }
  195. };
  196. if ($GODOT_CONTROLS_ENABLED) { // controls enabled
  197. (function() {
  198. var controlsElement = document.getElementById("controls");
  199. controlsElement.style.visibility="visible";
  200. })();
  201. }
  202. if ($GODOT_DEBUG_ENABLED) { // debugging enabled
  203. (function() {
  204. var outputToggleLabel = document.getElementById("display-output");
  205. var outputToggle = document.getElementById("output-toggle");
  206. outputElement.value = ""; // clear browser cache
  207. outputElement.style.display = "block";
  208. outputToggle.checked = true;
  209. outputToggleLabel.style.display = "inline";
  210. presentation.print = function print(text) {
  211. if (outputElement.value.length !== 0)
  212. outputElement.value += "\n";
  213. outputElement.value += text;
  214. outputElement.scrollTop = outputElement.scrollHeight; // focus on bottom
  215. };
  216. })();
  217. }
  218. return presentation;
  219. })();
  220. // Emscripten interface
  221. var Module = (function() {
  222. var print = (function() {
  223. if (typeof Presentation.print === "function") {
  224. return function print(text) {
  225. if (arguments.length > 1)
  226. text = Array.prototype.slice.call(arguments).join(" ");
  227. console.log(text);
  228. Presentation.print(text);
  229. };
  230. } else {
  231. return function print(text) {
  232. if (arguments.length > 1)
  233. text = Array.prototype.slice.call(arguments).join(" ");
  234. console.log(text);
  235. };
  236. }
  237. })();
  238. var canvas = (function() {
  239. var canvasElement = document.getElementById("canvas");
  240. // As a default initial behavior, pop up an alert when WebGL context is lost. To make your
  241. // application robust, you may want to override this behavior before shipping!
  242. // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
  243. canvasElement.addEventListener("webglcontextlost", function(e) { alert("WebGL context lost. Plase reload the page."); e.preventDefault(); }, false);
  244. return canvasElement;
  245. })();
  246. var setStatus = (function() {
  247. if (typeof Presentation.setStatus === "function")
  248. return function setStatus(text) {
  249. if (!Module.setStatus.last)
  250. Module.setStatus.last = { time: Date.now(), text: "" };
  251. if (text === Module.setStatus.text)
  252. return;
  253. var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
  254. var now = Date.now();
  255. if (m) {
  256. if (now - Date.now() < 30) // if this is a progress update, skip it if too soon
  257. return;
  258. text = m[1];
  259. }
  260. Presentation.setStatus(text);
  261. };
  262. else
  263. return function setStatus(text) {
  264. if (!Module.setStatus.last)
  265. Module.setStatus.last = { time: Date.now(), text: "" };
  266. if (text === Module.setStatus.text)
  267. return;
  268. var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
  269. var now = Date.now();
  270. if (m) {
  271. if (now - Date.now() < 30) // if this is a progress update, skip it if too soon
  272. return;
  273. text = m[1];
  274. }
  275. };
  276. })();
  277. return {
  278. TOTAL_MEMORY: 268435456,
  279. preRun: [],
  280. postRun: [],
  281. print: print,
  282. printErr: function printErr(text) {
  283. if (arguments.length > 1)
  284. text = Array.prototype.slice.call(arguments).join(" ");
  285. if (0) { // XXX disabled for safety `if (typeof dump == "function")`
  286. dump(text + "\n"); // fast, straight to the real console
  287. } else {
  288. console.error(text);
  289. }
  290. },
  291. canvas: canvas,
  292. setStatus: setStatus,
  293. totalDependencies: 0,
  294. monitorRunDependencies: function monitorRunDependencies(left) {
  295. this.totalDependencies = Math.max(this.totalDependencies, left);
  296. Module.setStatus(left ? "Preparing... (" + (this.totalDependencies-left) + "/" + this.totalDependencies + ")" : "All downloads complete.");
  297. }
  298. };
  299. })();
  300. Presentation.setStatus("Downloading...");
  301. window.onerror = function(event) {
  302. // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
  303. Module.setStatus("Exception thrown, see JavaScript console");
  304. Module.setStatus = function(text) {
  305. if (text) Module.printErr("[post-exception status] " + text);
  306. };
  307. };
  308. //]]></script>
  309. <script type="text/javascript" src="$GODOT_BASEfs.js"></script>
  310. {{{ SCRIPT }}}
  311. </body>
  312. </html>