Merge pull request #210 from supermedium/wallfix

fix wall positioning, support ceilings (fixes #207)

src/components/beat-loader.js

@@ -1,6 +1,9 @@
 import {BEAT_WARMUP_OFFSET, BEAT_WARMUP_SPEED, BEAT_WARMUP_TIME} from '../constants/beat';
 import utils from '../utils';
 
+let skipDebug = AFRAME.utils.getUrlParameter('skip') || 0;
+skipDebug = parseInt(skipDebug, 10);
+
 /**
  * Load beat data (all the beats and such).
  */
@@ -156,7 +159,7 @@ AFRAME.registerComponent('beat-loader', {
   tick: function (time, delta) {
     if (!this.data.isPlaying || !this.data.challengeId || !this.beatData) { return; }
 
-    const prevBeatsTime = this.beatsTime;
+    const prevBeatsTime = this.beatsTime + skipDebug;
     if (this.beatsPreloadTime === undefined) {
       // Get current song time.
       const song = this.el.components.song;
@@ -170,7 +173,7 @@ AFRAME.registerComponent('beat-loader', {
 
     // Load in stuff scheduled between the last timestamp and current timestamp.
     // Beats.
-    const beatsTime = this.beatsTime;
+    const beatsTime = this.beatsTime + skipDebug;
     const bpm = this.beatData._beatsPerMinute;
     const msPerBeat = 1000 * 60 / this.beatData._beatsPerMinute;
     const notes = this.beatData._notes;
@@ -219,10 +222,13 @@ AFRAME.registerComponent('beat-loader', {
       const data = this.data;
 
       // if (Math.random() < 0.8) { noteInfo._type = 3; } // To debug mines.
+      let color;
       let type = noteInfo._cutDirection === 8 ? 'dot' : 'arrow';
-
-      let color = noteInfo._type === 0 ? 'red' : 'blue';
-      if (noteInfo._type === 3) {
+      if (noteInfo._type === 0) {
+        color = 'red';
+      } else if (noteInfo._type === 1) {
+        color = 'blue';
+      } else {
         type = 'mine';
         color = undefined;
       }
@@ -263,11 +269,11 @@ AFRAME.registerComponent('beat-loader', {
         -data.beatAnticipationTime * data.beatSpeed - this.swordOffset;
       wallObj.durationSeconds = durationSeconds;
       wallObj.horizontalPosition = this.horizontalPositionsHumanized[wallInfo._lineIndex];
+      wallObj.isCeiling = wallInfo._type === 1;
       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/wall.js

@@ -3,6 +3,9 @@ import {BEAT_WARMUP_OFFSET, BEAT_WARMUP_SPEED, BEAT_WARMUP_TIME} from '../consta
 // So wall does not clip the stage ground.
 const RAISE_Y_OFFSET = 0.1;
 
+const CEILING_THICKNESS = 1.5;
+const CEILING_HEIGHT = 1.4 + CEILING_THICKNESS / 2;
+
 /**
  * Wall to dodge.
  */
@@ -11,7 +14,9 @@ AFRAME.registerComponent('wall', {
     anticipationPosition: {default: 0},
     durationSeconds: {default: 0},
     height: {default: 1.3},
-    horizontalPosition: {default: 'middleleft', oneOf: ['left', 'middleleft', 'middleright', 'right']},
+    horizontalPosition: {default: 'middleleft',
+                         oneOf: ['left', 'middleleft', 'middleright', 'right']},
+    isCeiling: {default: false},
     speed: {default: 1.0},
     warmupPosition: {default: 0},
     width: {default: 1}
@@ -28,15 +33,36 @@ AFRAME.registerComponent('wall', {
     this.maxZ = 10;
   },
 
-  updatePosition: function () {
+  update: function () {
     const el = this.el;
     const data = this.data;
+
+    const halfDepth = data.durationSeconds * data.speed / 2;
+
+    if (data.isCeiling) {
+      el.object3D.position.set(
+        0,
+        CEILING_HEIGHT,
+        data.anticipationPosition + data.warmupPosition - halfDepth
+      );
+      el.object3D.scale.set(
+        data.width,
+        CEILING_THICKNESS,
+        data.durationSeconds * data.speed
+      );
+      return;
+    }
+
     el.object3D.position.set(
       this.horizontalPositions[data.horizontalPosition],
       data.height + RAISE_Y_OFFSET,
-      data.anticipationPosition + data.warmupPosition + data.durationSeconds * data.speed / 2
+      data.anticipationPosition + data.warmupPosition - halfDepth
+    );
+    el.object3D.scale.set(
+      data.width * 0.30,
+      2.5,
+      data.durationSeconds * data.speed
     );
-    el.object3D.scale.set(data.width * 0.30, 2.5, data.durationSeconds * data.speed);
   },
 
   pause: function () {
@@ -51,23 +77,24 @@ AFRAME.registerComponent('wall', {
 
   tock: function (time, timeDelta) {
     const data = this.data;
+    const halfDepth = data.durationSeconds * data.speed / 2;
     const position = this.el.object3D.position;
 
     // Move.
-    if (position.z < data.anticipationPosition) {
+    if (position.z < (data.anticipationPosition - halfDepth)) {
       let newPositionZ = position.z + BEAT_WARMUP_SPEED * (timeDelta / 1000);
       // Warm up / warp in.
-      if (newPositionZ < data.anticipationPosition) {
+      if (newPositionZ < (data.anticipationPosition - halfDepth)) {
         position.z = newPositionZ;
       } else {
-        position.z = data.anticipationPosition;
+        position.z = data.anticipationPosition - halfDepth;
       }
     } else {
       // Standard moving.
       position.z += this.data.speed * (timeDelta / 1000);
     }
 
-    if (this.el.object3D.position.z > this.maxZ) {
+    if (this.el.object3D.position.z > (this.maxZ + halfDepth)) {
       this.returnToPool();
       return;
     }