From e753b96884f5d5222bf6ff464177b5e753cbaf22 Mon Sep 17 00:00:00 2001
From: "Diego F. Goberna" <diego@feiss.be>
Date: Tue, 13 Nov 2018 21:50:08 +0100
Subject: [PATCH] improved victory screen (fixes #171)

---
 src/components/text-counter.js | 46 +++++++++++++++++++++++++++++++
 src/state/index.js             | 11 ++------
 src/templates/gameMenu.html    | 33 ++++++++++++++++++++--
 src/templates/victory.html     | 50 +++++++++++++++++++++-------------
 4 files changed, 111 insertions(+), 29 deletions(-)
 create mode 100644 src/components/text-counter.js

diff --git a/src/components/text-counter.js b/src/components/text-counter.js
new file mode 100644
index 0000000..54c9f7e
--- /dev/null
+++ b/src/components/text-counter.js
@@ -0,0 +1,46 @@
+AFRAME.registerComponent('text-counter', {
+  dependencies: ['text'],
+  schema: {
+    value: {default: 0.0, type: 'float'},
+    dur: {default: 2000, type: 'int'},
+    prefix: {default: ''},
+    suffix: {default: ''},
+    decimals: {default: 0}
+  },
+
+  init: function () {
+    this.startTime = null;
+    this.currentValue = -1;
+  },
+
+  decimals: function (n) {
+    var d = Math.pow(10, this.data.decimals);
+    return (parseInt(n * d) / d).toFixed(this.data.decimals);
+  },
+
+  update: function (oldData) {
+    this.startTime = null;
+    this.currentValue = -1;
+    this.el.setAttribute('text', {
+      value: `${this.data.prefix} ${this.decimals(0)} ${this.data.suffix}`
+    });
+  },
+
+  tick: function (time) {
+    if (this.currentValue < this.data.value) {
+      if (this.startTime === null) { this.startTime = time};
+      const prevValue = Math.floor(this.currentValue);
+      this.currentValue = this.data.value * (time - this.startTime) / this.data.dur;
+      if (Math.floor(this.currentValue) !== prevValue) {
+        if (this.currentValue >= this.data.value) {
+          this.currentValue = this.data.value;
+          document.getElementById('victoryInfoRank').emit('appear');
+          document.getElementById('victoryButtons').emit('appear');
+        }
+        this.el.setAttribute('text', {
+          value: `${this.data.prefix} ${this.decimals(this.currentValue)} ${this.data.suffix}`
+        });
+      }
+    }
+  }
+})
\ No newline at end of file
diff --git a/src/state/index.js b/src/state/index.js
index 5b57734..15b9692 100644
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -7,7 +7,7 @@ const SONG_NAME_TRUNCATE = 24;
 const SONG_SUB_NAME_TRUNCATE = 32;
 
 const DAMAGE_DECAY = 0.25;
-const DAMAGE_MAX = 10;
+const DAMAGE_MAX = 1000000;
 
 const DEBUG_CHALLENGE = {
   author: 'Superman',
@@ -77,12 +77,10 @@ AFRAME.registerState({
     },
     score: {
       accuracy: 0,
-      accuracyText: '',
       beatsHit: 0,
       beatsMissed: 0,
       combo: 0,
       maxCombo: 0,
-      maxComboText: 0,
       multiplier: 1,
       rank: '',  // Grade (S to F).
       score: 0
@@ -210,9 +208,8 @@ AFRAME.registerState({
       Object.assign(state.challenge, DEBUG_CHALLENGE);
       state.isVictory = true;
       state.menuActive = false;
-      state.score.accuracy = .88;
-      state.score.accuracyText = '99.99%';
-      state.score.maxComboText = 'MAX COMBO - 123';
+      state.score.accuracy = 74.99;
+      state.score.maxCombo = 123;
       state.score.rank = 'B';
       state.score.score = 9001;
     },
@@ -401,8 +398,6 @@ AFRAME.registerState({
         state.score.beatsHit /
         (state.score.beatsMissed + state.score.beatsHit);
       state.score.accuracy = accuracy;
-      state.score.accuracyText = `${(accuracy * 100).toFixed()}%`;
-      state.score.maxComboText = `MAX COMBO - ${state.score.maxCombo}`;
 
       if (accuracy === 1) {
         state.score.rank = 'S';
diff --git a/src/templates/gameMenu.html b/src/templates/gameMenu.html
index 7ae95d6..c73930d 100644
--- a/src/templates/gameMenu.html
+++ b/src/templates/gameMenu.html
@@ -39,7 +39,8 @@
   <a-entity
     id="restartButton"
     mixin="gameMenuButton"
-    bind-toggle__raycastable="isPaused || isGameOver || isVictory"
+    bind__visible="!isVictory"
+    bind-toggle__raycastable="isPaused || isGameOver"
     proxy-event="event: click; to: a-scene; as: gamemenurestart">
     <a-entity mixin="gameMenuButtonText" text="value: RESTART SONG"></a-entity>
   </a-entity>
@@ -47,12 +48,40 @@
   <a-entity
     id="exitButton"
     mixin="gameMenuButton"
-    bind-toggle__raycastable="isPaused || isGameOver || isVictory"
+    bind__visible="!isVictory"
+    bind-toggle__raycastable="isPaused || isGameOver"
     position="0 -0.35 0"
     proxy-event="event: click; to: a-scene; as: gamemenuexit">
     <a-entity mixin="gameMenuButtonText" text="value: EXIT TO MENU"></a-entity>
   </a-entity>
 
+
+  <a-entity
+    id="victoryButtons"
+    visible="false"
+    animation="property: visible; from: false; to: true; delay: 1000; startEvents: appear">
+    <a-entity
+      id="victoryRestartButton"
+      mixin="gameMenuButton"
+      bind__visible="isVictory"
+      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>
+    </a-entity>
+
+    <a-entity
+      id="victoryExitButton"
+      mixin="gameMenuButton"
+      bind__visible="isVictory"
+      bind-toggle__raycastable="isVictory"
+      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>
+    </a-entity>
+  </a-entity>
+
+
   <!-- Song info. -->
   <a-entity id="gameMenuSongInfoContainer" position="-1.64 -0.12 0.798" rotation="0 55 0">
     <a-entity mixin="slice" slice9="width: 0.77; height: 0.72; padding: 0.04" position="0 0.25 -0.03"></a-entity>
diff --git a/src/templates/victory.html b/src/templates/victory.html
index 755e818..fe37476 100644
--- a/src/templates/victory.html
+++ b/src/templates/victory.html
@@ -1,8 +1,23 @@
 <!-- Victory. -->
+
 <a-entity
   id="victoryInfoContainer"
+  position="0 0.9 -2"
+  bind__visible="isVictory">
+
+ <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: 12000; 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="1.2 0.9 -2"
+  position="0 0.9 -2"
   bind__visible="isVictory">
 
   <a-entity
@@ -10,37 +25,34 @@
     mixin="font"
     bind__animation="enabled: isVictory"
     bind__victory-rank="rank: score.rank"
-    animation="property: object3D.rotation.y; from: 0; to: 360; loop: true; easing: linear; dur: 3000"
-    text="wrapCount: 2; align: center; width: 0.82; side: double"></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>
+    scale="0 0 0"
+    position="0 0.2 0.05"
+    animation__rotation="property: object3D.rotation.y; from: 0; to: -360; loop: true; easing: linear; dur: 5000; startEvents: appear"
+    animation__scale="property: scale; to: 1 1 1; loop: false; easing: easeOutQuad; dur: 300; startEvents: appear"
+    text="wrapCount: 2; align: center; baseline: top; width: 0.82; side: double"></a-entity>
 
   <a-entity
     id="victoryInfoAccuracy"
     mixin="font"
-    bind__text="value: score.accuracyText"
-    text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
+    text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; width: 0.81"
+    text-counter="suffix: %; decimals: 2"
+    bind__text-counter="value: score.accuracy"
     position="0.45 0.75 0"></a-entity>
 
   <a-entity
     id="victoryInfoScore"
     mixin="font"
-    bind__text="value: score.score"
-    text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 2.25"
-    position="0 -0.15 0"></a-entity>
+    text="value: 0; align: center; color: #FAFAFA; wrapCount: 15; baseline: top; width: 2.25"
+    bind__text-counter="value: score.score"
+    position="0 -0.19 0"></a-entity>
 
   <a-entity
     id="victoryInfoMaxCombo"
     mixin="font"
-    bind__text="value: score.maxComboText"
-    text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 1"
-    position="0 -0.28 0"></a-entity>
+    text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; width: 1"
+    text-counter="prefix: MAX COMBO: ;"
+    bind__text-counter="value: score.maxCombo"
+    position="0 -0.3 0"></a-entity>
 </a-entity>
 
 <a-timeline id="victoryTimeline">