<!doctype html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="js/localforage.min.js"></script> <script src="gameasync/mapping.js"></script> <title>MKXP</title> <style> body { margin: 0; padding: 0; background-color: black; height: 100vh } #main { height: 100%; width: 100%; } #canvas { padding: 0; margin: 0 auto; display: block; border: 0px none; background-color: black; height: 100%; } #spinner { position: fixed; bottom: 40px; left: 20px; opacity: 0.5; } .spinner { height: 25px; width: 25px; margin: 0px auto; -webkit-animation: rotation .8s linear infinite; -moz-animation: rotation .8s linear infinite; -o-animation: rotation .8s linear infinite; animation: rotation 0.8s linear infinite; border-left: 10px solid white; border-right: 10px solid white; border-bottom: 10px solid white; border-top: 10px solid transparent; border-radius: 100%; background-color: transparent; } @-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @-moz-keyframes rotation { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(360deg);} } @-o-keyframes rotation { from {-o-transform: rotate(0deg);} to {-o-transform: rotate(360deg);} } @keyframes rotation { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } #fullscreen { position: fixed; bottom: 20px; right: 20px; opacity: 0.5; cursor: pointer; } #fullscreen:hover { opacity: 1; } #fullscreen > svg { height: 25px; width: 25px; } #progress { background-color: white; opacity: 0.6; position: fixed; bottom: 0; left: 0; color: black; padding: 3px 10px; border-top-right-radius: 5px; } </style> </head> <body> <div id="main"> <div style="overflow:visible;" id="spinner"> <div class="spinner"></div> </div> <div id="progress">Loading ...</div> <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1 width="640" height="480"></canvas> </div> <div onclick="fullscreen()" id="fullscreen"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"> <g> <path fill="white" d="M947.4,9.8H707.6c-23.6,0-42.7,19.2-42.7,42.8l98.5,98.8L644.5,270.3c-11.9,11.9-17.9,27.5-17.9,43.1s6,31.2,17.9,43.1c23.8,23.8,62.4,23.8,86.3,0l118.7-118.7l97.9,98.3c23.6,0,42.6-19.2,42.6-42.8V52.5C990,29,971,9.8,947.4,9.8L947.4,9.8z"/> <path fill="white" d="M947.2,664.7l-100.4,100l-121-121c-23.9-23.9-62.4-23.9-86.3,0c-23.8,23.8-23.8,62.4,0,86.2l121,120.9l-96.7,96.4c0,23.6,19.2,42.6,42.8,42.6h240.7c23.6,0,42.8-19,42.8-42.6V707.4C990,683.7,970.8,664.7,947.2,664.7L947.2,664.7z"/> <path fill="white" d="M238.1,150.9L336.4,53c0-23.6-19.3-42.6-42.8-42.6H52.9c-23.6,0-42.8,19-42.8,42.6v239.7c0,23.6,19.2,42.7,42.8,42.7l98.9-98.4l122.1,122c11.9,12,27.5,17.9,43,17.9c15.7,0,31.2-6,43.2-17.9c23.7-23.7,23.7-62.4,0-86.1L238.1,150.9L238.1,150.9z"/> <path fill="white" d="M312.1,602.7L151.5,763.3L52.7,664C29.2,664,10,683.2,10,706.8v240.7c0,23.6,19.2,42.8,42.7,42.8h239.8c23.5,0,42.6-19.2,42.6-42.8l-97.4-97.9l160.7-160.7c23.9-23.9,23.9-62.4,0-86.3C374.6,578.9,336,578.9,312.1,602.7L312.1,602.7z"/> </g> </svg> </div> <script type='text/javascript'> var namespace = 'kne'; window.saveFile = function(filename) { const buf = FS.readFile('/game/' + filename); const b64 = btoa(String.fromCharCode.apply(null, buf)); localforage.setItem(namespace + filename, b64); localforage.getItem(namespace, function(err, res) { if (err || !res) res = {}; res[filename] = 1; localforage.setItem(namespace, res); }); }; var loadFiles = function() { localforage.getItem(namespace, function(err, res) { if (err || !res) return; const keys = Object.keys(res); console.log('Locally stored savefiles', keys); keys.forEach((key) => { localforage.getItem(namespace + key, (err, res) => { if (err) return; const buf = new Uint8Array(atob(res).split('').map((c) => c.charCodeAt(0))); FS.writeFile('/game/' + key, buf); }); }); }); } var createDummies = function() { // Base directory FS.mkdir('/game'); // Create dummy objects Object.values(mapping).forEach((file) => { // Get filename const filename = '/game/' + file.split("?")[0]; // Check if folder if (file.endsWith('h=')) { return FS.mkdir(filename); } // Create dummy file FS.writeFile(filename, '1'); }); }; var Module = { preRun: [createDummies], postRun: [loadFiles], noAudioDecoding: true, print: (function() { return function(text) { console.log(text); }; })(), printErr: function(text) { if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' '); console.error(text); }, canvas: (function() { var canvas = document.getElementById('canvas'); canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false); return canvas; })(), setStatus: function(text) { } }; window.setBusy = function() { document.getElementById('spinner').style.opacity = "0.5"; }; window.setNotBusy = function() { document.getElementById('spinner').style.opacity = "0"; }; function fullscreen() { document.getElementById('main').requestFullscreen(); } window.onerror = function() { console.error("An error occured!") }; window.fileLoadedAsync = function(file) { if (!(/.*Map.*rxdata/i.test(file))) return; fetch('preload/' + file + '.json') .then(function(response) { return response.json(); }) .then(function(jsonResponse) { jsonResponse.forEach((f) => { const url = mapping[f.toLowerCase().replace(new RegExp("\\.[^/.]+$"), "")]; if (!url) return; // Preload the asset setTimeout(() => { fetch('gameasync/' + url).then().catch(); }, 1000); }); }); }; var hideTimer = 0; function getLazyAsset(url, filename, callback) { const xhr = new XMLHttpRequest(); const pdiv = document.getElementById("progress"); let showTimer = 0; let abortTimer = 0; const retry = () => { xhr.abort(); getLazyAsset(url, filename, callback); } xhr.onreadystatechange = function() { if (xhr.readyState == XMLHttpRequest.DONE && xhr.status >= 200 && xhr.status < 400) { pdiv.innerHTML = `${filename} - done`; hideTimer = setTimeout(() => { pdiv.style.opacity = '0'; hideTimer = 0; }, 500); callback(); clearTimeout(showTimer); clearTimeout(abortTimer); } } xhr.onprogress = function (event) { const loaded = Math.round(event.loaded / 1024); const total = Math.round(event.total / 1024); pdiv.innerHTML = `${filename} - ${loaded}KB / ${total}KB`; clearTimeout(abortTimer); abortTimer = setTimeout(retry, 3000); }; xhr.open('GET', url); xhr.send(); pdiv.innerHTML = `${filename} - starting`; showTimer = setTimeout(() => { pdiv.style.opacity = '0.5'; }, 100); abortTimer = setTimeout(retry, 3000); if (hideTimer) { clearTimeout(hideTimer); hideTimer = 0; } } </script> <script> // Load wasm then initialize setTimeout(() => { getLazyAsset('mkxp.wasm', 'Game engine', () => { const s = document.createElement('script'); s.setAttribute('src', 'mkxp.js'); document.body.appendChild(s); }); }, 500); </script> <!-- {{{ SCRIPT }}} --> </body> </html>