From a1ca2aee9258c4fe1fd65213ea5d3d9ce8f6d841 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Sat, 17 Nov 2018 03:00:54 -0800
Subject: [PATCH] victory button fade-ins, remove victory-specific code from
 text-counter, remove duplicate entities in victory

---
 src/components/text-counter.js | 23 ++++++++++-----
 src/templates/victory.html     | 53 ++++++++++++++++++++--------------
 2 files changed, 47 insertions(+), 29 deletions(-)

diff --git a/src/components/text-counter.js b/src/components/text-counter.js
index 027337b..5259448 100644
--- a/src/components/text-counter.js
+++ b/src/components/text-counter.js
@@ -1,3 +1,6 @@
+/**
+ * Animate text number value.
+ */
 AFRAME.registerComponent('text-counter', {
   dependencies: ['text'],
 
@@ -14,8 +17,6 @@ AFRAME.registerComponent('text-counter', {
     this.startTime = null;
     this.currentValue = 0;
     this.textValue = {value : ''};
-    this.victoryInfoRank = document.getElementById('victoryInfoRank');
-    this.victoryButtons = document.getElementById('victoryButtons');
   },
 
   decimals: function (n) {
@@ -32,18 +33,26 @@ AFRAME.registerComponent('text-counter', {
 
   tick: function (time) {
     if (this.currentValue >= this.data.value) { return; }
-    if (this.startTime === null) { this.startTime = time; return;   };
+
+    if (this.startTime === null) {
+      this.startTime = time;
+      return;
+    };
+
     const prevValue = Math.floor(this.currentValue);
     this.currentValue = this.data.value * (time - this.startTime) / this.data.dur;
+
     if (Math.floor(this.currentValue) === prevValue) { return; }
+
     if (this.currentValue >= this.data.value) {
       this.currentValue = this.data.value;
       if (this.data.emit) {
-        this.victoryInfoRank.emit('textcounterdone', null, false);
-        this.victoryButtons.emit('textcounterdone', null, false);
+        this.el.emit('textcounterdone', null, false);
       }
     }
-    this.textValue.value = `${this.data.prefix} ${this.decimals(this.currentValue)} ${this.data.suffix}`;
+
+    this.textValue.value =
+      `${this.data.prefix} ${this.decimals(this.currentValue)} ${this.data.suffix}`;
     this.el.setAttribute('text', this.textValue);
   }
-})
\ No newline at end of file
+})
diff --git a/src/templates/victory.html b/src/templates/victory.html
index d588f89..faa080a 100644
--- a/src/templates/victory.html
+++ b/src/templates/victory.html
@@ -1,31 +1,26 @@
 <!-- Victory. -->
 <a-entity
   id="victoryInfoContainer"
+  class="overlay"
   position="0 0.9 -2"
   bind__visible="isVictory">
 
- <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>
-
-<a-entity
-  id="victoryInfoContainerNoBloom"
-  class="overlay"
-  position="0 0.9 -2"
-  bind__visible="isVictory">
 
   <a-entity
     id="victoryInfoRank"
+    class="accuracyTextCounterSubscribe"
     mixin="font"
     bind__animation="enabled: isVictory"
     bind__victory-rank="rank: score.rank"
     scale="0 0 0"
-    position="0 0.2 0.05"
+    position="0 0.2 0.1"
     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"
@@ -34,9 +29,10 @@
   <a-entity
     id="victoryInfoAccuracy"
     mixin="font"
+    bind__text-counter="value: score.accuracy"
     text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; width: 0.81"
     text-counter="suffix: %; decimals: 2; emit: true"
-    bind__text-counter="value: score.accuracy"
+    proxy-event="event: textcounterdone; to: .accuracyTextCounterSubscribe"
     position="0.45 0.75 0"></a-entity>
 
   <a-entity
@@ -56,30 +52,43 @@
 
   <a-entity
     id="victoryButtons"
-    animation="property: visible; from: false; to: true; delay: 1000; startEvents: textcounterdone"
     position="0 0.2 0"
     play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
-    play-sound__click="event: click; sound: #confirmSound; volume: 0.25"
-    visible="false">
+    play-sound__click="event: click; sound: #confirmSound; volume: 0.25">
     <a-entity
       id="victoryRestartButton"
+      class="accuracyTextCounterSubscribe"
       mixin="gameMenuButton"
-      position="-0.56 -0.79 0.05"
       bind-toggle__raycastable="isVictory"
-      proxy-event="event: click; to: a-scene; as: gamemenurestart">
-      <a-entity mixin="gameMenuButtonText" text="value: RESTART SONG"></a-entity>
+      bind__slice9="opacity: isVictory && 0 || 0"
+      animation="property: components.slice9.material.opacity; from: 0; to: 1; startEvents: textcounterdone"
+      position="-0.56 -0.79 0.05"
+      proxy-event="event: click; to: a-scene; as: gamemenurestart"
+      slice9="opacity: 0">
+      <a-entity
+        class="accuracyTextCounterSubscribe"
+        mixin="gameMenuButtonText"
+        bind__text="opacity: isVictory && 0 || 0"
+        animation="property: components.text.material.uniforms.opacity.value; from: 0; to: 1; startEvents: textcounterdone"
+        text="opacity: 0; value: RESTART SONG"></a-entity>
     </a-entity>
+
     <a-entity
       id="victoryExitButton"
+      class="accuracyTextCounterSubscribe"
       mixin="gameMenuButton"
       bind-toggle__raycastable="isVictory"
+      bind__slice9="opacity: isVictory && 0 || 0"
+      animation="property: components.slice9.material.opacity; from: 0; to: 1; startEvents: textcounterdone"
       position="0.56 -0.79 0.05"
-      proxy-event="event: click; to: a-scene; as: gamemenuexit">
-      <a-entity mixin="gameMenuButtonText" text="value: EXIT TO MENU"></a-entity>
+      proxy-event="event: click; to: a-scene; as: gamemenuexit"
+      slice9="opacity: 0">
+      <a-entity
+        class="accuracyTextCounterSubscribe"
+        mixin="gameMenuButtonText"
+        bind__text="opacity: isVictory && 0 || 0"
+        animation="property: components.text.material.uniforms.opacity.value; from: 0; to: 1; startEvents: textcounterdone"
+        text="opacity: 0; value: EXIT TO MENU"></a-entity>
     </a-entity>
   </a-entity>
-
 </a-entity>
-
-<a-timeline id="victoryTimeline">
-</a-timeline>