forked from antoinebou12/retroarch-web-games
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
272 lines (267 loc) · 18.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<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.20.0/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 style="background: black;">
<!--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">
GearBoy
</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="arduous">Arduous</a>
<a class="dropdown-item" href="." data-core="bk">BK</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 (not working)</a>
<a class="dropdown-item" href="." data-core="dosbox">DOSBox (not working)</a>
<a class="dropdown-item" href="." data-core="easyrpg">EasyRPG (not working)</a>
<a class="dropdown-item" href="." data-core="ecwolf">ECWolf</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 (not
working)</a>
<a class="dropdown-item" href="." data-core="fceumm">FCEUmm</a>
<a class="dropdown-item" href="." data-core="ffmpeg">FFmpeg (not working)</a>
<a class="dropdown-item" href="." data-core="freechaf">FreeChaF</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 active" href="." data-core="gearboy">GearBoy (Gameboy)</a>
<a class="dropdown-item" href="." data-core="gearcoleco">GearColeco</a>
<a class="dropdown-item" href="." data-core="gearsystem">GearSystem</a>
<a class="dropdown-item" href="." data-core="genesis_plus_gx">Genesis Plus GX</a>
<a class="dropdown-item" href="." data-core="genesis_plus_gx_wide">Genesis Plus GX Wide</a>
<a class="dropdown-item" href="." data-core="glupen64">GLupeN64 (not working)</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="jaxe">JAXE</a>
<a class="dropdown-item" href="." data-core="jumpnbump">Jump 'n Bump</a>
<a class="dropdown-item" href="." data-core="lowresnx">LowResNX</a>
<a class="dropdown-item" href="." data-core="lutro">Lutro</a>
<a class="dropdown-item" href="." data-core="mame2000">MAME 2000</a>
<a class="dropdown-item" href="." data-core="mame2003">MAME 2003</a>
<a class="dropdown-item" href="." data-core="mame2003_plus">MAME 2003-Plus</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 (not working)</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="mgba">Mgba</a>
<a class="dropdown-item" href="." data-core="minivmac">MiniVmac</a>
<a class="dropdown-item" href="." data-core="mu">Mu</a>
<a class="dropdown-item" href="." data-core="mupen64plus">Mupen64 Plus (not working)</a>
<a class="dropdown-item" href="." data-core="mrboom">MrBoom</a>
<a class="dropdown-item" href="." data-core="nestopia">Nestopia (NES)</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="opera">Opera</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="quasi88">Quasi88</a>
<a class="dropdown-item" href="." data-core="quicknes">QuickNES</a>
<a class="dropdown-item" href="." data-core="retro8">Retro8</a>
<a class="dropdown-item" href="." data-core="flycast">Flycast (not working)</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 (SNES)</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="tic80">TIC-80</a>
<a class="dropdown-item" href="." data-core="tyrquake">TyrQuake</a>
<a class="dropdown-item" href="." data-core="uzem">UZEM</a>
<a class="dropdown-item" href="." data-core="vaporspec">Vaporspec</a>
<a class="dropdown-item" href="." data-core="vba_next">VBA Next (Gameboy Advance)</a>
<a class="dropdown-item" href="." data-core="vecx">Vecx</a>
<a class="dropdown-item" href="." data-core="vice_x64">VICE x64</a>
<a class="dropdown-item" href="." data-core="vice_x64sc">VICE x64sc</a>
<a class="dropdown-item" href="." data-core="vice_x128">VICE x128</a>
<a class="dropdown-item" href="." data-core="vice_xcbm2">VICE xcbm2</a>
<a class="dropdown-item" href="." data-core="vice_xcbm5x0">VICE xcbm5x0</a>
<a class="dropdown-item" href="." data-core="vice_xpet">VICE xPET</a>
<a class="dropdown-item" href="." data-core="vice_xplus4">VICE xPlus4</a>
<a class="dropdown-item" href="." data-core="vice_xscpu64">VICE xscpu4</a>
<a class="dropdown-item" href="." data-core="vice_xvic">VICE xVIC</a>
<a class="dropdown-item" href="." data-core="vitaquake2">Vita Quake2</a>
<a class="dropdown-item" href="." data-core="vitaquake2-roque">Vita Quake2 (rogue)</a>
<a class="dropdown-item" href="." data-core="vitaquake2-xatrix">Vita Quake2 (xatrix)</a>
<a class="dropdown-item" href="." data-core="vitaquake2-zaero">Vita Quake2 (zaero)</a>
<a class="dropdown-item" href="." data-core="virtualjaguar">Virtual Jaguar</a>
<a class="dropdown-item" href="." data-core="wasm4">WASM4</a>
<a class="dropdown-item" href="." data-core="x1">XMillenium</a>
<a class="dropdown-item" href="." data-core="xrick">XRick</a>
<a class="dropdown-item" href="." data-core="yabause">Yabause (not working)</a>
</div>
<button class="btn btn-primary" id="btnRun" onclick="startRetroArch()">
<span class="fa fa-play" 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=""
data-original-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="" disabled="" data-original-title="Menu toggle">
<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="" disabled="" data-original-title="Fullscreen">
<span class="fa fa-desktop" id="icnAdd"></span>
<span class="sr-only">Fullscreen</span>
</button>
<button type="button" class="btn btn-primary tooltip-enable" data-toggle="modal"
data-target="#helpModal" data-original-title="" title="">
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 in" id="helpModal" role="dialog" style="color: black; display: block;">
<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.
Here's a list of some of the available cores:</p>
<div style="max-height: 200px; overflow-y: scroll;">
<ul>
<li>NES: Nestopia</li>
<li>Game Boy / Color: Gambatte</li>
<li>Super Nintendo: Snes9x</li>
<li>Sega Genesis: Genesis Plus GX</li>
<li>PlayStation: Beetle PSX</li>
<li>Nintendo 64: Mupen64 Plus</li>
<li>2048: 2048 Puzzle Game</li>
<li>Arduous: Arduboy</li>
<li>BK: Elektronika BK</li>
<li>BlueMSX: MSX/MSX2</li>
<li>ChaiLove: ChaiLove Game Framework</li>
<li>Craft: Minecraft-like game for libretro</li>
<li>DeSmuME: Nintendo DS</li>
<li>DOSBox: MS-DOS</li>
<li>EasyRPG: RPG Maker 2000/2003</li>
<li>ECWolf: Wolfenstein 3D</li>
<li>FB Alpha 2012: Arcade games (various)</li>
<li>FB Alpha 2012 CPS1: Capcom Play System 1</li>
<li>FB Alpha 2012 CPS2: Capcom Play System 2</li>
<li>FB Alpha 2012 NeoGeo: Neo Geo</li>
<li>FCEUmm: Nintendo Entertainment System</li>
<li>FFmpeg: Multimedia (Video, Audio)</li>
<li>FreeChaF: Fairchild Channel F</li>
<li>Game Music Emu: Game music player</li>
<li>GearBoy: Game Boy / Game Boy Color</li>
<li>GearColeco: ColecoVision</li>
<li>GearSystem: Sega Master System / Game Gear</li>
<li>Genesis Plus GX: Sega Genesis / Mega Drive</li>
<li>Genesis Plus GX Wide: Sega Genesis / Mega Drive (wide aspect ratio)</li>
<li>GLupeN64: Nintendo 64</li>
<li>Handy: Atari Lynx</li>
<li>JAXE: JAXE Engine</li>
<li>Jump 'n Bump: Jump 'n Bump game</li>
<li>LowResNX: LowRes NX Game Creator</li>
<li>Lutro: Lua game framework</li>
<li>MAME 2000: Arcade games (various)</li>
<li>MAME 2003: Arcade games (various)</li>
</ul>
</div>
<p>Remember that the content must be compatible with the matched Core.</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>
<ul>
<li>Nestopia > YourGame.nes</li>
<li>Gambatte > YourGame.gbc</li>
<li>Snes9x > YourGame.smc</li>
<li>Genesis Plus GX > YourGame.md</li>
<li>Beetle PSX > YourGame.cue</li>
<li>Mupen64 Plus > YourGame.z64</li>
<li>etc.</li>
</ul>
<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>
<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-->
</nav>
<div class="bg-inverse webplayer-container">
<div class="webplayer_border text-xs-center" id="canvas_div">
<div class="showMenu" style="display: none">
<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 loaded" 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="//wzrd.in/standalone/[email protected]"></script-->
<script src="browserfs.min.js"></script>
<script src="libretro.js"></script>
</body>
</html>