fixed pause state bug, minor tweaks

src/components/beams.js

@@ -1,6 +1,6 @@
 AFRAME.registerComponent('beams', {
   schema: {
-    poolSize: {default: 10}
+    poolSize: {default: 4}
   },
   init: function () {
     var redMaterial;

src/components/beat-loader.js

@@ -15,10 +15,6 @@ AFRAME.registerComponent('beat-loader', {
   horizontalPositions: [-0.60, -0.25, 0.25, 0.60],
   verticalPositions: [1.00, 1.35, 1.70],
 
-  init: function () {
-    this.beams = document.getElementById('beams').components['beams'];
-  },
-
   update: function () {
     if (!this.data.challengeId || !this.data.difficulty) { return; }
     this.loadBeats();
@@ -126,8 +122,6 @@ AFRAME.registerComponent('beat-loader', {
       el.object3D.rotation.z = THREE.Math.degToRad(this.orientations[noteInfo._cutDirection]);
       el.play();
 
-      this.beams.newBeam(color, el.object3D.position);
-
       if (this.first) { return; }
 
       this.first = {

src/components/beat.js

@@ -49,6 +49,8 @@ AFRAME.registerComponent('beat', {
     this.missElLeft = document.querySelector('#missLeft');
     this.missElRight = document.querySelector('#missRight');
 
+    this.beams = document.getElementById('beams').components['beams'];
+
     this.initBlock();
     this.initColliders();
     this.initFragments();
@@ -320,6 +322,7 @@ 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

@@ -71,7 +71,7 @@
           material="shader: flat; transparent: true"
           visible="false"
           animation__posz="property: object3D.position.z; to: -8; startEvents: beatwrong; easing: easeOutQuart; duration: 4000"
-          animation__alpha="property: material.opacity; from: 1; to: 0; startEvents: beatwrong; easing: easeOutQuart; duration: 4000"></a-mixin>
+          animation__alpha="property: components.material.material.opacity; from: 1; to: 0; startEvents: beatwrong; easing: easeOutQuart; duration: 4000"></a-mixin>
       </a-assets>
 
 

src/state/index.js

@@ -27,6 +27,7 @@ AFRAME.registerState({
       songSubName: ''
     },
     inVR: false,
+    isPaused: false,
     menu: {
       active: true,
       playButtonText: 'Play'

src/templates/dialogs.html

@@ -1,13 +1,13 @@
-<a-entity id="pauseDialog" position="0 1.6 -2" bind__visible="pause.active">
+<a-entity id="pauseDialog" position="0 1.6 -2" bind__visible="isPaused">
     <a-entity position="0 0.35 0"
-      bind-toggle__raycastable="pause.active"
+      bind-toggle__raycastable="isPaused"
       animation__mouseenter="property: components.slice9.material.color; type: color; from: #050505; to: #067197; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
       animation__mouseleave="property: components.slice9.material.color; type: color; from: #067197; to: #050505; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
       mixin="slice" slice9="width: 1; height: 0.27; padding: 0.04">
       <a-entity mixin="font" text="align: center; wrapCount: 17; value: CONTINUE; color: #AAA" position="0 -0.070 0.01"></a-entity>
     </a-entity>
     <a-entity
-      bind-toggle__raycastable="pause.active"
+      bind-toggle__raycastable="isPaused"
       animation__mouseenter="property: components.slice9.material.color; type: color; from: #050505; to: #067197; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
       animation__mouseleave="property: components.slice9.material.color; type: color; from: #067197; to: #050505; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
       mixin="slice" slice9="width: 1; height: 0.27; padding: 0.04">
@@ -15,7 +15,7 @@
     </a-entity>
 
     <a-entity position="0 -0.35 0"
-      bind-toggle__raycastable="pause.active"
+      bind-toggle__raycastable="isPaused"
       animation__mouseenter="property: components.slice9.material.color; type: color; from: #050505; to: #067197; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
       animation__mouseleave="property: components.slice9.material.color; type: color; from: #067197; to: #050505; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
       mixin="slice" slice9="width: 1; height: 0.27; padding: 0.04">