mirror of
https://github.com/libretro/RetroArch.git
synced 2024-10-08 15:13:24 +00:00
156 lines
6.7 KiB
HTML
156 lines
6.7 KiB
HTML
<!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 content</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>
|