junisaber/src/templates/menu.html

{% macro searchResults () %}
  <a-entity id="searchResultList"
            bind-for="for: item; in: searchResultsPage; key: id; template: #searchResultTemplate"
            layout="type: box; columns: 1; marginRow: -0.1"
            search-result-list
            position="0 0.45 0">
  </a-entity>

  <!-- TODO: Pagination icons. -->
  <a-mixin id="searchPageButton"
    animation__mouseenter="property: material.color; from: #050505; to: #333; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
    animation__mouseleave="property: material.color; from: #333; to: #050505; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
    geometry="primitive: plane; width: 0.9; height: 0.045"
    material="color: #050505; shader: flat"
    text="align: center; wrapCount: 40"></a-mixin>
  <a-entity id="searchPrevPage" mixin="searchPageButton" bind-toggle__raycastable="search.hasPrev && menu.active" text="value: prev" position="-0.05 0.39 0" proxy-event="event: click; to: a-scene; as: searchprevpage" bind__visible="search.hasPrev"></a-entity>
  <a-entity id="searchNextPage" mixin="searchPageButton" bind-toggle__raycastable="search.hasNext && menu.active" text="value: next" position="-0.05 -0.255 0" proxy-event="event: click; to: a-scene; as: searchnextpage" bind__visible="search.hasNext"></a-entity>

  {% raw %}
    <template id="searchResultTemplate">
      <a-entity class="searchResult" data-id="{{ item.id }}" song-preview="challengeId: {{ item.id }}; previewStartTime: {{ item.previewStartTime }}">
        <a-entity class="searchResultBackground"
            bind__active-color="active: menuSelectedChallenge.id === '{{ item.id }}'"
            bind__animation__mouseenter="enabled: menuSelectedChallenge.id !== '{{ item.id }}'"
            bind__animation__mouseleave="enabled: menuSelectedChallenge.id !== '{{ item.id }}'"
            geometry="primitive: plane; width: 0.8; height: 0.1"
            material="shader: flat; color: #111"
            position="0 -0.13 -0.01"
            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"
            raycastable></a-entity>
        <a-entity class="searchResultContent" position="0.125 -0.05 0">
          <a-entity class="searchResultImage" geometry="primitive: plane; width: 0.1; height: 0.1" material="shader: flat; src: url(https://s3-us-west-2.amazonaws.com/supersaber/{{ item.id }}-image.jpg)" position="-0.576 -0.08 0.001" visible="false" event-set__materialtextureloaded="visible: true"></a-entity>
          <a-entity class="searchResultAuthor" mixin="textFont" text="wrapCount: 55; align: left; color: #54c2fd; value: {{ item.shortSongSubName }}" position="0 -0.055 0"></a-entity>
          <a-entity class="searchResultTitle" mixin="textFont" text="align: left; color: #FFF; wrapCount: 45; value: {{ item.shortSongName }}" position="0 -0.09 0"></a-entity>
        </a-entity>
      </a-entity>
    </template>
  {% endraw %}
{% endmacro %}

<a-entity id="menu" bind__visible="menu.active" position="0 1.775 -1">
  <a-entity id="menuBackground"
      geometry="primitive: plane; width: 2; height: 0.7"
      material="shader: flat; transparent: true; color: #000; opacity: 0.85"
      position="0 0 -0.005"></a-entity>

  <a-entity id="searchResultsContainer" position="-0.495 -0.072 0.001">
    {{ searchResults() }}
  </a-entity>

  <template id="difficultyOptionTemplate">
  </template>
  <a-entity id="menuDifficulties"
    bind-for="for: difficulty; in: menuDifficulties"
    bind__visible="!!menuSelectedChallenge.id"
    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__active-color="active: menuSelectedChallenge.difficulty === '{{ difficulty }}'"
              bind__animation__mouseenter="enabled: menuSelectedChallenge.difficulty !== '{{ difficulty }}'"
              bind__animation__mouseleave="enabled: menuSelectedChallenge.difficulty !== '{{ 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 && menuSelectedChallenge.difficulty !== '{{ difficulty }}'"></a-entity>
          <a-entity mixin="textFont" text="value: {{ difficulty }}" position="0 0 0.001"></a-entity>
        </a-entity>
      </template>
    {% endraw %}
  </a-entity>

  <a-entity id="menuSelectedChallengePanel" bind__visible="!!menuSelectedChallenge.id"
            position="0.6 0 0.001">
    <a-entity id="menuSelectedChallengeImage"
              bind__material="src: menuSelectedChallenge.image"
              geometry="primitive: plane; height: 0.2; width: 0.2"
              material="shader: flat"
              position="0 0.2 0"></a-entity>

    <a-entity id="menuSelectedChallengeInfo" layout="type: box; columns: 1; marginRow: -0.0575" position="0 0.05 0">
      <a-entity class="menuSelectedChallengeSongAuthor" mixin="textFont" text="wrapCount: 55; align: center; color: #54c2fd" position="0 -0.055 0" bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
      <a-entity class="menuSelectedChallengeSongName" mixin="textFont" text="align: center; color: #FFF; wrapCount: 45" position="0 -0.09 0" bind__text="value: menuSelectedChallenge.songName"></a-entity>
      <a-entity class="menuSelectedChallengeAuthor" mixin="textFont" text="align: center; color: #FFF; wrapCount: 45" position="0 -0.09 0" bind__text="value: menuSelectedChallenge.author"></a-entity>
      <a-entity class="menuSelectedChallengeDownloads" mixin="textFont" text="align: center; color: #FFF; wrapCount: 45" position="0 -0.09 0" bind__text="value: menuSelectedChallenge.downloadsText"></a-entity>
    </a-entity>

    <a-plane id="playButton"
             play-button
             play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
             position="0 -0.25 0"
             proxy-event="event: click; to: a-scene; as: playbuttonclick"
             material="shader: flat; src: #playImg; transparent: true; color: #BBB"
             width="0.256"
             height="0.128"
             animation__mouseenter1="property: material.color; from: #BBB; to: #FFF; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
             animation__mouseleave1="property: material.color; from: #FFF; to: #BBB; 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="keyboard" super-keyboard="hand: {{ DEBUG_KEYBOARD and '#mouseCursor' or '#rightHand' }}; imagePath: assets/img/keyboard/; injectToRaycasterObjects: false" position="0 1.2 -0.8" rotation="-30 0 0" keyboard-raycastable search bind__visible="menu.active"></a-entity>

<a-entity id="songInfo"
          bind__visible="isChallengeScreen"
          position="0 -0.25 0">
  <a-entity id="loadingText"
            bind__text="value: loadingText"
            mixin="textFont"
            text="align: center; width: 1.25"
            position="0 1 -1"
            rotation="-25 0 0"
            bind__visible="challenge.isLoading"></a-entity>
  <a-entity id="title"
            mixin="textFont"
            text="align: center; width: 2.50; wrapCount: 80"
            position="0 0.9 -1"
            rotation="-25 0 0"></a-entity>
</a-entity>