diff --git a/src/components/search.js b/src/components/search.js index 9adde2f..2947c48 100644 --- a/src/components/search.js +++ b/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; + } +}); diff --git a/src/state/index.js b/src/state/index.js index 6cea2eb..f7e35df 100644 --- a/src/state/index.js +++ b/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.shortSongSubName = truncate(result.songSubName, 32); + result.shortSongName = truncate(result.songName, SONG_NAME_TRUNCATE).toUpperCase(); + 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; + } + } +} diff --git a/src/templates/menu.html b/src/templates/menu.html index 29eeec5..44ec6fa 100644 --- a/src/templates/menu.html +++ b/src/templates/menu.html @@ -6,6 +6,31 @@ search-result-list position="0 0.644 0"> + + + + + + + + - - -