Hugging Face's logo

Studytime171
/
lucky

English
Model card Files
xet
 Community
lucky / index 16.html
Studytime171's picture
Studytime171
Duplicate from Studytime171/Lalitgangwani
89610f7
raw
history blame contribute delete
14.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 <title>GBA.js - Touch Controls</title>
<style>
 body {
 margin: 0;
 padding: 0;
 background: #000;
 font-family: Arial, Helvetica, sans-serif;
 overflow: hidden;
 height: 100vh;
 touch-action: none;
 }
 #screen {
 image-rendering: pixelated;
 image-rendering: -moz-crisp-edges;
 image-rendering: crisp-edges;
 width: 100%;
 height: auto;
 max-height: 100vh;
 display: block;
 margin: 0 auto;
 }
 .touch-controls {
 position: absolute;
 inset: 0;
 pointer-events: none;
 user-select: none;
 -webkit-user-select: none;
 touch-action: none;
 z-index: 100;
 display: none; /* shown after game loads */
 }
 .dpad, .face-buttons {
 position: absolute;
 bottom: 5%;
 pointer-events: auto;
 }
 .dpad {
 left: 4%;
 width: 140px;
 height: 140px;
 }
 .face-buttons {
 right: 4%;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
 width: 180px;
 }
 .dpad div, .face-buttons div {
 background: rgba(120, 120, 120, 0.45);
 border: 3px solid rgba(220, 220, 220, 0.7);
 border-radius: 50%;
 color: white;
 font-weight: bold;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.1rem;
 box-shadow: 0 4px 10px rgba(0,0,0,0.5);
 transition: all 0.12s ease;
 }
 .dpad div:active, .face-buttons div:active,
 .dpad div.pressed, .face-buttons div.pressed {
 transform: scale(0.88);
 opacity: 0.65;
 background: rgba(220, 220, 220, 0.75) !important;
 }
 .dpad-up { width: 60px; height: 60px; position: absolute; left: 40px; top: 0; border-radius: 12px 12px 50% 50%; }
 .dpad-down { width: 60px; height: 60px; position: absolute; left: 40px; bottom: 0; border-radius: 50% 50% 12px 12px; }
 .dpad-left { width: 60px; height: 60px; position: absolute; top: 40px; left: 0; border-radius: 12px 50% 50% 12px; }
 .dpad-right { width: 60px; height: 60px; position: absolute; top: 40px; right: 0; border-radius: 50% 12px 12px 50%; }
 .dpad-center{ width: 60px; height: 60px; position: absolute; left: 40px; top: 40px; background: transparent; border: none; pointer-events: none; }
 .btn-a { background: rgba(0, 180, 0, 0.55); grid-column: 3; grid-row: 2; border-radius: 50%; width: 70px; height: 70px; font-size: 1.4rem; }
 .btn-b { background: rgba(220, 0, 0, 0.55); grid-column: 2; grid-row: 3; border-radius: 50%; width: 70px; height: 70px; font-size: 1.4rem; }
 .btn-l { background: rgba(100, 100, 255, 0.5); grid-column: 1; grid-row: 1; width: 60px; height: 50px; border-radius: 10px; font-size: 1rem; }
 .btn-r { background: rgba(100, 100, 255, 0.5); grid-column: 3; grid-row: 1; width: 60px; height: 50px; border-radius: 10px; font-size: 1rem; }
 .btn-start { background: rgba(200, 200, 50, 0.6); grid-column: 2 / 4; grid-row: 1; width: auto; height: 44px; border-radius: 10px; font-size: 0.95rem; }
 .btn-select { background: rgba(200, 200, 50, 0.6); grid-column: 1 / 3; grid-row: 1; width: auto; height: 44px; border-radius: 10px; font-size: 0.95rem; }
 #controls {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 200;
 padding: 10px;
 background: rgba(0,0,0,0.4);
 color: white;
 text-align: center;
 }
 .bigbutton {
 padding: 12px 24px;
 font-size: 1.1rem;
 margin: 6px;
 background: #444;
 color: white;
 border: none;
 border-radius: 8px;
 cursor: pointer;
 }
 .hidden { display: none !important; }
 .dead { opacity: 0.3; pointer-events: none; }
 @media (orientation: landscape) and (min-width: 800px) {
 .touch-controls { display: none !important; }
 }
 </style>
