Merge pull request #57 from SpringRoll/feature/control-plugin-split

Feature/control plugin split

Author: chipbell4

README.md

@@ -284,24 +284,44 @@ radio buttons so only the valid ones are displayed to users.
 See [the SpringRoll Application Class docs](https://github.com/SpringRoll/SpringRoll/tree/develop/src#responding-to-the-container) for more information on
 the request format and how game developers provide those values.
 
-### ControlsPlugin
+### Controls
+There are two plugins associated with in-game controls: `ControlSensitivityPlugin` and `KeyboardMapPlugin`.
+The Control Sensitivity Plugin allows the user to determine the sensitivity of custom pointers in game. This plugin expects an HTML Input
+The Keyboard Map Plugin allows users to re-map the keys/controls used in-game to something they are more comfortable with.
+
 ```javascript
-import { ControlsPlugin, Container } from 'springroll-container';
+import { ControlSensitivityPlugin, KeyboardMapPlugin, Container } from 'springroll-container';
 
 const container = new springroll.Container('#game', {
   plugins: [
-    //ControlsPlugin also accepts an [optional] initial value for its control sensitivity
-    new ControlsPlugin({
-      //Expects an HTML Input Element of type="range"
-      sensitivitySliders: '#sensitivity-slider-selector',
+    //ControlSensitivityPlugin expects an input of type=range for it's input.
+    new ControlSensitivityPlugin('#sensitivity-slider-selector', {
       defaultSensitivity: 0.5, //control sensitivity goes from 0.0 to 1.0. Default = 0.5
-      keyContainers: '#key-container', // container element that will contain the mappable key buttons.
     }),
+    //The KeyboardMapPlugin expects a div or similar container element as it's selector. It will automatically build out the
+    //buttons to use for re-mapping controls based on what the application returns. See note below for HTML structure.
+    new KeyboardMapPlugin('#key-container', {
+      //you can provide a custom classname that will be attached to each key button that is generated
+      customClassName: 'custom-button-class' //default='springrollContainerKeyBinding__button'.
+    })
   ]
 });
 container.openPath('game.html');
 ```
-*The Key Binding functionality of the ControlsPlugin works similarly to the HUDPlugin in that it requests information from the Springroll Application. See [the SpringRoll Application Class docs](https://github.com/SpringRoll/SpringRoll/tree/v2/src#handling-state-change) for more information on the request format.
+*The Key Binding functionality of the `KeyboardMapPlugin` works similarly to the HUDPlugin in that it requests information from the Springroll Application. See [the SpringRoll Application Class docs](https://github.com/SpringRoll/SpringRoll/tree/v2/src#handling-state-change) for more information on the request format.
+
+The HTML output within the key container will be look like the following:
+The className shown is the default, but can be overridden through the `customClassName` option. The IDs are generated based on the action name.
+
+```html
+<div id="keyContainer">
+  <label for="keyBoardMapPlugin-Up">Up</label>
+  <button class="springrollContainerKeyBinding__button" value="Up" id="keyBoardMapPlugin-Up">w</button>
+  <label for="keyBoardMapPlugin-Down">Down</label>
+  <button class="springrollContainerKeyBinding__button" value="Down"id="keyBoardMapPlugin-Down">s</button>
+</div>
+```
+
 
 Keybindings are tracked visually by setting the textContent of the buttons themselves.
 

dist/SpringRoll-Container-umd.js

@@ -0,0 +1,43 @@
+import { SliderPlugin } from '../base-plugins';
+
+/**
+ * @export
+ * @class ControlSensitivityPlugin
+ * @extends {SliderPlugin}
+ */
+export class ControlSensitivityPlugin extends SliderPlugin {
+  /**
+   *Creates an instance of ControlSensitivityPlugin.
+   * @param {string | HTMLElement} sensitivitySliders
+   * @param {object} options
+   * @param {number} [options.defaultSensitivity=0.5]
+   * @memberof ControlSensitivityPlugin
+   */
+  constructor(sensitivitySliders, { defaultSensitivity = 0.5 } = {}) {
+    super(sensitivitySliders, 'Control-Sensitivity-Plugin', {defaultValue: defaultSensitivity, featureName: ControlSensitivityPlugin.controlSensitivityKey});
+
+    this.sendAllProperties = this.sendAllProperties.bind(this);
+
+    for (let i = 0; i < this.slidersLength; i++) {
+      this.sliders[i].enableSliderEvents(this.onControlSensitivityChange.bind(this));
+    }
+  }
+
+  /**
+   * @memberof ControlSensitivityPlugin
+   * @param {Event} e
+   */
+  onControlSensitivityChange(e) {
+    this.currentValue = e.target.value;
+    this.sendProperty(ControlSensitivityPlugin.controlSensitivityKey, this.currentValue);
+  }
+
+  /**
+   * @readonly
+   * @static
+   * @memberof ControlSensitivityPlugin
+   */
+  static get controlSensitivityKey() {
+    return 'controlSensitivity';
+  }
+}

dist/SpringRoll-Container-umd.js.map

@@ -0,0 +1,106 @@
+import { Container, ControlSensitivityPlugin } from '../index';
+import { Bellhop } from 'bellhop-iframe';
+import { makeSlider } from '../../TestingUtils';
+
+const initEvent = eventName => {
+  const event = document.createEvent('Event');
+  event.initEvent(eventName, false, true);
+  return event;
+};
+
+describe('ControlSensitivityPlugin', () => {
+  let csp;
+
+  before(() => {
+    document.body.innerHTML = '';
+    const sliderOne = makeSlider('ssOne');
+    const sliderTwo = makeSlider('ssTwo');
+
+    document.body.append(sliderOne, sliderTwo);
+
+    csp = new ControlSensitivityPlugin('#ssOne, #ssTwo');
+    csp.preload({ client: new Bellhop() });
+  });
+
+  it('construct', () => {
+    const iframe = document.createElement('iframe');
+    iframe.id = 'controls-plugin-iframe';
+    document.body.appendChild(iframe);
+    new Container('#controls-plugin-iframe', { plugins: [csp] });
+    csp.init();
+    csp.client.trigger('features', {
+      controlSensitivity: true,
+    });
+
+    expect(csp.sliders[0].slider).to.be.instanceof(HTMLInputElement);
+    expect(csp.sliders[1].slider).to.be.instanceof(HTMLInputElement);
+  });
+
+  it('.onControlSensitivityChange()', () => {
+    expect(csp.sliders[0].value).to.equal('0.5');
+    expect(csp.sliders[1].value).to.equal('0.5');
+
+    csp.sliders[0].value = '1';
+    csp.sliders[0].dispatchEvent(initEvent('change'));
+
+    expect(csp.sliders[0].value).to.equal('1');
+    expect(csp.sliders[1].value).to.equal('1');
+    expect(csp.currentValue).to.equal(1);
+
+    csp.sliders[0].value = 0;
+    csp.sliders[0].dispatchEvent(initEvent('change'));
+
+    expect(csp.sliders[0].value).to.equal('0');
+    expect(csp.sliders[1].value).to.equal('0');
+    expect(csp.currentValue).to.equal(0);
+
+    csp.sliders[1].value = 1.1;
+    csp.sliders[1].dispatchEvent(initEvent('change'));
+
+
+    expect(csp.sliders[0].value).to.equal('1');
+    expect(csp.sliders[1].value).to.equal('1');
+    expect(csp.currentValue).to.equal(1);
+
+    csp.sliders[1].value = -1;
+    csp.sliders[1].dispatchEvent(initEvent('change'));
+
+    expect(csp.sliders[0].value).to.equal('0');
+    expect(csp.sliders[1].value).to.equal('0');
+    expect(csp.currentValue).to.equal(0);
+  });
+
+  it('should work without any controls', () => {
+    //set up empty plugin
+    csp = new ControlSensitivityPlugin();
+    csp.preload({ client: new Bellhop() });
+    csp.init();
+    csp.client.trigger('features', {});
+  });
+
+  it('should work with an HTMLElement as parameters', () => {
+    //Plugin re-setup
+    document.body.innerHTML = '';
+    const sliderOne = makeSlider('ssOne');
+
+    document.body.appendChild(sliderOne);
+
+    csp = new ControlSensitivityPlugin(sliderOne);
+    csp.preload({ client: new Bellhop() });
+
+    const iframe = document.createElement('iframe');
+    iframe.id = 'controls-plugin-iframe';
+    document.body.appendChild(iframe);
+    new Container('#controls-plugin-iframe', {plugins: [csp] });
+    csp.init();
+    csp.client.trigger('features', {
+      controlSensitivity: true,
+    });
+
+    csp.sliders[0].value = 1;
+    csp.sliders[0].dispatchEvent(initEvent('change'));
+
+    expect(csp.sliders[0].value).to.equal('1');
+    expect(csp.currentValue).to.equal(1);
+  });
+});