diff --git a/src/components/keyboard-raycastable.js b/src/components/keyboard-raycastable.js index 6e385ec..dbb9d15 100644 --- a/src/components/keyboard-raycastable.js +++ b/src/components/keyboard-raycastable.js @@ -3,6 +3,7 @@ AFRAME.registerComponent('keyboard-raycastable', { play: function () { // TODO: bind-toggle__raycastable for when search is activated. - this.el.components['super-keyboard'].kbImg.setAttribute('raycastable', ''); + this.el.components['super-keyboard'].kbImg.setAttribute('bind-toggle__raycastable', + 'menu.active'); }, }); diff --git a/src/components/menu-difficulty-select.js b/src/components/menu-difficulty-select.js index 687997b..ec878b6 100644 --- a/src/components/menu-difficulty-select.js +++ b/src/components/menu-difficulty-select.js @@ -6,7 +6,7 @@ var bindEvent = require('aframe-event-decorators').bindEvent; AFRAME.registerComponent('menu-difficulty-select', { click: bindEvent(function (evt) { this.el.emit('menudifficultyselect', - evt.target.closest('difficultyOption').dataset.difficulty, + evt.target.closest('.difficultyOption').dataset.difficulty, false); }) }); diff --git a/src/components/preview-song.js b/src/components/preview-song.js index 026a893..a69282d 100644 --- a/src/components/preview-song.js +++ b/src/components/preview-song.js @@ -34,17 +34,19 @@ AFRAME.registerComponent('preview-song', { // Stop. if (oldData.challengeId && !this.data.challengeId) { if (this.animation) { this.animation.pause(); } - this.audio.pause(); + if (!this.audio.paused) { this.audio.pause(); } this.audio.src = ''; return; } // Play preview. - this.audio.currentTime = this.data.previewStartTime; - this.audio.src = utils.getS3FileUrl(this.data.challengeId, 'song.ogg'); - this.audio.volume = 0; - this.volumeTarget.volume = 0; - this.audio.play(); - this.animation.restart(); + if (this.data.challengeId) { + this.audio.currentTime = this.data.previewStartTime; + this.audio.src = utils.getS3FileUrl(this.data.challengeId, 'song.ogg'); + this.audio.volume = 0; + this.volumeTarget.volume = 0; + this.audio.play(); + this.animation.restart(); + } } }); diff --git a/src/state/index.js b/src/state/index.js index efae627..2cd6b76 100644 --- a/src/state/index.js +++ b/src/state/index.js @@ -1,8 +1,8 @@ var utils = require('../utils'); -var hasInitialChallenge = !!AFRAME.utils.getUrlParameter('challenge'); - -var challengeDataStore = {}; +const challengeDataStore = {}; +const hasInitialChallenge = !!AFRAME.utils.getUrlParameter('challenge'); +const SEARCH_PER_PAGE = 6; AFRAME.registerState({ initialState: { @@ -39,7 +39,13 @@ AFRAME.registerState({ // screen: keep track of layers or depth. Like breadcrumbs. screen: hasInitialChallenge ? 'challenge' : 'home', screenHistory: [], - searchResults: [] + search: { + page: 0, + hasNext: false, + hasPrev: false, + results: [], + }, + searchResultsPage: [] }, handlers: { @@ -94,19 +100,35 @@ AFRAME.registerState({ state.menuSelectedChallenge.id = ''; }, + searchprevpage: function (state) { + if (state.search.page === 0) { return; } + state.search.page--; + computeSearchPagination(state); + }, + + searchnextpage: function (state) { + if (state.search.page > Math.floor(state.search.results.length / SEARCH_PER_PAGE)) { + return; + } + state.search.page++; + computeSearchPagination(state); + }, + /** * Update search results. Will automatically render using `bind-for` (menu.html). */ searchresults: (state, payload) => { var i; - state.searchResults.length = 0; - for (i = 0; i < 6; i++) { - if (!payload.results[i]) { continue; } - challengeDataStore[payload.results[i].id] = payload.results[i]; - payload.results[i].songSubName = payload.results[i].songSubName || 'Unknown Arist'; - state.searchResults.push(payload.results[i]); + state.search.page = 0; + state.search.results = payload.results; + for (i = 0; i < payload.results.length; i++) { + let result = payload.results[i]; + result.songSubName = result.songSubName || 'Unknown Arist'; + result.shortSongName = truncate(result.songName, 35); + result.shortSongSubName = truncate(result.songSubName, 35); + challengeDataStore[result.id] = result } - state.searchResults.__dirty = true; + computeSearchPagination(state); }, togglemenu: (state) => { @@ -125,8 +147,7 @@ AFRAME.registerState({ /** * Post-process the state after each action. */ - computeState: (state) => { - } + // computeState: (state) => { } }); /** @@ -151,3 +172,24 @@ function popScreen (state) { } state.screen = state.screenHistory[state.screenHistory.length - 1]; } + +function computeSearchPagination (state) { + let numPages = Math.ceil(state.search.results.length / SEARCH_PER_PAGE); + state.search.hasPrev = state.search.page > 0; + state.search.hasNext = state.search.page < numPages - 1; + + 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]); + } +} + +function truncate (str, length) { + if (!str) { return ''; } + if (str.length >= length) { + return str.substring(0, length - 3) + '...'; + } + return str; +} diff --git a/src/templates/menu.html b/src/templates/menu.html index 8f65f05..005ce7c 100644 --- a/src/templates/menu.html +++ b/src/templates/menu.html @@ -1,10 +1,21 @@ {% macro searchResults () %} + 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"> + + + + + {% raw %}