2013-11-09 23:00:20 -05: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 : 1 px solid black ; }
# fakerom { font-size : 20 pt ; margin : 5 pt ; }
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas . emscripten { border : 0 px 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 20:08:37 +02:00
< button id = "fakerom" onclick = "document.getElementById('rom').click()" > Select content< / button >
2013-11-09 23:00:20 -05: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 20:08:37 +02:00
< script type = "text/javascript" src = "retroarch.js" > < / script >