supercut cleanups

src/assets.html

@@ -84,27 +84,28 @@
 
 <a-mixin
   id="beatScoreOk"
-  score-beat="ok"
+  score-beat="type: ok"
   mixin="beatScore"
   text="value: OK"></a-mixin>
 <a-mixin
   id="beatScoreGood"
-  score-beat="good"
+  score-beat="type: good"
   mixin="beatScore"
   text="value: GOOD; color: #A8E3FF"></a-mixin>
 <a-mixin
   id="beatScoreExcellent"
-  score-beat="excellent"
+  score-beat="type: excellent"
   mixin="beatScore"
   text="value: EXCELLENT; wrapCount: 16; color: #60CCFF"></a-mixin>
 <a-mixin
   id="beatScoreSuper"
-  score-beat="super"
+  score-beat="type: super"
   mixin="beatScore"
   text="value: SUPER!; wrapCount: 13; color: #00acfc"></a-mixin>
 
 <a-mixin
   id="superCut"
+  supercutfx
   geometry="primitive: plane; width: 3; height: 3"
   material="shader: superCutFxShader; transparent: true; depthWrite: false"></a-mixin>
 

src/components/beat.js

@@ -8,6 +8,13 @@ const BEAT_WARMUP_ROTATION_TIME = 750;
 const ONCE = {once: true};
 const SIGN_MATERIAL = {shader: 'flat', color: '#88f'};
 
+const SCORE_POOL = {
+  OK : 'pool__beatscoreok',
+  GOOD : 'pool__beatscoregood',
+  EXCELLENT : 'pool__beatscoreexcellent',
+  SUPER : 'pool__beatscoresuper'
+};
+
 /**
  * Bears, beats, Battlestar Galactica.
  * Create beat from pool, collision detection, clipping planes, movement, scoring.
@@ -744,18 +751,13 @@ AFRAME.registerComponent('beat', {
     this.el.emit('beathit', hitEventDetail, true);
 
     let beatScorePool;
-    if (score < 60) { beatScorePool = 'pool__beatscoreok'; }
-    else if (score < 80) { beatScorePool = 'pool__beatscoregood'; }
-    else if (score < 100) { beatScorePool = 'pool__beatscoreexcellent'; }
+    if (score < 60) { beatScorePool = SCORE_POOL.OK; }
+    else if (score < 80) { beatScorePool = SCORE_POOL.GOOD; }
+    else if (score < 100) { beatScorePool = SCORE_POOL.EXCELLENT; }
     else {
-      beatScorePool = 'pool__beatscoresuper';
+      beatScorePool = SCORE_POOL.SUPER;
 
-      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.superCuts[this.superCutIdx].components.supercutfx.createSuperCut(this.el.object3D.position);
       this.superCutIdx = (this.superCutIdx + 1) % this.superCuts.length;
     }
 

src/components/score-beat.js

@@ -3,11 +3,11 @@
  */
 AFRAME.registerComponent('score-beat', {
   schema: {
-    type: 'string'
+    type: { type: 'string' }
   },
 
   play: function () {
-    this.poolComponent = `pool__beatscore${this.data}`;
+    this.poolComponent = `pool__beatscore${this.data.type}`;
     this.startTime = this.el.sceneEl.time;
   },
 

src/components/supercutfx-shader.js

@@ -1,6 +1,6 @@
 AFRAME.registerShader('superCutFxShader', {
   schema: {
-    starttime: {type: 'float', is: 'uniform'},
+    startTime: {type: 'float', is: 'uniform'},
     timems: {type: 'time', is: 'uniform'}
   },
 
@@ -14,7 +14,7 @@ AFRAME.registerShader('superCutFxShader', {
   `,
 
   fragmentShader: `
-    uniform float starttime;
+    uniform float startTime;
     uniform float timems;
     varying vec2 uvs;
     varying vec3 worldPos;
@@ -22,7 +22,7 @@ AFRAME.registerShader('superCutFxShader', {
     #define COLOR vec3(0, 0.67, 0.98)
 
     void main() {
-      float time = (timems - starttime) / 2000.0;
+      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);

src/components/supercutfx.js

@@ -0,0 +1,23 @@
+AFRAME.registerComponent('supercutfx', {
+  init: function () {
+    this.startTime = -1100; // pause on first tick
+  },
+
+  createSuperCut: function (position) {
+    const mesh = this.el.getObject3D('mesh');
+    this.el.object3D.position.copy(position);
+    this.el.object3D.position.z = -1;
+    this.el.object3D.visible = true;
+
+    this.startTime = this.el.sceneEl.time;
+    mesh.material.uniforms.startTime.value = this.startTime - 50;
+    this.el.play();
+  },
+
+  tick: function (time) {
+    if (time > this.startTime + 1000) {
+      this.el.object3D.visible = false;
+      this.el.pause();
+    }
+  }
+});

src/index.html

@@ -83,7 +83,7 @@
 
       <!-- super cut fx rings -->
       {% for i in range(1, 5) %}
-      <a-entity class="superCutFx" mixin="superCut"></a-entity>
+        <a-entity class="superCutFx" mixin="superCut"></a-entity>
       {% endfor %}
 
       <!-- Wrong + miss beat visual indicators. -->