improved score labels visual feedback (fixes #185)

src/components/beat.js

@@ -8,13 +8,6 @@ const BEAT_WARMUP_ROTATION_TIME = 750;
 const ONCE = {once: true};
 const SIGN_MATERIAL = {shader: 'flat', color: '#88f'};
 
-const SCORE = {
-  OK: 'OK',
-  GOOD: 'GOOD',
-  EXCELLENT: 'EXCELLENT',
-  SUPER: 'SUPER'
-};
-
 /**
  * Bears, beats, Battlestar Galactica.
  * Create beat from pool, collision detection, clipping planes, movement, scoring.
@@ -116,6 +109,9 @@ AFRAME.registerComponent('beat', {
     this.particles = document.getElementById('saberParticles');
     this.mineParticles = document.getElementById('mineParticles');
 
+    this.superCuts = document.querySelectorAll('.superCutFx');
+    this.superCutIdx = 0;
+
     this.explodeEventDetail = {position: null, rotation: null};
     this.saberColors = {right: 'blue', left: 'red'};
 
@@ -747,15 +743,25 @@ AFRAME.registerComponent('beat', {
     hitEventDetail.score = score;
     this.el.emit('beathit', hitEventDetail, true);
 
-    const scoreEl = this.el.sceneEl.components.pool__beatscore.requestEntity();
-    if (scoreEl) {
-      if (score < 60) { scoreText = SCORE.OK; }
-      else if (score < 80) { scoreText = SCORE.GOOD; }
-      else if (score < 100) { scoreText = SCORE.EXCELLENT; }
-      else { scoreText = SCORE.SUPER; }
+    let beatScorePool;
+    if (score < 60) { beatScorePool = 'pool__beatscoreok'; }
+    else if (score < 80) { beatScorePool = 'pool__beatscoregood'; }
+    else if (score < 100) { beatScorePool = 'pool__beatscoreexcellent'; }
+    else {
+      beatScorePool = 'pool__beatscoresuper';
 
+      const supercut = this.superCuts[this.superCutIdx].getObject3D('mesh');
+      supercut.position.copy(this.el.object3D.position);
+      supercut.position.z = -1;
+      supercut.visible = true;
+      setTimeout(() => { supercut.visible = false; }, 1000);
+      supercut.material.uniforms.starttime.value = this.el.sceneEl.time - 50;
+      this.superCutIdx = (this.superCutIdx + 1) % this.superCuts.length;
+    }
+
+    const scoreEl = this.el.sceneEl.components[beatScorePool].requestEntity();
+    if (scoreEl) {
       scoreEl.object3D.position.copy(this.el.object3D.position);
-      scoreEl.setAttribute('text', 'value', scoreText);
       scoreEl.play();
       scoreEl.emit('beatscorestart', null, false);
     }

src/components/score-beat.js

@@ -2,13 +2,18 @@
  * Score beat, auto-return to pool in 1.2s.
  */
 AFRAME.registerComponent('score-beat', {
+  schema: {
+    type: 'string'
+  },
+
   play: function () {
+    this.poolComponent = `pool__beatscore${this.data}`;
     this.startTime = this.el.sceneEl.time;
   },
 
   tick: function (time) {
     if (time > this.startTime + 1200) {
-      this.el.sceneEl.components.pool__beatscore.returnEntity(this.el);
+      this.el.sceneEl.components[this.poolComponent].returnEntity(this.el);
     }
   }
 });

src/components/supercutfx-shader.js

@@ -0,0 +1,34 @@
+AFRAME.registerShader('superCutFxShader', {
+  schema: {
+    starttime: {type: 'float', is: 'uniform'},
+    timems: {type: 'time', is: 'uniform'}
+  },
+
+  vertexShader: `
+    varying vec2 uvs;
+    varying vec3 worldPos;
+    void main() {
+      uvs.xy = uv.xy;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+    }
+  `,
+
+  fragmentShader: `
+    uniform float starttime;
+    uniform float timems;
+    varying vec2 uvs;
+    varying vec3 worldPos;
+
+    #define COLOR vec3(0, 0.67, 0.98)
+
+    void main() {
+      float time = (timems - starttime) / 2000.0;
+      vec2 p = uvs.xy - 0.5;
+      float r = p.x * p.x + p.y * p.y;
+      float alpha = 1.0 - smoothstep(time - 0.01, time, r);
+      alpha *= smoothstep(time - 0.1, time, r);
+      alpha *= 1.0 - time * 5.5;
+      gl_FragColor = vec4(COLOR, alpha);
+    }
+  `
+});