difficulty menu highlight active

package-lock.json

@@ -81,9 +81,9 @@
       }
     },
     "aframe-animation-component": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/aframe-animation-component/-/aframe-animation-component-5.0.0.tgz",
-      "integrity": "sha512-cqQ5o5iK5RvUUxS8e8VZ419Z/7N3eGvKhP6IUypZE2we71O0YuTOkd3DHGuvjoaI8mhqcJQ20lsUEfE8tWNEYA==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/aframe-animation-component/-/aframe-animation-component-5.1.0.tgz",
+      "integrity": "sha512-8IP5V2TDReAu5RPhg7t1gMidz/FQZMvvEwxw0xDxrgOCPBBlpFd5rGpW06CaJI+7Enu/PpZGIkImjYwto8tT9A==",
       "requires": {
         "animejs": "2.2.0"
       }
@@ -148,9 +148,9 @@
       "integrity": "sha1-+w+EQdrdHosRzCRRK6eqaS1iK+E="
     },
     "aframe-state-component": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-4.4.1.tgz",
-      "integrity": "sha512-V3YcjWMGBGZx8QIqs8csk+v+zmyPoIMelj0l+P57spSjPhyF4wivf5/QFRyEhcrwZIrytLZKRodW431tp30LZA==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-4.5.0.tgz",
+      "integrity": "sha512-jo7GG3ILwWW0zvaf8A2/30zLYyiqNJK/pBLZwGa/y6Xo3FWYgDL30stEHJslka4MtQNK7ONWPOA8mfQTwWUDjg==",
       "requires": {
         "aframe": "github:aframevr/aframe#2afb6ac191f1a44edbbfe6f0e733380356a9e0c8"
       }

package.json

@@ -6,7 +6,7 @@
     "start": "webpack-dev-server --host 0.0.0.0 --progress --colors --hot --inline --port 3000"
   },
   "dependencies": {
-    "aframe-animation-component": "^5.0.0",
+    "aframe-animation-component": "^5.1.0",
     "aframe-animation-timeline-component": "^1.3.1",
     "aframe-cubemap-component": "^0.1.2",
     "aframe-event-decorators": "^1.0.2",
@@ -18,7 +18,7 @@
     "aframe-particle-system-component": "^1.0.11",
     "aframe-proxy-event-component": "^1.1.1",
     "aframe-slice9-component": "^1.0.0",
-    "aframe-state-component": "^4.4.1",
+    "aframe-state-component": "^4.5.0",
     "aframe-super-keyboard": "^2.0.0",
     "algoliasearch": "^3.29.0",
     "ansi-html": "0.0.7",

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>