improve beam resume out of pause menu

src/components/beams.js

@@ -2,6 +2,7 @@ const ANIME = AFRAME.ANIME || AFRAME.anime;
 
 AFRAME.registerComponent('beams', {
   schema: {
+    isPlaying: {default: false},
     poolSize: {default: 3}
   },
 
@@ -48,13 +49,15 @@ AFRAME.registerComponent('beams', {
       }
     }
 
-    this.el.sceneEl.addEventListener('cleargame', this.clearBeams.bind(this));
+    this.clearBeams = this.clearBeams.bind(this);
+    this.el.sceneEl.addEventListener('cleargame', this.clearBeams);
   },
 
   /**
    * Use tick for manual ANIME animations, else it will create RAF.
    */
   tick: function (t, dt) {
+    if (!this.data.isPlaying) { return; }
     for (let i = 0; i < this.beams.length; i++) {
       let beam = this.beams[i];
       // Tie animation state to beam visibility.
@@ -85,6 +88,8 @@ AFRAME.registerComponent('beams', {
   clearBeams: function () {
     for (let i = 0; i < this.beams.length; i++) {
       this.beams[i].visible = false;
+      this.beams[i].time = 0;
+      this.beams[i].scale.x = 1;
     }
   }
 });

src/components/beat-loader.js

@@ -18,6 +18,7 @@ AFRAME.registerComponent('beat-loader', {
 
   init: function () {
     this.audioSync = undefined;
+    this.beams = document.getElementById('beams').components.beams;
     this.beatData = null;
     this.beatContainer = document.getElementById('beatContainer');
     this.bpm = undefined;
@@ -115,36 +116,36 @@ AFRAME.registerComponent('beat-loader', {
     const beatObj = {};
 
     return function (noteInfo) {
+      var beatEl;
       var color;
       var orientation;
-      var el;
       var type = noteInfo._cutDirection === 8 ? 'dot' : 'arrow';
+
       color = noteInfo._type === 0 ? 'red' : 'blue';
       if (noteInfo._type === 3) {
         type = 'mine';
         color = undefined;
       }
-      el = this.requestBeat(type, color);
-      if (!el) { return; }
+      beatEl = this.requestBeat(type, color);
+      if (!beatEl) { return; }
 
       beatObj.color = color;
       beatObj.type = type;
       beatObj.speed = this.data.beatSpeed;
-      el.setAttribute('beat', beatObj);
-      el.object3D.position.set(
+      beatEl.setAttribute('beat', beatObj);
+      beatEl.object3D.position.set(
         this.horizontalPositions[noteInfo._lineIndex],
         this.verticalPositions[noteInfo._lineLayer],
         -this.data.beatAnticipationTime * this.data.beatSpeed
       );
-      el.object3D.rotation.z = THREE.Math.degToRad(this.orientations[noteInfo._cutDirection]);
-      el.play();
+      beatEl.object3D.rotation.z = THREE.Math.degToRad(this.orientations[noteInfo._cutDirection]);
+      beatEl.play();
+
+      this.beams.newBeam(color, beatEl.object3D.position);
 
       if (this.first) { return; }
 
-      this.first = {
-        el: el,
-        time: noteInfo._time
-      };
+      this.first = {el: beatEl, time: noteInfo._time};
     };
   })(),
 

src/components/beat.js

@@ -53,7 +53,6 @@ AFRAME.registerComponent('beat', {
     this.missElLeft = document.getElementById('missLeft');
     this.missElRight = document.getElementById('missRight');
 
-    this.beams = document.getElementById('beams').components['beams'];
     this.particles = document.getElementById('saberParticles');
 
     this.initBlock();
@@ -336,7 +335,6 @@ AFRAME.registerComponent('beat', {
     this.destroyed = false;
     this.el.object3D.visible = true;
     this.blockEl.object3D.visible = true;
-    this.beams.newBeam(this.data.color, this.el.object3D.position);
   },
 
   initCuttingClippingPlanes: function () {