Move all input handling to aframe-input-mapping-component

package.json

@@ -9,6 +9,7 @@
     "build": "webpack"
   },
   "dependencies": {
+    "aframe-input-mapping-component": "https://github.com/fernandojsg/aframe-input-mapping-component",
     "aframe-teleport-controls": "^0.3.0",
     "easyrtc": "^1.1.0",
     "express": "^4.15.5",

public/index.html

@@ -4,6 +4,7 @@
   <title>A-Frame Social VR Demo</title>
   <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>
+  
   <script src="easyrtc/easyrtc.js"></script>
   <script src="./app.bundle.js"></script>
 </head>
@@ -14,7 +15,7 @@
                      audio: true;
                      debug: true;
                      connectOnLoad: false"
-    mute-mic="eventSrc: #right-hand; toggleEvents: menudown, xbuttondown">
+    mute-mic="eventSrc: #right-hand; toggleEvents: action_mute">
     <a-assets>
       <img id="grid" src="assets/grid.png" crossorigin="anonymous">
       <img id="sky" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg" crossorigin="anonymous" />
@@ -50,7 +51,11 @@
       </script>
     </a-assets>
 
-    <a-entity id="player-rig" networked wasd-controls snap-rotation="leftEventSrc: #right-hand; rightEventSrc: #right-hand; pivotSrc: #head">
+    <a-entity
+        id="player-rig"
+        networked
+        wasd-controls
+        snap-rotation="pivotSrc: #head">
         <a-entity
             id="head"
             camera="userHeight: 1.6"
@@ -63,20 +68,26 @@
 
         <a-entity
             id="left-hand"
+
             vive-controls="hand: left"
             oculus-touch-controls="hand: left"
+            daydream-controls
+            gearvr-controls
+
             axis-dpad="centerZone: 1"
-            teleport-controls="cameraRig: #player-rig; button: dpadcenter"
+            teleport-controls="cameraRig: #player-rig; button: action_teleport_"
             networked="template:#hand-template;showLocalTemplate:true;"></a-entity>
 
         <a-entity
             id="right-hand"
+
             vive-controls="hand: right"
             oculus-touch-controls="hand: right"
             daydream-controls
             gearvr-controls
+
             axis-dpad
-            teleport-controls="cameraRig: #player-rig; button: dpadcenter"
+            teleport-controls="cameraRig: #player-rig; button: action_teleport_"
             networked="template:#hand-template;showLocalTemplate:true;"></a-entity>
     </a-entity>
 

src/components/snap-rotation.js

 /**
  * @fileOverview
- * Rotate an entity in fixed increments based on events or keyboard input
+ * Rotate an entity in fixed increments based on events
  * @name snap-rotation.js
- * @TODO pull keyboard input out into a component that just emits events
  * @TODO allow specifying multiple events and sources
  */
 
@@ -11,14 +10,12 @@ AFRAME.registerComponent("snap-rotation", {
     rotationAxis: { type: "vec3", default: { x: 0, y: 1, z: 0 } },
     rotationDegres: { default: 45 },
 
-    leftKey: { default: "q" },
-    leftEvent: { default: "dpadleftdown" },
-    leftEventSrc: { type: "selector" },
+    leftEvent: { default: "action_snap_rotate_left" },
+    leftEventSrc: { type: "selector", default: "a-scene" },
+
+    rightEvent: { default: "action_snap_rotate_right" },
+    rightEventSrc: { type: "selector", default: "a-scene" },
 
-    rightKey: { default: "e" },
-    rightEvent: { default: "dpadrightdown" },
-    rightEventSrc: { type: "selector" },
-    
     pivotSrc: { type: "selector" }
   },
 
@@ -27,7 +24,7 @@ AFRAME.registerComponent("snap-rotation", {
   },
 
   update: function() {
-    const {rotationAxis, rotationDegres} = this.data;
+    const { rotationAxis, rotationDegres } = this.data;
 
     const angle = rotationDegres * THREE.Math.DEG2RAD;
     this.lRotMat = new THREE.Matrix4().makeRotationAxis(rotationAxis, angle);
@@ -36,7 +33,6 @@ AFRAME.registerComponent("snap-rotation", {
 
   play: function() {
     const { leftEventSrc, leftEvent, rightEventSrc, rightEvent } = this.data;
-    window.addEventListener("keypress", this.onButtonPressed);
     rightEventSrc &&
       rightEventSrc.addEventListener(rightEvent, this.onButtonPressed);
     leftEventSrc &&
@@ -45,7 +41,6 @@ AFRAME.registerComponent("snap-rotation", {
 
   pause: function() {
     const { leftEventSrc, leftEvent, rightEventSrc, rightEvent } = this.data;
-    window.removeEventListener("keypress", this.onButtonPRessed);
     rightEventSrc &&
       rightEventSrc.removeEventListener(rightEvent, this.onButtonPressed);
     leftEventSrc &&
@@ -61,17 +56,15 @@ AFRAME.registerComponent("snap-rotation", {
       const {
         rotationAxis,
         rotationDegres,
-        leftKey,
         leftEvent,
-        rightKey,
         rightEvent,
         pivotSrc
       } = this.data;
 
       var rot;
-      if (e.type === leftEvent || (leftKey && e.key === leftKey)) {
+      if (e.type === leftEvent) {
         rot = this.lRotMat;
-      } else if (e.type === rightEvent || (rightKey && e.key === rightKey)) {
+      } else if (e.type === rightEvent) {
         rot = this.rRotMat;
       } else {
         return;

src/index.js

 import "networked-aframe";
 import "aframe-teleport-controls";
+import "aframe-input-mapping-component";
 
 import "./components/axis-dpad";
 import "./components/snap-rotation";
@@ -21,6 +22,31 @@ NAF.schemas.add({
   ]
 });
 
+AFRAME.registerInputMappings({
+  default: {
+    common: {
+      // @TODO these dpad events are emmited by an axis-dpad component. This should probalby move into either tracked-controller or input-mapping
+      dpadleftdown: "action_snap_rotate_left",
+      dpadrightdown: "action_snap_rotate_right",
+      dpadcenterdown: "action_teleport_down", // @TODO once once #30 lands in aframe-teleport controls this just maps to "action_teleport_aim"
+      dpadcenterup: "action_teleport_up" // @TODO once once #30 lands in aframe-teleport controls this just maps to "action_teleport_teleport"
+    },
+    "vive-controls": {
+      menudown: "action_mute"
+    },
+    "oculus-touch-controls": {
+      xbuttondown: "action_mute"
+    },
+    daydream: {
+      menudown: "action_mute"
+    },
+    keyboard: {
+      m_press: "action_mute",
+      q_press: "action_snap_rotate_left",
+      e_press: "action_snap_rotate_right"
+    }
+  }
+});
 window.onSceneLoad = function() {
   var username = generateName();
   do {

yarn.lock

@@ -38,6 +38,10 @@ acorn@^5.0.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.2.tgz#911cb53e036807cf0fa778dc5d370fbd864246d7"
 
+"aframe-input-mapping-component@https://github.com/fernandojsg/aframe-input-mapping-component":
+  version "1.0.0"
+  resolved "https://github.com/fernandojsg/aframe-input-mapping-component#577cadad5a42e7216843dfeca9770fa8be465e09"
+
 aframe-lerp-component@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/aframe-lerp-component/-/aframe-lerp-component-1.1.0.tgz#dc8c12c53698770c30f25eef8873e34a4e79c765"