From 7fe0c06d572f0949a56ffcdafe45df0b0e885a52 Mon Sep 17 00:00:00 2001
From: "Diego F. Goberna" <diego@feiss.be>
Date: Thu, 4 Oct 2018 02:21:16 +0200
Subject: [PATCH] fixed pause state bug, minor tweaks

---
 src/components/beams.js       | 2 +-
 src/components/beat-loader.js | 6 ------
 src/components/beat.js        | 3 +++
 src/index.html                | 2 +-
 src/state/index.js            | 1 +
 src/templates/dialogs.html    | 8 ++++----
 6 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/components/beams.js b/src/components/beams.js
index 63001ea..bf47965 100644
--- a/src/components/beams.js
+++ b/src/components/beams.js
@@ -1,6 +1,6 @@
 AFRAME.registerComponent('beams', {
   schema: {
-    poolSize: {default: 10}
+    poolSize: {default: 4}
   },
   init: function () {
     var redMaterial;
diff --git a/src/components/beat-loader.js b/src/components/beat-loader.js
index 259b068..c619bce 100644
--- a/src/components/beat-loader.js
+++ b/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 = {
diff --git a/src/components/beat.js b/src/components/beat.js
index 45ab4ea..4c765e5 100644
--- a/src/components/beat.js
+++ b/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 () {
diff --git a/src/index.html b/src/index.html
index 4baf034..b6c2b96 100644
--- a/src/index.html
+++ b/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>
 
 
diff --git a/src/state/index.js b/src/state/index.js
index 13e40f5..da8a24c 100644
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -27,6 +27,7 @@ AFRAME.registerState({
       songSubName: ''
     },
     inVR: false,
+    isPaused: false,
     menu: {
       active: true,
       playButtonText: 'Play'
diff --git a/src/templates/dialogs.html b/src/templates/dialogs.html
index 9407756..7d8a05f 100644
--- a/src/templates/dialogs.html
+++ b/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">