Fix wall width and positioning

src/components/debug-beat-loader.js

@@ -63,8 +63,8 @@ AFRAME.registerComponent('debug-beat-loader', {
     this.beatLoader.bpm = 90;
     this.beatLoader.generateWall({
       _lineIndex: this.beatLoader.positionHumanized[wallInfo.position].index,
-      _width: 2,
-      _duration: 3 
+      _width: 1,
+      _duration: 3
     });
   },
 
@@ -191,7 +191,7 @@ AFRAME.registerComponent('debug-beat-loader', {
     }
 
     function setBeatButton(text, containerEl) {
-      var buttonEl = addButton('Set Beat', parentDiv, function () { 
+      var buttonEl = addButton('Set Beat', parentDiv, function () {
         var color = self.selectedBeat.type !== 'mine' ? ' ' + self.selectedBeat.color : '';
         var orientation = self.selectedBeat.type !== 'arrow' ? '' : ' ' + self.selectedBeat.orientation;
         self.selectedBeat = {

src/components/wall.js

@@ -3,6 +3,7 @@ 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 WALL_THICKNESS = 0.50;
 const CEILING_THICKNESS = 1.5;
 const CEILING_HEIGHT = 1.4 + CEILING_THICKNESS / 2;
 
@@ -36,6 +37,7 @@ AFRAME.registerComponent('wall', {
   update: function () {
     const el = this.el;
     const data = this.data;
+    const width = data.width * WALL_THICKNESS;
 
     const halfDepth = data.durationSeconds * data.speed / 2;
 
@@ -46,20 +48,22 @@ AFRAME.registerComponent('wall', {
         data.anticipationPosition + data.warmupPosition - halfDepth
       );
       el.object3D.scale.set(
-        data.width,
+        width,
         CEILING_THICKNESS,
         data.durationSeconds * data.speed
       );
       return;
     }
 
+    // Box geometry is constructed from the local 0,0,0 growing in the positive and negative
+    // x and z axis. We have to shift by half width and depth to be positioned correctly.
     el.object3D.position.set(
-      this.horizontalPositions[data.horizontalPosition],
+      this.horizontalPositions[data.horizontalPosition] + width / 2  - 0.25,
       data.height + RAISE_Y_OFFSET,
       data.anticipationPosition + data.warmupPosition - halfDepth
     );
     el.object3D.scale.set(
-      data.width * 0.30,
+      width,
       2.5,
       data.durationSeconds * data.speed
     );