inde.html

<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</title>
<link rel="stylesheet" href="resources/main.css">
<style>
	/* TOUCH CONTROL STYLES */
	#touch-controls {
		display: none; /* Only show on touch devices */
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 260px; /* Increased height to move buttons up */
		user-select: none;
		-webkit-user-select: none;
		touch-action: none;
		z-index: 99999;
	}

	.t-btn {
		position: absolute;
		background: rgba(255, 255, 255, 0.2);
		border: 2px solid rgba(255, 255, 255, 0.4);
		border-radius: 50%;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-family: sans-serif;
		box-shadow: 0 4px 6px rgba(0,0,0,0.3);
		touch-action: none;
	}

	.t-btn:active { background: rgba(255, 255, 255, 0.5); transform: scale(0.9); }

	/* D-PAD Positioning */
	#t-up    { bottom: 160px; left: 70px;  width: 60px; height: 60px; }
	#t-down  { bottom: 40px;  left: 70px;  width: 60px; height: 60px; }
	#t-left  { bottom: 100px; left: 10px;  width: 60px; height: 60px; }
	#t-right { bottom: 100px; left: 130px; width: 60px; height: 60px; }

	/* Action Buttons */
	#t-a { bottom: 110px; right: 20px; width: 80px; height: 80px; background: rgba(255, 0, 0, 0.3); }
	#t-b { bottom: 60px; right: 110px; width: 80px; height: 80px; background: rgba(255, 255, 0, 0.3); }

	/* FIX 2: Moved Start/Select higher (60px) to avoid phone gesture bars */
	.menu-btn { width: 75px; height: 35px; border-radius: 5px; font-size: 12px; bottom: 60px; }
	#t-select { left: 50%; margin-left: -85px; }
	#t-start  { left: 50%; margin-left: 10px; }

	@media (pointer: coarse) {
		#touch-controls { display: block; }
		#controls { padding-bottom: 260px; }
		#screen { width: 100vw !important; height: auto !important; max-width: 480px; }
	}
</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;
var runCommands = [];

try {
	gba = new GameBoyAdvance();
	gba.keypad.eatInput = true;
} catch (exception) {
	gba = null;
}

window.onload = function() {
	if (gba && FileReader) {
		var canvas = document.getElementById('screen');
		gba.setCanvas(canvas);
		loadRom('resources/bios.bin', function(bios) {
			gba.setBios(bios);
		});
		
		// Initialize the gamepad
		initTouchGamepad();
	}
}

function initTouchGamepad() {
	// GBA Key Constants: A=0, B=1, SELECT=2, START=3, RIGHT=4, LEFT=5, UP=6, DOWN=7
	const map = {
		't-a': 0, 't-b': 1, 't-select': 2, 't-start': 3,
		't-right': 4, 't-left': 5, 't-up': 6, 't-down': 7
	};

	Object.keys(map).forEach(id => {
		const el = document.getElementById(id);
		if (!el) return;

		const keyCode = map[id];

		const press = (e) => {
			e.preventDefault();
			// Fix for iOS Audio
			if (gba.audio.context && gba.audio.context.state === 'suspended') {
				gba.audio.context.resume();
			}
			gba.keypad.keydown(keyCode);
		};

		const release = (e) => {
			e.preventDefault();
			gba.keypad.keyup(keyCode);
		};

		el.addEventListener('touchstart', press, {passive: false});
		el.addEventListener('touchend', release, {passive: false});
		el.addEventListener('mousedown', press);
		el.addEventListener('mouseup', release);
	});
}

function run(file) {
	gba.loadRomFromFile(file, function(result) {
		if (result) {
			for (var i = 0; i < runCommands.length; ++i) { runCommands[i](); }
			runCommands = [];
			document.getElementById('preload').style.display = 'none';
			document.getElementById('ingame').classList.remove('hidden');
			gba.runStable();
		}
	});
}

function reset() {
	gba.pause();
	gba.reset();
	gba.runStable();
}

function togglePause() {
	var e = document.getElementById('pause');
	if (gba.paused) { gba.runStable(); e.textContent = "PAUSE"; } 
	else { gba.pause(); e.textContent = "UNPAUSE"; }
}
</script>
</head>
<body>
<canvas id="screen" width="480" height="320"></canvas>

<div id="touch-controls">
	<div class="t-btn" id="t-up">▲</div>
	<div class="t-btn" id="t-down">▼</div>
	<div class="t-btn" id="t-left">◀</div>
	<div class="t-btn" id="t-right">▶</div>

	<div class="t-btn" id="t-a">A</div>
	<div class="t-btn" id="t-b">B</div>

	<div class="t-btn menu-btn" id="t-select">SELECT</div>
	<div class="t-btn menu-btn" id="t-start">START</div>
</div>

<section id="controls">
	<div id="preload">
		<button class="bigbutton" id="select" onclick="document.getElementById('loader').click()">SELECT ROM</button>
		<input id="loader" type="file" accept=".gba" onchange="run(this.files[0]);" style="display:none;">
	</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()">SAVE</button>
	</div>
</section>
</body>
</html>