emulator-patches/web-demo.html

<!DOCTYPE html>
<!--

Kinetoscope: A Sega Genesis Video Player

Copyright (c) 2024 Joey Parrish

See MIT License in LICENSE.txt

This web-based demo is incomplete without the emulator core
(genesis_plus_gx_libretro.js and genesis_plus_gx_libretro.wasm) and the
Kinetoscope ROM (kinetoscope-streamer.rom), all of which must be in the same folder as
this page.
-->
<html lang="en">
  <head>
    <title>Kinetoscope Web Emulator Demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Kinetoscope Emulator for the web">

    <style>

@font-face {
  font-family: 'Kode Mono';
  font-style: normal;
  font-weight: bold;
  font-display: block;
  src: url(https://fonts.gstatic.com/s/kodemono/v2/A2BLn5pb0QgtVEPFnlYkkaoBgw4qv9odq3619Do.ttf) format('truetype');
}

html, body {
  margin: 0;
  padding: 0;

  /* Prevent pull-to-refresh on mobile, since we use swipe gestures in a
   * keyboard-less environment. */
  overscroll-behavior: none;
}

body {
  background: black;
}

#clickToStart, #instructions {
  background: black;
  color: white;
  border: none;

  font-family: "Kode Mono";
  font-optical-sizing: auto;
  font-weight: bold;

  font-size: calc(min(6vw, 20vh));
  display: block;
  margin: auto;
  margin-top: 1em;
}

#clickToStart {
  border: 1px white solid;
  padding: 0.5em;
  font-style: italic;
}

#instructions {
  font-size: calc(min(5vw, 16vh));
  padding: 1em;
}

    </style>
  </head>

  <script defer src="https://cdn.jsdelivr.net/npm/nostalgist@0.10.0/dist/nostalgist.umd.min.js"></script>
  <script defer src="gesture-tracker.js"></script>
  <script>

// AudioContext needs a user gesture to start.  So we define main, but don't
// run it until the user clicks the click-to-start button.
async function main() {
  // Change the click-to-start label to a loading indicator.
  clickToStart.innerText = 'Loading...'
  clickToStart.disabled = true;

  // We haven't finished loading JS, try again in 1s.
  if (!window.Nostalgist) {
    console.log('Waiting for Nostalgist...');
    setTimeout(main, 1000);
    return;
  }

  // Launch the emulator, which will create its own canvas.
  const nostalgist = await Nostalgist.launch({
    core: {
      name: 'genesis_plus_gx',
      js: 'genesis_plus_gx_libretro.js',
      wasm: 'genesis_plus_gx_libretro.wasm',
    },
    rom: 'kinetoscope-streamer.rom',
    onLaunch: () => {
      // Once loaded, hide the click-to-start button and instructions.
      clickToStart.style.display = 'none';
      instructions.style.display = 'none';
    },
  });

  // Resize the emulator when the window changes size.
  window.addEventListener('resize', () => {
    nostalgist.resize({width: window.innerWidth, height: window.innerHeight});
  });

  function send(buttonName) {
    // Send a button press "down" event, then 100ms later an button "up"
    // (release) event.
    nostalgist.pressDown(buttonName);
    setTimeout(() => nostalgist.pressUp(buttonName), 100);
  }

  const gestures = new GestureTracker(document.querySelector('canvas'));
  gestures.addEventListener('swipe-up', () => send('up'));
  gestures.addEventListener('swipe-down', () => send('down'));
  // Somehow, nostalgist sending 'a' becomes the "C" button in the ROM.  WTF?
  gestures.addEventListener('swipe-left', () => send('a'));
  gestures.addEventListener('swipe-right', () => send('start'));
  gestures.addEventListener('tap', () => send('start'));

  // Stored globally for debugging access.
  window.nostalgist = nostalgist;
  window.gestures = gestures;
}

  </script>

  <body>
    <button id="clickToStart" onclick="main()">Click here to start<br>Kinetoscope Emulator</button>
    <div id="instructions">
      <ul>
        <li>up: ↑ / swipe up</li>
        <li>down: ↓ / swipe down</li>
        <li>start: enter / tap</li>
        <li>pause: enter / tap</li>
        <li>stop: X / swipe left</li>
      </ul>
    </div>
  </body>
</html>