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();
+  }
+});