ref: 355623f7250f1602a6bda49a15d33c9cd6cdae9f
dir: /src/wasm-index.html/
<!doctype html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>wipEout</title> <style> html, body { color: #ccc; font-family: Monospace; font-size: 13px; background-color: #111; margin: 0px; } a { color: #ffc603; text-decoration: none; } a:hover { text-decoration: underline; } /* the canvas *must not* have any border or padding, or mouse coords will be wrong */ canvas { border: 0px none; background-color: black; width: 100%; height: 100%; aspect-ratio: 16 / 9; } #head { left: 0; right: 0; top: 0; padding: 4px 16px 6px 16px; xheight: 24px; background-color: #222; display: flex; justify-content: space-between; } @keyframes page-loader { 0% {transform: rotate(0deg); } 100% { transform: rotate(360deg);} } .container { position: relative; } .info-overlay { text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 200px; height: 200px; display: none; } .fullscreen { margin: 0 8px; } #spinner { content: ""; border-radius: 50%; width: 48px; height: 48px; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; border-top: 2px solid #222; border-right: 2px solid #222; border-bottom: 2px solid #222; border-left: 2px solid #ffc603; transform: translateZ(0); animation: page-loader 1.1s infinite linear; } h1 { color: #fff; display: inline-block; margin: 0; padding: 0; font-size: 12px; } .key { margin-right: 16px; } kbd { background-color: #eee; border-radius: 3px; border: 1px solid #b4b4b4; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset; color: #333; display: inline-block; font-size: 0.85em; font-weight: 700; line-height: 1; padding: 1px 2px; white-space: nowrap; } </style> </head> <body> <div id="head"> <div> <h1>wipEout</h1> <a href="#" id="fullscreen">fullscreen</a> <span class="key"><kbd>◀</kbd><kbd>▲</kbd><kbd>▼</kbd><kbd>▶</kbd> steering</span> <span class="key"><kbd>X</kbd> thrust</span> <span class="key"><kbd>Z</kbd> shoot</span> <span class="key"><kbd>C</kbd> brake left</span> <span class="key"><kbd>V</kbd> brake right</span> <span class="key"><kbd>A</kbd> view</span> </div> <div> Read: <a href="https://phoboslab.org/log/2023/08/rewriting-wipeout"> Rewriting wipEout </a> </div> </div> <div id="game" class="container"> <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas> <div class="info-overlay" id="loading"> <div id="spinner"></div> <div id="status">Downloading...</div> <div> <progress value="0" max="100" id="progress" hidden=1></progress> </div> </div> <div class="info-overlay" id="select-version"> <p> <a href="#" id="load-full-version">FULL VERSION</a><br/> the complete game ~144mb </p> <p> <a href="#" id="load-minimal-version">MINIMAL VERSION</a><br/> no intro, no music ~11mb </p> </div> </div> </div> <script type='text/javascript'> var loadScript = (ev, src) => { ev.preventDefault(); // Hide select-version, show loader document.getElementById('select-version').style.display = 'none'; document.getElementById('loading').style.display = 'block'; // Load the requested script var s = document.createElement('script'); s.setAttribute('src', src); document.head.appendChild(s); // Attemp to unlock Audio :( var audioCtx = new AudioContext(); audioCtx.resume(); return false; }; var requestFullscreen = (ev) => { ev.preventDefault(); document.getElementById('game').requestFullscreen(); }; document.getElementById('select-version').style.display = 'block'; document.getElementById('fullscreen').addEventListener('click', (ev) => requestFullscreen(ev, 'wipeout.js')) document.getElementById('load-full-version').addEventListener('click', (ev) => loadScript(ev, 'wipeout.js')); document.getElementById('load-minimal-version').addEventListener('click', (ev) => loadScript(ev, 'wipeout-minimal.js')); var statusElement = document.getElementById('status'); var progressElement = document.getElementById('progress'); var spinnerElement = document.getElementById('spinner'); var Module = { preRun: [], postRun: [], print: function(text) { if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' '); console.log(text); }, canvas: document.getElementById('canvas'), setStatus: (text) => { if (!Module.setStatus.last) { Module.setStatus.last = { time: Date.now(), text: '' }; } if (text === Module.setStatus.last.text) { return; } var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/); var now = Date.now(); if (m && now - Module.setStatus.last.time < 30) { return; // if this is a progress update, skip it if too soon } Module.setStatus.last.time = now; Module.setStatus.last.text = text; if (m) { text = m[1]; progressElement.value = parseInt(m[2])*100; progressElement.max = parseInt(m[4])*100; progressElement.hidden = false; spinnerElement.hidden = false; } else { progressElement.value = null; progressElement.max = null; progressElement.hidden = true; if (!text) { spinnerElement.hidden = true; document.getElementById('loading').style.display = 'none'; } } statusElement.innerHTML = text; }, totalDependencies: 0, monitorRunDependencies: (left) => { Module.totalDependencies = Math.max(Module.totalDependencies, left); Module.setStatus(left ? 'preparing... (' + (Module.totalDependencies-left) + '/' + Module.totalDependencies + ')' : 'all downloads complete.'); } }; Module.setStatus('downloading...'); window.onerror = () => { Module.setStatus('Exception thrown, see JavaScript console'); document.getElementById('loading').style.display = 'block'; spinnerElement.style.display = 'none'; Module.setStatus = (text) => { if (text) { console.error('[post-exception status] ' + text); } }; }; </script> </body> </html>