starting on menu-controls

package-lock.json

@@ -8,6 +8,16 @@
       "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-16.11.0.tgz",
       "integrity": "sha1-bnqKPWx4oFfs1WBQh5MEBtTgWAA="
     },
+    "@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
+    },
+    "@types/node": {
+      "version": "10.11.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.11.3.tgz",
+      "integrity": "sha512-3AvcEJAh9EMatxs+OxAlvAEs7OTy6AG94mcH1iqyVDwVVndekLxzwkWQ/Z4SDbY6GO2oyUXyWW8tQ4rENSSQVQ=="
+    },
     "a-sync-waterfall": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.0.tgz",
@@ -193,6 +203,14 @@
         }
       }
     },
+    "aframe-thumb-controls-component": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/aframe-thumb-controls-component/-/aframe-thumb-controls-component-1.1.0.tgz",
+      "integrity": "sha512-qm66UizRn3y7REMtP4EFyI8X7GJlIAicQqSShCC/1pukMtWQ3tknQzFXYqN2unst7Lr0GG+MnYg5mE6BsRacyg==",
+      "requires": {
+        "rollup": "^0.59.1"
+      }
+    },
     "agentkeepalive": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-2.2.0.tgz",
@@ -9003,6 +9021,15 @@
         "inherits": "^2.0.1"
       }
     },
+    "rollup": {
+      "version": "0.59.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.59.4.tgz",
+      "integrity": "sha512-ISiMqq/aJa+57QxX2MRcvLESHdJ7wSavmr6U1euMr+6UgFe6KM+3QANrYy8LQofwhTC1I7BcAdlLnDiaODs1BA==",
+      "requires": {
+        "@types/estree": "0.0.39",
+        "@types/node": "*"
+      }
+    },
     "run-async": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-0.1.0.tgz",

package.json

@@ -22,6 +22,7 @@
     "aframe-slice9-component": "^1.0.0",
     "aframe-state-component": "^5.0.0-beta6",
     "aframe-super-keyboard": "2.0.2",
+    "aframe-thumb-controls-component": "^1.1.0",
     "algoliasearch": "^3.29.0",
     "ansi-html": "0.0.7",
     "autoprefixer": "^7.2.3",

src/components/menu-controls.js

