show beat score (fixes #146)

src/assets.html

@@ -61,6 +61,16 @@
 
 <a-mixin id="wall" geometry wall material="shader: wall-shader; tex: #noiseTexture; env: #envmapWallTexture; repeat: 2 2; transparent: true; side: double">
 
+<a-mixin
+  id="beatScore"
+  mixin="font"
+  text="opacity: 0; wrapCount: 19; color: #AAA"
+  animation__opacityin="property: components.text.material.uniforms.opacity.value; from: .5; to: 1; dur: 500; startEvents: startanim"
+  animation__opacityout="property: components.text.material.uniforms.opacity.value; from: 1; to: 0; dur: 500; delay: 700; startEvents: startanim"
+  animation__motionz="property: object3D.position.z; from: -2; to: -6; dur: 500; easing: easeOutQuart; startEvents: startanim"
+  animation__motiony="property: object3D.position.y; to: 0.1; dur: 500; easing: easeOutQuart; startEvents: startanim"
+  ></a-mixin>
+
 <a-mixin
   id="beatWrong"
   geometry="primitive: plane; height: 0.3; width: 0.3"

src/components/beat.js

@@ -707,6 +707,8 @@ AFRAME.registerComponent('beat', {
     var maxAngle;
     var saberControls = this.hitSaberEl.components['saber-controls'];
     var score = 0;
+    var scoreText;
+    var scoreEl;
 
     if (cutDirection === 'up' || cutDirection === 'down') {
       maxAngle = saberControls.maxAnglePlaneX;
@@ -725,6 +727,22 @@ AFRAME.registerComponent('beat', {
 
     this.el.emit('beathit', hitEventDetail, true);
 
+    scoreEl = this.el.sceneEl.components.pool__beatscore.requestEntity();
+    if (scoreEl) {
+      if (score < 60) { scoreText = 'OK'; }
+      else if (score < 80) { scoreText = 'GOOD'; }
+      else if (score < 100) { scoreText = 'EXCELLENT'; }
+      else { scoreText = 'SUPER'; }
+
+      scoreEl.object3D.position.copy(this.el.object3D.position);
+      scoreEl.setAttribute('text', {value: scoreText});
+      scoreEl.play();
+      scoreEl.emit('startanim');
+      setTimeout(() => {
+        this.el.sceneEl.components.pool__beatscore.returnEntity(scoreEl);
+      }, 1200);
+    }
+
     // console.log("BEAT SCORE: " + score + " " + angleBeforeHit + " " + angleAfterHit);
   },
 

src/index.html

@@ -37,6 +37,7 @@
       pool__beat-dot-red="mixin: dotRedBeat; size: 10; container: #beatContainer"
       pool__beat-mine="mixin: mine; size: 10; container: #beatContainer"
       pool__wall="mixin: wall; size: 10; container: #beatContainer"
+      pool__beatscore="mixin: beatScore; size: 5; container: #beatContainer"
       proxy-event__cleargame1="event: gamemenuexit; as: cleargame; to: a-scene"
       proxy-event__cleargame2="event: gamemenurestart; as: cleargame; to: a-scene"
       search