From 865f0cb82ffbabfa71c45f518860912789189827 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Mon, 1 Oct 2018 16:26:43 -0700
Subject: [PATCH] save draw calls on menu-difficulty-select, make active-color
 aware of visibility optimizations

---
 src/components/active-color.js           | 4 +++-
 src/components/menu-difficulty-select.js | 4 +++-
 src/templates/menu.html                  | 7 ++++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/active-color.js b/src/components/active-color.js
index 13ad6ac..17aa98b 100644
--- a/src/components/active-color.js
+++ b/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) {
diff --git a/src/components/menu-difficulty-select.js b/src/components/menu-difficulty-select.js
index 38779a9..cfe8491 100644
--- a/src/components/menu-difficulty-select.js
+++ b/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);
     });
   },
 
diff --git a/src/templates/menu.html b/src/templates/menu.html
index c7dea96..cee357f 100644
--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -116,6 +116,7 @@
       ></a-entity>
 
     <!-- Top-aligned. TODO: Smart-centering. -->
+    <!-- Uses bind-for and bind-item to render difficulties. -->
     <a-entity id="menuDifficulties"
       bind-for="for: item; in: menuDifficulties; updateInPlace: true; pool: 5"
       bind__visible="!!menuSelectedChallenge.id"
@@ -130,13 +131,17 @@
               bind-item__active-color="active: menuSelectedChallenge.difficulty === item"
               bind-item__animation__mouseenter="enabled: menuSelectedChallenge.difficulty !== item"
               bind-item__animation__mouseleave="enabled: menuSelectedChallenge.difficulty !== item"
+              bind-item__animation__mouseentervisible="enabled: menuSelectedChallenge.difficulty !== item"
+              bind-item__animation__mouseleavevisible="enabled: menuSelectedChallenge.difficulty !== item"
               bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id && menuSelectedChallenge.difficulty !== item"
               geometry="primitive: plane; width: 0.4; height: 0.2"
               material="shader: flat; color: #067197; transparent: true; opacity: 0.0"
               position="0 -0.005 0"
               play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
               animation__mouseenter="property: components.material.material.opacity; to: 1.0; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
-              animation__mouseleave="property: components.material.material.opacity; to: 0.0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"></a-entity>
+              animation__mouseentervisible="property: visible; from: false; to: true; startEvents: mouseenter; pauseEvents: mouseleave; dur: 1"
+              animation__mouseleave="property: components.material.material.opacity; to: 0.0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
+              animation__mouseleavevisible="property: visible; from: true; to: false; startEvents: mouseleave; pauseEvents: mouseenter; dur: 160"></a-entity>
           <a-entity class="difficultyText" mixin="textFont" bind-item__active-text-color="active: menuSelectedChallenge.difficulty === item" active-text-color="color: #333" bind-item__text-uppercase="value: item" text="wrapCount: 28; align: center; color: #FAFAFA" position="0 -0.057 0.001"></a-entity>
         </a-entity>
       </template>