multiplier ring (fixes #153)

src/components/multiplier-ring.js

@@ -0,0 +1,66 @@
+const COMBO_PROGRESS_MAP = {
+  0: 0,
+  1: 0.5,
+  2: 0,
+  3: 0.25,
+  4: 0.5,
+  5: 0.75,
+  6: 0,
+  7: 0.125,
+  8: 0.25,
+  9: 0.375,
+  10: 0.5,
+  11: 0.625,
+  12: 0.75,
+  13: 0.875
+};
+
+/*
+ * Combo needed total for multiplier level:
+ *
+ * 0 - 1x
+ * 2 - 2x
+ * 6 - 4x
+ * 14 - 8x
+ */
+AFRAME.registerComponent('multiplier-ring', {
+  dependencies: ['geometry', 'material'],
+
+  schema: {
+    combo: {default: 0},
+    multiplier: {default: 1}
+  },
+
+  init: function () {
+    this.animationSet = {from: undefined, to: undefined};
+    this.progress = this.el.getObject3D('mesh').material.uniforms.progress;
+
+    // Set up animation.
+    this.el.setAttribute('animation', {
+      property: 'components.material.material.uniforms.progress.value',
+      dur: 100,
+      autoplay: false
+    });
+  },
+
+  update: function () {
+    this.updateRing();
+  },
+
+  updateRing: function () {
+    const data = this.data;
+    const el = this.el;
+    const progress = this.progress;
+
+    if (data.multiplier === 8) {
+      progress.value = 1;
+      return;
+    }
+
+    const animationSet = this.animationSet;
+    animationSet.from = progress.value;
+    animationSet.to = COMBO_PROGRESS_MAP[data.combo];
+    el.setAttribute('animation', animationSet);
+    el.components.animation.beginAnimation();
+  }
+});

src/state/index.js

@@ -123,9 +123,16 @@ AFRAME.registerState({
 
       state.score.score += Math.floor(payload.score * state.score.multiplier);
 
-      state.score.multiplier = state.score.combo >= 8
-        ? 8
-        : 2 * Math.floor(Math.log2(state.score.combo));
+      // Might be a math formula for this, but the multiplier system is easy reduced.
+      if (state.score.combo < 2) {
+        state.score.multiplier = 1;
+      } else if (state.score.combo < 6) {
+        state.score.multiplier = 2;
+      } else if (state.score.combo < 14) {
+        state.score.multiplier = 4;
+      } else {
+        state.score.multiplier = 8;
+      }
     },
 
     beatmiss: state => {
@@ -498,8 +505,12 @@ function difficultyComparator (a, b) {
 
 function takeDamage (state) {
   if (!state.isPlaying) { return; }
+  /*
   state.score.combo = 0;
-  state.score.multiplier = Math.ceil(state.score.multiplier / 2);
+  state.score.multiplier = state.score.multiplier > 1
+    ? Math.ceil(state.score.multiplier / 2)
+    : 1;
+  */
   if (AFRAME.utils.getUrlParameter('godmode')) { return; }
   state.damage++;
   checkGameOver(state);

src/templates/score.html

@@ -21,8 +21,8 @@
   <a-entity
     id="combo"
     mixin="scoreText"
-    bind__text="value: score.combo"
-    text="width: 1"
+    bind__text="value: 'COMBO\n' + score.combo"
+    text="width: 1; lineHeight: 40"
     position="-1.8 1.2 -4"
     scale="5 5 5">
   </a-entity>
@@ -36,11 +36,11 @@
       scale="5 5 5">
     </a-entity>
 
-   <!-- TODO: Hook up material.progress to multiplier progress. -->
    <a-entity
       id="multiplierRing"
+      bind__multiplier-ring="combo: score.combo; multiplier: score.multiplier"
       geometry="primitive: plane; width: 0.5; height: 0.5"
-      material="shader: ring; transparent: true; color: #88A; radiusInner: 0.7; progress: 1"
+      material="shader: ring; transparent: true; color: #88A; radiusInner: 0.7; progress: 0"
       position="0 0.17 0"></a-entity>
   </a-entity>
 </a-entity>