<!doctype html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>RetroArch - Template</title> <style> .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; } textarea.emscripten { font-family: monospace; width: 80%; } div.emscripten, h1 { text-align: center; } div.emscripten_border { border: 1px solid black; } #fakerom { font-size: 20pt; margin: 5pt;} /* the canvas *must not* have any border or padding, or mouse coords will be wrong */ canvas.emscripten { border: 0px none; } </style> </head> <body> <h1>Template</h1> <hr/> <div class="emscripten" id="status">Downloading...</div> <div class="emscripten"> <progress value="0" max="100" id="progress" hidden=1></progress> </div> <div class="emscripten_border" id="canvas_div" style="display: none"> <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas> </div> <div class="emscripten emscripten_border" id="openrom"> <button id="fakerom" onclick="document.getElementById('rom').click()">Select a ROM</button> <input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('fakerom').click();" onchange="runEmulator(event.target.files);" multiple /> </div> <hr/> <div class="emscripten"> <input type="checkbox" id="resize"><label for="resize">Resize canvas</label> <input type="checkbox" id="pointerLock" checked><label for="pointerLock">Lock/hide mouse pointer</label> <input type="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked, document.getElementById('resize').checked)"><br> <input type="checkbox" id="vsync"><label for="vsync" id="vsync-label">Enable V-sync (can only be done before loading game)</label><br> <input type="textbox" id="latency" size="3" maxlength="3" value="96"> <label for="latency" id="latency-label">Audio latency (ms) (increase if you hear pops at fullspeed, can only be done before loading game)</label> </div> <hr/> <textarea class="emscripten" id="output" rows="8"></textarea> <hr> <div class="emscripten" id="controls"> Controls:<br> <br> A button (OK in menu): X<br> B button (Back in menu): Z<br> X Button: S<br> Y Button: A<br> L Button: Q<br> R Button: W<br> D-pad: Arrow Keys<br> Start Button: Enter<br> Select Button: Shift<br> Toggle Menu: F1<br> Fast forward: Spacebar (toggle)<br> Slow motion: E (hold)</br> Save state: F2<br> Load state: F4 </div> <script type='text/javascript'> var count = 0; function runEmulator(files){ count = files.length; document.getElementById("openrom").innerHTML = ''; document.getElementById("openrom").style.display = 'none'; for (var i = 0; i < files.length; i++) { filereader = new FileReader(); filereader.file_name = files[i].name; filereader.onload = function(){initFromData(this.result, this.file_name)}; filereader.readAsArrayBuffer(files[i]); } } function initFromData(data, name){ var dataView = new Uint8Array(data); Module.FS_createDataFile('/', name, dataView, true, false); count--; if (count === 0) { Module.FS_createFolder('/', 'etc', true, true); var config = 'input_player1_select = shift\n'; var latency = parseInt(document.getElementById('latency').value, 10); if (isNaN(latency)) latency = 96; config += 'audio_latency = ' + latency + '\n' if (document.getElementById('vsync').checked) config += 'video_vsync = true\n'; else config += 'video_vsync = false\n'; Module.FS_createDataFile('/etc', 'retroarch.cfg', config, true, true); document.getElementById('canvas_div').style.display = 'block'; document.getElementById('vsync').disabled = true; document.getElementById('vsync-label').style.color = 'gray'; document.getElementById('latency').disabled = true; document.getElementById('latency-label').style.color = 'gray'; Module['callMain'](Module['arguments']); } } </script> <script type='text/javascript'> // connect to canvas var Module = { noInitialRun: true, arguments: ["-v", "--menu"], preRun: [], postRun: [], print: (function() { var element = document.getElementById('output'); element.value = ''; // clear browser cache return function(text) { text = Array.prototype.slice.call(arguments).join(' '); // These replacements are necessary if you render to raw HTML //text = text.replace(/&/g, "&"); //text = text.replace(/</g, "<"); //text = text.replace(/>/g, ">"); //text = text.replace('\n', '<br>', 'g'); element.value += text + "\n"; element.scrollTop = 99999; // focus on bottom }; })(), printErr: function(text) { var text = Array.prototype.slice.call(arguments).join(' '); var element = document.getElementById('output'); element.value += text + "\n"; element.scrollTop = 99999; // focus on bottom }, canvas: document.getElementById('canvas'), setStatus: function(text) { if (Module.setStatus.interval) clearInterval(Module.setStatus.interval); var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/); var statusElement = document.getElementById('status'); var progressElement = document.getElementById('progress'); if (m) { text = m[1]; progressElement.value = parseInt(m[2])*100; progressElement.max = parseInt(m[4])*100; progressElement.hidden = false; } else { progressElement.value = null; progressElement.max = null; progressElement.hidden = true; } statusElement.innerHTML = text; }, totalDependencies: 0, monitorRunDependencies: function(left) { this.totalDependencies = Math.max(this.totalDependencies, left); Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.'); } }; Module.setStatus('Downloading...'); </script> <script type="text/javascript" src="retroarch.js"></script>