merge search result text. save draw calls + less updates

src/components/search.js

@@ -78,3 +78,19 @@ AFRAME.registerComponent('search-result-image', {
     this.el.setAttribute('material', this.materialUpdateObj);
   },
 });
+
+AFRAME.registerComponent('search-song-name-selected', {
+  schema: {
+    anchor: {default: 0},
+    index: {default: 0},
+    offset: {default: 0},
+    selectedChallengeId: {default: ''}
+  },
+
+  update: function () {
+    const data = this.data;
+    const el = this.el;
+    el.object3D.visible = !!data.selectedChallengeId && data.index !== -1;
+    el.object3D.position.y = data.index * data.offset + data.anchor;
+  }
+});

src/state/index.js

@@ -3,6 +3,8 @@ var utils = require('../utils');
 const challengeDataStore = {};
 const hasInitialChallenge = !!AFRAME.utils.getUrlParameter('challenge');
 const SEARCH_PER_PAGE = 6;
+const SONG_NAME_TRUNCATE = 24;
+const SONG_SUB_NAME_TRUNCATE = 32;
 
 const DAMAGE_DECAY = 0.25;
 const DAMAGE_MAX = 10;
@@ -46,6 +48,7 @@ AFRAME.registerState({
       downloads: '',
       downloadsText: '',
       id: '',
+      index: '',
       image: '',
       songName: '',
       songSubName: ''
@@ -62,6 +65,8 @@ AFRAME.registerState({
       hasNext: false,
       hasPrev: false,
       results: [],
+      songNameTexts: '',
+      songSubNameTexts: ''
     },
     searchResultsPage: []
   },
@@ -129,6 +134,7 @@ AFRAME.registerState({
 
       state.menuSelectedChallenge.image = utils.getS3FileUrl(id, 'image.jpg');
       state.menuSelectedChallenge.downloadsText = `${challengeData.downloads} Plays`;
+      computeMenuSelectedChallengeIndex(state);
     },
 
     menuchallengeunselect: () => {
@@ -201,8 +207,8 @@ AFRAME.registerState({
       for (i = 0; i < payload.results.length; i++) {
         let result = payload.results[i];
         result.songSubName = result.songSubName || 'Unknown Artist';
-        result.shortSongName = truncate(result.songName, 24).toUpperCase();
+        result.shortSongName = truncate(result.songName, SONG_NAME_TRUNCATE).toUpperCase();
-        result.shortSongSubName = truncate(result.songSubName, 32);
+        result.shortSongSubName = truncate(result.songSubName, SONG_SUB_NAME_TRUNCATE);
         challengeDataStore[result.id] = result
       }
       computeSearchPagination(state);
@@ -233,12 +239,22 @@ function computeSearchPagination (state) {
   state.search.hasPrev = state.search.page > 0;
   state.search.hasNext = state.search.page < numPages - 1;
 
+  state.search.songNameTexts = '';
+  state.search.songSubNameTexts = '';
+
   state.searchResultsPage.length = 0;
   for (i = state.search.page * SEARCH_PER_PAGE;
        i < state.search.page * SEARCH_PER_PAGE + SEARCH_PER_PAGE; i++) {
     if (!state.search.results[i]) { break; }
     state.searchResultsPage.push(state.search.results[i]);
+
+    state.search.songNameTexts +=
+      truncate(state.search.results[i].songName, SONG_NAME_TRUNCATE).toUpperCase() + '\n';
+    state.search.songSubNameTexts +=
+      truncate(state.search.results[i].songSubName, SONG_SUB_NAME_TRUNCATE) + '\n';
   }
+
+  computeMenuSelectedChallengeIndex(state);
 }
 
 function truncate (str, length) {
@@ -278,3 +294,13 @@ function resetScore (state) {
   state.score.score = 0;
   state.score.multiplier = 1;
 }
+
+function computeMenuSelectedChallengeIndex (state) {
+  state.menuSelectedChallenge.index = -1;
+  for (let i = 0; i < state.searchResultsPage.length; i++) {
+    if (state.searchResultsPage[i].id === state.menuSelectedChallenge.id) {
+      state.menuSelectedChallenge.index = i;
+      break;
+    }
+  }
+}

src/templates/menu.html

@@ -6,6 +6,31 @@
             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"
@@ -66,26 +91,6 @@
           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
-          class="searchResultTitleActive"
-          mixin="textFont"
-          bind-item__text="value: item.shortSongName"
-          bind-item__visible="menuSelectedChallenge.id === item.id"
-          text="align: left; color: #333; wrapCount: 28"
-          position="0.064 -0.091 0"></a-entity>
-        <a-entity
-          class="searchResultTitle"
-          bind-item__text="value: item.shortSongName"
-          bind-item__visible="menuSelectedChallenge.id !== item.id"
-          mixin="textFont"
-          text="align: left; color: #FFF; wrapCount: 28"
-          position="0.064 -0.091 0"></a-entity>
-        <a-entity
-          class="searchResultAuthor"
-          mixin="textFont"
-          bind-item__text="value: item.shortSongSubName"
-          text="wrapCount: 42; align: left; color: #999"
-          position="0.064 -0.147 0"></a-entity>
       </a-entity>
     </a-entity>
   </template>