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