@@ -0,0 +1,133 @@
+var hoveredIndex = undefined;
+var keyEventsRegistered = false;
+var results = null;
+
+const PER_PAGE = 6;
+
+/**
+ * Use menu with thumb.
+ */
+AFRAME.registerComponent('menu-controls', {
+  schema: {
+    enabled: {default: true},
+    page: {default: 0},
+    selectedChallengeId: {default: ''}
+  },
+
+  init: function () {
+    const data = this.data;
+    const el = this.el;
+
+    results = document.getElementById('searchResultList').children;
+
+    this.goPrevResult = this.goPrevResult.bind(this);
+    this.goNextResult = this.goNextResult.bind(this);
+    this.select = this.select.bind(this);
+    this.unselect = this.unselect.bind(this);
+
+    el.addEventListener('thumbupstart', this.goPrevResult);
+    el.addEventListener('thumbdownstart', this.goNextResult);
+    el.addEventListener('thumbleftstart', this.unselect);
+    el.addEventListener('thumbrightstart', this.select);
+
+    // When raycaster becomes active again, cancel.
+    el.addEventListener('mouseenter', evt => {
+      if (!el.components.cursor.intersectedEl) { return; }
+      if (el.components.cursor.intersectedEl.closest('#searchResultList')) {
+        this.cancelMenuControls();
+      }
+    });
+
+    if (AFRAME.utils.getUrlParameter('debug') && !keyEventsRegistered) {
+      window.addEventListener('keydown', evt => {
+        if (evt.keyCode === 37) { this.unselect(); }
+        if (evt.keyCode === 38) { this.goPrevResult(); }
+        if (evt.keyCode === 39) { this.select(); }
+        if (evt.keyCode === 40) { this.goNextResult(); }
+      });
+      keyEventsRegistered = true;
+    }
+  },
+
+  goPrevResult: function () {
+    if (!this.data.enabled) { return; }
+
+    if (hoveredIndex === undefined) {
+      this.hoverResult(0);
+      return;
+    }
+    if (hoveredIndex > 0) {
+      if (results[hoveredIndex - 1].dataset.id === this.data.selectedChallengeId) {
+        if (hoveredIndex - 2 < 0) {
+          this.goPrevPage();
+        } else {
+          this.hoverResult(hoveredIndex - 2);
+        }
+      } else {
+        this.hoverResult(hoveredIndex - 1);
+      }
+    } else {
+      this.goPrevPage();
+    }
+  },
+
+  goPrevPage: function () {
+    this.hoverResult(PER_PAGE - 1);
+    this.el.sceneEl.emit('searchprevpage', null, false);
+  },
+
+  goNextResult: function () {
+    if (!this.data.enabled) { return; }
+
+    if (hoveredIndex === undefined) {
+      this.hoverResult(0);
+      return;
+    }
+    if (hoveredIndex < PER_PAGE - 1) {
+      if (results[hoveredIndex + 1].dataset.id === this.data.selectedChallengeId) {
+        if (hoveredIndex + 2 > PER_PAGE - 1) {
+          this.goNextPage();
+        } else {
+          this.hoverResult(hoveredIndex + 2);
+        }
+      } else {
+        this.hoverResult(hoveredIndex + 1);
+      }
+    } else {
+      this.goNextPage();
+    }
+  },
+
+  goNextPage: function () {
+    this.hoverResult(0);
+    this.el.sceneEl.emit('searchnextpage', null, false);
+  },
+
+  select: function () {
+    if (!this.data.enabled) { return; }
+    if (hoveredIndex === undefined) { return; }
+    this.el.sceneEl.emit('menuchallengeselect', results[hoveredIndex].dataset.id, false);
+  },
+
+  unselect: function () {
+    if (!this.data.enabled) { return; }
+    this.el.sceneEl.emit('menuunselect', null, false);
+  },
+
+  hoverResult: function (i) {
+    if (hoveredIndex !== undefined) {
+      results[hoveredIndex].querySelector('.searchResultBackground')
+                           .emit('mouseleave', null, false);
+    }
+    hoveredIndex = i;
+    results[i].querySelector('.searchResultBackground')
+              .emit('mouseenter', null, false);
+  },
+
+  cancelMenuControls: function () {
+    if (hoveredIndex === undefined) { return; }
+    results[hoveredIndex].querySelector('.searchResultBackground')
+                         .emit('mouseleave', null, false);
+    hoveredIndex = undefined;
+  }
+});

src/index.html

@@ -107,14 +107,16 @@
           <a-entity id="{{ hand }}Hand"
             mixin="raycaster"
             bind__hand-swapper="enabled: {{ otherHand }}RaycasterActive"
+            bind__menu-controls="page: search.page; selectedChallengeId: menuSelectedChallenge.id"
             bind__pauser="enabled: !menu.active"
             bind__raycaster="enabled: {{ hand }}RaycasterActive"
             bind__saber-controls="bladeEnabled: !menu.active"
             bind__trail="enabled: !menu.active"
             haptics="events: mouseenter; dur: 35; force: 0.075"
             saber-controls="hand: {{ hand }}"
+            thumb-controls
+            thumb-controls-debug="enabled: false; hand: {{ hand }}; controllerType: vive-controls"
             trail="color: {{ bladeColor }}">
-
             <a-entity
               id="{{ hand }}Laser"
               bind__visible="activeHand === '{{ hand }}'"

src/index.js

@@ -14,6 +14,7 @@ require('aframe-proxy-event-component');
 require('aframe-state-component');
 require('aframe-slice9-component');
 require('aframe-super-keyboard');
+require('aframe-thumb-controls-component');
 require('aframe-particleplayer-component');
 
 requireAll(require.context('./components/', true, /\.js$/));