search button (fixes #12)

src/components/keyboard-raycastable.js

@@ -4,6 +4,6 @@ AFRAME.registerComponent('keyboard-raycastable', {
   play: function () {
     // TODO: bind-toggle__raycastable for when search is activated.
     this.el.components['super-keyboard'].kbImg.setAttribute('bind-toggle__raycastable',
-                                                            'menu.active');
+                                                            'showKeyboard');
   },
 });

src/index.html

@@ -49,6 +49,7 @@
         <img id="playImg" src="assets/img/play.png">
         <img id="skyTexture" src="assets/img/stage/sky.jpg">
         <img id="sliceImg" src="assets/img/slice.png">
+        <img id="slicebtnImg" src="assets/img/slicebtn.png">
         <img id="smokeTexture" src="assets/img/stage/smoke.png">
         <img id="beamImg" src="assets/img/beam.png">
         <img id="wrongBlueImg" src="assets/img/wrongblue.png">

src/state/index.js

@@ -28,6 +28,7 @@ AFRAME.registerState({
     },
     inVR: false,
     isPaused: false,
+    showKeyboard: false,
     menu: {
       active: true,
       playButtonText: 'Play'
@@ -84,6 +85,10 @@ AFRAME.registerState({
       state.challenge.isLoading = true;
     },
 
+    closekeyboard: (state) => {
+      state.showKeyboard = false;
+    },
+
     /**
      * Song clicked from menu.
      */
@@ -109,6 +114,10 @@ AFRAME.registerState({
       state.menuSelectedChallenge.difficulty = difficulty;
     },
 
+    openkeyboard: (state) => {
+      state.showKeyboard = true;
+    },
+
     pausegame: (state) => {
       state.isPaused = true;
     },

src/templates/menu.html

@@ -185,9 +185,26 @@
              bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id"
              bind__visible="menu.active && !!menuSelectedChallenge.id"></a-plane>
   </a-entity>
+
 </a-entity>
 
-<a-entity id="keyboard" super-keyboard="width: 1; hand: {{ DEBUG_KEYBOARD and '#mouseCursor' or '#rightHand' }}; imagePath: assets/img/keyboard/; injectToRaycasterObjects: false" position="0 0.8 -1" rotation="-40 0 0" keyboard-raycastable search bind__super-keyboard="show: menu.active"></a-entity>
+<a-entity id="searchButton" position="0 0.76 -1.8"
+  mixin="slice" slice9="src: #slicebtnImg; color: #999; width: 1; 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="menu.active && !showKeyboard"
+  bind__visible="menu.active && !showKeyboard"
+  proxy-event="event: click; to: a-scene; as: openkeyboard">
+  <a-entity mixin="textFont" text="align: center; color: #AAA; wrapCount: 20; value:SEARCH SONG" position="0 -0.07 0.01"></a-entity>
+</a-entity>
+
+
+<a-entity id="keyboard" super-keyboard="label: Search song name or author:; width: 1; hand: {{ DEBUG_KEYBOARD and '#mouseCursor' or '#rightHand' }}; imagePath: assets/img/keyboard/; injectToRaycasterObjects: false" position="0 0.8 -1" rotation="-40 0 0" keyboard-raycastable search bind__super-keyboard="show: showKeyboard"
+proxy-event__dismiss="event: superkeyboarddismiss; to: a-scene; as: closekeyboard"
+proxy-event__accept="event: superkeyboardinput; to: a-scene; as: closekeyboard"
+></a-entity>
 
 <!-- Representation of the song information during play mode. Not part of menu.
      TODO: Move to different template along with score and such. -->