highlight active options in menu

src/components/active-color.js

@@ -0,0 +1,24 @@
+/**
+ * Acitve color.
+ */
+AFRAME.registerComponent('active-color', {
+  dependencies: ['material'],
+
+  schema: {
+    active: {default: false},
+    color: {default: '#4BF'}
+  },
+
+  init: function () {
+    this.defaultColor = this.el.getAttribute('material').color;
+  },
+
+  update: function () {
+    var el = this.el;
+    if (this.data.active) {
+      el.setAttribute('material', 'color', this.data.color);
+    } else {
+      el.setAttribute('material', 'color', this.defaultColor);
+    }
+  },
+});

src/components/menu-difficulty-select.js

@@ -1,34 +1,5 @@
 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.
  */