fix difficulty menu colors and states (fixes #8)

src/components/active-color.js

@@ -1,5 +1,5 @@
 /**
- * Acitve color.
+ * Active color.
  */
 AFRAME.registerComponent('active-color', {
   dependencies: ['material'],
@@ -17,6 +17,7 @@ AFRAME.registerComponent('active-color', {
     var el = this.el;
     if (this.data.active) {
       el.setAttribute('material', 'color', this.data.color);
+      el.setAttribute('material', 'opacity', 1);
     } else {
       el.setAttribute('material', 'color', this.defaultColor);
       if (el.components.animation__mouseleave) {
@@ -25,3 +26,25 @@ AFRAME.registerComponent('active-color', {
     }
   },
 });
+
+AFRAME.registerComponent('active-text-color', {
+  dependencies: ['text'],
+
+  schema: {
+    active: {default: false},
+    color: {default: '#333'}
+  },
+
+  init: function () {
+    this.defaultColor = this.el.getAttribute('text').color;
+  },
+
+  update: function () {
+    var el = this.el;
+    if (this.data.active) {
+      el.setAttribute('text', 'color', this.data.color);
+    } else {
+      el.setAttribute('text', 'color', this.defaultColor);
+    }
+  },
+});

src/components/text-uppercase.js

@@ -0,0 +1,9 @@
+AFRAME.registerComponent('text-uppercase', {
+  schema: {
+    value: {type: 'string'}
+  },
+
+  update: function () {
+    this.el.setAttribute('text', 'value', this.data.value.toUpperCase());
+  }
+});

src/index.html

@@ -11,7 +11,6 @@
       bind__song="challengeId: challenge.id; isPlaying: !menu.active && !challenge.isLoading"
       bind__song-preview-system="selectedChallengeId: menuSelectedChallenge.id"
       console-shortcuts
-      effect-bloom="strength: 0.7"
       proxy-event="event: menuchallengeselect; to: #searchResultsContainer, #menuDifficulties"
       search
       stage-colors="blue"

src/state/index.js

@@ -69,7 +69,7 @@ AFRAME.registerState({
       // Populate difficulty options.
       state.menuDifficulties.length = 0;
       for (let i = 0; i < challengeData.difficulties.length; i++) {
-        state.menuDifficulties.unshift(challengeData.difficulties[i].toUpperCase());
+        state.menuDifficulties.unshift(challengeData.difficulties[i]);
       }
       state.menuDifficulties.sort(difficultyComparator);
       // Default to easiest difficulty.

src/templates/menu.html

@@ -85,7 +85,7 @@
               animation__mouseenter="property: material.opacity; to: 1.0; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
               animation__mouseleave="property: material.opacity; to: 0.0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
               bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id && menuSelectedChallenge.difficulty !== '{{ difficulty }}'"></a-entity>
-          <a-entity mixin="textFont" text="value: {{ difficulty }}; wrapCount: 28; align: center" position="0 -0.057 0.001"></a-entity>
+          <a-entity mixin="textFont" bind__active-text-color="active: menuSelectedChallenge.difficulty === '{{ difficulty }}'" active-text-color="activeColor: #333" text-uppercase="value: {{ difficulty }}" text="wrapCount: 28; align: center; color: #FAFAFA" position="0 -0.057 0.001"></a-entity>
         </a-entity>
       </template>
     {% endraw %}