2013-11-09 23:00:20 -05:00
<!doctype html>
2016-08-02 19:37:01 -05:00
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > RetroArch Web Player< / title >
< script type = "text/javascript" src = "browserfs.js" > < / script >
< style >
2016-08-02 19:52:55 -05:00
.webplayer { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
textarea.webplayer { border: 0px; font-family: 'Share Tech Mono'; font-size: 12px; width: 100%; overflow:hide; resize:none; color:black; }
div.webplayer, h1 { text-align: left; }
2016-08-02 19:37:01 -05:00
div.canvas_border { background-color:gray; width:800px; height:600px; margin-left: auto; margin-right: auto; }
2016-08-02 19:52:55 -05:00
canvas.webplayer { border: 0px none; }
2016-08-02 19:37:01 -05:00
< / style >
< / head >
< body >
< hr / >
2016-08-02 19:52:55 -05:00
< div class = "webplayer_border" id = "canvas_div" style = "display: none" >
< canvas class = "webplayer" id = "canvas" tabindex = "1" oncontextmenu = "event.preventDefault()" > < / canvas >
2016-08-02 19:37:01 -05:00
< / div >
2016-08-02 19:52:55 -05:00
< hr / >
< div class = "webplayer webplayer_border" id = "openrom" >
2016-08-02 19:38:46 -05:00
< button id = "btnLoad" onclick = "document.getElementById('rom').click()" > Upload Content< / button >
< input style = "display: none" type = "file" id = "rom" name = "upload" onclick = "document.getElementById('btnLoad').click();" multiple / >
< button id = "btnStart" onclick = "startRetroArch()" > Start RetroArch< / button >
2016-08-02 19:37:01 -05:00
< / div >
< hr / >
2016-08-02 19:52:55 -05:00
< div class = "webplayer" >
2013-11-09 23:00:20 -05:00
< 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 >
2016-08-02 19:37:01 -05:00
< input type = "button" value = "Fullscreen" onclick = "Module.requestFullScreen(document.getElementById('pointerLock').checked, document.getElementById('resize').checked)" > < br >
2013-11-09 23:00:20 -05:00
< input type = "checkbox" id = "vsync" > < label for = "vsync" id = "vsync-label" > Enable V-sync (can only be done before loading game)< / label > < br >
2016-07-31 21:48:32 +03:00
< input type = "checkbox" id = "sdl2" > < label for = "sdl2" id = "sdl2-label" > Enable SDL2< / label > < br >
2013-11-09 23:00:20 -05:00
< 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 >
2016-08-02 19:37:01 -05:00
< / div >
< hr / >
2016-08-02 19:52:55 -05:00
< textarea class = "webplayer" id = "output" rows = "15" > < / textarea >
2016-08-02 19:37:01 -05:00
< hr >
< / body >
< / html >
< script type = 'text/javascript' >
var count = 0;
2016-08-02 19:52:55 -05:00
function startRetroArch()
2016-08-02 19:37:01 -05:00
{
Module.FS_createFolder('/', 'etc', true, true);
Module.FS_createFolder('/', 'config', true, true);
Module.FS_createFolder('/', 'content', true, true);
Module.FS_createFolder('/', 'savefiles', true, true);
Module.FS_createFolder('/', 'savestates', 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']);
2016-08-02 19:52:55 -05:00
}
2016-08-02 19:37:01 -05:00
function uploadData(data, name)
{
var dataView = new Uint8Array(data);
Module.FS_createDataFile('/', name, dataView, true, false);
}
var Module =
{
noInitialRun: true,
arguments: ["-v", "--menu"],
preRun: [],
postRun: [],
print: (function()
{
var element = document.getElementById('output');
element.value = ''; // clear browser cache
return function(text)
{
2013-11-09 23:00:20 -05:00
text = Array.prototype.slice.call(arguments).join(' ');
element.value += text + "\n";
element.scrollTop = 99999; // focus on bottom
2016-08-02 19:37:01 -05:00
};
})(),
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'),
totalDependencies: 0,
monitorRunDependencies: function(left)
{
this.totalDependencies = Math.max(this.totalDependencies, left);
}
};
< / script >
< script type = "text/javascript" src = "browserfs.js" > < / script >
2016-08-02 19:38:46 -05:00
< script type = "text/javascript" src = "gambatte.js" > < / script >
