lucky / index 3.html

Duplicate from Studytime171/Lalitgangwani

89610f7 about 1 month ago

6.51 kB

	<!DOCTYPE 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, viewport-fit=cover">
	<title>GBA.js Mobile + Virtual KBD</title>
	<link rel="stylesheet" href="resources/main.css">
	<style>
	/* TOUCH CONTROL OVERLAY */
	#touch-controls {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 280px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
	z-index: 99999;
	}

	.t-btn {
	position: absolute;
	background: rgba(255, 255, 255, 0.25);
	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 10px rgba(0,0,0,0.5);
	touch-action: none;
	}

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

	/* Position Adjustments */
	#t-up { bottom: 180px; left: 75px; width: 65px; height: 65px; }
	#t-down { bottom: 50px; left: 75px; width: 65px; height: 65px; }
	#t-left { bottom: 115px; left: 10px; width: 65px; height: 65px; }
	#t-right { bottom: 115px; left: 140px; width: 65px; height: 65px; }
	#t-a { bottom: 130px; right: 20px; width: 85px; height: 85px; background: rgba(255, 0, 0, 0.4); }
	#t-b { bottom: 70px; right: 115px; width: 85px; height: 85px; background: rgba(255, 255, 0, 0.4); }

	/* MENU BUTTONS */
	.menu-btn { width: 85px; height: 40px; border-radius: 8px; font-size: 12px; bottom: 85px; background: rgba(80, 80, 80, 0.7); }
	#t-select { left: 50%; margin-left: -135px; }
	#t-start { left: 50%; margin-left: -42px; }

	/* NEW KEYBOARD BUTTON */
	#t-kbd { left: 50%; margin-left: 50px; background: rgba(0, 100, 255, 0.6); }

	/* HIDDEN INPUT FOR NATIVE KEYBOARD */
	#hidden-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	top: 0;
	}

	@media (pointer: coarse) {
	#touch-controls { display: block; }
	#controls { padding-bottom: 300px; }
	#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); });
	initTouchGamepad();
	initVirtualKeyboard();
	}
	}

	function initTouchGamepad() {
	// GBA 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();
	if (gba.audio.context && gba.audio.context.state === 'suspended') {
	gba.audio.context.resume();
	}
	// Trigger both the internal constant and a mock "Enter" key event for Start
	gba.keypad.keydown(keyCode);
	if (keyCode === 3) { // If it's the START button
	window.dispatchEvent(new KeyboardEvent('keydown', { 'keyCode': 13, 'which': 13 }));
	}
	};

	const release = (e) => {
	e.preventDefault();
	gba.keypad.keyup(keyCode);
	if (keyCode === 3) {
	window.dispatchEvent(new KeyboardEvent('keyup', { 'keyCode': 13, 'which': 13 }));
	}
	};

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

	function initVirtualKeyboard() {
	const kbdBtn = document.getElementById('t-kbd');
	const input = document.getElementById('hidden-input');

	kbdBtn.addEventListener('touchstart', (e) => {
	e.preventDefault();
	input.focus(); // Pulls up the mobile system keyboard
	});

	// Listen for the "Enter" key on the mobile native keyboard
	input.addEventListener('keydown', (e) => {
	if (e.keyCode === 13) { // Enter key
	gba.keypad.keydown(gba.keypad.START);
	setTimeout(() => gba.keypad.keyup(gba.keypad.START), 100);
	input.value = ""; // Clear for next use
	input.blur(); // Hide keyboard after starting
	}
	});
	}

	function run(file) {
	gba.loadRomFromFile(file, function(result) {
	if (result) {
	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>
	<input type="text" id="hidden-input" placeholder="Type Enter to Start">

	<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 class="t-btn menu-btn" id="t-kbd">KBD</div>
	</div>

	<section id="controls">
	<div id="preload">
	<button class="bigbutton" 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>