junisaber/src/templates/menu.html

<!-- Macro is a templating function. It is rendered into the HTML below with searchResults(). -->
{% macro searchResults () %}
  <!-- TODO: Sort the layout based on the IDs. -->
  <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; orderAttribute: data-index"
            search-result-list
            position="0 0.644 0"></a-entity>

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

  <a-entity
    id="searchThumbnailImages"
    bind__search-thumbnail-atlas="dummyUpdater: search.songSubNameTexts"
    bind__visible="searchResultsPage.length > 0"
    geometry="primitive: plane; buffer: false; width: 0.2; height: 1.2"
    dynamic-texture-atlas="canvasId: searchThumbnailImagesCanvas; canvasWidth: 64; canvasHeight: 512; numColumns: 1; numRows: 6"
    material="shader: flat; transparent: true"
    position="-0.45 0.0146 0.002"></a-entity>

  <a-entity
    id="searchSongNameTextSelected"
    mixin="font"
    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.opacity; from: 0; to: 0.3; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
    animation__mouseleave="property: components.slice9.material.opacity; from: 0.3; to: 0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
    mixin="slice"
    raycaster-target="width: 1; height: 0.32"
    slice9="width: 0.8; color: {{ COLORS.UI_ACCENT }}; height: 0.130; padding: 0.03; opacity: 0"></a-mixin>

  <a-entity
    id="searchPrevPage"
    mixin="searchPageButton"
    bind-toggle__raycastable="search.hasPrev && menuActive"
    raycaster-target="bindToggle: search.hasNext && menuActive; position: 0 0.08 0"
    position="-0 0.69 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 && menuActive; position: 0 -0.08 0"
    position="-0 -0.674 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__data-index="item.index"
      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="menuActive"
        geometry="primitive: plane; width: 1.1; height: 0.2"
        material="shader: flat; color: {% endraw %}{{ COLORS.UI_ACCENT }}{% raw %}; 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: 0.3; 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: 0.3; 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>
    </a-entity>
  </template>
{% endraw %}

