File size: 7,853 Bytes

89610f7

<!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 Final</title>
<link rel="stylesheet" href="resources/main.css">
<style>
    /* Prevent the page from bouncing or scrolling while playing */
    body, html { 
        overflow: hidden; 
        position: fixed; 
        width: 100%; 
        height: 100%; 
        background: #000; 
        margin: 0; 
        padding: 0;
    }

    #screen {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
        background-color: #222;
    }

    /* DEBUG LOG: Confirms if buttons are working */
    #status-log {
        position: fixed; top: 10px; left: 10px; 
        background: rgba(0,0,0,0.8); color: #0f0; 
        font-family: monospace; font-size: 12px; 
        padding: 5px 10px; z-index: 100001;
        border-radius: 4px; pointer-events: none;
    }

    /* TOUCH PAD CONTAINER */
    #touch-controls {
        position: fixed; bottom: 0; left: 0; width: 100%; height: 280px;
        z-index: 100000; touch-action: none;
    }

    .t-btn {
        position: absolute; 
        background: rgba(255, 255, 255, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.5); 
        border-radius: 50%; color: white;
        display: flex; align-items: center; justify-content: center;
        font-weight: bold; font-family: sans-serif;
        user-select: none; -webkit-user-select: none;
        box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    }

    /* Visual confirmation of press */
    .t-btn:active { background: rgba(0, 255, 0, 0.4); transform: scale(0.95); }

    /* Layout Positions */
    #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.3); }
    #t-b { bottom: 70px; right: 115px; width: 85px; height: 85px; background: rgba(255, 255, 0, 0.3); }

    /* Menu & Keyboard Buttons */
    .menu-btn { width: 85px; height: 40px; border-radius: 8px; font-size: 12px; bottom: 80px; }
    #t-select { left: 50%; margin-left: -135px; background: rgba(100,100,100,0.6); }
    #t-start  { left: 50%; margin-left: -42px; background: rgba(100,100,100,0.6); }
    #t-kbd    { left: 50%; margin-left: 50px; background: rgba(0, 100, 255, 0.5); }

    /* Hidden Input to trigger mobile keyboard */
    #hidden-input { position: absolute; opacity: 0; left: -1000px; }

    #controls { color: white; text-align: center; margin-top: 10px; }
    .hidden { display: none; }
</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;

function updateStatus(msg) {
    document.getElementById('status-log').innerText = msg;
}

try {
    gba = new GameBoyAdvance();
    gba.keypad.eatInput = true;
} catch (exception) {
    gba = null;
    console.error("GBA failed to initialize", exception);
}

window.onload = function() {
    if (gba) {
        var canvas = document.getElementById('screen');
        gba.setCanvas(canvas);
        loadRom('resources/bios.bin', function(bios) {
            gba.setBios(bios);
        });
        initTouchGamepad();
    }
}

function initTouchGamepad() {
    // Indices taken directly from your keypad.js file:
    // 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();
            updateStatus("Button: " + id.replace('t-', '').toUpperCase());
            
            // Resume Audio (Required for mobile sound)
            if (gba.audio.context && gba.audio.context.state === 'suspended') {
                gba.audio.context.resume();
            }
            
            gba.keypad.keydown(keyCode);
        };

        const release = (e) => {
            e.preventDefault();
            gba.keypad.keyup(keyCode);
        };

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

    // KEYBOARD (KBD) LOGIC
    const kbdBtn = document.getElementById('t-kbd');
    const input = document.getElementById('hidden-input');

    kbdBtn.addEventListener('touchstart', (e) => {
        e.preventDefault();
        updateStatus("Opening Keyboard...");
        input.focus();
    });

    input.addEventListener('keydown', (e) => {
        if (e.keyCode === 13) { // Enter key pressed on phone keyboard
            updateStatus("KBD: START Pressed");
            gba.keypad.keydown(3); // Send Start signal
            setTimeout(() => gba.keypad.keyup(3), 100);
            input.blur(); // Hide keyboard
            input.value = "";
        }
    });
}

function run(file) {
    gba.loadRomFromFile(file, function(result) {
        if (result) {
            document.getElementById('preload').style.display = 'none';
            document.getElementById('ingame').classList.remove('hidden');
            gba.runStable();
            updateStatus("ROM Loaded: Running...");
        } else {
            updateStatus("Error: ROM failed to load");
        }
    });
}

function reset() {
    gba.pause();
    gba.reset();
    gba.runStable();
    updateStatus("Game Reset");
}

function togglePause() {
    var e = document.getElementById('pause');
    if (gba.paused) { 
        gba.runStable(); 
        e.textContent = "PAUSE"; 
        updateStatus("Resumed");
    } else { 
        gba.pause(); 
        e.textContent = "UNPAUSE"; 
        updateStatus("Paused");
    }
}
</script>
</head>
<body>

<div id="status-log">Ready: Select a ROM</div>
<canvas id="screen" width="480" height="320"></canvas>
<input type="text" id="hidden-input">

<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 GBA 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>