start integrating search into menu

src/components/keyboard-raycastable.js

@@ -3,6 +3,6 @@ AFRAME.registerComponent('keyboard-raycastable', {
 
   play: function () {
     this.el.components['super-keyboard'].kbImg.setAttribute('bind-toggle__raycastable',
-                                                            'keyboardActive');
+                                                            'isSearching');
   }
 });

src/components/menu-slide-animation.js

@@ -0,0 +1,38 @@
+AFRAME.registerComponent('menu-slide-animation', {
+  schema: {
+    isSearching: {default: false},
+    menuSelectedChallengeId: {type: 'string'}
+  },
+
+  init: function () {
+    this.isOpen = false;  // Means toleft.
+  },
+
+  update: function (oldData) {
+    const data = this.data;
+
+    if (this.isOpen) {
+      // Unselect.
+      if (oldData.menuSelectedChallengeId && !data.menuSelectedChallengeId) { this.closeMenu(); }
+      // Keyboard close.
+      if (oldData.isSearching && !data.isSearching) { this.closeMenu(); }
+    }
+
+    if (!this.isOpen) {
+      // Select.
+      if (!oldData.menuSelectedChallengeId && data.menuSelectedChallengeId) { this.openMenu(); }
+      // Keyboard open.
+      if (!oldData.isSearching && data.isSearching) { this.openMenu(); }
+    }
+  },
+
+  closeMenu: function () {
+    this.el.components.animation__menuright.beginAnimation();
+    this.isOpen = false;
+  },
+
+  openMenu: function () {
+    this.el.components.animation__menuleft.beginAnimation();
+    this.isOpen = true;
+  }
+});

src/components/song-preview.js

@@ -36,6 +36,11 @@ AFRAME.registerComponent('song-preview-system', {
       return;
     }
 
+    // Unselect.
+    if (oldData.selectedChallengeId && !data.selectedChallengeId) {
+      this.stopSong();
+    }
+
     // Song finished loading.
     // Continue to play preview song during loading to keep entertained.
     if (oldData.isSongLoading && !data.isSongLoading) {

src/components/stage-lasers.js

@@ -30,4 +30,4 @@ AFRAME.registerComponent('stage-lasers', {
     this.lasers[1].rotation.z -= this.speed * delta * 1.01;
     this.lasers[2].rotation.z += this.speed * delta * 1.02;
   }
-})
+})

src/index.html

@@ -35,8 +35,6 @@
       pool__beat-dot-red="mixin: dotRedBeat; size: 10; container: #beatContainer"
       pool__beat-mine="mixin: mine; size: 10; container: #beatContainer"
       pool__wall="mixin: wall; size: 10; container: #beatContainer"
-      proxy-event__menuleft="event: menuchallengeunselect; to: .menuAnimation"
-      proxy-event__menuright="event: menuchallengeselect; to: .menuAnimation"
       proxy-event__cleargame1="event: gamemenuexit; as: cleargame; to: a-scene"
       proxy-event__cleargame2="event: gamemenurestart; as: cleargame; to: a-scene"
       search

src/state/index.js

