From 5e0e243592de74407528c40ff0ba6050f41c2b52 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Thu, 25 Oct 2018 07:17:08 -0700
Subject: [PATCH] victory rank color

---
 src/components/victory-rank.js | 45 +++++++++++++++++++++++++++++++++
 src/index.html                 |  4 ++-
 src/state/index.js             | 18 ++++++++++---
 src/templates/gameMenu.html    | 42 ++-----------------------------
 src/templates/loading.html     |  4 ++-
 src/templates/menu.html        |  2 ++
 src/templates/victory.html     | 46 ++++++++++++++++++++++++++++++++++
 7 files changed, 116 insertions(+), 45 deletions(-)
 create mode 100644 src/components/victory-rank.js
 create mode 100644 src/templates/victory.html

diff --git a/src/components/victory-rank.js b/src/components/victory-rank.js
new file mode 100644
index 0000000..18cf81c
--- /dev/null
+++ b/src/components/victory-rank.js
@@ -0,0 +1,45 @@
+/**
+ * Rank color.
+ */
+AFRAME.registerComponent('victory-rank', {
+  schema: {
+    rank: {type: 'string'}
+  },
+
+  update: function () {
+    const rank = this.data.rank;
+    if (!rank) { return; }
+
+    this.el.setAttribute('text', 'value', rank);
+    switch (rank[0]) {
+      case 'S': {
+        this.setColor('#FFF');
+        break;
+      }
+      case 'A': {
+        this.setColor('#c2d076');
+        break;
+      }
+      case 'B': {
+        this.setColor('#23f0c7');
+        break;
+      }
+      case 'C': {
+        this.setColor('#ffe347');
+        break;
+      }
+      case 'D': {
+        this.setColor('#ce6c47');
+        break;
+      }
+      case 'F': {
+        this.setColor('##960200');
+        break;
+      }
+    }
+  },
+
+  setColor: function (color) {
+    this.el.setAttribute('text', 'color', color);
+  }
+});
diff --git a/src/index.html b/src/index.html
index 16f293b..5f2bbc2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -30,7 +30,7 @@
       effect-bloom="strength: 1"
       gpu-preloader
       loading-screen="backgroundColor: #000;"
-      overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh'], #gameMenu, #stepback, #loadingSongInfoContainer"
+      overlay="objects: #rightHand, #leftHand, [mixin~='cursorMesh'], .overlay"
       pool__beat-arrow-blue="mixin: arrowBlueBeat; size: 5; container: #beatContainer"
       pool__beat-arrow-red="mixin: arrowRedBeat; size: 10; container: #beatContainer"
       pool__beat-dot-blue="mixin: dotBlueBeat; size: 10; container: #beatContainer"
@@ -65,6 +65,7 @@
         {% include './templates/score.html' %}
         {% include './templates/menu.html' %}
         {% include './templates/gameMenu.html' %}
+        {% include './templates/victory.html' %}
       </a-entity>
 
       <!-- Wrong + miss beat visual indicators. -->
@@ -186,6 +187,7 @@
 
       <a-entity
         id="stepback"
+        class="overlay"
         geometry="primitive: plane; width: 0.5; height: 0.25;"
         position="0 1.6 -1.55"
         material="shader: flat; src: #stepbackImg; transparent: true; opacity: 0"></a-entity>
