Added a Speed Toggle in the Control Panel / Added Quick Speed & Play …

…Pause Hotkeys (#123)

* Added a Speed Toggle in the control panel

* Added hotkeys

* Added controls in the about page

package.json

@@ -47,7 +47,7 @@
     "eslint-config-synacor": "^1.1.0",
     "husky": "^0.14.3",
     "if-env": "^1.0.0",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.1",
     "np": "^5.0.1",
     "npm-run-all": "^4.1.5",
     "preact-cli": "^2.2.1",

src/components/controlPanel/about/about.js

@@ -58,6 +58,55 @@ export default class About extends Component {
           <b>VaporBoy is still in beta</b>. Please expect bugs. And check the{" "}
           <b>F.A.Q</b> for where to report them.
         </p>
+        <h1>Controls</h1>
+        <p>This covers the controls for desktop (keyboard) and USB / Bluetooth Gamepads. Touch Controls model the original GameBoy controls.</p>
+        <table>
+          <tr>
+            <th>Action</th>
+            <th>Keyboard</th>
+            <th>External GamePad</th>
+          </tr>
+          <tr>
+            <td>GameBoy Up</td>
+            <td>UpArrow / W</td>
+            <td>Dpad Up / Left Analog Up</td>
+          </tr>
+          <tr>
+            <td>GameBoy Right</td>
+            <td>RightArrow / D</td>
+            <td>Dpad Right / Left Analog Right</td>
+          </tr>
+          <tr>
+            <td>GameBoy Down</td>
+            <td>DownArrow / S</td>
+            <td>Dpad Down / Left Analog Down</td>
+          </tr>
+          <tr>
+            <td>GameBoy Left</td>
+            <td>LeftArrow / A</td>
+            <td>Dpad Left / Left Analog Left</td>
+          </tr>
+          <tr>
+            <td>GameBoy A</td>
+            <td>Z</td>
+            <td>A / X</td>
+          </tr>
+          <tr>
+            <td>GameBoy B</td>
+            <td>X</td>
+            <td>B / Y</td>
+          </tr>
+          <tr>
+            <td>Play/Pause Hotkey</td>
+            <td>Space</td>
+            <td>Special</td>
+          </tr>
+          <tr>
+            <td>Quick Speed Hotkey</td>
+            <td>Q / U</td>
+            <td>Left Trigger / Right Trigger</td>
+          </tr>
+        </table>
         <h1>F.A.Q</h1>
         <ul>
           <li>

src/components/controlPanel/about/about.scss

@@ -46,3 +46,7 @@
     margin-top: 0px;
   }
 }
+
+table, th, td {
+  border: 1px solid black;
+}

src/components/controlPanel/controlPanelSelect/controlPanelSelect.js

@@ -44,6 +44,9 @@ export default class ControlPanelSelect extends Component {
       controlPanel: {
         ...Pubx.get(PUBX_CONFIG.CONTROL_PANEL_KEY)
       },
+      speed: {
+        ...Pubx.get(PUBX_CONFIG.SPEED_KEY)
+      },
       pubxSaveStatesSubscriberKey
     });
   }
@@ -95,6 +98,17 @@ export default class ControlPanelSelect extends Component {
       });
   }
 
