badgb/index.html

<!-- mobile gamepad CSS and JS copied from
https://github.com/chrismaltby/gb-studio/blob/v2beta/appData/js-emulator/index.html
(see LICENSE.gbstudio)
-->
<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div id="game">
    <canvas width="160" height="144"></canvas>
  </div>
  <button id="load" class="capsuleBtn">Load</button>
  <div id="gp">
    <div id="gp_dpad">
      <div id="gp_left"></div>
      <div id="gp_right"></div>
      <div id="gp_up"></div>
      <div id="gp_down"></div>
    </div>
    <div id="gp_select" class="capsuleBtn">Select</div>
    <div id="gp_start" class="capsuleBtn">Start</div>
    <div id="gp_b" class="roundBtn">B</div>
    <div id="gp_a" class="roundBtn">A</div>
  </div>
  <input type="file" id="openfile" hidden>

  <script>
    const $ = document.querySelector.bind(document);
    const w = 160, h = 144;
    const canvas = document.querySelector('canvas');
    const context = canvas.getContext('2d');
    const imageData = context.createImageData(w, h);
    const deadzone = 0.1;

    $('#load').addEventListener('click', () => { $('#openfile').click(); });

    let module, emulator;
    (async function() {
      let response = await fetch('badgb.wasm');
      let bytes = await response.arrayBuffer();
      module = await WebAssembly.compile(bytes);

      // Load porklike by default
      let romResponse = await fetch('porklike.gb');
      let romBytes = await romResponse.arrayBuffer();
      let instance = await WebAssembly.instantiate(module);
      emulator = new Emulator(instance, romBytes);
    })();

    $('#openfile').addEventListener('change', async event => {
      let file = event.target.files[0];
      if (!file) return;

      if (emulator) emulator.destroy();

      let romBytes = await readFile(file);
      let instance = await WebAssembly.instantiate(module);
      emulator = new Emulator(instance, romBytes);
    });

    function readFile(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onerror = event => reject(event.error);
        reader.onloadend = event => resolve(event.target.result);
        reader.readAsArrayBuffer(file);
      });
    }

    class Emulator {
      constructor(instance, romBytes) {
        this.exports = instance.exports;
        const buffer = this.exports.mem.buffer;

        this.canvasData = new Uint8Array(buffer, 0x118000, w*h*4);
        const romData = new Uint8Array(buffer, 0x10000, 1<<20);
        this.extram = new Uint8Array(buffer, 0x110000, 0x8000);
        romData.set(new Uint8Array(romBytes));
        this.keys = new Uint8Array(buffer, 0x0c, 4);

        this.bindings = [
          {sel: '',           type: 'keydown',    fn: this.onKey.bind(this, true)},
          {sel: '',           type: 'keyup',      fn: this.onKey.bind(this, false)},
          {sel: '#gp_select', type: 'touchstart', fn: this.btnTouch.bind(this, 2, 1, true)},
          {sel: '#gp_select', type: 'touchend',   fn: this.btnTouch.bind(this, 2, 1, false)},
          {sel: '#gp_start',  type: 'touchstart', fn: this.btnTouch.bind(this, 3, 1, true)},
          {sel: '#gp_start',  type: 'touchend',   fn: this.btnTouch.bind(this, 3, 1, false)},
          {sel: '#gp_b',      type: 'touchstart', fn: this.btnTouch.bind(this, 1, 1, true)},
          {sel: '#gp_b',      type: 'touchend',   fn: this.btnTouch.bind(this, 1, 1, false)},
          {sel: '#gp_a',      type: 'touchstart', fn: this.btnTouch.bind(this, 0, 1, true)},
          {sel: '#gp_a',      type: 'touchend',   fn: this.btnTouch.bind(this, 0, 1, false)},
          {sel: '#gp_dpad',   type: 'touchstart', fn: this.dpadTouchStartMove.bind(this)},
          {sel: '#gp_dpad',   type: 'touchmove',  fn: this.dpadTouchStartMove.bind(this)},
          {sel: '#gp_dpad',   type: 'touchend',   fn: this.dpadTouchEnd.bind(this)},
          {sel: '',           type: 'touchstart', fn: this.touchRestore.bind(this)},
        ];

        this.updateBinding(true);
        this.touchEnabled = 'ontouchstart' in document.documentElement;
        this.updateOnscreenGamepad();

        // Save ExtRam
        this.extramIntervalId = -1;
        crypto.subtle.digest('sha-1', romBytes).then(result => {
          this.sha1 = Array.from(new Uint8Array(result)).map(x => x.toString(16).padStart(2, '0')).join('');
          const loadedExtram = localStorage.getItem(this.sha1);
          if (loadedExtram) {
            this.extram.set(JSON.parse(loadedExtram));
          }
          this.extramIntervalId = setInterval(() => {
            localStorage.setItem(this.sha1,
                                 JSON.stringify(Array.from(this.extram)));
          }, 1000);
        }).finally(() => {
          this.running = true;
          this.update();
        });
      }

      destroy() {
        clearInterval(this.extramIntervalId);
        this.running = false;
        this.updateBinding(false);
      }

      updateBinding(bind) {
        for (let binding of this.bindings) {
          const el = binding.sel ? $(binding.sel) : window;
          if (bind) {
            el.addEventListener(binding.type, binding.fn);
          } else {
            el.removeEventListener(binding.type, binding.fn);
          }
        }
      }

      setKey(index, isButton, down) {
        const clearMask = 1 << index;
        const setMask = ~(down ? clearMask : 0);
        const f = i => this.keys[i] = (this.keys[i] | clearMask) & setMask;
        f(isButton ? 2 : 1);
        f(3);
      }

      setJoypRight(down)  { this.setKey(0, 0, down); }
      setJoypLeft(down)   { this.setKey(1, 0, down); }
      setJoypUp(down)     { this.setKey(2, 0, down); }
      setJoypDown(down)   { this.setKey(3, 0, down); }
      setJoypA(down)      { this.setKey(0, 1, down); }
      setJoypB(down)      { this.setKey(1, 1, down); }
      setJoypSelect(down) { this.setKey(2, 1, down); }
      setJoypStart(down)  { this.setKey(3, 1, down); }

      onKey(down, event) {
        switch (event.code) {
          case 'ArrowDown': this.setJoypDown(down); break;
          case 'ArrowUp': this.setJoypUp(down); break;
          case 'ArrowLeft': this.setJoypLeft(down); break;
          case 'ArrowRight': this.setJoypRight(down); break;
          case 'Enter': this.setJoypStart(down); break;
          case 'Tab': this.setJoypSelect(down); break;
          case 'KeyZ': this.setJoypB(down); break;
          case 'KeyX': this.setJoypA(down); break;
        }

        if (down && this.touchEnabled) {
          this.touchEnabled = false;
          this.updateOnscreenGamepad();
        }
        event.preventDefault();
      }

      update() {
        if (this.running) {
          requestAnimationFrame(this.update.bind(this));
        }
        this.exports.run();
        imageData.data.set(this.canvasData);
        context.putImageData(imageData, 0, 0);
      }

      updateOnscreenGamepad() {
        $('#gp').style.display = this.touchEnabled ? 'block' : 'none';
      }

      btnTouch(index, isButton, down) {
        this.setKey(index, isButton, down);
        event.currentTarget.classList.toggle('btnPressed', down);
        event.preventDefault();
      }

      dpadTouchStartMove(event) {
        const rect = event.currentTarget.getBoundingClientRect();
        const x = (2 * (event.targetTouches[0].clientX - rect.left)) / rect.width - 1;
        const y = (2 * (event.targetTouches[0].clientY - rect.top)) / rect.height - 1;

        if (Math.abs(x) > deadzone) {
          if (y > x && y < -x) {
            this.setJoypLeft(true);
            this.setJoypRight(false);
          } else if (y < x && y > -x) {
            this.setJoypLeft(false);
            this.setJoypRight(true);
          }
        } else {
          this.setJoypLeft(false);
          this.setJoypRight(false);
        }

        if (Math.abs(y) > deadzone) {
          if (x > y && x < -y) {
            this.setJoypUp(true);
            this.setJoypDown(false);
          } else if (x < y && x > -y) {
            this.setJoypUp(false);
            this.setJoypDown(true);
          }
        } else {
          this.setJoypUp(false);
          this.setJoypDown(false);
        }
        event.preventDefault();
      }

      dpadTouchEnd(event) {
        this.setJoypLeft(false);
        this.setJoypRight(false);
        this.setJoypUp(false);
        this.setJoypDown(false);
        event.preventDefault();
      }

      touchRestore() {
        this.touchEnabled = true;
        this.updateOnscreenGamepad();
      }
    }
  </script>
</body>