</head>
<body>
<canvas id="screen" width="480" height="320"></canvas>
<div id="touch-controls" class="touch-controls">
 <!-- D-Pad -->
 <div class="dpad">
 <div class="dpad-up" data-keycode="38"></div>
 <div class="dpad-down" data-keycode="40"></div>
 <div class="dpad-left" data-keycode="37"></div>
 <div class="dpad-right" data-keycode="39"></div>
 <div class="dpad-center"></div>
 </div>
<!-- Face buttons -->
 <div class="face-buttons">
 <div class="btn btn-l" data-keycode="65">L</div>
 <div class="btn btn-r" data-keycode="83">R</div>
 <div class="btn btn-select"data-keycode="220">Select</div>
 <div class="btn btn-start" data-keycode="13">Start</div>
 <div class="btn btn-b" data-keycode="88">B</div>
 <div class="btn btn-a" data-keycode="90">A</div>
 </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;">
<button class="bigbutton" onclick="document.getElementById('saveloader').click()">Upload Save</button>
 <input id="saveloader" type="file" onchange="uploadSavedataPending(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 class="bigbutton" onclick="gba?.downloadSavedata?.()">Download Save</button>
 <button class="bigbutton" onclick="screenshot()">Screenshot</button>
<label style="color:white; margin:0 12px;">
 <input type="checkbox" onchange="setPixelated(this.checked)"> Pixelated
 </label>
<div id="sound" style="display:inline-block; color:white;">
 <label>
 <input type="checkbox" checked onchange="gba.audio.masterEnable = this.checked"> Sound
 </label>
 <input type="range" min="0" max="1" value="1" step="any" onchange="setVolume(this.value)" oninput="setVolume(this.value)">
 </div>
<p id="openDebug" onclick="enableDebug()" style="cursor:pointer; color:#88f; margin:8px 0;">Open Debugger</p>
 </div>
