victory accuracy ring

src/components/victory-accuracy-ring.js

@@ -0,0 +1,16 @@
+/**
+ * Trigger accuracy ring animation on victory screen.
+ */
+AFRAME.registerComponent('victory-accuracy-ring', {
+  dependencies: ['geometry', 'material'],
+
+  schema: {
+    accuracy: {default: 0}
+  },
+
+  update: function () {
+    this.el.getObject3D('mesh').material.uniforms.progress.value = 0;
+    this.el.setAttribute('animation', 'to', this.data.accuracy);
+    this.el.components['animation'].beginAnimation();
+  }
+});

src/state/index.js

@@ -69,7 +69,8 @@ AFRAME.registerState({
       songSubName: ''
     },
     score: {
-      accuracy: '',
+      accuracy: 0,
+      accuracyText: '',
       beatsHit: 0,
       beatsMissed: 0,
       combo: 0,
@@ -183,7 +184,8 @@ AFRAME.registerState({
       Object.assign(state.challenge, DEBUG_CHALLENGE);
       state.isVictory = true;
       state.menuActive = false;
-      state.score.accuracy = 'Accuracy: 99.99%';
+      state.score.accuracy = .88;
+      state.score.accuracyText = 'Accuracy: 99.99%';
       state.score.maxComboText = 'Max Combo: 123';
       state.score.rank = 'S';
       state.score.scoreText = 'Score: 9001';
@@ -344,7 +346,8 @@ AFRAME.registerState({
       state.isVictory = true;
 
       const accuracy = state.beatsHit / (state.beatsMissed + state.beatsHit);
-      state.score.accuracy = `${(accuracy * 100).toFixed()}%`;
+      state.score.accuracy = accuracy;
+      state.score.accuracyText = `${(accuracy * 100).toFixed()}%`;
 
       if (accuracy === 1) {
         state.rank = 'S';

src/templates/gameMenu.html

@@ -75,6 +75,14 @@
   <a-entity id="victoryInfoContainer" position="1.64 -0.12 0.798" rotation="0 -55 0" bind__visible="isVictory">
     <a-entity mixin="slice" slice9="width: 0.77; height: 1; padding: 0.04" position="0 0.110 -0.03"></a-entity>
 
+   <a-entity
+      id="victoryAccuracyRing"
+      bind__victory-accuracy-ring="accuracy: score.accuracy"
+      animation="property: components.material.material.uniforms.progress.value; from: 0; easing: easeOutQuad; delay: 500; dur: 2000; autoplay: false"
+      geometry="primitive: plane; width: 0.7; height: 0.7"
+      material="shader: ring; transparent: true; color: #ABABAB; radiusInner: 0.8; color: #FAFAFA"
+      position="0 0.48 0"></a-entity>
+
     <a-entity id="victoryInfo" layout="type: box; columns: 1; margin: -0.1">
       <!-- TODO: Different color text based on rank. (bind__rank-text="rank: score.rank") -->
       <a-entity
@@ -93,7 +101,7 @@
         id="victoryInfoAccuracy"
         mixin="textFont"
         text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
-        bind__text="value: score.accuracy"></a-entity>
+        bind__text="value: score.accuracyText"></a-entity>
 
       <a-entity
         id="victoryInfoMaxCombo"