+  toggleSpeed() {
+    this.state.speed.toggleSpeed();
+    let speed = this.state.speed.getSpeed();
+    WasmBoy.setSpeed(speed);
+
+    this.state.controlPanel.hideControlPanel();
+    Pubx.get(PUBX_CONFIG.NOTIFICATION_KEY).showNotification(
+      NOTIFICATION_MESSAGES.TOGGLE_SPEED
+    );
+  }
+
   viewROMSourceSelector() {
     this.state.controlPanel.addComponentToControlPanelViewStack(
       "Select a ROM",
@@ -213,6 +227,12 @@ export default class ControlPanelSelect extends Component {
       }
     }
 
+    // Get our current speed
+    let speed = 1.0;
+    if (this.state.speed) {
+      speed = this.state.speed.getSpeed();
+    }
+
     return (
       <div class="control-panel-select">
         <ul class="control-panel-select__grid">
@@ -245,6 +265,16 @@ export default class ControlPanelSelect extends Component {
               <div>Load State</div>
             </button>
           </li>
+          <li class="control-panel-select__grid__item">
+            <button
+              onclick={() => this.toggleSpeed()}
+              disabled={!WasmBoy.isPlaying()}
+              aria-label={`Toggle Speed - Current: ${speed}x`}
+            >
+              <div>⚡</div>
+              <div>{`Toggle Speed - Current: ${speed}x`}</div>
+            </button>
+          </li>
           <li class="control-panel-select__grid__item">
             <button
               onclick={() => this.viewOptions()}

src/components/wasmboyCanvas/wasmboyCanvas.js

@@ -4,6 +4,7 @@ import { WasmBoy } from "wasmboy";
 
 import { Pubx } from "../../services/pubx";
 import { PUBX_CONFIG } from "../../pubx.config";
+import { NOTIFICATION_MESSAGES } from "../../notification.messages";
 
 import { getVaporBoyLogo } from "../../vaporboyLogo";
 
@@ -19,6 +20,42 @@ import {
 
 const packageJson = require("../../../package.json");
 
+// Add some hotkeys
+let quickSpeed = false;
+WasmBoy.ResponsiveGamepad.onInputsChange(
+  [
+    WasmBoy.ResponsiveGamepad.RESPONSIVE_GAMEPAD_INPUTS.LEFT_TRIGGER,
+    WasmBoy.ResponsiveGamepad.RESPONSIVE_GAMEPAD_INPUTS.RIGHT_TRIGGER,
+    WasmBoy.ResponsiveGamepad.RESPONSIVE_GAMEPAD_INPUTS.SPECIAL
+  ],
+  state => {
+    // Quick Speed
+    if (!quickSpeed && (state.LEFT_TRIGGER || state.RIGHT_TRIGGER)) {
+      WasmBoy.setSpeed(3.0);
+      quickSpeed = true;
+      Pubx.get(PUBX_CONFIG.NOTIFICATION_KEY).showNotification(
+        NOTIFICATION_MESSAGES.QUICK_SPEED_HOTKEY
+      );
+    } else if (quickSpeed && (!state.LEFT_TRIGGER && !state.RIGHT_TRIGGER)) {
+      WasmBoy.setSpeed(1.0);
+      quickSpeed = false;
+    }
+
+    // Play / Pause
+    if (WasmBoy.isPlaying() && state.SPECIAL) {
+      WasmBoy.pause();
+      Pubx.get(PUBX_CONFIG.NOTIFICATION_KEY).showNotification(
+        NOTIFICATION_MESSAGES.PLAY_PAUSE_HOTKEY
+      );
+    } else if (!WasmBoy.isPlaying() && state.SPECIAL) {
+      WasmBoy.play();
+      Pubx.get(PUBX_CONFIG.NOTIFICATION_KEY).showNotification(
+        NOTIFICATION_MESSAGES.PLAY_PAUSE_HOTKEY
+      );
+    }
+  }
+);
+
 export default class WasmBoyCanvas extends Component {
   constructor() {
     super();
@@ -156,6 +193,9 @@ export default class WasmBoyCanvas extends Component {
         onPause: () => {
           this.handleWasmBoyIsPlayingChange();
         },
+        onReady: () => {
+          Pubx.get(PUBX_CONFIG.SPEED_KEY).resetSpeed();
+        },
         saveStateCallback: saveStateObject => {
           // Fire off analytics ping, for session length
           if (window !== undefined && window.gtag) {

src/notification.messages.js

@@ -18,5 +18,8 @@ export const NOTIFICATION_MESSAGES = {
   ERROR_APPLY_SETTINGS: "Error! Could not apply settings... ⚙️",
   ERROR_RESET_SETTINGS: "Error! Could not reset settings... ⚙️",
   ERROR_FILE_TYPE: "Invalid file type. 😞",
-  ERROR_GOOGLE_DRIVE: "Error getting file from google drive 💔"
+  ERROR_GOOGLE_DRIVE: "Error getting file from google drive 💔",
+  TOGGLE_SPEED: "Speed Toggled! ⚡",
+  QUICK_SPEED_HOTKEY: "Quick Speed HotKey! ⚡",
+  PLAY_PAUSE_HOTKEY: "Play/Pause Hotkey! ⏯️"
 };

src/pubx.config.js

@@ -19,6 +19,7 @@ export const PUBX_CONFIG = {
   VAPORBOY_EFFECTS_KEY: "VAPORBOY_EFFECTS_KEY",
   NOTIFICATION_KEY: "NOTIFICATION_KEY",
   LOADING_KEY: "LOADING_KEY",
+  SPEED_KEY: "SPEED_KEY",
   INITIALIZE: () => {
     initializePubxLayout();
     initializePubxControlPanel();
@@ -28,6 +29,7 @@ export const PUBX_CONFIG = {
     initializePubxVaporBoyEffects();
     initializePubxNotification();
     initializePubxLoading();
+    initializePubxSpeed();
   }
 };
 
@@ -226,3 +228,22 @@ const initializePubxLoading = () => {
   };
   Pubx.publish(PUBX_CONFIG.LOADING_KEY, pubxLoadingState);
 };
+
+const initializePubxSpeed = () => {
+  let speed = 1.0;
+  const pubxSpeedState = {
+    toggleSpeed: () => {
+      speed += 0.5;
+      if (speed > 2.0) {
+        speed = 0.5;
+      }
+    },
+    getSpeed: () => {
+      return speed;
+    },
+    resetSpeed: () => {
+      speed = 1.0;
+    }
+  };
+  Pubx.publish(PUBX_CONFIG.SPEED_KEY, pubxSpeedState);
+};

src/vaporboyOptions.config.js

@@ -16,5 +16,5 @@ export const VAPORBOY_DEFAULT_OPTIONS = {
   tileCaching: true,
   gameboyFrameRate: 60,
   showDebugMenu: false,
-  hideGamepadInExpandedMode: false
+  hideGamepadInExpandedMode: false,
 };