<!-- Menu container begins here. -->
<a-entity
  id="menu"
  class="overlay"
  bind__visible="menuActive"
  position="0 1.1 -2"
  visible="false">

  <a-entity
    id="menuBackground"
    bind-toggle__raycastable="menuActive || genreMenuOpen || isSearching"
    mixin="slice"
    slice9="left: 70; width: 2.9; height: 1.55; opacity: 0.9"
    position="0 0 -0.005"></a-entity>

  <a-entity id="mainMenu" bind__visible="!genreMenuOpen">
    <a-entity id="searchResultsContainer" position="0 0 0.001"
      class="menuAnimation"
      bind__menu-slide-animation="isSearching: isSearching; menuSelectedChallengeId: menuSelectedChallenge.id"
      animation__menuleft="property: object3D.position.x; to: -0.79; dur: 200; easing: easeOutCubic; autoplay: false"
      animation__menuright="property: object3D.position.x; from: -0.79; to: 0; dur: 200; easing: easeOutCubic; autoplay: false">

      <a-entity id="divisorA"
        position="0.566 0 -0.0025"
        geometry="primitive: plane; height: 1.17; width: 0.005"
        material="shader: flat; color: #fff"
        bind__visible="!!menuSelectedChallenge.id"></a-entity>

      {{ searchResults() }}

      <a-entity id="soundboxingLink"
        bind__visible="!menuSelectedChallenge.id && !isSearching && !genre"
        position="1.075 -0.492 0.01">
        <a-entity id="soundboxingButton"
          link="href: https://webvr.soundboxing.co/; on: click"
          geometry="primitive:plane; width: 0.38; height: 0.19;"
          material="shader: flat; src: #soundboxingImg"
          animation__mouseenter="property: object3D.position.z; from: 0.01; to: 0.03; startEvents: mouseenter; pauseEvents: mouseleave; easing: easeOutCubic; dur: 150"
          animation__mouseleave="property: object3D.position.z; from: 0.03; to: 0.01; startEvents: mouseleave; pauseEvents: mouseenter; easing: easeOutCubic; dur: 150"
          proxy-event__mouseenter="event: mouseenter; to: CHILDREN; as: show"
          proxy-event__mouseleave="event: mouseleave; to: CHILDREN; as: hide"
          bind-toggle__raycastable="menuActive && !menuSelectedChallenge.id && !isSearching && !genre">
          <a-entity id="soundboxing-popup"
            position="0 0.12 0.015"
            mixin="font"
            animation__show="property: components.text.material.uniforms.opacity.value; from: 0; to: 1; startEvents: show; dur: 100"
            animation__hide="property: components.text.material.uniforms.opacity.value; from: 1; to: 0; startEvents: hide; dur: 100"
            text="value: If you liked Super Saber,\nyou'll love Soundboxing!\nPlay it now instantly.; letterSpacing: 2; opacity: 0; baseline: bottom; width: 0.7; wrapCount: 28; align: center; color:  #fa83d9;"></a-entity>
        </a-entity>
      </a-entity>
    </a-entity>

    <a-entity id="menuDifficultiesGroup" position="-0.00391997028958635 0.18 0">
      <a-entity id="divisorB"
        position="0.218 -0.179 -0.003"
        geometry="primitive: plane; height: 1.17; width: 0.005"
        material="shader: flat; color: #fff"
        bind__visible="!!menuSelectedChallenge.id"></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="menuActive && !!menuSelectedChallenge.id && menuSelectedChallenge.difficulty !== item"
                geometry="primitive: plane; width: 0.4; height: 0.2"
                material="shader: flat; color:  {% endraw %}{{ COLORS.UI_ACCENT }}{% raw %}; 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: 0.3; 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="font" 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.8394583182784089 0 0.001">
      <a-entity
        id="menuSelectedChallengeImage"
        bind__menu-selected-challenge-image="selectedChallengeId: menuSelectedChallenge.id"
        geometry="primitive: plane; height: 0.4; width: 0.4"
        material="shader: flat"
        position="0 0.42 0"></a-entity>

      <a-entity id="menuSelectedChallengeInfoContainer" position="0 0.058 0">
        <a-entity
          id="menuSelectedChallengeSongAuthor"
          position="0 0.042 0"
          mixin="font"
          text="wrapCount: 30; lineHeight: 40; width: 0.8; align: center; baseline: center; color: #FFF"
          bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
        <a-entity
          id="menuSelectedChallengeSongName"
          position="0 -0.059 0"
          mixin="font"
          text="align: center; color: #FFF; wrapCount: 31; baseline: top; lineHeight: 36; width: 1.4"
          bind__text="value: menuSelectedChallenge.songName"></a-entity>
        <a-entity
          id="menuSelectedChallengeInfo"
          position="0 -0.482 0"
          mixin="font"
          text="align: center; color: #999; wrapCount: 30; lineHeight: 60; width: 0.8; baseline: bottom"
          bind__text="value: menuSelectedChallenge.songInfoText"></a-entity>
      </a-entity>

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

    <a-entity
      id="searchError"
      bind__visible="search.hasError"
      mixin="font"
      text="align: center; value: Sorry, there was an issue fetching search results. Please try again."
      position="0 0 0.01"></a-entity>
  </a-entity>

  <a-entity
    id="searchQuery"
    mixin="font"
    bind__text-uppercase="value: genre || search.query"
    bind__visible="!!genre || !!search.query && !isSearching"
    text="align: center; color: #FAFAFA; wrapCount: 20"
    position="0 0.8 0.01"></a-entity>

  <a-entity
    id="genreMenu"
    bind-for="for: genre; in: genres; updateInPlace: true; key: name"
    bind__visible="genreMenuOpen"
    layout="type: box; columns: 6; marginRow: 0.4; marginColumn: 0.4; align: center"
    search-genre>
    <template>
      <a-entity class="genre" bind-item__data-genre="item">
        <a-entity
          mixin="slice"
          slice9="src: #slicebtnImg; color: #333; width: 0.35; left: 70; top: 70; height: 0.35; padding: 0.07"
          animation__mouseenter1="property: components.slice9.material.color; type: color; from: #333; to: #fff; startEvents: mouseenter; pauseEvents: mouseleave; easing: easeOutCubic; dur: 150"
          animation__mouseleave1="property: components.slice9.material.color; type: color; from: #fff; to: #333; startEvents: mouseleave; pauseEvents: mouseenter; easing: easeOutCubic; dur: 150"
          animation__mouseenter2="property: scale; from: 1 1 1; to: 1.03 1.03 1.03; startEvents: mouseenter; pauseEvents: mouseleave; easing: easeOutCubic; dur: 150"
          animation__mouseleave2="property: scale; from: 1.03 1.03 1.03; to: 1 1 1; startEvents: mouseleave; pauseEvents: mouseenter; easing: easeOutCubic; dur: 150"
          proxy-event__enter="event: mouseenter; to: CHILDREN; captureBubbles: true"
          proxy-event__leave="event: mouseleave; to: CHILDREN; captureBubbles: true"
          raycaster-target="bindToggle: genreMenuOpen; width: 0.35; height: 0.35">
          <a-entity
            mixin="font"
            text="align: center; width: 1.1; color: #555"
            animation__mouseenter="property: components.text.material.uniforms.color.value; from: #555; to: #FAFAFA; type: color; startEvents: mouseenter; pauseEvents: mouseleave; easing: easeOutCubic; dur: 150"
            animation__mouseleave="property: components.text.material.uniforms.color.value; from: #FAFAFA; to: #555; type: color; startEvents: mouseleave; pauseEvents: mouseenter; easing: easeOutCubic; dur: 150"
            bind-item__text="value: item.name"
            position="0 -0.16 0.001"></a-entity>
          <a-entity
            class="genreIcon"
            bind-item__atlas-uvs="totalColumns: 6; totalRows: 3; row: item.row; column: item.column"
            geometry="primitive: plane; width: 0.22; height: 0.22; buffer: false; skipCache: true"
            position="0 0.04 0.002"
            material="shader: flat; src: #genresImg; transparent: true; color: #AAA"
            animation__mouseenter="property: components.material.material.color; type: color; from: #999; to: #FAFAFA; startEvents: mouseenter; pauseEvents: mouseleave; easing: easeOutCubic; dur: 150"
            animation__mouseleave="property: components.material.material.color; type: color; from: #FAFAFA; to: #999; startEvents: mouseleave; pauseEvents: mouseenter; easing: easeOutCubic; dur: 150"></a-entity>
        </a-entity>
      </a-entity>
    </template>
  </a-entity>
