wall haptics

src/components/wall-haptics.js

@@ -0,0 +1,37 @@
+/**
+ * Listen to aabb-collider event for wall haptics.
+ */
+AFRAME.registerComponent('wall-haptics', {
+  dependencies: ['aabb-collider'],
+
+  init: function () {
+    const el = this.el;
+    this.isHittingWall = false;
+    el.setAttribute('haptics__wall', {dur: 50, force: 0.025});
+
+    this.checkIfHittingWall = this.checkIfHittingWall.bind(this);
+    el.addEventListener('hitstart', this.checkIfHittingWall);
+    el.addEventListener('hitend', this.checkIfHittingWall);
+
+    this.tick = AFRAME.utils.throttleTick(this.tick.bind(this), 50);
+  },
+
+  /**
+   * On aabb-collider event, check if we are still hitting a wall.
+   */
+  checkIfHittingWall: function () {
+    const intersectedEls = this.el.components['aabb-collider'].intersectedEls;
+    this.isHittingWall = false;
+    for (let i = 0; i < intersectedEls.length; i++) {
+      if (intersectedEls[i].components.wall) {
+        this.isHittingWall = true;
+        return;
+      }
+    }
+  },
+
+  tick: function () {
+    if (!this.isHittingWall) { return; }
+    this.el.components.haptics__wall.pulse();
+  }
+});

src/components/wall.js

@@ -1,3 +1,6 @@
+/**
+ * Wall speed and haptics.
+ */
 AFRAME.registerComponent('wall', {
   schema: {
     speed: {default: 1.0}
@@ -9,23 +12,29 @@ AFRAME.registerComponent('wall', {
 
   pause: function () {
     this.el.object3D.visible = false;
-    this.el.removeAttribute('collidable');
+    this.el.removeAttribute('data-collidable-head');
+    this.el.removeAttribute('data-collidable-saber');
   },
 
   play: function () {
     this.el.object3D.visible = true;
-    this.el.setAttribute('collidable', '');
+    this.el.setAttribute('data-collidable-head', '');
+    this.el.setAttribute('data-collidable-saber', '');
   },
 
   tock: function (time, delta) {
     this.el.object3D.position.z += this.data.speed * (delta / 1000);
-    if (this.el.object3D.position.z > this.maxZ) { this.returnToPool(); }
+    if (this.el.object3D.position.z > this.maxZ) {
+      this.returnToPool();
+      return;
+    }
   },
 
   returnToPool: function () {
     this.el.sceneEl.components.pool__wall.returnEntity(this.el);
     this.el.object3D.position.z = 9999;
     this.el.pause();
-    this.el.removeAttribute('collidable');
+    this.el.removeAttribute('data-collidable-head');
+    this.el.removeAttribute('data-collidable-saber');
   }
 });