From dc97bdb1aa9f5423174cb23dfacdf59a6415cc16 Mon Sep 17 00:00:00 2001
From: "Diego F. Goberna" <diego@feiss.be>
Date: Thu, 4 Oct 2018 00:04:50 +0200
Subject: [PATCH] improved animations in miss&wrong beats

---
 src/components/beat.js |  3 +--
 src/index.html         | 14 +++++++-------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/beat.js b/src/components/beat.js
index 2d19ef6..45ab4ea 100644
--- a/src/components/beat.js
+++ b/src/components/beat.js
@@ -193,10 +193,9 @@ AFRAME.registerComponent('beat', {
     var wrongEl = hand === 'left' ? this.wrongElLeft : this.wrongElRight;
     if (!wrongEl) { return; }
     wrongEl.object3D.position.copy(this.el.object3D.position);
-    wrongEl.object3D.position.y += 0.5;
+    wrongEl.object3D.position.y += 0.2;
     wrongEl.object3D.position.z -= 0.5;
     wrongEl.object3D.visible = true;
-    wrongEl.object3D.material.opacity = 1;
     wrongEl.emit('beatwrong');
     this.destroyed = true;
   },
diff --git a/src/index.html b/src/index.html
index 7bd6f1c..551de6e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -66,12 +66,12 @@
         <a-mixin id="arrow-red-beat" beat="color: red; type: arrow"></a-mixin>
         <a-mixin id="dot-blue-beat" beat="color: blue; type: dot"></a-mixin>
 
-        <a-mixin id="bad-beat-anims"
+        <a-mixin id="bad-beat"
           geometry="primitive: plane"
           material="shader: flat; transparent: true"
           visible="false"
-          animation__posz="property: object3D.position.z; to: -15; startEvents: beatwrong; easing: easeOutQuint"
-          animation__alpha="property: material.opacity; from: 1; to: 0; startEvents: beatwrong; delay: 200; easing: easeOutQuint"
+          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>
       </a-assets>
 
 
@@ -86,10 +86,10 @@
       </a-entity>
 
       <!-- Wrong + miss beat visual indicators. -->
-      <a-entity id="wrongLeft" mixin='bad-beat' geometry="height: 0.2; width: 0.2" material="src: #wrongRedImg"></a-entity>
-      <a-entity id="wrongRight" mixin='bad-beat' geometry="height: 0.2; width: 0.2" material="src: #wrongBlueImg"></a-entity>
-      <a-entity id="missLeft" mixin='bad-beat' geometry="height: 0.15; width: 0.3" material="src: #missRedImg"></a-entity>
-      <a-entity id="missRight" mixin='bad-beat' geometry="height: 0.15; width: 0.3" material="src: #missBlueImg"></a-entity>
+      <a-entity id="wrongLeft" mixin='bad-beat' geometry="height: 0.3; width: 0.3" material="src: #wrongRedImg"></a-entity>
+      <a-entity id="wrongRight" mixin='bad-beat' geometry="height: 0.3; width: 0.3" material="src: #wrongBlueImg"></a-entity>
+      <a-entity id="missLeft" mixin='bad-beat' geometry="height: 0.25; width: 0.5" material="src: #missRedImg"></a-entity>
+      <a-entity id="missRight" mixin='bad-beat' geometry="height: 0.25; width: 0.5" material="src: #missBlueImg"></a-entity>
 
       <!-- Player. -->
       <a-mixin