victory screen beats hit

src/state/index.js

@@ -79,6 +79,7 @@ AFRAME.registerState({
       accuracy: 0,
       beatsHit: 0,
       beatsMissed: 0,
+      beatsText: '',
       combo: 0,
       maxCombo: 0,
       multiplier: 1,
@@ -209,9 +210,12 @@ AFRAME.registerState({
       state.isVictory = true;
       state.menuActive = false;
       state.score.accuracy = 74.99;
+      state.score.beatsHit = 125;
+      state.score.beatsMissed = 125;
       state.score.maxCombo = 123;
       state.score.rank = 'B';
       state.score.score = 9001;
+      computeBeatsText(state);
     },
 
     gamemenuresume: (state) => {
@@ -429,6 +433,8 @@ AFRAME.registerState({
       } else {
         state.score.rank = 'F';
       }
+
+      computeBeatsText(state);
     },
 
     wallhitstart: function (state) {
@@ -548,3 +554,8 @@ function formatSongLength (songLength) {
   const minutes = `${Math.floor(songLength)}`;
   return `${minutes}:${Math.round((songLength - minutes) * 60)}`;
 }
+
+function computeBeatsText (state) {
+  state.score.beatsText =
+    `${state.score.beatsHit} / ${state.score.beatsMissed + state.score.beatsHit} BEATS`;
+}

src/templates/victory.html

@@ -20,7 +20,7 @@
     bind__animation="enabled: isVictory"
     bind__victory-rank="rank: score.rank"
     scale="0 0 0"
-    position="0 0.2 0.1"
+    position="0 0.2 0.125"
     animation__rotation="property: object3D.rotation.y; from: 0; to: -360; loop: true; easing: linear; dur: 5000; startEvents: textcounterdone"
     animation__scale="property: scale; from: 0 0 0; to: 1 1 1; loop: false; easing: easeOutQuad; dur: 300; startEvents: textcounterdone"
     play-sound="sound: #victorySound; event: textcounterdone"
@@ -30,10 +30,19 @@
     id="victoryInfoAccuracy"
     mixin="font"
     bind__text-counter="value: score.accuracy"
-    text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; width: 0.81"
+    text="align: left; color: #FAFAFA; wrapCount: 22; baseline: top; width: 0.81"
     text-counter="suffix: %; decimals: 2; emit: true"
     proxy-event="event: textcounterdone; to: .accuracyTextCounterSubscribe"
-    position="0.45 0.75 0"></a-entity>
+    position="0.75 0.725 0"></a-entity>
+
+  <a-entity
+    id="victoryInfoBeatsHit"
+    class="accuracyTextCounterSubscribe"
+    mixin="font"
+    bind__text="opacity: isVictory && 0 || 0; value: score.beatsText"
+    animation="property: components.text.material.uniforms.opacity.value; from: 0; to: 1; startEvents: textcounterdone"
+    text="align: left; color: #FAFAFA; wrapCount: 22; baseline: top; width: 0.81"
+    position="0.75 0.185 0"></a-entity>
 
   <a-entity
     id="victoryInfoScore"