fix beam color (fixes #192)

src/components/beams.js

@@ -7,12 +7,10 @@ AFRAME.registerComponent('beams', {
   },
 
   init: function () {
-    this.beams = [];
-    this.redBeams = [];
-    this.blueBeams = [];
     this.currentRed = 0;
     this.currentBlue = 0;
 
+    // Material.
     const materialOptions = {
       color: 0xaa3333,
       map: new THREE.TextureLoader().load('assets/img/beam.png'),
@@ -20,29 +18,15 @@ AFRAME.registerComponent('beams', {
       blending: THREE.AdditiveBlending
     };
     const redMaterial = new THREE.MeshBasicMaterial(materialOptions);
+    materialOptions.color = 0x4444cc;
     const blueMaterial = new THREE.MeshBasicMaterial(materialOptions);
-    const geo = new THREE.PlaneBufferGeometry(0.4, 50).translate(0, 25, 0);
-
     this.texture = materialOptions.map;
 
-    for (let j = 0; j < 2; j++) {
-      for (let i = 0; i < this.data.poolSize; i++) {
-        let beam = new THREE.Mesh(geo, j === 0 ? redMaterial : blueMaterial);
-        beam.visible = false;
-        beam.animation = ANIME({
-          autoplay: false,
-          targets: beam.scale,
-          x: 0.00001,
-          duration: 300,
-          easing: 'easeInCubic',
-          complete: () => { beam.visible = false; }
-        });
-
-        this.el.object3D.add(beam);
-        this[j === 0 ? 'redBeams' : 'blueBeams'].push(beam);
-        this.beams.push(beam);
-      }
-    }
+    // Beam pools.
+    const geometry = new THREE.PlaneBufferGeometry(0.4, 50).translate(0, 25, 0);
+    this.beams = [];
+    this.redBeams = this.createBeamPool(geometry, redMaterial);
+    this.blueBeams = this.createBeamPool(geometry, blueMaterial);
 
     this.clearBeams = this.clearBeams.bind(this);
     this.el.sceneEl.addEventListener('cleargame', this.clearBeams);
@@ -70,6 +54,26 @@ AFRAME.registerComponent('beams', {
     }
   },
 
+  createBeamPool: function (geometry, material) {
+    const beams = [];
+    for (let i = 0; i < this.data.poolSize; i++) {
+      let beam = new THREE.Mesh(geometry, material);
+      beam.visible = false;
+      beam.animation = ANIME({
+        autoplay: false,
+        targets: beam.scale,
+        x: 0.00001,
+        duration: 300,
+        easing: 'easeInCubic',
+        complete: () => { beam.visible = false; }
+      });
+      this.el.object3D.add(beam);
+      beams.push(beam);
+      this.beams.push(beam);
+    }
+    return beams;
+  },
+
   newBeam: function (color, position) {
     var beam;
     if (color === 'red') {

src/components/beat.js

@@ -1,6 +1,7 @@
 import {BEAT_WARMUP_OFFSET, BEAT_WARMUP_SPEED, BEAT_WARMUP_TIME} from '../constants/beat';
 
 const auxObj3D = new THREE.Object3D();
+const collisionZThreshold = -4;
 const BEAT_WARMUP_ROTATION_CHANGE = Math.PI / 5;
 const BEAT_WARMUP_ROTATION_OFFSET = 0.4;
 const BEAT_WARMUP_ROTATION_TIME = 750;
@@ -15,7 +16,8 @@ const SCORE = {
 };
 
 /**
- * Create beat from pool, collision detection, clipping planes.
+ * Bears, beats, Battlestar Galactica.
+ * Create beat from pool, collision detection, clipping planes, movement, scoring.
  */
 AFRAME.registerComponent('beat', {
   schema: {
@@ -106,7 +108,6 @@ AFRAME.registerComponent('beat', {
       new THREE.Vector3()
     ];
 
-    this.blockEl = document.createElement('a-entity');
     this.mineParticles = document.getElementById('mineParticles');
     this.wrongElLeft = document.getElementById('wrongLeft');
     this.wrongElRight = document.getElementById('wrongRight');
@@ -179,8 +180,6 @@ AFRAME.registerComponent('beat', {
       // Check to remove score entity from pool.
     } else {
       // Only check collisions when close.
-      const collisionZThreshold = -4;
-
       if (position.z > collisionZThreshold) { this.checkCollisions(); }
 
       // Move.