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