lucky / index 27.html

Duplicate from Studytime171/Lalitgangwani

89610f7 about 2 months ago

5.74 kB

	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>GBA.js - Full Mobile Fit</title>
	<link rel="stylesheet" href="resources/main.css">
	<style>
	/* Force the body to occupy the full viewport and prevent scrolling */
	body, html {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	touch-action: none; /* Prevents unwanted zooming/panning */
	}

	/* Screen Area: Automatically scales to fit mobile width */
	#screen-container {
	width: 100%;
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #000;
	}

	#screen {
	width: 100% !important; /* Forces fit to mobile width */
	height: auto !important;
	max-height: 50vh; /* Limits height to leave room for controls */
	image-rendering: pixelated;
	object-fit: contain;
	}

	/* Status Bar */
	.status-text {
	color: #0f0;
	font-family: monospace;
	font-size: 14px;
	padding: 5px;
	text-align: center;
	}

	/* Controller Area: Anchored to the bottom */
	#touchControls {
	flex: 1;
	position: relative;
	width: 100%;
	background: #1a1a1a; /* Distinct controller area */
	display: none;
	user-select: none;
	-webkit-user-select: none;
	}

	/* Shared Button Styling */
	.ctrl-btn {
	position: absolute;
	background: #888;
	border: none;
	color: #eee;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	box-shadow: 0 4px #555;
	active {
	background: #666;
	box-shadow: 0 2px #333;
	transform: translateY(2px);
	}
	}

	/* D-PAD Positioning */
	#dpad {
	position: absolute;
	bottom: 100px;
	left: 15px;
	width: 140px;
	height: 140px;
	}
	#up { top: 0; left: 45px; width: 50px; height: 50px; border-radius: 5px 5px 0 0; }
	#down { bottom: 0; left: 45px; width: 50px; height: 50px; border-radius: 0 0 5px 5px; }
	#left { top: 45px; left: 0; width: 50px; height: 50px; border-radius: 5px 0 0 5px; }
	#right { top: 45px; right: 0; width: 50px; height: 50px; border-radius: 0 5px 5px 0; }

	/* Action Buttons Positioning */
	#a { bottom: 130px; right: 20px; width: 70px; height: 70px; border-radius: 50%; font-size: 20px; }
	#b { bottom: 90px; right: 100px; width: 70px; height: 70px; border-radius: 50%; font-size: 20px; }

	/* Shoulders and Meta */
	#l { top: 15px; left: 15px; width: 65px; height: 35px; border-radius: 5px; }
	#r { top: 15px; right: 15px; width: 65px; height: 35px; border-radius: 5px; }
	.pill { bottom: 30px; width: 80px; height: 30px; border-radius: 15px; font-size: 12px; }
	#select { left: 25%; transform: translateX(-50%); }
	#start { right: 25%; transform: translateX(50%); }

	.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 (e) { gba = null; }

	window.onload = function() {
	if (gba) {
	gba.setCanvas(document.getElementById('screen'));
	loadRom('resources/bios.bin', function(bios) { gba.setBios(bios); });
	if ('ontouchstart' in window \|\| navigator.maxTouchPoints > 0) {
	document.getElementById('touchControls').style.display = 'block';
	}
	setupTouchControls();
	}
	}

	function run(file) {
	gba.loadRomFromFile(file, function(result) {
	if (result) {
	document.getElementById('preload').classList.add('hidden');
	gba.runStable();
	}
	});
	}

	function setupTouchControls() {
	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(); window.dispatchEvent(new KeyboardEvent('keydown', {keyCode: map[id]})); });
	el.addEventListener('touchend', (e) => { e.preventDefault(); window.dispatchEvent(new KeyboardEvent('keyup', {keyCode: map[id]})); });
	}
	});
	}
	</script>
	</head>
	<body>

	<div id="screen-container">
	<div class="status-text">Connecting to Screen...</div>
	<canvas id="screen" width="240" height="160"></canvas>
	<div id="preload" style="padding: 20px;">
	<button onclick="document.getElementById('loader').click()" style="padding: 10px 20px;">SELECT ROM</button>
	<input id="loader" type="file" accept=".gba" onchange="run(this.files[0]);" style="display:none">
	</div>
	</div>

	<div id="touchControls">
	<div id="dpad">
	<button id="up" class="ctrl-btn">↑</button>
	<button id="left" class="ctrl-btn">←</button>
	<button id="right" class="ctrl-btn">→</button>
	<button id="down" class="ctrl-btn">↓</button>
	</div>
	<button id="a" class="ctrl-btn">A</button>
	<button id="b" class="ctrl-btn">B</button>
	<button id="l" class="ctrl-btn">L</button>
	<button id="r" class="ctrl-btn">R</button>
	<button id="select" class="ctrl-btn pill">SELECT</button>
	<button id="start" class="ctrl-btn pill">START</button>
	</div>

	</body>
	</html>