difficulty menu highlight active

src/components/menu-difficulty-select.js

@@ -1,5 +1,34 @@
 var bindEvent = require('aframe-event-decorators').bindEvent;
 
+/**
+ * Select difficulty.
+ */
+AFRAME.registerComponent('menu-difficulty-option', {
+  dependencies: ['material'],
+
+  schema: {
+    activeDifficulty: {default: ''}
+  },
+
+  init: function () {
+    this.defaultColor = this.el.getAttribute('material').color;
+  },
+
+  update: function () {
+    var el = this.el;
+    let optionValue = this.el.closest('[data-bind-for-value]').dataset.bindForValue;
+    if (optionValue === this.data.activeDifficulty) {
+      el.setAttribute('animation__mouseenter', 'enabled', false);
+      el.setAttribute('animation__mouseleave', 'enabled', false);
+      el.setAttribute('material', 'color', '#4BF');
+    } else {
+      el.setAttribute('material', 'color', this.defaultColor);
+      el.setAttribute('animation__mouseenter', 'enabled', true);
+      el.setAttribute('animation__mouseleave', 'enabled', true);
+    }
+  },
+});
+
 /**
  * Select difficulty.
  */
@@ -13,8 +42,9 @@ AFRAME.registerComponent('menu-difficulty-select', {
   },
 
   click: bindEvent(function (evt) {
-    this.el.emit('menudifficultyselect',
-                 evt.target.closest('.difficultyOption').dataset.difficulty,
-                 false);
+    this.el.sceneEl.emit(
+      'menudifficultyselect',
+      evt.target.closest('.difficultyOption').dataset.difficulty,
+      false);
   })
 });

src/templates/menu.html

@@ -52,20 +52,21 @@
   <a-entity id="menuDifficulties"
     bind-for="for: difficulty; in: menuDifficulties"
     bind__visible="!!menuSelectedChallenge.id"
-    menu-difficulty-select
     layout="type: box; columns: 1; marginRow: -0.1; orderAttribute: data-bind-for-key"
+    menu-difficulty-select
     position="0.455 .3 0">
     {% raw %}
       <template>
         <a-entity class="difficultyOption" data-difficulty="{{ difficulty }}">
           <a-entity class="difficultyBackground"
+              bind__menu-difficulty-option="activeDifficulty: menuSelectedChallenge.difficulty"
               geometry="primitive: plane; width: 0.3; height: 0.1"
               material="shader: flat; color: #111"
               position="-0.4 -0.005 0"
               play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
               animation__mouseenter="property: material.color; from: #111; to: #666; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
               animation__mouseleave="property: material.color; from: #666; to: #111; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
-              bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id"></a-entity>
+              bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id && menuSelectedChallenge.difficulty !== '{{ difficulty }}'"></a-entity>
           <a-entity mixin="textFont" text="value: {{ difficulty }}" position="0 0 0.001"></a-entity>
         </a-entity>
       </template>