lucky / index 37.html

Duplicate from Studytime171/Lalitgangwani

89610f7 about 2 months ago

5.94 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">
	<title>GBA.js - Mobile Controller</title>
	<link rel="stylesheet" href="resources/main.css">
	<style>
	/* Base Layout */
	body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	font-family: sans-serif;
	-webkit-tap-highlight-color: transparent;
	}

	/* Game Screen Area */
	#screen-container {
	width: 100%;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 10px;
	}

	#screen {
	width: 100vw;
	height: auto;
	aspect-ratio: 3 / 2;
	image-rendering: pixelated;
	background: #000;
	}

	/* Header Label */
	.status-label {
	color: #0f0;
	font-family: monospace;
	margin-bottom: 5px;
	font-size: 14px;
	}

	/* Touch Controls Container */
	#touchControls {
	flex: 1;
	position: relative;
	width: 100%;
	user-select: none;
	-webkit-user-select: none;
	}

	/* Button Styling - Matching the Grey in Image */
	.ctrl-btn {
	position: absolute;
	background: #A6A6A6; /* Light grey from screenshot */
	border: none;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	padding: 0;
	}

	/* D-PAD (Left Side) - Cross Shape */
	#dpad {
	position: absolute;
	bottom: 120px;
	left: 20px;
	width: 150px;
	height: 150px;
	}

	#up { top: 0; left: 50px; width: 50px; height: 55px; border-radius: 4px 4px 0 0; }
	#down { bottom: 0; left: 50px; width: 50px; height: 55px; border-radius: 0 0 4px 4px; }
	#left { top: 50px; left: 0; width: 55px; height: 50px; border-radius: 4px 0 0 4px; }
	#right { top: 50px; right: 0; width: 55px; height: 50px; border-radius: 0 4px 4px 0; }
	#center-block { position: absolute; top: 50px; left: 50px; width: 50px; height: 50px; background: #A6A6A6; }

	/* Action Buttons (Right Side) - 4 Circular Buttons */
	#action-cluster {
	position: absolute;
	bottom: 120px;
	right: 20px;
	width: 150px;
	height: 150px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 10px;
	}

	.round-btn {
	position: relative;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	}

	/* Select/Start - Pill Shaped at Bottom */
	.pill-btn {
	bottom: 40px;
	width: 90px;
	height: 40px;
	border-radius: 20px;
	font-size: 14px;
	background: #A6A6A6;
	color: #fff;
	}
	#select { left: 60px; }
	#start { right: 60px; }

	/* Hidden ROM selector */
	#controls { text-align: center; padding: 10px; }
	.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');
	gba.runStable();
	}
	});
	}

	function setupTouchControls() {
	function press(c) { window.dispatchEvent(new KeyboardEvent('keydown', {keyCode: c})); }
	function release(c) { window.dispatchEvent(new KeyboardEvent('keyup', {keyCode: c})); }

	// Mapping based on standard GBA.js keys
	const map = {
	'up': 38, 'down': 40, 'left': 37, 'right': 39,
	'a': 88, 'b': 90, 'btn-x': 88, 'btn-y': 90, // Mapping top buttons to A/B as well
	'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]); });
	el.addEventListener('touchend', (e) => { e.preventDefault(); release(map[id]); });
	}
	});
	}
	</script>
	</head>
	<body>

	<div id="screen-container">
	<div class="status-label">Connecting to Screen...</div>
	<canvas id="screen" width="480" height="320"></canvas>
	</div>

	<section id="controls">
	<div id="preload">
	<button style="background:#333; color:#0f0; border:1px solid #444; padding:10px;" onclick="document.getElementById('loader').click()">LOAD ROM</button>
	<input id="loader" type="file" accept=".gba" onchange="run(this.files[0]);" style="display:none">
	</div>
	</section>

	<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="btn-x" class="ctrl-btn round-btn"></button>
	<button id="btn-y" class="ctrl-btn round-btn"></button>
	<button id="b" class="ctrl-btn round-btn"></button>
	<button id="a" class="ctrl-btn round-btn"></button>
	</div>

	<button id="select" class="ctrl-btn pill-btn">Select</button>
	<button id="start" class="ctrl-btn pill-btn">Start</button>
	</div>

	</body>
	</html>