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 () {

src/index.html

@@ -84,25 +84,25 @@
       <a-entity id="beatObjTemplate" obj-model="obj: #beatObj" visible="false"></a-entity>
       <a-entity id="dotObjTemplate" obj-model="obj: #dotObj" visible="false"></a-entity>
 
-      <a-entity id="beatContainer" bind__pause="isPaused: !isPlaying"></a-entity>
-
       <a-entity id="cursorLaser" obj-model="obj: #laserObj" visible="false"></a-entity>
 
       <a-entity id="container">
+        <a-entity id="beatContainer" bind__pause="isPaused: !isPlaying"></a-entity>
+
         {% include './templates/stage.html' %}
         {% include './templates/gameUi.html' %}
         {% include './templates/menu.html' %}
         {% include './templates/dialogs.html' %}
+
+        <!-- Wrong + miss beat visual indicators. -->
+        <a-entity id="wrongLeft" mixin='badBeat' geometry="height: 0.3; width: 0.3" material="src: #wrongRedImg"></a-entity>
+        <a-entity id="wrongRight" mixin='badBeat' geometry="height: 0.3; width: 0.3" material="src: #wrongBlueImg"></a-entity>
+        <a-entity id="missLeft" mixin='badBeat' geometry="height: 0.25; width: 0.5" material="src: #missRedImg"></a-entity>
+        <a-entity id="missRight" mixin='badBeat' geometry="height: 0.25; width: 0.5" material="src: #missBlueImg"></a-entity>
+
+        <a-entity id="saberParticles" particleplayer="src: #sabercutParticles; pscale: 0.5; loop: false; on: explode; img: #sparkImg; count: 20%; animateScale: true; initialScale: 4 1 1; finalScale: 0.2 0.2 1"> </a-entity>
       </a-entity>
 
-      <!-- Wrong + miss beat visual indicators. -->
-      <a-entity id="wrongLeft" mixin='badBeat' geometry="height: 0.3; width: 0.3" material="src: #wrongRedImg"></a-entity>
-      <a-entity id="wrongRight" mixin='badBeat' geometry="height: 0.3; width: 0.3" material="src: #wrongBlueImg"></a-entity>
-      <a-entity id="missLeft" mixin='badBeat' geometry="height: 0.25; width: 0.5" material="src: #missRedImg"></a-entity>
-      <a-entity id="missRight" mixin='badBeat' geometry="height: 0.25; width: 0.5" material="src: #missBlueImg"></a-entity>
-
-      <a-entity id="saberParticles" particleplayer="src: #sabercutParticles; pscale: 0.5; loop: false; on: explode; img: #sparkImg; count: 20%; animateScale: true; initialScale: 4 1 1; finalScale: 0.2 0.2 1"> </a-entity>
-
       <!-- Player. -->
       <a-mixin
         id="raycaster"

src/state/index.js

@@ -147,6 +147,7 @@ AFRAME.registerState({
     },
 
     pausegame: (state) => {
+      if (!state.isPlaying) { return; }
       state.isPaused = true;
     },
 

src/templates/stage.html

@@ -53,7 +53,7 @@
 
   <a-entity id="smoke2" geometry="primitive: cylinder; radius: 20; height: 15; openEnded: true; segmentsHeight: 1; segmentsRadial: 9" additive material="repeat: 2 1; side: double; fog: true; src: #smokeTexture; shader: flat; transparent: true; color: #111" position="0 1.8 0" animation="property: rotation; from: 0 0 0; to: 0 360 0; dur: 243000; easing: linear; loop: true"></a-entity>
 
-  <a-entity id="beams" beams></a-entity>
+  <a-entity id="beams" bind__beams="isPlaying: isPlaying"></a-entity>
 
   <a-entity mixin="textFont" text="value: READY, STEADY...; align: center; color: #aaf; wrapCount: 18; width: 2" position="0 1.5 -2.5" bind__visible="challenge.isLoading"></a-entity>