</section>
<!-- GBA.js scripts - keep these files in the js/ and resources/ folders -->
<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>
// ────────────────────────────────────────────────────────────────
// Main GBA logic
// ────────────────────────────────────────────────────────────────
var gba = null;
var runCommands = [];
var debug = null;
try {
 gba = new GameBoyAdvance();
 gba.keypad.eatInput = true;
 gba.setLogger(function(level, error) {
 console.error("Emulator error:", error);
 gba.pause();
 const screen = document.getElementById('screen');
 if (screen.className === 'dead') return;
 const crash = document.createElement('img');
 crash.id = 'crash';
 crash.src = 'resources/crash.png';
 screen.parentElement.insertBefore(crash, screen);
 screen.className = 'dead';
 });
} catch (e) {
 console.error("Failed to initialize GBA emulator:", e);
 gba = null;
}
window.onload = function() {
 if (gba && FileReader) {
 gba.setCanvas(document.getElementById('screen'));
 gba.logLevel = gba.LOG_ERROR || 1;
 // Optional BIOS loading - uncomment and adjust path if you have bios.bin
 // loadRom('resources/bios.bin', bios => gba.setBios(bios));
 if (!gba.audio?.context) {
 const soundbox = document.getElementById('sound');
 if (soundbox) soundbox.style.display = 'none';
 }
 } else {
 const controls = document.getElementById('controls');
 if (controls) controls.remove();
 }
};
// ────────────────────────────────────────────────────────────────
// Core functions
// ────────────────────────────────────────────────────────────────
function fadeOut(id, nextId, kill) {
 const e = document.getElementById(id);
 if (!e) return;
 const e2 = document.getElementById(nextId);
 const removeSelf = () => {
 if (kill) e.remove();
 else {
 e.className = 'dead';
 e.removeEventListener('transitionend', removeSelf);
 }
 if (e2) {
 e2.classList.add('hidden');
 setTimeout(() => e2.classList.remove('hidden'), 20);
 }
 };
 e.addEventListener('transitionend', removeSelf);
 e.classList.add('hidden');
}
function run(file) {
 const selectBtn = document.getElementById('select');
 selectBtn.textContent = 'Loading...';
 selectBtn.removeAttribute('onclick');
 const pauseBtn = document.getElementById('pause');
 if (pauseBtn) pauseBtn.textContent = "PAUSE";
 gba.loadRomFromFile(file, result => {
 if (result) {
 runCommands.forEach(cmd => cmd());
 runCommands = [];
 fadeOut('preload', 'ingame');
 gba.runStable();
 // Show touch controls after successful load
 document.getElementById('touch-controls').style.display = 'block';
 } else {
 selectBtn.textContent = 'FAILED';
 setTimeout(() => {
 selectBtn.textContent = 'SELECT ROM';
 selectBtn.onclick = () => document.getElementById('loader').click();
 }, 2000);
 }
 });
}
function reset() {
 if (!gba) return;
 gba.pause();
 gba.reset();
 document.getElementById('select').textContent = 'SELECT ROM';
 const crash = document.getElementById('crash');
 if (crash) {
 const ctx = gba.targetCanvas?.getContext('2d');
 if (ctx) ctx.clearRect(0,0,480,320);
 gba.video?.drawCallback?.();
 crash.remove();
 document.getElementById('screen').className = '';
 }
 document.getElementById('select').onclick = () => document.getElementById('loader').click();
 fadeOut('ingame', 'preload');
}
function uploadSavedataPending(file) {
 runCommands.push(() => gba?.loadSavedataFromFile?.(file));
}
function togglePause() {
 if (!gba) return;
 const e = document.getElementById('pause');
 if (gba.paused) {
 gba.runStable();
 e.textContent = "PAUSE";
 } else {
 gba.pause();
 e.textContent = "UNPAUSE";
 }
}
function screenshot() {
 if (!gba?.indirectCanvas) return;
 window.open(gba.indirectCanvas.toDataURL('image/png'), 'gba-screenshot');
}
function setVolume(value) {
 if (gba?.audio) gba.audio.masterVolume = Math.pow(2, value) - 1;
}
function setPixelated(pixelated) {
 const screen = document.getElementById('screen');
 const ctx = screen.getContext('2d');
 if (ctx) ctx.imageSmoothingEnabled = !pixelated;
}
// ────────────────────────────────────────────────────────────────
// TOUCH CONTROLS - DIRECT KEYPAD MANIPULATION (works on iOS Safari)
// ────────────────────────────────────────────────────────────────
if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
 const keypad = gba?.keypad;
 if (!keypad) {
 console.warn("GBA keypad not available → touch controls disabled");
 } else {
 const keyMap = {
 "38": keypad.KEYCODE_UP || 6, // UP
 "40": keypad.KEYCODE_DOWN || 7, // DOWN
 "37": keypad.KEYCODE_LEFT || 5, // LEFT
 "39": keypad.KEYCODE_RIGHT || 4, // RIGHT
 "13": keypad.KEYCODE_START || 3, // START
 "220": keypad.KEYCODE_SELECT || 2, // SELECT
 "90": keypad.KEYCODE_A || 0, // A
 "88": keypad.KEYCODE_B || 1, // B
 "65": keypad.KEYCODE_L || 9, // L
 "83": keypad.KEYCODE_R || 8 // R
 };
 const pressed = new Set();
 document.querySelectorAll('[data-keycode]').forEach(el => {
 const dataCode = el.dataset.keycode;
 const bitIndex = keyMap[dataCode];
 if (bitIndex === undefined) return;
 const toggle = 1 << bitIndex;
 el.addEventListener('touchstart', e => {
 e.preventDefault();
 if (!pressed.has(dataCode)) {
 pressed.add(dataCode);
 keypad.currentDown &= ~toggle; // button pressed (clear bit)
 }
 el.classList.add('pressed');
 }, { passive: false });
 el.addEventListener('touchend', e => {
 e.preventDefault();
 if (pressed.has(dataCode)) {
 pressed.delete(dataCode);
 keypad.currentDown |= toggle; // button released (set bit)
 }
 el.classList.remove('pressed');
 }, { passive: false });
 el.addEventListener('touchcancel', e => {
 e.preventDefault();
 if (pressed.has(dataCode)) {
 pressed.delete(dataCode);
 keypad.currentDown |= toggle;
 }
 el.classList.remove('pressed');
 }, { passive: false });
 });
 console.log("Touch controls enabled via direct keypad manipulation");
 }
}
// Optional: debug opener
function enableDebug() {
 console.log("Debugger requested (implement if needed)");
}
</script>
</body>
</html>