Created an Embeddable Iframe Version of WasmBoy (#320)

* Got the iframe setup, and building with dev enviornment

* Updated deps

* Got a working iframe build system!

Even has live reloading for once haha!

* Finished up the WasmBoy Player, and the play poster. Back to where I was
on the plane :p

* Mobile Debugger, WasmBoy Embed

* Changed Mobile Debugger Open Icon
* Created the WasmBoy Embed Demo Controls Bar
* Got Save States Working

* Added a modal system, and load state feature

* Finished the embed demo!

* Added analytics to Iframe Embed

* Added docs for iframe

* Commenting out wasmerboy builds for now

Author: torch2424

.travis.yml

@@ -11,4 +11,4 @@ script:
   - npm run demo:build:apps
   - npm run test:accuracy:nobuild
   - npm run test:integration:nobuild
-  - npm run wasmerboy:build
+    #TODO: - npm run wasmerboy:build

README.md

@@ -11,7 +11,7 @@
 
 <!--- Short Description-->
 
-🎮👾🕹️ Gameboy Emulator Library written in Web Assembly using [AssemblyScript](https://github.com/AssemblyScript/assemblyscript), Debugger/Shell in Preact 🎮👾🕹️
+🎮👾🕹️ Gameboy Emulator Library written in Web Assembly using [AssemblyScript](https://github.com/AssemblyScript/assemblyscript), Demos in [Preact](https://preactjs.com/) and [Svelte](https://svelte.dev/) 🎮👾🕹️
 
 **Project is still < 1.0.0. Most games are playable, but the emulator is still not very accurate. Expect bugs.**
 
@@ -36,6 +36,7 @@
 - [Demo Applications](#demo-applications)
   - [Debugger](#debugger)
   - [Benchmark](#benchmark)
+  - [Iframe Embed](#iframe-embed)
 - [Tests](#tests)
   - [Blarrg](#blarrg)
   - [Mooneye](#mooneye)
@@ -109,6 +110,12 @@ A full debugger meant for analyzing the internals of the gameboy. Great for Home
 - Saved Layouts between sessions. 💠
 - Help widget with tips on how to be effective in the debugger. 🙋
 
+**Mobile Demo**
+
+For UI/UX reasons, on mobile the debugger is simply a web app for testing the lib. This is useful for testing a ROM on the go. For playing games, I would suggest [VaporBoy](https://vaporboy.net/). Below is an example of the mobile demo:
+
+![Pokemon Crystal Wasmboy Mobile Demo](./docs/images/debuggerMobileDemo.gif)
+
 **Anaytics / Privacy**
 
 [Analytics Wrapper Service](./demo/debugger/analytics.js)
@@ -123,12 +130,6 @@ Analytics is used on this application simply for performance monitoring, and tra
 - Whenever the Google Drive option is selected.
 - Whenever the mobile demo is manually reloaded.
 
-**Mobile Demo**
-
-For UI/UX reasons, on mobile the debugger is simply a web app for testing the lib. This is useful for testing a ROM on the go. For playing games, I would suggest [VaporBoy](https://vaporboy.net/). Below is an example of the mobile demo:
-
-![Pokemon Crystal Wasmboy Mobile Demo](./docs/images/debuggerMobileDemo.gif)
-
 ### Benchmark
 
 [Application Link](https://wasmboy.app/benchmark/)
@@ -137,6 +138,10 @@ For UI/UX reasons, on mobile the debugger is simply a web app for testing the li
 
 Since WasmBoy is built in AssemblyScript, it can also run it's core through the Typescript compiler if we mock out some of the WebAssembly interface. The benchmarking tool was built as a way to compare WebAssembly performance to Javascript / ES6 performance, after compiling the core to both WebAssembly and Javascript. It includes detailed stats, live running output, and multiple graphs. Also great for comparing the performance of devices that run WasmBoy.
 
+**Example**
+
+![WasmBoy Benchmark Runner Section on Safari](./docs/images/benchmarkSafariBackToColorRunner.png)
+
 **Anaytics / Privacy**
 
 Analytics is used on this application simply for performance monitoring, and tracking popularity of the application. The following events are sent, with nothing more than the event name. The analytics provider used is [Google Analytics](https://analytics.google.com/analytics/web/).
@@ -145,9 +150,35 @@ Analytics is used on this application simply for performance monitoring, and tra
 - Whenever the benchmark is ran.
 - Whenever results are rendered for the benchmark.
 
+### Iframe Embed
+
+An Iframe embeddable version of WasmBoy. Simply provide information through [URL Query Params](https://en.wikipedia.org/wiki/Query_string), and embed a ROM on your website! Great for embedding your HomeBrew Game Boy / Game Boy Color games on your website, (WordPress) blog, and game hosting services such as [itch.io](https://itch.io/).
+
 **Example**
 
-![WasmBoy Benchmark Runner Section on Safari](./docs/images/benchmarkSafariBackToColorRunner.png)
+[Example Tobu Tobu Girl, Homebrew Hub Iframe](https://wasmboy.app/iframe/?rom-name=Tobu%20Tobu%20Girl&play-poster=https://gbhh.avivace.com/database/entries/tobutobugirl/screenshot1.bmp&rom-url=https://gbhh.avivace.com/database/entries/tobutobugirl/tobu.gb)
+
+![Gif of the Tobu Tobu Girl, Home brew hub example](./docs/images/iframeEmbed.gif)
+
+**Usage**
+
+Add an iframe to your website like the following:
+
+```html
+<iframe title="WasmBoy Iframe Embed" width="160" height="144" src="https://wasmboy.app/iframe/?[QUERY_PARAMS_GO_HERE]"> </iframe>
+```
+
+The iframe is configured by adding [URL Query Params](https://en.wikipedia.org/wiki/Query_string). The configuration params are:
+
+- `rom-url` - **(Required)** The URL to the `.gb` or `.gbc` ROM that will be loaded, fetched, and played.
+- `rom-name` - The name of the ROM being played.
+- `play-poster` - The URL to the image shown at the intial "click to play", play poster.
+
+Please ensure all assets that are being loaded by the iframe embed, such as ROMs and images, will work with [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). The WasmBoy Iframe Embed will take the full width and height (100%) of it's iframe container. Thus, it will be up to your styling to ensure the iframe preserves the GameBoy 160x144 resolution.
+
+**Anaytics / Privacy**
+
+Analytics is used on this application simply for performance monitoring, and tracking popularity of the application. The analytics provider used is [Google Analytics](https://analytics.google.com/analytics/web/). Only basic user visit data is recorded / used.
 
 # Tests
 
@@ -325,3 +356,5 @@ Using the [gh-pages](https://www.npmjs.com/package/gh-pages) for debugger/demo d
 - [The Cycle Accurate Game Boy Docs](https://github.com/AntonioND/giibiiadvance/blob/master/docs/TCAGBD.pdf)
 
 - [Demos for perf testing GB/GBC](http://privat.bahnhof.se/wb800787/gb/demos/)
+
+- [Homebrew Hub - Collection of GameBoy Homebrew](https://gbhh.avivace.com/)

demo/debugger/components/mobile/mobile.js

@@ -84,7 +84,7 @@ export default class Mobile extends Component {
           {/* Getting Started */}
           <h3>Getting Started</h3>
           <div>
-            To try a ROM / Game, click the 💾 button, to open the ROM loader. To Play/Pause emulation, click the ⏯️ button. For more
+            To try a ROM / Game, click the 📁 button, to open the ROM loader. To Play/Pause emulation, click the ⏯️ button. For more
             information on WasmBoy, click the ℹ️ button. To reload this demo, click the ♻️ button.
           </div>
         </div>

demo/debugger/components/mobile/touchpad/touchpad.js

@@ -144,7 +144,7 @@ export default class Touchpad extends Component {
 
   togglePlayPause() {
     if (!WasmBoy.isLoadedAndStarted()) {
-      Pubx.get(PUBX_KEYS.NOTIFICATION).showNotification('Please load a ROM first. 💾');
+      Pubx.get(PUBX_KEYS.NOTIFICATION).showNotification('Please load a ROM first. 📁');
       return;
     }
 
@@ -185,7 +185,7 @@ export default class Touchpad extends Component {
 
         <div class="debugger-input">
           <button class="remove-default-button" onClick={() => this.openROM()}>
-            💾
+            📁
           </button>
           <button class="remove-default-button" onClick={() => this.togglePlayPause()}>
             ⏯️

demo/iframe/App.svelte

@@ -0,0 +1,77 @@
+<script>
+  import PlayPoster from './components/PlayPoster.svelte'; 
+  import WasmBoy from './components/WasmBoy.svelte'; 
+  import Modal from './components/Modal.svelte';
+  import ControlsBar from './components/ControlsBar.svelte'; 
+  import {isStarted, isLoaded} from './stores.js';
+
+  import loadScript from 'load-script';
+
+  // Load our analytics
+  if (typeof window !== 'undefined') {
+    loadScript('https://www.googletagmanager.com/gtag/js?id=UA-125276735-3', (err, script) => {
+      if (err) {
+        console.error(err);
+        return;
+      }
+
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        window.dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+      gtag('config', 'UA-125276735-3');
+    });
+  }
+</script>
+
+<main class="app">
+  {#if $isStarted === false}
+    <PlayPoster />
+  {:else}
+    <WasmBoy />
+    {#if $isLoaded}
+      <Modal />
+      <ControlsBar />
+    {/if}
+  {/if}
+</main>
+
+<style>
+  .app {
+    width: 100%;
+    height: 100%;
+  }
+
+  :global(.icon-button) {
+    width: 50px;
+    height: 50px;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  /* https://www.30secondsofcode.org/css/s/donut-spinner/ */
+  @keyframes donut-spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  :global(.donut) {
+    display: inline-block;
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left-color: #654ff0;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    animation: donut-spin 1.2s linear infinite;
+  }
+
+  :global(.error) {
+    color: red;
+  }
+</style>

demo/iframe/assets/WasmBoyCartridgeLogo.png

@@ -0,0 +1,47 @@
+<script>
+  import {playPoster, romName, romUrl} from '../stores.js';
+  import packageJson from "../../../package.json";
+</script>
+
+<div class="about">
+
+  <h1>WasmBoy Embed Player</h1>
+  <p>This is a dynamic GameBoy / GameBoy color ROM player powered by WasmBoy. WasmBoy is a Game Boy / Game Boy Color emulation library, 🎮written for WebAssembly using <a href="https://github.com/AssemblyScript/assemblyscript" target="_blank">AssemblyScript</a>. 🚀 This embed is built with <a href="https://svelte.dev/" target="_blank">Svelte</a>, and input is handled by <a href="https://github.com/torch2424/responsive-gamepad" target="_blank">Responsive Gamepad</a>. WasmBoy is written by <a href="https://github.com/torch2424" target="_blank">Aaron Turner (torch2424)</a>, and Licensed under <a href="https://github.com/torch2424/wasmboy/blob/master/LICENSE" target="_blank">GPL 3.0</a>.</p>
+  <div>WasmBoy Version: {packageJson.version}</div>
+  <h1>WasmBoy Links</h1>
+  <ul>
+    <li><a href="https://github.com/torch2424/wasmboy" target="_blank">Github Repo</a></li> 
+    <li><a href="https://www.npmjs.com/package/wasmboy" target="_blank">NPM Package</a></li>
+  </ul>
+  <h1>Embed Configuration</h1>
+  <ul>
+    {#if $romName}
+      <li><b>ROM Name:</b> {$romName}</li>
+    {/if}
+    {#if $romUrl}
+      <li><b>ROM URL:</b> <a href={$romUrl} target="_blank">{$romUrl}</a></li>
+    {/if}
+    {#if $playPoster}
+      <li><b>Play Poster:</b> <a href={$playPoster} target="_blank">{$playPoster}</a></li>
+    {/if}
+  </ul>
+  <h1>Help</h1>
+  <h2>Controls</h2>
+  <p>This player supports Keyboard and Gamepad input per the default <a href="https://github.com/torch2424/responsive-gamepad" target="_blank">Responsive Gamepad</a> configuration. For keyboard controls: Directional (Dpad) controls are handled by the arrows keys, or WASD on your keyboard. The A button is controlled by the "Z" key. The B button is controlled by the "X" key. Start is handled by the "Enter" key. Select is handled by the "Shift" key.</p>
+  <h2>Saves States / Loading States</h2>
+  <p>Save states can be made by clicking the save icon in the control bar at the bottom of the page. Save states will also be made whenever you navigate away from the running iframe, or when the page is refreshed. Save states can be loaded by clicking the load icon in the control bar, and choosing the appropiate save state represented by the screenshot, and time at which the save states was made. Save states are stored locally in your browser in the IndexedDB API. Meaning they are not backed up to a server, and can be accidentally deleted when clearing your browser cache.</p>
+  <h2>Reporting Bugs / Making Suggestions</h2>
+  <p>Please feel free to file any bugs, suggestions, issues, etc.. At the <a href="https://github.com/torch2424/wasmboy" target="_blank">WasmBoy Github repo</a>.</p>
+</div>
+
+
+<style>
+  .about {
+    color: #fff;
+    font-size: 1.15em;
+  }
+
+  .about a, .about a:visited {
+    color: #b5cbfc;
+  }
+</style>

demo/iframe/components/About.svelte

@@ -0,0 +1,141 @@
+<script>
+  import {isPlaying, setStatus, status, triggerSaveState, showLoadState, showAbout} from '../stores.js';
+  import PlayIcon from './icons/PlayIcon.svelte';
+  import PauseIcon from './icons/PauseIcon.svelte';
+  import SaveIcon from './icons/SaveIcon.svelte';
+  import LoadIcon from './icons/LoadIcon.svelte';
+  import AboutIcon from './icons/AboutIcon.svelte';
+
+  // Subscribe to our current status
+  let displayStatus = false;
+  let statusTimeout;
+  // Subscribe to status changes, and show the status message
+  // on changes
+  status.subscribe(value => {
+
+    if (statusTimeout) {
+      clearTimeout(statusTimeout);
+    }
+
+    displayStatus = true;
+
+    if (value.timeout < 0) {
+      return false;
+    }
+
+    statusTimeout = setTimeout(() => {
+      displayStatus = false;
+      statusTimeout = undefined;
+    }, value.timeout)
+  });
+
+  const handlePlayPause = () => {
+    if ($isPlaying) {
+      isPlaying.set(false);
+      setStatus('Paused', -1);
+    } else {
+      isPlaying.set(true);
+      setStatus('Playing!');
+    }
+  };
+
+  const handleSave = () => {
+    triggerSaveState();
+  };
+
+  const handleLoad = () => {
+    showLoadState();
+  };
+
+  const handleAbout = () => {
+    showAbout();
+  };
+</script>
+
+<footer class="controls-bar">
+  {#if displayStatus}
+    <div class="status">{$status.message}</div>
+  {/if}
+
+  <ul class="controls-buttons">
+    <li>
+      <button class="icon-button" on:click={handlePlayPause}>
+        {#if $isPlaying}
+          <PauseIcon />
+        {:else}
+          <PlayIcon />
+        {/if}
+      </button>
+    </li>
+
+    <li>
+      <button class="icon-button" on:click={handleSave}>
+        <SaveIcon />
+      </button>
+    </li>
+
+    <li>
+      <button class="icon-button" on:click={handleLoad}>
+        <LoadIcon />
+      </button>
+    </li>
+
+    <li>
+      <button class="icon-button" on:click={handleAbout}>
+        <AboutIcon />
+      </button>
+    </li>
+  </ul>
+</footer>
+
+<style>
+
+  .controls-bar {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+
+    transform: translateY(0px);
+    transition: transform 0.5s;
+  }
+
+  :global(html):hover .controls-bar, :global(body):hover .controls-bar {
+    transform: translateY(-50px);
+  }
+
+  .status, .controls-buttons {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(0,0,0,0.85);
+  }
+
+  .status {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    padding: 20px;
+
+    color: #fff;
+
+    z-index: 1;
+  }
+
+  .controls-buttons {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    list-style-type: none;
+
+    transform: translateY(50px);
+    height: 50px;
+    width: 100%;
+    margin: 0px;
+    padding: 0px;
+  }
+</style>