2013-11-10 04:00:20 +00:00
<!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" >
2014-07-28 18:08:37 +00:00
< button id = "fakerom" onclick = "document.getElementById('rom').click()" > Select content< / button >
2013-11-10 04:00:20 +00:00
< 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 >
2014-07-28 18:08:37 +00:00
< script type = "text/javascript" src = "retroarch.js" > < / script >