diff --git a/src/state/index.js b/src/state/index.js
index 466907d..2b8be7a 100644
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -351,12 +351,24 @@ AFRAME.registerState({
 
       if (accuracy === 1) {
         state.rank = 'S';
-      } else if (accuracy >= .90) {
+      } else if (accuracy >= .98) {
+        state.rank = 'A+';
+      } else if (accuracy >= .93) {
         state.rank = 'A';
-      } else if (accuracy >= .80) {
+      } else if (accuracy >= .9) {
+        state.rank = 'A-';
+      } else if (accuracy >= .88) {
+        state.rank = 'B+';
+      } else if (accuracy >= .83) {
         state.rank = 'B';
-      } else if (accuracy >= .70) {
+      } else if (accuracy >= .8) {
+        state.rank = 'B-';
+      } else if (accuracy >= .78) {
+        state.rank = 'C+';
+      } else if (accuracy >= .73) {
         state.rank = 'C';
+      } else if (accuracy >= .7) {
+        state.rank = 'C-';
       } else if (accuracy >= .60) {
         state.rank = 'D';
       } else {
diff --git a/src/templates/gameMenu.html b/src/templates/gameMenu.html
index c494121..247fa98 100644
--- a/src/templates/gameMenu.html
+++ b/src/templates/gameMenu.html
@@ -1,5 +1,6 @@
 <a-mixin
   id="gameMenuButton"
+  class="overlay"
   mixin="slice"
   animation__mouseenter="property: components.slice9.material.color; type: color; from: #050505; to: #067197; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
   animation__mouseleave="property: components.slice9.material.color; type: color; from: #067197; to: #050505; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
@@ -19,6 +20,7 @@
 
 <a-entity
   id="gameMenu"
+  class="overlay"
   bind__visible="isGameOver || isPaused || isVictory"
   position="0 1.1 -2"
   play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
@@ -70,44 +72,4 @@
         bind__text="value: menuSelectedChallenge.songName"></a-entity>
     </a-entity>
   </a-entity>
-
-  <!-- Victory. -->
-  <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
-        id="victoryInfoRank"
-        mixin="textFont"
-        text="wrapCount: 1; align: center; color: #AAFFAA; width: 0.5"
-        bind__text="value: score.rank"></a-entity>
-
-      <a-entity
-        id="victoryInfoScore"
-        mixin="textFont"
-        text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
-        bind__text="value: score.scoreText"></a-entity>
-
-      <a-entity
-        id="victoryInfoAccuracy"
-        mixin="textFont"
-        text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
-        bind__text="value: score.accuracyText"></a-entity>
-
-      <a-entity
-        id="victoryInfoMaxCombo"
-        mixin="textFont"
-        text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
-        bind__text="value: score.maxComboText"></a-entity>
-    </a-entity>
-  </a-entity>
 </a-entity>
diff --git a/src/templates/loading.html b/src/templates/loading.html
index b441332..09d67e7 100644
--- a/src/templates/loading.html
+++ b/src/templates/loading.html
@@ -1,4 +1,6 @@
-<a-entity id="loadingSongInfoContainer"
+<a-entity
+  id="loadingSongInfoContainer"
+  class="overlayExclude"
   bind__animation__scale="enabled: isSongLoading"
   bind__visible="isSongLoading"
   animation__scale="property: scale; from: 1 1 1; to: 1.05 1.05 1.05; dir: alternate; loop: true; dur: 1200; easing: easeInOutCubic"
diff --git a/src/templates/menu.html b/src/templates/menu.html
index 292bd90..1295bc6 100644
--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -102,6 +102,7 @@
 <!-- Menu container begins here. -->
 <a-entity
   id="menu"
+  class="overlay"
   bind__visible="menuActive"
   position="0 1.1 -2"
   visible="false">
@@ -232,6 +233,7 @@
 
 <a-entity
   id="keyboard"
+  class="overlay"
   bind__super-keyboard="{% if not DEBUG_KEYBOARD %}hand: activeHand === 'left' && '#leftHand' || '#rightHand'; {% endif %}show: isSearching"
   super-keyboard="label: Search from over 2500 songs!; inputColor: #fff; labelColor: #FFF; width: 1.2; hand: {{ DEBUG_KEYBOARD and '#mouseCursor' or '#rightHand' }}; imagePath: assets/img/keyboard/; font: assets/fonts/Teko-Bold.json; align: center; model: supersaber; keyColor: #fff; injectToRaycasterObjects: false; filters: allupper; keyHoverColor: #fff"
   position="0.6 1.1 -1.999"
diff --git a/src/templates/victory.html b/src/templates/victory.html
new file mode 100644
index 0000000..9953e7a
--- /dev/null
+++ b/src/templates/victory.html
@@ -0,0 +1,46 @@
+<!-- Victory. -->
+<a-entity
+  id="victoryInfoContainer"
+  class="overlay"
+  position="1.64 1 -1.2"
+  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">
+    <a-entity
+      id="victoryInfoRank"
+      mixin="textFont"
+      bind__victory-rank="rank: score.rank"
+      text="wrapCount: 1; align: center; color: #AAFFAA; width: 0.5"></a-entity>
+
+    <a-entity
+      id="victoryInfoScore"
+      mixin="textFont"
+      text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
+      bind__text="value: score.scoreText"></a-entity>
+
+    <a-entity
+      id="victoryInfoAccuracy"
+      mixin="textFont"
+      text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
+      bind__text="value: score.accuracyText"></a-entity>
+
+    <a-entity
+      id="victoryInfoMaxCombo"
+      mixin="textFont"
+      text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
+      bind__text="value: score.maxComboText"></a-entity>
+  </a-entity>
+</a-entity>
+
+<a-timeline id="victoryTimeline">
+</a-timeline>