lucky / index 28.html

Duplicate from Studytime171/Lalitgangwani

89610f7 about 2 months ago

6.38 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>
	/* Base Setup */
	body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	touch-action: none; /* Critical: stops screen from jumping/zooming */
	}

	/* 1. Emulator Screen: Full Width Fit */
	#screen-area {
	width: 100%;
	background: #000;
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	.status-line {
	color: #0f0;
	font-family: monospace;
	font-size: 14px;
	padding: 8px;
	}

	/* Force the canvas to be visible and wide */
	#screen {
	width: 100vw !important;
	height: auto !important;
	aspect-ratio: 3 / 2; /* GBA standard aspect ratio */
	image-rendering: pixelated;
	display: block;
	background: #111;
	}

	/* 2. Menu/Controls Bar */
	#ingame, #preload {
	padding: 10px;
	text-align: center;
	}
	button.menu-btn {
	background: #333;
	color: #eee;
	border: 1px solid #555;
	padding: 8px 15px;
	border-radius: 4px;
	margin: 0 5px;
	}

	/* 3. Handheld Controller Area */
	#touchControls {
	flex-grow: 1; /* Takes up all remaining space at the bottom */
	position: relative;
	width: 100%;
	background: #1a1a1a;
	display: none; /* Shown by JS */
	}

	/* Controller Button Styles (Large Grey) */
	.ctrl-btn {
	position: absolute;
	background: #888;
	color: #fff;
	border: none;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	box-shadow: 0 5px #444;
	user-select: none;
	-webkit-user-select: none;
	}

	.ctrl-btn:active {
	background: #666;
	box-shadow: 0 2px #222;
	transform: translateY(3px);
	}

	/* D-PAD (Enlarged) */
	#dpad {
	position: absolute;
	bottom: 120px;
	left: 20px;
	width: 160px;
	height: 160px;
	}
	#up { top: 0; left: 55px; width: 50px; height: 60px; border-radius: 8px 8px 0 0; }
	#down { bottom: 0; left: 55px; width: 50px; height: 60px; border-radius: 0 0 8px 8px; }
	#left { top: 55px; left: 0; width: 60px; height: 50px; border-radius: 8px 0 0 8px; }
	#right { top: 55px; right: 0; width: 60px; height: 50px; border-radius: 0 8px 8px 0; }

	/* Action Cluster (A and B - Enlarged) */
	.round-btn {
	width: 85px;
	height: 85px;
	border-radius: 50%;
	font-size: 24px;
	}
	#a { bottom: 160px; right: 20px; }
	#b { bottom: 100px; right: 110px; }

	/* Shoulders */
	.shoulder {
	top: 20px;
	width: 80px;
	height: 45px;
	border-radius: 8px;
	font-size: 16px;
	}
	#l { left: 20px; }
	#r { right: 20px; }

	/* Start/Select Pill Buttons */
	.pill {
	bottom: 40px;
	width: 90px;
	height: 35px;
	border-radius: 20px;
	font-size: 14px;
	background: #555;
	}
	#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) {
	var canvas = document.getElementById('screen');
	gba.setCanvas(canvas);
	loadRom('resources/bios.bin', function(bios) { gba.setBios(bios); });

	// Always attempt to show controls if touch is detected
	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');
	document.getElementById('ingame').classList.remove('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-area">
	<div class="status-line">Connecting to Screen...</div>
	<canvas id="screen" width="240" height="160"></canvas>

	<div id="preload">
	<button class="menu-btn" 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 class="menu-btn" onclick="gba.pause()">PAUSE</button>
	<button class="menu-btn" onclick="gba.reset()">RESET</button>
	</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 round-btn">A</button>
	<button id="b" class="ctrl-btn round-btn">B</button>

	<button id="l" class="ctrl-btn shoulder">L</button>
	<button id="r" class="ctrl-btn shoulder">R</button>

	<button id="select" class="ctrl-btn pill">SELECT</button>
	<button id="start" class="ctrl-btn pill">START</button>
	</div>

	</body>
	</html>