| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
| <title>GBA.js - Mobile Controller</title> |
| <link rel="stylesheet" href="resources/main.css"> |
| <style> |
| |
| body, html { |
| margin: 0; |
| padding: 0; |
| width: 100%; |
| height: 100%; |
| background-color: #000; |
| overflow: hidden; |
| display: flex; |
| flex-direction: column; |
| font-family: sans-serif; |
| touch-action: none; |
| } |
| |
| |
| #controls { |
| width: 100%; |
| background: #1a1a1a; |
| padding: 12px 0; |
| display: flex; |
| justify-content: space-evenly; |
| align-items: center; |
| border-bottom: 2px solid #333; |
| z-index: 100; |
| } |
| |
| |
| .top-btn { |
| background: #333; |
| color: #0f0; |
| border: 1px solid #444; |
| padding: 10px 0; |
| font-family: monospace; |
| border-radius: 20px; |
| text-transform: uppercase; |
| font-size: 11px; |
| font-weight: bold; |
| width: 28%; |
| box-shadow: 0 3px #000; |
| text-align: center; |
| } |
| |
| .top-btn:active { |
| transform: translateY(2px); |
| box-shadow: 0 1px #000; |
| } |
| |
| |
| #screen-container { |
| width: 100%; |
| flex: 0 0 auto; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| background: #000; |
| } |
| |
| #screen { |
| width: 100vw; |
| height: auto; |
| max-height: 40vh; |
| aspect-ratio: 3 / 2; |
| image-rendering: pixelated; |
| background: #000; |
| display: block; |
| } |
| |
| |
| #touchControls { |
| flex: 1; |
| display: block !important; |
| position: relative; |
| width: 100%; |
| box-sizing: border-box; |
| user-select: none; |
| -webkit-user-select: none; |
| } |
| |
| .ctrl-btn { |
| position: absolute; |
| background: rgba(85, 85, 85, 0.9); |
| border: none; |
| color: #fff; |
| font-weight: bold; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| pointer-events: auto; |
| box-shadow: 0 6px #222; |
| touch-action: manipulation; |
| } |
| |
| .ctrl-btn:active { |
| background: #777; |
| transform: translateY(4px); |
| box-shadow: 0 2px #111; |
| } |
| |
| |
| #dpad { |
| position: absolute; |
| bottom: 15%; |
| left: 5vw; |
| width: 45vw; |
| max-width: 240px; |
| aspect-ratio: 1 / 1; |
| } |
| |
| #up { top: 0; left: 33%; width: 34%; height: 38%; border-radius: 10px 10px 0 0; } |
| #down { bottom: 0; left: 33%; width: 34%; height: 38%; border-radius: 0 0 10px 10px; } |
| #left { top: 33%; left: 0; width: 38%; height: 34%; border-radius: 10px 0 0 10px; } |
| #right { top: 33%; right: 0; width: 38%; height: 34%; border-radius: 0 10px 10px 0; } |
| #center-block { position: absolute; top: 33%; left: 33%; width: 34%; height: 34%; background: rgba(85, 85, 85, 0.9); } |
| |
| |
| #action-cluster { |
| position: absolute; |
| bottom: 15%; |
| right: 5vw; |
| width: 45vw; |
| max-width: 260px; |
| height: 40vw; |
| max-height: 220px; |
| } |
| |
| .round-btn { |
| width: 22vw; |
| height: 22vw; |
| max-width: 105px; |
| max-height: 105px; |
| border-radius: 50%; |
| font-size: 28px; |
| } |
| #a { top: 0; right: 0; background: #c33; border: 2px solid #a22; } |
| #b { bottom: 0; left: 0; background: #cc3; color: #000; border: 2px solid #aa2; } |
| |
| |
| #l { top: 10px; left: 5vw; width: 22vw; height: 45px; border-radius: 8px; max-width: 120px; } |
| #r { top: 10px; right: 5vw; width: 22vw; height: 45px; border-radius: 8px; max-width: 120px; } |
| |
| .hidden { display: none !important; } |
| </style> |
|
|
| <script src="js/util.js"></script> |
| <script src="js/core.js"></script> |
| <script src="js/arm.js"></script> |
| <script src="js/thumb.js"></script> |
| <script src="js/mmu.js"></script> |
| <script src="js/io.js"></script> |
| <script src="js/audio.js"></script> |
| <script src="js/video.js"></script> |
| <script src="js/video/proxy.js"></script> |
| <script src="js/video/software.js"></script> |
| <script src="js/irq.js"></script> |
| <script src="js/keypad.js"></script> |
| <script src="js/sio.js"></script> |
| <script src="js/savedata.js"></script> |
| <script src="js/gpio.js"></script> |
| <script src="js/gba.js"></script> |
| <script src="resources/xhr.js"></script> |
|
|
| <script> |
| var gba; |
| try { |
| gba = new GameBoyAdvance(); |
| gba.keypad.eatInput = true; |
| } catch (exception) { gba = null; } |
| |
| window.onload = function() { |
| if (gba) { |
| var canvas = document.getElementById('screen'); |
| gba.setCanvas(canvas); |
| loadRom('resources/bios.bin', function(bios) { gba.setBios(bios); }); |
| setupTouchControls(); |
| } |
| } |
| |
| function run(file) { |
| gba.loadRomFromFile(file, function(result) { |
| if (result) { |
| document.getElementById('preload').classList.add('hidden'); |
| document.getElementById('ingame').classList.remove('hidden'); |
| gba.runStable(); |
| } |
| }); |
| } |
| |
| function setupTouchControls() { |
| function press(c) { window.dispatchEvent(new KeyboardEvent('keydown', {keyCode: c})); } |
| function release(c) { window.dispatchEvent(new KeyboardEvent('keyup', {keyCode: c})); } |
| |
| const map = { |
| 'up': 38, 'down': 40, 'left': 37, 'right': 39, |
| 'a': 88, 'b': 90, 'l': 65, 'r': 83, |
| 'start': 13, 'select': 16 |
| }; |
| |
| Object.keys(map).forEach(id => { |
| const el = document.getElementById(id); |
| if(el) { |
| el.addEventListener('touchstart', (e) => { e.preventDefault(); press(map[id]); }, {passive: false}); |
| el.addEventListener('touchend', (e) => { e.preventDefault(); release(map[id]); }, {passive: false}); |
| } |
| }); |
| } |
| </script> |
| </head> |
| <body> |
|
|
| <section id="controls"> |
| <button id="select" class="top-btn">SELECT</button> |
| |
| <div id="preload" style="width: 28%; display: flex;"> |
| <button class="top-btn" style="width: 100%;" onclick="document.getElementById('loader').click()">ROM</button> |
| <input id="loader" type="file" accept=".gba" onchange="run(this.files[0]);" style="display:none"> |
| </div> |
| |
| <div id="ingame" class="hidden" style="width: 28%;"> |
| <button class="top-btn" style="width: 100%;" onclick="gba.pause()">PAUSE</button> |
| </div> |
|
|
| <button id="start" class="top-btn">START</button> |
| </section> |
|
|
| <div id="screen-container"> |
| <div style="color:#0f0; font-family:monospace; padding: 2px 0; font-size: 10px; font-weight: bold;">GBA.js ACTIVE</div> |
| <canvas id="screen" width="480" height="320"></canvas> |
| </div> |
|
|
| <div id="touchControls"> |
| <div id="dpad"> |
| <button id="up" class="ctrl-btn">↑</button> |
| <button id="left" class="ctrl-btn">←</button> |
| <div id="center-block"></div> |
| <button id="right" class="ctrl-btn">→</button> |
| <button id="down" class="ctrl-btn">↓</button> |
| </div> |
|
|
| <div id="action-cluster"> |
| <button id="b" class="ctrl-btn round-btn">B</button> |
| <button id="a" class="ctrl-btn round-btn">A</button> |
| </div> |
|
|
| <button id="l" class="ctrl-btn">L</button> |
| <button id="r" class="ctrl-btn">R</button> |
| </div> |
|
|
| </body> |
| </html> |
|
|