</a-entity>

<a-entity
  id="keyboard"
  class="overlay"
  bind__super-keyboard="{% if not DEBUG_KEYBOARD %}hand: activeHand === 'left' && '#leftHand' || '#rightHand'; {% endif %}show: isSearching"
  super-keyboard="label: SEARCH FROM OVER 6000 SONGS; inputColor: #fff; labelColor: #FFF; width: 1.5; hand: {{ DEBUG_KEYBOARD and '#mouseCursor' or '#rightHand' }}; imagePath: assets/img/keyboard/; font: assets/fonts/Teko-Bold.json; align: center; model: supersaber; keyColor: #fff; injectToRaycasterObjects: false; filters: allupper; keyHoverColor: #fff"
  position="0.55 0.95 -1.85"
  keyboard-raycastable="condition: isSearching"
  search
  proxy-event__dismiss="event: superkeyboarddismiss; to: a-scene; as: keyboardclose"
  proxy-event__accept="event: superkeyboardinput; to: a-scene; as: keyboardclose">
</a-entity>

<a-entity id="genreButtons" position="-0.55 0.2 -1.9">
  <a-entity id="genreButton"
    mixin="bigMenuButton"
    bind-toggle__raycastable="menuActive && !genreMenuOpen && !isSearching && !genre"
    bind__visible="menuActive && !genreMenuOpen && !isSearching && !genre"
    proxy-event="event: click; to: a-scene; as: genremenuopen">
    <a-entity mixin="font" text="align: center; color: #FFF; wrapCount: 20; value: BROWSE GENRES" position="0 -0.07 0.01"></a-entity>
  </a-entity>

  <a-entity id="clearGenreButton"
    mixin="bigMenuButton"
    bind-toggle__raycastable="menuActive && !!genre"
    bind__visible="menuActive && !!genre"
    proxy-event="event: click; to: a-scene; as: searchclear">
    <a-entity mixin="font" text="align: center; color: #FFF; wrapCount: 20; value: CLEAR GENRE" position="0 -0.07 0.01"></a-entity>
  </a-entity>
</a-entity>

<a-entity
  id="backButton"
  mixin="bigMenuButton"
  bind-toggle__raycastable="genreMenuOpen"
  bind__visible="genreMenuOpen"
  position="0 0.2 -1.9"
  proxy-event="event: click; to: a-scene; as: genremenuclose">
  <a-entity mixin="font" text="align: center; color: #FFF; wrapCount: 20; value: BACK" position="0 -0.07 0.01"></a-entity>
</a-entity>

<a-entity id="searchButtons" position="0.55 0.2 -1.9">
  <a-entity id="searchButton"
    mixin="bigMenuButton"
    bind-toggle__raycastable="menuActive && !genreMenuOpen && !isSearching && !search.query"
    bind__visible="menuActive && !genreMenuOpen && !isSearching && !search.query"
    proxy-event="event: click; to: a-scene; as: keyboardopen">
    <a-entity mixin="font" text="align: center; color: #FFF; wrapCount: 20; value: SEARCH SONGS" position="0 -0.07 0.01"></a-entity>
  </a-entity>

  <a-entity id="searchClearButton"
    mixin="bigMenuButton"
    bind-toggle__raycastable="menuActive && !!search.query && !isSearching"
    bind__visible="menuActive && !!search.query && !isSearching"
    proxy-event="event: click; to: a-scene; as: searchclear">
    <a-entity mixin="font" text="align: center; color: #FFF; wrapCount: 20; value: CLEAR SEARCH" position="0 -0.07 0.01"></a-entity>
  </a-entity>
</a-entity>