| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
| <title>GBA.js - Touch Controls</title> |
| <link rel="stylesheet" href="resources/main.css"> |
|
|
| <style> |
| body { |
| margin: 0; |
| padding: 0; |
| background: #000; |
| overflow: hidden; |
| height: 100vh; |
| touch-action: none; |
| } |
| |
| #screen { |
| image-rendering: pixelated; |
| image-rendering: crisp-edges; |
| width: 100%; |
| height: auto; |
| max-height: 100vh; |
| display: block; |
| margin: 0 auto; |
| } |
| |
| .touch-controls { |
| position: absolute; |
| inset: 0; |
| pointer-events: none; |
| z-index: 10; |
| touch-action: none; |
| user-select: none; |
| display: none; |
| } |
| |
| .dpad, .face { |
| position: absolute; |
| bottom: 8%; |
| pointer-events: auto; |
| } |
| |
| .dpad { |
| left: 5%; |
| width: 160px; |
| height: 160px; |
| } |
| |
| .face { |
| right: 5%; |
| width: 200px; |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 12px; |
| } |
| |
| .ctrl-btn { |
| background: rgba(140,140,140,0.4); |
| border: 3px solid rgba(240,240,240,0.65); |
| border-radius: 50%; |
| color: white; |
| font-weight: bold; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.2rem; |
| box-shadow: 0 3px 12px rgba(0,0,0,0.5); |
| transition: all 0.1s ease; |
| } |
| |
| .ctrl-btn:active, |
| .ctrl-btn.pressed { |
| transform: scale(0.88); |
| opacity: 0.7; |
| background: rgba(220,220,220,0.65); |
| } |
| |
| |
| #up { width:70px; height:70px; position:absolute; left:45px; top:0; border-radius:14px 14px 50% 50%; } |
| #down { width:70px; height:70px; position:absolute; left:45px; bottom:0; border-radius:50% 50% 14px 14px; } |
| #left { width:70px; height:70px; position:absolute; top:45px; left:0; border-radius:14px 50% 50% 14px; } |
| #right { width:70px; height:70px; position:absolute; top:45px; right:0; border-radius:50% 14px 14px 50%; } |
| #center{ width:70px; height:70px; position:absolute; left:45px; top:45px; background:transparent; border:none; pointer-events:none; } |
| |
| |
| #a { background:rgba(0,200,0,0.55); grid-column:3; grid-row:2; border-radius:50%; width:80px; height:80px; font-size:1.6rem; } |
| #b { background:rgba(220,0,0,0.55); grid-column:2; grid-row:3; border-radius:50%; width:80px; height:80px; font-size:1.6rem; } |
| #l { background:rgba(80,80,255,0.55); grid-column:1; grid-row:1; width:70px; height:55px; border-radius:12px; font-size:1.1rem; } |
| #r { background:rgba(80,80,255,0.55); grid-column:3; grid-row:1; width:70px; height:55px; border-radius:12px; font-size:1.1rem; } |
| #start { background:rgba(220,220,60,0.65); grid-column:2/4; grid-row:1; width:auto; height:50px; border-radius:12px; font-size:1rem; } |
| #select{ background:rgba(220,220,60,0.65); grid-column:1/3; grid-row:1; width:auto; height:50px; border-radius:12px; font-size:1rem; } |
| |
| @media (orientation: landscape) and (min-width: 900px) { |
| .touch-controls { display: none !important; } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <canvas id="screen" width="480" height="320"></canvas> |
|
|
| <div id="touch-controls" class="touch-controls"> |
| |
| <div class="dpad"> |
| <div id="up" class="ctrl-btn" data-bit="6"></div> |
| <div id="down" class="ctrl-btn" data-bit="7"></div> |
| <div id="left" class="ctrl-btn" data-bit="5"></div> |
| <div id="right" class="ctrl-btn" data-bit="4"></div> |
| <div id="center"></div> |
| </div> |
|
|
| |
| <div class="face"> |
| <div id="l" class="ctrl-btn" data-bit="9">L</div> |
| <div id="select" class="ctrl-btn" data-bit="2">Select</div> |
| <div id="start" class="ctrl-btn" data-bit="3">Start</div> |
| <div id="r" class="ctrl-btn" data-bit="8">R</div> |
| <div id="b" class="ctrl-btn" data-bit="1">B</div> |
| <div id="a" class="ctrl-btn" data-bit="0">A</div> |
| </div> |
| </div> |
|
|
| <section id="controls"> |
| <div id="preload"> |
| <button class="bigbutton" id="select" onclick="document.getElementById('loader').click()">SELECT</button> |
| <input id="loader" type="file" accept=".gba" onchange="run(this.files[0]);"> |
| <button onclick="document.getElementById('saveloader').click()">Upload Savegame</button> |
| <input id="saveloader" type="file" onchange="uploadSavedataPending(this.files[0]);"> |
| </div> |
| <div id="ingame" class="hidden"> |
| <button id="pause" class="bigbutton" onclick="togglePause()">PAUSE</button> |
| <button class="bigbutton" onclick="reset()">RESET</button> |
| <button onclick="gba.downloadSavedata()">Download Savegame</button> |
| <button onclick="screenshot()">Screenshot</button> |
| <label id="pixelated"> |
| <input type="checkbox" onchange="setPixelated(this.checked)"> |
| <p>Pixelated</p> |
| </label> |
| <div id="sound"> |
| <input type="checkbox" checked onchange="gba.audio.masterEnable = this.checked"> |
| <p>Sound</p> |
| <input type="range" min="0" max="1" value="1" step="any" onchange="setVolume(this.value)" oninput="setVolume(this.value)"> |
| </div> |
| <p id="openDebug" onclick="enableDebug()">Debugger</p> |
| </div> |
| </section> |
|
|
| <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; |
| var runCommands = []; |
| var debug = null; |
| |
| try { |
| gba = new GameBoyAdvance(); |
| gba.keypad.eatInput = true; |
| gba.setLogger(function(level, error) { |
| console.log(error); |
| gba.pause(); |
| var screen = document.getElementById('screen'); |
| if (screen.getAttribute('class') == 'dead') return; |
| var crash = document.createElement('img'); |
| crash.id = 'crash'; |
| crash.src = 'resources/crash.png'; |
| screen.parentElement.insertBefore(crash, screen); |
| screen.className = 'dead'; |
| }); |
| } catch (e) { |
| gba = null; |
| } |
| |
| window.onload = function() { |
| if (gba && FileReader) { |
| var canvas = document.getElementById('screen'); |
| gba.setCanvas(canvas); |
| gba.logLevel = gba.LOG_ERROR; |
| |
| |
| |
| |
| if (!gba.audio.context) { |
| var soundbox = document.getElementById('sound'); |
| if (soundbox && soundbox.parentElement) soundbox.parentElement.removeChild(soundbox); |
| } |
| } else { |
| var dead = document.getElementById('controls'); |
| if (dead && dead.parentElement) dead.parentElement.removeChild(dead); |
| } |
| }; |
| |
| |
| |
| |
| |
| function fadeOut(id, nextId, kill) { |
| var e = document.getElementById(id); |
| var e2 = document.getElementById(nextId); |
| if (!e) return; |
| |
| var removeSelf = function() { |
| if (kill) e.parentElement?.removeChild(e); |
| else { |
| e.className = 'dead'; |
| e.removeEventListener('transitionend', removeSelf); |
| } |
| if (e2) { |
| e2.className = 'hidden'; |
| setTimeout(() => e2.removeAttribute('class'), 0); |
| } |
| }; |
| |
| e.addEventListener('transitionend', removeSelf); |
| e.className = 'hidden'; |
| } |
| |
| function run(file) { |
| document.getElementById('loader').value = ''; |
| var load = document.getElementById('select'); |
| load.textContent = 'Loading...'; |
| load.removeAttribute('onclick'); |
| var pause = document.getElementById('pause'); |
| pause.textContent = "PAUSE"; |
| |
| gba.loadRomFromFile(file, function(result) { |
| if (result) { |
| runCommands.forEach(cmd => cmd()); |
| runCommands = []; |
| fadeOut('preload', 'ingame'); |
| fadeOut('instructions', null, true); |
| gba.runStable(); |
| |
| |
| document.getElementById('touch-controls').style.display = 'block'; |
| } else { |
| load.textContent = 'FAILED'; |
| setTimeout(() => { |
| load.textContent = 'SELECT'; |
| load.onclick = () => document.getElementById('loader').click(); |
| }, 3000); |
| } |
| }); |
| } |
| |
| |
| |
| |
| |
| |
| |
| if ('ontouchstart' in window || navigator.maxTouchPoints > 0) { |
| if (gba?.keypad) { |
| const keypad = gba.keypad; |
| const pressed = new Set(); |
| |
| document.querySelectorAll('.ctrl-btn[data-bit]').forEach(el => { |
| const bit = parseInt(el.dataset.bit, 10); |
| const toggle = 1 << bit; |
| |
| const press = () => { |
| if (!pressed.has(el.id)) { |
| pressed.add(el.id); |
| keypad.currentDown &= ~toggle; |
| } |
| el.classList.add('pressed'); |
| }; |
| |
| const release = () => { |
| if (pressed.has(el.id)) { |
| pressed.delete(el.id); |
| keypad.currentDown |= toggle; |
| } |
| el.classList.remove('pressed'); |
| }; |
| |
| el.addEventListener('touchstart', e => { e.preventDefault(); press(); }, { passive: false }); |
| el.addEventListener('touchend', e => { e.preventDefault(); release(); }, { passive: false }); |
| el.addEventListener('touchcancel',e => { e.preventDefault(); release(); }, { passive: false }); |
| }); |
| |
| console.log("Touch controls activated (direct keypad mode)"); |
| } else { |
| console.warn("gba.keypad not available → touch controls disabled"); |
| } |
| } |
| </script> |
| </body> |
| </html> |
