junisaber/src/templates/menu.html

<!-- Macro is a templating function. It is rendered into the HTML below with searchResults(). -->
{% macro searchResults () %}
  <a-entity id="searchResultList"
            bind-for="for: item; in: searchResultsPage; key: id; template: #searchResultTemplate; updateInPlace: true; pool: 6; delay: 25"
            layout="type: box; columns: 1; marginRow: -0.2"
            search-result-list
            position="0 0.644 0"></a-entity>

  <!-- All search result text merged and spaced out. -->
  <a-entity
    id="searchSongNameTexts"
    mixin="textFont"
    bind__text="value: search.songNameTexts"
    text="align: left; color: #FAFAFA; wrapCount: 28; lineHeight: 112"
    position="0.181 0 0.001">
  </a-entity>
  <a-entity
    id="searchSongSubNameTexts"
    mixin="textFont"
    bind__text="value: search.songSubNameTexts"
    text="align: left; color: #999; wrapCount: 42; lineHeight: 166"
    position="0.181 -0.055 0.001">
  </a-entity>

  <a-entity
    id="searchSongNameTextSelected"
    mixin="textFont"
    bind__search-song-name-selected="index: menuSelectedChallenge.index; selectedChallengeId: menuSelectedChallenge.id"
    bind__text="value: menuSelectedChallenge.shortSongName"
    text="align: left; color: #333; wrapCount: 28"
    position="0.181 0 0.004"
    search-song-name-selected="anchor: 0.5; offset: -0.2"></a-entity>

  <a-mixin id="searchPageButton"
    animation__mouseenter="property: components.slice9.material.color; type: color; from: #050505; to: #333; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
    animation__mouseleave="property: components.slice9.material.color; type: color; from: #333; to: #050505; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
    mixin="slice"
    raycaster-target="width: 1; height: 0.32"
    slice9="width: 0.5; height: 0.08; padding: 0.03"></a-mixin>

  <a-entity
    id="searchPrevPage"
    mixin="searchPageButton"
    bind-toggle__raycastable="search.hasPrev && menu.active"
    raycaster-target="bindToggle: search.hasNext && menu.active; position: 0 0.08 0"
    position="-0.05 0.65 0.01"
    proxy-event="event: click; to: a-scene; as: searchprevpage; captureBubbles: true"
    bind__visible="search.hasPrev">
    <a-entity geometry="primitive: plane; width: 0.08; height: 0.08" material="shader: flat; src: #downIconImg; transparent: true" rotation="0 0 180" position="0 0 -0.001"></a-entity>
  </a-entity>
  <a-entity
    id="searchNextPage"
    mixin="searchPageButton"
    raycaster-target="bindToggle: search.hasNext && menu.active; position: 0 -0.08 0"
    position="-0.05 -0.634 0.01"
    proxy-event="event: click; to: a-scene; as: searchnextpage; captureBubbles: true"
    bind__visible="search.hasNext">
    <a-entity geometry="primitive: plane; width: 0.08; height: 0.08" material="shader: flat; src: #downIconImg; transparent: true" position="0 0 -0.001"></a-entity>
  </a-entity>
{% endmacro %}

{% raw %}
  <template id="searchResultTemplate">
    <a-entity
      class="searchResult"
      bind-item__data-id="item.id"
      bind-item__song-preview="challengeId: item.id; previewStartTime: item.previewStartTime">
      <a-entity
        class="searchResultBackground"
        active-color
        bind-item__active-color="active: menuSelectedChallenge.id === item.id"
        bind-item__animation__mouseenter="enabled: menuSelectedChallenge.id !== item.id"
        bind-item__animation__mouseentervisible="enabled: menuSelectedChallenge.id !== item.id"
        bind-item__animation__mouseleave="enabled: menuSelectedChallenge.id !== item.id"
        bind-item__animation__mouseleavevisible="enabled: menuSelectedChallenge.id !== item.id"
        bind-toggle__raycastable="menu.active"
        geometry="primitive: plane; width: 1.1; height: 0.2"
        material="shader: flat; color: #067197; transparent: true; opacity: 0.0"
        position="0 -0.13 -0.002"
        play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
        animation__mouseenter="property: components.material.material.opacity; from: 0.0; to: 1.0; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150; delay: 1"
        animation__mouseentervisible="property: visible; from: false; to: true; startEvents: mouseenter; pauseEvents: mouseleave; dur: 1"
        animation__mouseleave="property: components.material.material.opacity; from: 1.0; to: 0.0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
        animation__mouseleavevisible="property: visible; from: true; to: false; startEvents: mouseleave; pauseEvents: mouseenter; dur: 160"
        visible="false"></a-entity>
      <a-entity class="searchResultContent" position="0.125 -0.05 0">
        <a-entity
          class="searchResultImage"
          bind-item__search-result-image="id: item.id"
          geometry="primitive: plane; width: 0.2; height: 0.2"
          material="shader: flat; color: #223"
          position="-0.576 -0.08 0.001"></a-entity>
      </a-entity>
    </a-entity>
  </template>
{% endraw %}

