Move wall initilization to wall component. Implement wall warmup

src/components/beat-loader.js

@@ -72,6 +72,8 @@ AFRAME.registerComponent('beat-loader', {
     this.songCurrentTime = undefined;
     this.xhr = null;
     this.stageColors = this.el.components['stage-colors'];
+    // Beats arrive at sword stroke distance synced with the music.
+    this.swordOffset = 1.5;
     this.twister = document.getElementById('twister');
     this.leftStageLasers = document.getElementById('leftStageLasers');
     this.rightStageLasers = document.getElementById('rightStageLasers');
@@ -209,9 +211,7 @@ AFRAME.registerComponent('beat-loader', {
 
   generateBeat: (function () {
     const beatObj = {};
-    // Beats arrive at sword stroke distance synced with the music.
-    const swordOffset = 1.5;
-
+ 
     return function (noteInfo) {
       var beatEl;
       var color;
@@ -231,7 +231,7 @@ AFRAME.registerComponent('beat-loader', {
       if (!beatEl) { return; }
 
       // Apply sword offset. Blocks arrive on beat in front of the user.
-      beatObj.anticipationPosition = -data.beatAnticipationTime * data.beatSpeed - swordOffset;
+      beatObj.anticipationPosition = -data.beatAnticipationTime * data.beatSpeed - this.swordOffset;
       beatObj.color = color;
       beatObj.cutDirection = this.orientationsHumanized[noteInfo._cutDirection];
       beatObj.horizontalPosition = this.horizontalPositionsHumanized[noteInfo._lineIndex];
@@ -251,17 +251,19 @@ AFRAME.registerComponent('beat-loader', {
     var el = this.el.sceneEl.components.pool__wall.requestEntity();
     const data = this.data;
     var speed = this.data.beatSpeed;
+    const wallObj = {};
 
     if (!el) { return; }
 
     const durationSeconds = 60 * (wallInfo._duration / this.bpm);
-    el.setAttribute('wall', 'speed', speed);
-    el.object3D.position.set(
-      this.horizontalPositions[wallInfo._lineIndex],
-      1.30,
-      -(this.data.beatAnticipationTime * speed)
-    );
-    el.object3D.scale.set(wallInfo._width * 0.30, 2.5, durationSeconds * speed);
+    wallObj.anticipationPosition = -data.beatAnticipationTime * data.beatSpeed - this.swordOffset;
+    wallObj.durationSeconds = durationSeconds;
+    wallObj.horizontalPosition = this.horizontalPositionsHumanized[wallInfo._lineIndex];
+    wallObj.speed = speed;
+    wallObj.warmupPosition = -data.beatWarmupTime * data.beatWarmupSpeed;
+    wallObj.width = wallInfo._width;
+    el.setAttribute('wall', wallObj);
+    el.components.wall.updatePosition();
     el.play();
   },
 

src/components/debug-beat-loader.js

@@ -39,12 +39,15 @@ AFRAME.registerComponent('debug-beat-loader', {
 
   generateBeat: function (beatInfo) {
     var type;
+    if (beatInfo.type === 'wall') {
+      this.generateWall(beatInfo);
+      return;
+    }
     if (beatInfo.type === 'mine') {
       type = 3;
     } else {
       type = beatInfo.color === 'red' ? 0 : 1;
     }
-    debugger;
     this.beatLoader.generateBeat({
       _lineIndex: this.beatLoader.positionHumanized[beatInfo.position].index,
       _lineLayer: this.beatLoader.positionHumanized[beatInfo.position].layer,
@@ -55,6 +58,16 @@ AFRAME.registerComponent('debug-beat-loader', {
     });
   },
 
+
+  generateWall: function (wallInfo) {
+    this.beatLoader.bpm = 90;
+    this.beatLoader.generateWall({
+      _lineIndex: this.beatLoader.positionHumanized[wallInfo.position].index,
+      _width: 2,
+      _duration: 3 
+    });
+  },
+
   /**
    * Debug generate beats.
    */
@@ -110,6 +123,7 @@ AFRAME.registerComponent('debug-beat-loader', {
       addButton('arrow', menuDiv);
       addButton('dot', menuDiv);
       addButton('mine', menuDiv);
+      addButton('wall', menuDiv);
       parentDiv.appendChild(menuDiv);
     }
 
@@ -187,7 +201,6 @@ AFRAME.registerComponent('debug-beat-loader', {
           color: self.selectedBeat.color
         };
         if (!self.selectedPositionEl) { return; }
-        debugger;
         self.selectedPositionEl.innerHTML = self.selectedBeat.type + color + orientation;
         self.beats[self.selectedPositionEl.id] = {
           position: self.selectedBeat.position,

src/components/wall.js

@@ -1,15 +1,41 @@
+import {BEAT_WARMUP_OFFSET, BEAT_WARMUP_SPEED, BEAT_WARMUP_TIME} from '../constants/beat';
+
 /**
  * Wall speed and haptics.
  */
 AFRAME.registerComponent('wall', {
   schema: {
-    speed: {default: 1.0}
+    anticipationPosition: {default: 0},
+    durationSeconds: {default: 0},
+    horizontalPosition: {default: 'middleleft', oneOf: ['left', 'middleleft', 'middleright', 'right']},
+    speed: {default: 1.0},
+    warmupPosition: {default: 0},
+    height: {default: 1.3},
+    width: {default: 1}
+  },
+
+  horizontalPositions: {
+    'left': -0.75,
+    'middleleft': -0.25,
+    'middleright': 0.25,
+    'right': 0.75
   },
 
   init: function () {
     this.maxZ = 10;
   },
 
+  updatePosition: function () {
+    const el = this.el;
+    const data = this.data;
+    el.object3D.position.set(
+      this.horizontalPositions[data.horizontalPosition],
+      data.height,
+      data.anticipationPosition + data.warmupPosition + data.durationSeconds * data.speed / 2
+    );
+    el.object3D.scale.set(data.width * 0.30, 2.5, data.durationSeconds * data.speed);
+  },
+
   pause: function () {
     this.el.object3D.visible = false;
     this.el.removeAttribute('data-collidable-head');
@@ -20,8 +46,35 @@ AFRAME.registerComponent('wall', {
     this.el.setAttribute('data-collidable-head', '');
   },
 
-  tock: function (time, delta) {
-    this.el.object3D.position.z += this.data.speed * (delta / 1000);
+  tock: function (time, timeDelta) {
+    const data = this.data;
+    const position = this.el.object3D.position;
+    if (this.intersecting) {
+      var int;
+      if (this.saberHit['rightHand'].active) {
+        int = this.saberHit['rightHand'].raycaster.getIntersection(this.el);
+        if (int) { this.material.uniforms.hitRight.value = int.point; }
+      }
+      if (this.saberHit['leftHand'].active) {
+        int = this.saberHit['leftHand'].raycaster.getIntersection(this.el);
+        if (int) { this.material.uniforms.hitLeft.value = int.point; }
+      }
+    }
+
+    // Move.
+    if (position.z < data.anticipationPosition) {
+      let newPositionZ = position.z + BEAT_WARMUP_SPEED * (timeDelta / 1000);
+      // Warm up / warp in.
+      if (newPositionZ < data.anticipationPosition) {
+        position.z = newPositionZ;
+      } else {
+        position.z = data.anticipationPosition;
+      }
+    } else {
+      // Standard moving.
+      position.z += this.data.speed * (timeDelta / 1000);
+    }
+
     if (this.el.object3D.position.z > this.maxZ) {
       this.returnToPool();
       return;