save draw calls on menu-difficulty-select, make active-color aware of visibility optimizations

src/components/active-color.js

@@ -11,13 +11,15 @@ AFRAME.registerComponent('active-color', {
 
   init: function () {
     this.defaultColor = this.el.getAttribute('material').color;
+    this.materialObj = {color: this.data.color, opacity: 1};
   },
 
   update: function () {
     var el = this.el;
 
     if (this.data.active) {
-      el.setAttribute('material', {'color': this.data.color, 'opacity': 1});
+      el.setAttribute('material', this.materialObj);
+      el.object3D.visible = true;
     } else {
       el.setAttribute('material', 'color', this.defaultColor);
       if (el.components.animation__mouseleave) {

src/components/menu-difficulty-select.js

@@ -6,9 +6,11 @@ var bindEvent = require('aframe-event-decorators').bindEvent;
 AFRAME.registerComponent('menu-difficulty-select', {
   init: function () {
     this.el.sceneEl.addEventListener('menuchallengeselect', () => {
+      this.el.object3D.visible = false;
       setTimeout(() => {
         this.el.components.layout.update();
-      });
+        this.el.object3D.visible = true;
+      }, 150);
     });
   },