<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> <head> <meta charset="utf-8" /> <link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' /> <title>$GODOT_PROJECT_NAME</title> <style type="text/css"> body { margin: 0; border: 0 none; padding: 0; text-align: center; background-color: #222226; font-family: 'Noto 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; color: white; } #canvas:focus { outline: none; } /* Status display * ============== */ #status { 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-progress { width: 244px; height: 7px; background-color: #38363A; border: 1px solid #444246; padding: 1px; box-shadow: 0 0 2px 1px #1B1C22; border-radius: 2px; visibility: visible; } #status-progress-inner { height: 100%; width: 0; box-sizing: border-box; transition: width 0.5s linear; background-color: #202020; border: 1px solid #222223; box-shadow: 0 0 1px 1px #27282E; border-radius: 3px; } #status-indeterminate { visibility: visible; position: relative; } #status-indeterminate > div { width: 3px; height: 0; border-style: solid; border-width: 6px 2px 0 2px; border-color: #2b2b2b transparent transparent transparent; transform-origin: center 14px; position: absolute; } #status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); } #status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); } #status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); } #status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); } #status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); } #status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); } #status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); } #status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); } #status-notice { margin: 0 100px; line-height: 1.3; visibility: visible; padding: 4px 6px; visibility: visible; } /* 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"> HTML5 canvas appears to be unsupported in the current browser.<br /> Please try updating or use a different browser. </canvas> <div id="status"> <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> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="status-notice" class="godot" style='display: none;'></div> </div> </div> <div id="output-panel" class="godot"> <div id="output-header"> Output: <button id='output-clear' class='godot' type='button' autocomplete='off'>Clear</button> </div> <div id="output-container"><div id="output-scroll"></div></div> </div> <script type="text/javascript" src="$GODOT_BASENAME.js"></script> <script type="text/javascript">//<![CDATA[ var engine = new Engine; (function() { const EXECUTABLE_NAME = '$GODOT_BASENAME'; const MAIN_PACK = '$GODOT_BASENAME.pck'; const DEBUG_ENABLED = $GODOT_DEBUG_ENABLED; const INDETERMINATE_STATUS_STEP_MS = 100; var container = document.getElementById('container'); var canvas = document.getElementById('canvas'); var statusProgress = document.getElementById('status-progress'); var statusProgressInner = document.getElementById('status-progress-inner'); var statusIndeterminate = document.getElementById('status-indeterminate'); var statusNotice = document.getElementById('status-notice'); var initializing = true; var statusMode = 'hidden'; var indeterminiateStatusAnimationId = 0; function setStatusMode(mode) { if (statusMode === mode || !initializing) return; [statusProgress, statusIndeterminate, statusNotice].forEach(elem => { elem.style.display = 'none'; }); if (indeterminiateStatusAnimationId !== 0) { cancelAnimationFrame(indeterminiateStatusAnimationId); indeterminiateStatusAnimationId = 0; } switch (mode) { case 'progress': statusProgress.style.display = 'block'; break; case 'indeterminate': statusIndeterminate.style.display = 'block'; indeterminiateStatusAnimationId = requestAnimationFrame(animateStatusIndeterminate); break; case 'notice': statusNotice.style.display = 'block'; break; case 'hidden': break; default: 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 => { child.style.borderTopColor = ''; }); statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf'; } requestAnimationFrame(animateStatusIndeterminate); } function setStatusNotice(text) { while (statusNotice.lastChild) { statusNotice.removeChild(statusNotice.lastChild); } var lines = text.split('\n'); lines.forEach((line, index) => { statusNotice.appendChild(document.createTextNode(line)); statusNotice.appendChild(document.createElement('br')); }); }; 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'); }, 500); } } else { setStatusMode('indeterminate'); } }); if (DEBUG_ENABLED) { var outputRoot = document.getElementById("output-panel"); var outputScroll = document.getElementById("output-scroll"); var OUTPUT_MSG_COUNT_MAX = 400; document.getElementById('output-clear').addEventListener('click', () => { while (outputScroll.firstChild) { outputScroll.firstChild.remove(); } }); outputRoot.style.display = 'block'; function print(text) { while (outputScroll.childElementCount >= OUTPUT_MSG_COUNT_MAX) { outputScroll.firstChild.remove(); } var msg = document.createElement("div"); if (String.prototype.trim.call(text).startsWith("**ERROR**")) { 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 = outputScroll.scrollHeight - (outputScroll.clientHeight + outputScroll.scrollTop) < 10; outputScroll.appendChild(msg); if (scrollToBottom) { outputScroll.scrollTop = outputScroll.scrollHeight; } }; function printError(text) { if (!String.prototype.trim.call(text).startsWith('**ERROR**: ')) { text = '**ERROR**: ' + text; } print(text); } engine.setStdoutFunc(text => { print(text); console.log(text); }); engine.setStderrFunc(text => { printError(text); console.warn(text); }); } function displayFailureNotice(err) { var msg = err.message || err; if (DEBUG_ENABLED) { printError(msg); } console.error(msg); setStatusNotice(msg); setStatusMode('notice'); initializing = false; }; if (!Engine.isWebGLAvailable()) { displayFailureNotice("WebGL not available"); } else { setStatusMode('indeterminate'); engine.setCanvas(canvas); engine.startGame(EXECUTABLE_NAME, MAIN_PACK).then(() => { setStatusMode('hidden'); initializing = false; }, displayFailureNotice); } })(); //]]></script> </body> </html>