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());
+  }
+});