<!-- Menu container begins here. -->
<a-entity id="menu" bind__visible="menu.active" position="0 1.6 -2">
  <a-entity id="menuchallengeunselectground"
      mixin="slice"
      slice9="width: 2.5; height: 1.4"
      position="0 0 -0.005"
      raycastable></a-entity>

  <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">

    <a-entity id="divisorA"
      class="menuAnimation"
      position="0.566 0 -0.0025"
      geometry="primitive:plane; height:1.17; width:0.005"
      material="shader: flat; color: #fff; transparent: true; opacity: 0"></a-entity>

    {{ searchResults() }}
  </a-entity>

  <a-entity id="menuDifficultiesGroup" position="0.195 0.18 0">
    <a-entity id="divisorB"
      class="menuAnimation"
      position="0.218 -0.179 -0.003"
      geometry="primitive: plane; height: 1.17; width: 0.005"
      material="shader: flat; color: #fff; transparent: true; opacity: 0.0"></a-entity>

    <!-- Top-aligned. TODO: Smart-centering. -->
    <!-- Uses bind-for and bind-item to render difficulties. -->
    <a-entity id="menuDifficulties"
      bind-for="for: item; in: menuDifficulties; updateInPlace: true; pool: 5"
      bind__visible="!!menuSelectedChallenge.id"
      layout="type: box; columns: 1; marginRow: -0.2; orderAttribute: data-bind-for-key"
      position="0 0.34 0"
      menu-difficulty-select>
      {% raw %}
      <template>
        <!-- Item is a string representing the difficulty. -->
        <a-entity class="difficultyOption" bind-item__data-difficulty="item">
          <a-entity class="difficultyBackground"
              bind-item__active-color="active: menuSelectedChallenge.difficulty === item"
              bind-item__animation__mouseenter="enabled: menuSelectedChallenge.difficulty !== item"
              bind-item__animation__mouseleave="enabled: menuSelectedChallenge.difficulty !== item"
              bind-item__animation__mouseentervisible="enabled: menuSelectedChallenge.difficulty !== item"
              bind-item__animation__mouseleavevisible="enabled: menuSelectedChallenge.difficulty !== item"
              bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id && menuSelectedChallenge.difficulty !== item"
              geometry="primitive: plane; width: 0.4; height: 0.2"
              material="shader: flat; color: #067197; transparent: true; opacity: 0.0"
              position="0 -0.005 0"
              play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
              animation__mouseenter="property: components.material.material.opacity; to: 1.0; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
              animation__mouseentervisible="property: visible; from: false; to: true; startEvents: mouseenter; pauseEvents: mouseleave; dur: 1"
              animation__mouseleave="property: components.material.material.opacity; to: 0.0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
              animation__mouseleavevisible="property: visible; from: true; to: false; startEvents: mouseleave; pauseEvents: mouseenter; dur: 160"></a-entity>
          <a-entity class="difficultyText" mixin="textFont" bind-item__active-text-color="active: menuSelectedChallenge.difficulty === item" active-text-color="color: #333" bind-item__text-uppercase="value: item" text="wrapCount: 28; align: center; color: #FAFAFA" position="0 -0.057 0.001"></a-entity>
        </a-entity>
      </template>
    {% endraw %}
    </a-entity>
  </a-entity>

  <!-- Selected challenge info. -->
  <a-entity
    id="menuSelectedChallengePanel"
    bind__visible="!!menuSelectedChallenge.id"
    position="0.82 0 0.001">
    <a-entity id="menuSelectedChallengeImage"
              bind__menu-selected-challenge-image="selectedChallengeId: menuSelectedChallenge.id"
              geometry="primitive: plane; height: 0.3; width: 0.3"
              material="shader: flat"
              position="0 0.382 0"></a-entity>
    <a-entity id="menuSelectedChallengeInfo">
      <a-entity class="menuSelectedChallengeSongAuthor" position="0 0.058 0"
        mixin="textFont" text="wrapCount: 40; align: center; color: #FF185B" bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
      <a-entity class="menuSelectedChallengeSongName" position="0 -0.031 0"
        mixin="textFont" text="align: center; color: #FF185B; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
        bind__text="value: menuSelectedChallenge.songName"></a-entity>
      <a-entity class="menuSelectedChallengeAuthor" position="0 -0.257 0"
        mixin="textFont" text="align: center; color: #FFF; wrapCount: 33; width: 0.78; baseline: bottom" bind__text="value: menuSelectedChallenge.author"></a-entity>
      <a-entity class="menuSelectedChallengeDownloads" position="0 -0.325 0"
        mixin="textFont" text="align: center; color: #FFF; wrapCount: 35" bind__text="value: menuSelectedChallenge.downloadsText"></a-entity>
    </a-entity>

    <a-plane id="playButton"
             play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
             position="0 -0.482 0"
             proxy-event="event: click; to: a-scene; as: playbuttonclick"
             material="shader: flat; src: #playImg; transparent: true; color: #CCC"
             width="0.4"
             height="0.2"
             animation__mouseenter1="property: components.material.material.color; type: color; from: #CCC; to: #FFF; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
             animation__mouseleave1="property: components.material.material.color; type: color; from: #FFF; to: #CCC; 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 && !!menuSelectedChallenge.id"
             bind__visible="menu.active && !!menuSelectedChallenge.id"></a-plane>
  </a-entity>

</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 && !keyboardActive"
  bind__visible="menu.active && !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="show: keyboardActive"
  super-keyboard="label: Search from over 2500 songs!; 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
  proxy-event__dismiss="event: superkeyboarddismiss; to: a-scene; as: keyboardclose"
  proxy-event__accept="event: superkeyboardinput; to: a-scene; as: keyboardclose"></a-entity>