@@ -37,10 +37,10 @@ AFRAME.registerState({
     isGameOver: false,  // Game over screen.
     isPaused: false,  // Playing, but paused. Not active during menu.
     isPlaying: false,  // Actively playing (slicing beats).
+    isSearching: false,  // Whether search is open.
     isSongFetching: false,  // Fetching stage.
     isSongLoading: false,  // Either fetching or decoding.
     isVictory: false,  // Victory screen.
-    keyboardActive: false,  // Whether search is open.
     menuActive: true,
     menuDifficulties: [],
     menuSelectedChallenge: {
@@ -147,11 +147,12 @@ AFRAME.registerState({
     },
 
     keyboardclose: (state) => {
-      state.keyboardActive = false;
+      state.isSearching = false;
     },
 
     keyboardopen: (state) => {
-      state.keyboardActive = true;
+      state.isSearching = true;
+      state.menuSelectedChallenge.id = '';
     },
 
     /**
@@ -175,7 +176,7 @@ AFRAME.registerState({
       state.menuSelectedChallenge.downloadsText = `${challengeData.downloads} Plays`;
       computeMenuSelectedChallengeIndex(state);
 
-      state.keyboardActive = false;
+      state.isSearching = false;
     },
 
     menuchallengeunselect: state => {
@@ -209,7 +210,7 @@ AFRAME.registerState({
       state.menuActive = false;
       state.menuSelectedChallenge.id = '';
 
-      state.keyboardActive = false;
+      state.isSearching = false;
       state.challenge.isLoading = true;
       state.isSongLoading = true;
     },

src/templates/menu.html

@@ -100,7 +100,10 @@
 {% endraw %}
 
 <!-- Menu container begins here. -->
-<a-entity id="menu" bind__visible="menuActive" position="0 1.1 -2">
+<a-entity
+  id="menu"
+  bind__visible="menuActive"
+  position="0 1.1 -2">
   <a-entity id="menuchallengeunselectground"
       mixin="slice"
       slice9="width: 2.5; height: 1.55"
@@ -109,8 +112,9 @@
 
   <a-entity id="searchResultsContainer" position="0 0 0.001"
     class="menuAnimation"
-    animation__menuleft="property: object3D.position.x;  to: -0.59; dur: 200; easing: easeOutCubic; startEvents: menuchallengeselect"
-    animation__menuright="property: object3D.position.x; to: 0; dur: 200; easing: easeOutCubic; startEvents: menuchallengeunselect">
+    bind__menu-slide-animation="isSearching: isSearching; menuSelectedChallengeId: menuSelectedChallenge.id"
+    animation__menuleft="property: object3D.position.x; to: -0.59; dur: 200; easing: easeOutCubic; autoplay: false"
+    animation__menuright="property: object3D.position.x; to: 0; dur: 200; easing: easeOutCubic; autoplay: false">
 
     <a-entity id="divisorA"
       position="0.566 0 -0.0025"
@@ -198,28 +202,28 @@
              bind-toggle__raycastable="menuActive && !!menuSelectedChallenge.id"
              bind__visible="menuActive && !!menuSelectedChallenge.id"></a-plane>
   </a-entity>
-
-</a-entity>
-
-<a-entity id="searchButton" position="0 0.1 -1.8" rotation="-35 0 0"
-  mixin="slice" slice9="src: #slicebtnImg; color: #999; width: 1; left: 70; top: 70; height: 0.2; padding: 0.1"
-  animation__mouseenter1="property: slice9.color; type: color; from: #999; to: #FFF; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
-  animation__mouseleave1="property: slice9.color; type: color; from: #FFF; to: #999; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
-  animation__mouseenter2="property: scale; from: 1 1 1; to: 1.1 1.1 1.1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
-  animation__mouseleave2="property: scale; to: 1 1 1; from: 1.1 1.1 1.1; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
-  bind-toggle__raycastable="menuActive && !keyboardActive"
-  bind__visible="menuActive && !keyboardActive"
-  proxy-event="event: click; to: a-scene; as: keyboardopen">
-  <a-entity mixin="textFont" text="align: center; color: #AAA; wrapCount: 20; value: SEARCH SONGS" position="0 -0.07 0.01"></a-entity>
 </a-entity>
 
 <a-entity
   id="keyboard"
-  bind__super-keyboard="hand: activeHand === 'left' && '#leftHand' || '#rightHand'; show: keyboardActive"
+  bind__super-keyboard="{% if not DEBUG_KEYBOARD %}hand: activeHand === 'left' && '#leftHand' || '#rightHand'; {% endif %}show: isSearching"
   super-keyboard="label: Search from over 2500 songs!; labelColor: #FAFAFA; width: 1; hand: {{ DEBUG_KEYBOARD and '#mouseCursor' or '#rightHand' }}; imagePath: assets/img/keyboard/; injectToRaycasterObjects: false"
-  position="0 0.15 -1.4"
-  rotation="-35 0 0"
+  position="0.6 1.1 -1.999"
   keyboard-raycastable
   search
   proxy-event__dismiss="event: superkeyboarddismiss; to: a-scene; as: keyboardclose"
-  proxy-event__accept="event: superkeyboardinput; to: a-scene; as: keyboardclose"></a-entity>
+  proxy-event__accept="event: superkeyboardinput; to: a-scene; as: keyboardclose">
+</a-entity>
+
+<a-entity id="searchButton" position="0 0.2 -2"
+  mixin="slice"
+  slice9="src: #slicebtnImg; color: #999; width: 1; left: 70; top: 70; height: 0.2; padding: 0.1"
+  animation__mouseenter1="property: slice9.color; type: color; from: #999; to: #FFF; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
+  animation__mouseleave1="property: slice9.color; type: color; from: #FFF; to: #999; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
+  animation__mouseenter2="property: scale; from: 1 1 1; to: 1.1 1.1 1.1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
+  animation__mouseleave2="property: scale; to: 1 1 1; from: 1.1 1.1 1.1; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
+  bind-toggle__raycastable="menuActive && !isSearching"
+  bind__visible="menuActive && !isSearching"
+  proxy-event="event: click; to: a-scene; as: keyboardopen">
+  <a-entity mixin="textFont" text="align: center; color: #AAA; wrapCount: 20; value: SEARCH SONGS" position="0 -0.07 0.01"></a-entity>
+</a-entity>