clear beams/beats on exit/restart

src/components/beams.js

@@ -4,6 +4,7 @@ AFRAME.registerComponent('beams', {
   schema: {
     poolSize: {default: 3}
   },
+
   init: function () {
     var redMaterial;
     var blueMaterial;
@@ -11,6 +12,7 @@ AFRAME.registerComponent('beams', {
     var geo;
     var beam;
 
+    this.beams = [];
     this.redBeams = [];
     this.blueBeams = [];
     this.currentRed = 0;
@@ -31,19 +33,35 @@ AFRAME.registerComponent('beams', {
       for (var i = 0; i < this.data.poolSize; i++) {
         beam = new THREE.Mesh(geo, j === 0 ? redMaterial : blueMaterial);
         beam.visible = false;
-        beam.anim = ANIME({
+        beam.animation = ANIME({
+          autoplay: false,
           targets: beam.scale,
           x: 0.00001,
-          autoplay: false,
           duration: 300,
           easing: 'easeInCubic',
-          complete: (anim) => { beam.visible = false; }
+          complete: () => { beam.visible = false; }
         });
 
         this.el.object3D.add(beam);
         this[j === 0 ? 'redBeams' : 'blueBeams'].push(beam);
+        this.beams.push(beam);
       }
     }
+
+    this.el.sceneEl.addEventListener('cleargame', this.clearBeams.bind(this));
+  },
+
+  /**
+   * Use tick for manual ANIME animations, else it will create RAF.
+   */
+  tick: function (t, dt) {
+    for (let i = 0; i < this.beams.length; i++) {
+      let beam = this.beams[i];
+      // Tie animation state to beam visibility.
+      if (!beam.visible) { continue; }
+      beam.time += dt;
+      beam.animation.tick(beam.time);
+    }
   },
 
   newBeam: function (color, position) {
@@ -51,7 +69,8 @@ AFRAME.registerComponent('beams', {
     if (color === 'red') {
       beam = this.redBeams[this.currentRed];
       this.currentRed = (this.currentRed + 1) % this.redBeams.length;
-      beam.position.set(position.x, position.y, position.z + this.currentRed / 50.0); // z offset to avoid z-fighting
+      // z offset to avoid z-fighting.
+      beam.position.set(position.x, position.y, position.z + this.currentRed / 50.0);
     } else {
       beam = this.blueBeams[this.currentBlue];
       this.currentBlue = (this.currentBlue + 1) % this.blueBeams.length;
@@ -60,7 +79,12 @@ AFRAME.registerComponent('beams', {
 
     beam.visible = true;
     beam.scale.x = 1;
-    beam.anim.restart();
-  }
+    beam.time = 0;
+  },
 
+  clearBeams: function () {
+    for (let i = 0; i < this.beams.length; i++) {
+      this.beams[i].visible = false;
+    }
+  }
 });

src/components/beat-loader.js

@@ -24,7 +24,7 @@ AFRAME.registerComponent('beat-loader', {
     this.first = null;
     this.lastTime = undefined;
 
-    this.el.addEventListener('pausemenurestart', this.restart.bind(this));
+    this.el.addEventListener('cleargame', this.clearBeats.bind(this));
   },
 
   update: function () {
@@ -183,12 +183,16 @@ AFRAME.registerComponent('beat-loader', {
     return pool.requestEntity();
   },
 
-  restart: function () {
+  /**
+   * Restart by returning all beats to pool.
+   */
+  clearBeats: function () {
     this.audioSync = null;
     this.first = null;
     this.lastTime = 0;
     for (let i = 0; i < this.beatContainer.children.length; i++) {
-      this.beatContainer.children[i].components.beat.returnToPool();
+      console.log('returning to pool');
+      this.beatContainer.children[i].components.beat.returnToPool(true);
     }
   }
 });

src/components/beat.js

@@ -64,6 +64,12 @@ AFRAME.registerComponent('beat', {
   update: function () {
     this.updateBlock();
     this.updateFragments();
+
+    if (this.data.type === 'mine') {
+      this.poolName = `pool__beat-mine`;
+    } else {
+      this.poolName = `pool__beat-${this.data.type}-${this.data.color}`;
+    }
   },
 
   initBlock: function () {
@@ -386,14 +392,9 @@ AFRAME.registerComponent('beat', {
     leftBorderInnerPlane.setFromCoplanarPoints(leftCutPlanePointsWorld[2], leftCutPlanePointsWorld[1], leftCutPlanePointsWorld[0]);
   },
 
-  returnToPool: function () {
-    var poolName;
-    var type;
-    if (!this.backToPool) { return; }
-    type = this.data.type;
-    poolName = 'pool__beat-' + type;
-    if (type !== 'mine') { poolName  += '-' + this.data.color; }
-    this.el.sceneEl.components[poolName].returnEntity(this.el);
+  returnToPool: function (force) {
+    if (!this.backToPool && !force) { return; }
+    this.el.sceneEl.components[this.poolName].returnEntity(this.el);
   },
 
   tock: (function () {

src/index.html

@@ -25,6 +25,8 @@
       pool__beat-dot-red="mixin: beat dot-red-beat; size: 10; container: #beatContainer"
       proxy-event__menuleft="event: menuchallengeunselect; to: .menuAnimation"
       proxy-event__menuright="event: menuchallengeselect; to: .menuAnimation"
+      proxy-event__cleargame1="event: pausemenuexit; as: cleargame; to: a-scene"
+      proxy-event__cleargame2="event: pausemenurestart; as: cleargame; to: a-scene"
       search
       stage-colors="blue"
       fog="color: #a00; density: 0.035; type: exponential">