mirror of
https://github.com/libretro/RetroArch
synced 2025-02-01 09:32:58 +00:00
14c67fde7f
There's a new (undocumented -_-) API for removing event listeners in emscripten now, so use that when recreating input listeners. Fixes mouse events breaking when loading cores.
176 lines
12 KiB
HTML
176 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>RetroArch Web Player</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
|
|
<!-- Material Design Bootstrap -->
|
|
<link href="//cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/css/mdb.min.css" rel="stylesheet">
|
|
|
|
<link href="libretro.css" rel="stylesheet" type="text/css">
|
|
<link rel="shortcut icon" href="media/retroarch.ico" />
|
|
|
|
</head>
|
|
<body>
|
|
<!--Navbar-->
|
|
<nav class="navbar navbar-dark bg-primary">
|
|
<div class="container">
|
|
<!--navbar content-->
|
|
<div class="navbar-toggleable-xs">
|
|
<!--Links-->
|
|
<ul class="nav navbar-nav">
|
|
<div class="dropdown">
|
|
<li class="nav-item dropdown">
|
|
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Core Selection</button>
|
|
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut" id="core-selector">
|
|
<a class="dropdown-item" href="." data-core="2048">2048</a>
|
|
<a class="dropdown-item" href="." data-core="4do">4DO</a>
|
|
<a class="dropdown-item" href="." data-core="bluemsx">BlueMSX</a>
|
|
<a class="dropdown-item" href="." data-core="chailove">ChaiLove</a>
|
|
<a class="dropdown-item" href="." data-core="craft">Craft</a>
|
|
<a class="dropdown-item" href="." data-core="desmume">DeSmuME</a>
|
|
<a class="dropdown-item" href="." data-core="dosbox">DOSBox</a>
|
|
<a class="dropdown-item" href="." data-core="easyrpg">EasyRPG</a>
|
|
<a class="dropdown-item" href="." data-core="fbalpha2012">FB Alpha 2012</a>
|
|
<a class="dropdown-item" href="." data-core="fbalpha2012_cps1">FB Alpha 2012 CPS1</a>
|
|
<a class="dropdown-item" href="." data-core="fbalpha2012_cps2">FB Alpha 2012 CPS2</a>
|
|
<a class="dropdown-item" href="." data-core="fbalpha2012_neo">FB Alpha 2012 NeoGeo</a>
|
|
<a class="dropdown-item" href="." data-core="fceumm">FCEUmm</a>
|
|
<a class="dropdown-item" href="." data-core="ffmpeg">FFmpeg</a>
|
|
<a class="dropdown-item" href="." data-core="gambatte">Gambatte</a>
|
|
<a class="dropdown-item" href="." data-core="gme">Game Music Emu</a>
|
|
<a class="dropdown-item" href="." data-core="genesis_plus_gx">Genesis Plus GX</a>
|
|
<a class="dropdown-item" href="." data-core="glupen64">GLupeN64</a>
|
|
<a class="dropdown-item" href="." data-core="gpsp">gPSP</a>
|
|
<a class="dropdown-item" href="." data-core="handy">Handy</a>
|
|
<a class="dropdown-item" href="." data-core="mame2000">MAME 2000</a>
|
|
<a class="dropdown-item" href="." data-core="mednafen_lynx">Mednafen Lynx</a>
|
|
<a class="dropdown-item" href="." data-core="mednafen_ngp">Mednafen Neo Geo Pocket</a>
|
|
<a class="dropdown-item" href="." data-core="mednafen_pce_fast">Mednafen PC Engine Fast</a>
|
|
<a class="dropdown-item" href="." data-core="mednafen_pcfx">Mednafen/Beetle PCFX</a>
|
|
<a class="dropdown-item" href="." data-core="mednafen_psx">Mednafen/Beetle PSX</a>
|
|
<!--<a class="dropdown-item" href="." data-core="mednafen_saturn">Mednafen/Beetle Saturn</a>-->
|
|
<a class="dropdown-item" href="." data-core="mednafen_snes">Mednafen/Beetle SNES</a>
|
|
<a class="dropdown-item" href="." data-core="mednafen_vb">Mednafen/Beetle Virtual Boy</a>
|
|
<a class="dropdown-item" href="." data-core="mednafen_wswan">Mednafen/Beetle WonderSwan</a>
|
|
<a class="dropdown-item" href="." data-core="mu">Mu</a>
|
|
<a class="dropdown-item" href="." data-core="mupen64plus">Mupen64 Plus</a>
|
|
<a class="dropdown-item" href="." data-core="nestopia">Nestopia</a>
|
|
<a class="dropdown-item" href="." data-core="nxengine">NX Engine</a>
|
|
<a class="dropdown-item" href="." data-core="o2em">O2em</a>
|
|
<a class="dropdown-item" href="." data-core="picodrive">PicoDrive</a>
|
|
<a class="dropdown-item" href="." data-core="prboom">PrBoom</a>
|
|
<a class="dropdown-item" href="." data-core="quicknes">QuickNES</a>
|
|
<a class="dropdown-item" href="." data-core="flycast">Flycast</a>
|
|
<a class="dropdown-item" href="." data-core="snes9x2002">Snes9x 2002</a>
|
|
<a class="dropdown-item" href="." data-core="snes9x2005">Snes9x 2005</a>
|
|
<a class="dropdown-item" href="." data-core="snes9x2010">Snes9x 2010</a>
|
|
<a class="dropdown-item" href="." data-core="snes9x">Snes9x</a>
|
|
<a class="dropdown-item" href="." data-core="squirreljme">SquirrelJME</a>
|
|
<a class="dropdown-item" href="." data-core="stella">Stella</a>
|
|
<a class="dropdown-item" href="." data-core="tgbdual">TGB Dual</a>
|
|
<a class="dropdown-item" href="." data-core="theodore">Theodore (Thomson TO8/TO9)</a>
|
|
<a class="dropdown-item" href="." data-core="tyrquake">TyrQuake</a>
|
|
<a class="dropdown-item" href="." data-core="vba_next">VBA Next</a>
|
|
<a class="dropdown-item" href="." data-core="vecx">Vecx</a>
|
|
<a class="dropdown-item" href="." data-core="virtualjaguar">Virtual Jaguar</a>
|
|
<a class="dropdown-item" href="." data-core="yabause">Yabause</a>
|
|
</div>
|
|
<button class="btn btn-primary disabled" id="btnRun" onclick="startRetroArch()" disabled>
|
|
<span class="fa fa-spinner fa-spin" id="icnRun"></span> Run
|
|
</button>
|
|
<button class="btn btn-primary disabled" id="btnAdd" onclick="document.getElementById('btnRom').click()" disabled>
|
|
<span class="fa fa-plus" id="icnAdd"></span> Add Content
|
|
</button>
|
|
<button class="btn btn-primary tooltip-enable" id="btnClean" onclick="cleanupStorage();" title="Cleanup storage">
|
|
<span class="fa fa-trash-o" id="icnClean"></span> <span class="sr-only">Cleanup</span>
|
|
</button>
|
|
<input class="btn btn-primary disabled" style="display: none" type="file" id="btnRom" name="upload" onclick="document.getElementById('btnAdd').click();" onchange="selectFiles(event.target.files)" multiple />
|
|
<button class="btn btn-primary disabled tooltip-enable" id="btnMenu" onclick="keyPress('F1');" title="Menu toggle" disabled>
|
|
<span class="fa fa-bars" id="btnMenu"></span> <span class="sr-only">Menu</span>
|
|
</button>
|
|
<button class="btn btn-primary disabled tooltip-enable" id="btnFullscreen" onclick="Module.requestFullscreen(false)" title="Fullscreen" disabled>
|
|
<span class="fa fa-desktop" id="icnAdd"></span> <span class="sr-only">Fullscreen</span>
|
|
</button>
|
|
</button>
|
|
<button type="button" class="btn btn-primary tooltip-enable" data-toggle="modal" data-target="#helpModal">Help</button>
|
|
</li>
|
|
</div>
|
|
</ul>
|
|
<div class="toggleMenu">
|
|
<button class="btn btn-primary" id="btnHideMenu" title="Toggle Menu">
|
|
<span class="fa fa-chevron-up" id="icnHideMenu"></span> <span class="sr-only">Hide Top Navigation</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Basics steps modal for Web Libretro -->
|
|
<div class="modal fade" id="helpModal" role="dialog" style="color:black;">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
<h1 class="modal-title">Basics</h1>
|
|
</div>
|
|
<div class="modal-body">
|
|
<h3><b>Load Core</b></h3>
|
|
<p>Load your core by clicking on the first tab. Scroll down until you reach the desired Core. We will use Nestopia for now. Don't forget - Content must be compatible with the matched Core.</p>
|
|
<li>Nes: <i>NESTOPIA</i></li>
|
|
<li>Game Boy / Color: <i>Gambatte</i></li>
|
|
</ul>
|
|
<p>etc.</p>
|
|
<p></p>
|
|
<h3><b>Load Content</b></h3>
|
|
<p>After selecting Core, click Run. After RetroArch opens, click Add Content and select your compatible ROM.</p>
|
|
<li>Nestopia > <i>YourGame.nes</i></li>
|
|
<li>Gambatte > <i>YourGame.gbc</i></li>
|
|
</ul>
|
|
<p>etc.</p>
|
|
<p></p>
|
|
<h3><b><span class="fa fa-trash-o"></span> Cleanup Storage</b></h3>
|
|
<p>The trashcan erases your existing configuration and presets. If the Web Player doesn't start, you should click the trashcan and refresh the cache in your browser (usually F5 or Shift+F5).</p>
|
|
<p></p>
|
|
<h3><b><span class="fa fa-bars"></span> Quick Menu</b></h3>
|
|
<p>If you click on the three line icons, the Quick Menu will open here as in RetroArch.</p>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.navbar content-->
|
|
</div>
|
|
</nav>
|
|
<div class="bg-inverse webplayer-container">
|
|
<div class="webplayer_border text-xs-center" id="canvas_div">
|
|
<div class="showMenu">
|
|
<button type="button" class="btn btn-link">
|
|
<span class="fa fa-chevron-down" id="icnShowMenu"></span> <span class="sr-only">Show Top Navigation</span>
|
|
</button>
|
|
</div>
|
|
<canvas class="webplayer" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()" style="display: none"></canvas>
|
|
<img class="webplayer-preview img-fluid" src="media/canvas.png" width="960px" height="720px" alt="RetroArch Logo">
|
|
</div>
|
|
</div>
|
|
|
|
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
|
|
<script src="//rawgit.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.4/js/tether.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
|
|
<script src="analytics.js"></script>
|
|
<!--script src="//wzrd.in/standalone/browserfs@0.6.1"></script-->
|
|
<script src="browserfs.min.js"></script>
|
|
<script src="libretro.js"></script>
|
|
<div align="center">
|
|
<a href="https://www.patreon.com/libretro">
|
|
<img src="https://patreon_public_assets.s3.amazonaws.com/sized/becomeAPatronBanner.png" width="350" height="116"></a>
|
|
</div>
|
|
</body>
|
|
</html>
|