a game about throwing hammers made for the github game off
Diffstat (limited to 'html/custom.html')
| -rw-r--r-- | html/custom.html | 280 |
1 files changed, 280 insertions, 0 deletions
diff --git a/html/custom.html b/html/custom.html new file mode 100644 index 0000000..832478b --- /dev/null +++ b/html/custom.html @@ -0,0 +1,280 @@ +<!DOCTYPE html> +<html xmlns="https://www.w3.org/1999/xhtml" lang="" xml:lang=""> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, user-scalable=no" /> + <title>$GODOT_PROJECT_NAME</title> + <style type="text/css"> + body { + touch-action: none; + margin: 0; + border: 0 none; + padding: 0; + min-width: 100%; + min-height: 100%; + text-align: center; + background-size: cover; + background-repeat: no-repeat; + background: linear-gradient(to right, yellow, orange 60%, cyan); + } + + #canvas { + display: block; + margin: 0; + color: white; + } + + #canvas:focus { + outline: none; + } + + .godot { + font-family: ubuntu; + font-weight: bold; + color: #e0e0e0; + background-color: black; + } + + /* 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: 600px; + height: 50px; + background-color: #dcc621; + background-image: linear-gradient(to left, cyan, orange 60%, yellow); + border: 5px solid black; + padding: 3px; + border-radius: 30px; + visibility: visible; + } + + @media only screen and (orientation: portrait) { + #status-progress { + width: 61.8%; + } + } + + #status-progress-inner { + height: 100%; + width: 0; + box-sizing: border-box; + transition: width 0.5s linear; + background-image: linear-gradient(45deg, blue 30%, red); + border: 3px solid black; + border-radius: 30px; + } + + #status-indeterminate { + height: 42px; + visibility: visible; + position: relative; + } + + #status-indeterminate > div { + width: 4.5px; + height: 0; + border-style: solid; + border-width: 9px 3px 0 3px; + border-color: black transparent transparent transparent; + transform-origin: center 21px; + 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; + } + </style> + $GODOT_HEAD_INCLUDE + </head> + <body> + <canvas id="canvas"> + 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> + + <script type="text/javascript" src="$GODOT_URL"></script> + <script type="text/javascript"> + //<![CDATA[ + + const GODOT_CONFIG = $GODOT_CONFIG; + var engine = new Engine(GODOT_CONFIG); + + (function () { + const INDETERMINATE_STATUS_STEP_MS = 100; + 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 animationCallbacks = []; + function animate(time) { + animationCallbacks.forEach((callback) => callback(time)); + requestAnimationFrame(animate); + } + requestAnimationFrame(animate); + + function setStatusMode(mode) { + if (statusMode === mode || !initializing) return; + [statusProgress, statusIndeterminate, statusNotice].forEach( + (elem) => { + elem.style.display = "none"; + } + ); + animationCallbacks = animationCallbacks.filter(function (value) { + return value != animateStatusIndeterminate; + }); + switch (mode) { + case "progress": + statusProgress.style.display = "block"; + break; + case "indeterminate": + statusIndeterminate.style.display = "block"; + animationCallbacks.push(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"; + } + } + + function setStatusNotice(text) { + while (statusNotice.lastChild) { + statusNotice.removeChild(statusNotice.lastChild); + } + var lines = text.split("\n"); + lines.forEach((line) => { + statusNotice.appendChild(document.createTextNode(line)); + statusNotice.appendChild(document.createElement("br")); + }); + } + + function displayFailureNotice(err) { + var msg = err.message || err; + console.error(msg); + setStatusNotice(msg); + setStatusMode("notice"); + initializing = false; + } + + if (!Engine.isWebGLAvailable()) { + displayFailureNotice("WebGL not available"); + } else { + setStatusMode("indeterminate"); + engine + .startGame({ + onProgress: function (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"); + } + }, + }) + .then(() => { + setStatusMode("hidden"); + initializing = false; + }, displayFailureNotice); + } + })(); + </script> + </body> +</html> |