mirror of
https://github.com/libretro/RetroArch
synced 2025-02-02 14:54:10 +00:00
295 lines
10 KiB
HTML
295 lines
10 KiB
HTML
<!doctype html>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js">
|
|
</script>
|
|
|
|
|
|
|
|
<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>
|
|
<input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('btnLoad').click();" onchange="selectFiles(event.target.files)" multiple />
|
|
<button id="btnStart" onclick="startRetroArch()">Start RetroArch</button>
|
|
<button id="btnAuth" onclick="dropboxInit()">Use DropBox</button>
|
|
</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>
|
|
|
|
<script type='text/javascript'>
|
|
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.
|
|
}
|
|
};
|
|
|
|
function dropboxInit()
|
|
{
|
|
document.getElementById('btnStart').disabled = true;
|
|
document.getElementById('btnAuth').disabled = true;
|
|
client.authDriver(new Dropbox.AuthDriver.Redirect());
|
|
client.authenticate({ rememberUser: true }, function(error, client)
|
|
{
|
|
if (error)
|
|
{
|
|
return showError(error);
|
|
}
|
|
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();
|
|
});
|
|
}
|
|
|
|
var count = 0;
|
|
function setupFileSystem()
|
|
{
|
|
console.log("WEBPLAYER: Initializing Filesystem");
|
|
if(!client.isAuthenticated())
|
|
{
|
|
console.log("WEBPLAYER: Initializing LocalStorage");
|
|
if(localStorage.getItem("fs_inited")!="true")
|
|
{
|
|
var lsfs = new BrowserFS.FileSystem.LocalStorage();
|
|
|
|
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');
|
|
}
|
|
}
|
|
else
|
|
{
|
|
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');
|
|
}
|
|
}
|
|
|
|
|
|
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()
|
|
{
|
|
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';
|
|
|
|
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';
|
|
config += 'savestate_directory = /home/web_user/states/\n';
|
|
config += 'rgui_browser_directory = /home/web_user/content/\n';
|
|
|
|
FS.writeFile(cfgFile, config);
|
|
}
|
|
else
|
|
{
|
|
console.log ("WEBPLAYER: loading config from " + cfgFile);
|
|
}
|
|
Module['callMain'](Module['arguments']);
|
|
}
|
|
|
|
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)};
|
|
}
|
|
}
|
|
|
|
function uploadData(data,name)
|
|
{
|
|
var dataView = new Uint8Array(data);
|
|
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);
|
|
|
|
}
|
|
|
|
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' });
|
|
}
|
|
|
|
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> |