2016-08-02 23:07:16 -05:00
<!doctype html>
2016-08-03 20:25:02 -05:00
< script src = "//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js" >
< / script >
2016-08-02 23:07:16 -05:00
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > RetroArch Web Player< / title >
< script type = "text/javascript" src = "browserfs.js" > < / script >
< style >
.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; }
div.canvas_border { background-color:gray; width:800px; height:600px; margin-left: auto; margin-right: auto; }
canvas.webplayer { border: 0px none; }
< / style >
< / head >
< body >
< hr / >
< div class = "webplayer_border" id = "canvas_div" style = "display: none" >
< canvas class = "webplayer" id = "canvas" tabindex = "1" oncontextmenu = "event.preventDefault()" > < / canvas >
< / div >
< hr / >
< div class = "webplayer webplayer_border" id = "openrom" >
< button id = "btnLoad" onclick = "document.getElementById('rom').click()" > Upload Content< / button >
2016-08-03 01:20:35 -05:00
< input style = "display: none" type = "file" id = "rom" name = "upload" onclick = "document.getElementById('btnLoad').click();" onchange = "selectFiles(event.target.files)" multiple / >
2016-08-02 23:07:16 -05:00
< button id = "btnStart" onclick = "startRetroArch()" > Start RetroArch< / button >
2016-08-04 01:08:50 -05:00
< button id = "btnAuth" onclick = "dropboxInit()" > Use DropBox< / button >
2016-08-02 23:07:16 -05:00
< / div >
< hr / >
< div class = "webplayer" >
< 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 = "checkbox" id = "sdl2" > < label for = "sdl2" id = "sdl2-label" > Enable SDL2< / 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 = "webplayer" id = "output" rows = "15" > < / textarea >
< hr >
< / body >
< / html >
2016-08-03 20:25:02 -05:00
2016-08-02 23:07:16 -05:00
< script type = 'text/javascript' >
2016-08-03 20:25:02 -05:00
var dropbox = false;
var client = new Dropbox.Client({ key: "il6e10mfd7pgf8r" });
var showError = function(error) {
switch (error.status) {
case Dropbox.ApiError.INVALID_TOKEN:
// If you're using dropbox.js, the only cause behind this error is that
// the user token expired.
// Get the user through the authentication flow again.
break;
case Dropbox.ApiError.NOT_FOUND:
// The file or folder you tried to access is not in the user's Dropbox.
// Handling this error is specific to your application.
break;
case Dropbox.ApiError.OVER_QUOTA:
// The user is over their Dropbox quota.
// Tell them their Dropbox is full. Refreshing the page won't help.
break;
case Dropbox.ApiError.RATE_LIMITED:
// Too many API requests. Tell the user to try again later.
// Long-term, optimize your code to use fewer API calls.
break;
case Dropbox.ApiError.NETWORK_ERROR:
// An error occurred at the XMLHttpRequest layer.
// Most likely, the user's network connection is down.
// API calls will not succeed until the user gets back online.
break;
case Dropbox.ApiError.INVALID_PARAM:
case Dropbox.ApiError.OAUTH_ERROR:
case Dropbox.ApiError.INVALID_METHOD:
default:
// Caused by a bug in dropbox.js, in your application, or in Dropbox.
// Tell the user an error occurred, ask them to refresh the page.
}
};
2016-08-03 01:20:35 -05:00
2016-08-03 20:25:02 -05:00
function dropboxInit()
{
2016-08-04 01:08:50 -05:00
document.getElementById('btnStart').disabled = true;
document.getElementById('btnAuth').disabled = true;
2016-08-03 20:25:02 -05:00
client.authDriver(new Dropbox.AuthDriver.Redirect());
client.authenticate({ rememberUser: true }, function(error, client)
{
if (error)
{
return showError(error);
}
2016-08-04 01:08:50 -05:00
dropboxSync(client, success);
});
}
function success()
{
document.getElementById('btnStart').disabled = false;
console.log("WEBPLAYER: Sync successful");
}
function dropboxSync(dropboxClient, cb)
{
var dbfs = new BrowserFS.FileSystem.Dropbox(dropboxClient);
// Wrap in AsyncMirrorFS.
var asyncMirror = new BrowserFS.FileSystem.AsyncMirror(
new BrowserFS.FileSystem.InMemory(), dbfs);
asyncMirror.initialize(function(err)
{
// Initialize it as the root file system.
BrowserFS.initialize(asyncMirror);
cb();
2016-08-03 20:25:02 -05:00
});
}
var count = 0;
2016-08-03 01:20:35 -05:00
function setupFileSystem()
2016-08-02 23:07:16 -05:00
{
2016-08-04 01:08:50 -05:00
console.log("WEBPLAYER: Initializing Filesystem");
if(!client.isAuthenticated())
2016-08-03 01:20:35 -05:00
{
2016-08-04 01:08:50 -05:00
console.log("WEBPLAYER: Initializing LocalStorage");
if(localStorage.getItem("fs_inited")!="true")
{
var lsfs = new BrowserFS.FileSystem.LocalStorage();
2016-08-03 20:25:02 -05:00
2016-08-04 01:08:50 -05:00
BrowserFS.initialize(lsfs);
var BFS = new BrowserFS.EmscriptenFS();
FS.mount(BFS, {root: '/'}, '/home');
console.log('WEBPLAYER: Filesystem initialized');
}
else
{
console.log('WEBPLAYER: Filesystem already initialized');
}
2016-08-03 01:20:35 -05:00
}
2016-08-02 23:07:16 -05:00
else
2016-08-03 01:20:35 -05:00
{
2016-08-04 01:08:50 -05:00
console.log("WEBPLAYER: Initializing DropBoxFS");
// Grab the BrowserFS Emscripten FS plugin.
var BFS = new BrowserFS.EmscriptenFS();
// Create the folder that we'll turn into a mount point.
FS.createPath(FS.root, 'home', true, true);
// Mount BFS's root folder into the '/data' folder.
console.log('WEBPLAYER: Mounting');
FS.mount(BFS, {root: '/'}, '/home');
console.log('WEBPLAYER: DropBox initialized');
2016-08-03 01:20:35 -05:00
}
}
function setupFolderStructure()
{
FS.createPath('/', '/home/web_user', true, true);
FS.createPath('/', '/home/web_user/.config', true, true);
FS.createPath('/', '/home/web_user/.config/retroarch', true, true);
FS.createPath('/', '/home/web_user/content', true, true);
FS.createPath('/', '/home/web_user/saves', true, true);
FS.createPath('/', '/home/web_user/states', true, true);
FS.createPath('/', '/home/web_user/system', true, true);
}
function stat(path)
{
try{
FS.stat(path);
}
catch(err)
{
console.log("WEBPLAYER: file " + path + " doesn't exist");
return false;
}
return true;
}
function startRetroArch()
{
2016-08-02 23:07:16 -05:00
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';
2016-08-03 01:20:35 -05:00
setupFileSystem();
setupFolderStructure();
cfgFile = '/home/web_user/.config/retroarch/retroarch.cfg'
if (!stat(cfgFile))
{
console.log ("WEBPLAYER: first run, setting defaults");
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';
config += 'system_directory = /home/web_user/system/\n';
config += 'savefile_directory = /home/web_user/saves/\n';
2016-08-03 20:25:02 -05:00
config += 'savestate_directory = /home/web_user/states/\n';
2016-08-03 01:20:35 -05:00
config += 'rgui_browser_directory = /home/web_user/content/\n';
FS.writeFile(cfgFile, config);
}
else
{
console.log ("WEBPLAYER: loading config from " + cfgFile);
}
2016-08-02 23:07:16 -05:00
Module['callMain'](Module['arguments']);
}
2016-08-04 01:08:50 -05:00
2016-08-03 01:20:35 -05:00
function selectFiles(files)
{
count = files.length;
for (var i = 0; i < files.length ; i + + )
{
filereader = new FileReader();
filereader.file_name = files[i].name;
filereader.readAsArrayBuffer(files[i]);
filereader.onload = function(){uploadData(this.result, this.file_name)};
}
}
2016-08-02 23:07:16 -05:00
2016-08-03 01:20:35 -05:00
function uploadData(data,name)
2016-08-02 23:07:16 -05:00
{
var dataView = new Uint8Array(data);
2016-08-03 01:20:35 -05:00
FS.createDataFile('/', name, dataView, true, false);
var data = FS.readFile(name,{ encoding: 'binary' });
FS.writeFile('/home/web_user/content/' + name, data ,{ encoding: 'binary' });
FS.unlink(name);
2016-08-02 23:07:16 -05:00
}
2016-08-03 20:25:02 -05:00
function dropboxCopy()
{
var data = FS.readFile('/home/web_user/.config/retroarch/retroarch.cfg',{ encoding: 'utf8' });
console.log(data);
var dbfs = new BrowserFS.FileSystem.Dropbox(client);
BrowserFS.initialize(dbfs);
var BFS = new BrowserFS.EmscriptenFS();
var fs = BrowserFS.BFSRequire('fs');
fs.writeFile('retroarch.cfg', data ,{ encoding: 'utf8' });
}
2016-08-02 23:07:16 -05:00
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(' ');
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'),
totalDependencies: 0,
monitorRunDependencies: function(left)
{
this.totalDependencies = Math.max(this.totalDependencies, left);
}
};
< / script >
< script type = "text/javascript" src = "browserfs.js" > < / script >
< script type = "text/javascript" src = "gambatte.js" > < / script >
