diff --git a/package-lock.json b/package-lock.json index 8a0a1b0..ed18ec7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -81,14 +81,6 @@ "webvr-polyfill": "^0.10.5" } }, - "aframe-animation-component": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/aframe-animation-component/-/aframe-animation-component-5.1.0.tgz", - "integrity": "sha512-8IP5V2TDReAu5RPhg7t1gMidz/FQZMvvEwxw0xDxrgOCPBBlpFd5rGpW06CaJI+7Enu/PpZGIkImjYwto8tT9A==", - "requires": { - "animejs": "2.2.0" - } - }, "aframe-animation-timeline-component": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/aframe-animation-timeline-component/-/aframe-animation-timeline-component-1.5.0.tgz", @@ -154,9 +146,9 @@ "integrity": "sha1-+w+EQdrdHosRzCRRK6eqaS1iK+E=" }, "aframe-state-component": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-4.6.0.tgz", - "integrity": "sha512-sth2BuNuw1Z7wb4HclkD3EJDJ5cYDFOkKCPobih63kw+L8ulhx0G1qEcCMg5JFEvK/Xn7SwpJMKfhJHMlGypMg==" + "version": "5.0.0-beta2", + "resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-5.0.0-beta2.tgz", + "integrity": "sha512-Ioz179I49pfew4a3cHpr31q00QfQW9cSI6uni2kwqfgSlO8FsDR91HtQamzJbGVLGPCHYAYqBvPy+A9fvQaVzg==" }, "aframe-super-keyboard": { "version": "2.0.2", @@ -285,11 +277,6 @@ "resolved": "https://registry.npmjs.org/an-array/-/an-array-1.0.0.tgz", "integrity": "sha1-wSWlu4JXd4419LT2qpx9D6nkJmU=" }, - "animejs": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/animejs/-/animejs-2.2.0.tgz", - "integrity": "sha1-Ne79/FNbgZScnLBvCz5gwC5v3IA=" - }, "ansi-escapes": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz", diff --git a/package.json b/package.json index 053ef51..29b5613 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "start": "webpack-dev-server --host 0.0.0.0 --progress --colors --hot --inline --port 3000" }, "dependencies": { - "aframe-animation-component": "^5.1.0", + "aframe-animation-component": "^5.1.1", "aframe-animation-timeline-component": "^1.3.1", "aframe-audioanalyser-component": "^3.0.3", "aframe-cubemap-component": "^0.1.2", @@ -19,7 +19,7 @@ "aframe-particle-system-component": "^1.0.11", "aframe-proxy-event-component": "^1.1.1", "aframe-slice9-component": "^1.0.0", - "aframe-state-component": "^4.6.0", + "aframe-state-component": "^5.0.0-beta2", "aframe-super-keyboard": "2.0.2", "algoliasearch": "^3.29.0", "ansi-html": "0.0.7", diff --git a/src/components/active-color.js b/src/components/active-color.js index d63486f..5ec731f 100644 --- a/src/components/active-color.js +++ b/src/components/active-color.js @@ -15,6 +15,7 @@ AFRAME.registerComponent('active-color', { update: function () { var el = this.el; + if (this.data.active) { el.setAttribute('material', 'color', this.data.color); el.setAttribute('material', 'opacity', 1); diff --git a/src/components/search.js b/src/components/search.js index a8a1c88..2bcecf0 100644 --- a/src/components/search.js +++ b/src/components/search.js @@ -11,10 +11,14 @@ var algolia = client.initIndex('supersaber'); AFRAME.registerComponent('search', { init: function() { this.eventDetail = {results: []}; - this.queryObject = {hitsPerPage: 30, query: ''}; + this.popularHits = null; + this.queryObject = {hitsPerPage: 100, query: ''}; // Populate popular. this.search(''); + + // Less hits on normal searches. + this.queryObject.hitsPerPage = 30; }, superkeyboardchange: bindEvent(function (evt) { @@ -22,8 +26,17 @@ AFRAME.registerComponent('search', { }), search: function (query) { + // Use cached for popular hits. + if (!query && this.popularHits) { + this.eventDetail.results = popularHits; + this.el.sceneEl.emit('searchresults', this.eventDetail); + return; + } + this.queryObject.query = query; algolia.search(this.queryObject, (err, content) => { + // Cache popular hits. + if (!query) { this.popularHits = content.hits; } this.eventDetail.results = content.hits; this.el.sceneEl.emit('searchresults', this.eventDetail); }); @@ -40,3 +53,28 @@ AFRAME.registerComponent('search-result-list', { false); }), }); + +AFRAME.registerComponent('search-result-image', { + dependencies: ['material'], + + schema: { + id: {type: 'string'} + }, + + init: function () { + this.materialUpdateObj = {color: '#223'}; + + this.el.addEventListener('materialtextureloaded', () => { + this.el.setAttribute('material', 'color', '#FFF'); + }); + }, + + update: function () { + this.el.components.material.material.map = null; + this.el.components.material.material.needsUpdate = true; + + this.materialUpdateObj.src = + `https://s3-us-west-2.amazonaws.com/supersaber/${this.data.id}-image.jpg` + this.el.setAttribute('material', this.materialUpdateObj); + }, +}); diff --git a/src/components/song-preview.js b/src/components/song-preview.js index 0565c41..350b18d 100644 --- a/src/components/song-preview.js +++ b/src/components/song-preview.js @@ -74,7 +74,9 @@ AFRAME.registerComponent('song-preview-system', { if (this.audioStore[challengeId]) { return; } const audio = document.createElement('audio'); audio.crossOrigin = 'anonymous'; - audio.currentTime = previewStartTime; + audio.addEventListener('canplaythrough', () => { + audio.currentTime = previewStartTime; + }, false); audio.volume = 0; this.audioStore[challengeId] = audio; diff --git a/src/components/song.js b/src/components/song.js index 89ef79d..63c3f8b 100644 --- a/src/components/song.js +++ b/src/components/song.js @@ -23,7 +23,9 @@ AFRAME.registerComponent('song', { // Changed challenge. if (data.challengeId !== oldData.challengeId) { let songUrl = utils.getS3FileUrl(data.challengeId, 'song.ogg'); - this.audio.currentTime = 0; + this.audio.addEventListener('canplaythrough', () => { + this.audio.currentTime = 0; + }, false); this.audio.src = data.challengeId ? songUrl : ''; } diff --git a/src/index.html b/src/index.html index 6e714f3..21c7e67 100644 --- a/src/index.html +++ b/src/index.html @@ -49,15 +49,15 @@ diff --git a/src/state/index.js b/src/state/index.js index fefbe9f..d3e05ba 100644 --- a/src/state/index.js +++ b/src/state/index.js @@ -83,7 +83,7 @@ AFRAME.registerState({ state.menuSelectedChallenge.difficulty = difficulty; }, - pause: (state) => { + pausegame: (state) => { state.menu.active = true; }, diff --git a/src/templates/menu.html b/src/templates/menu.html index a869055..c701cae 100644 --- a/src/templates/menu.html +++ b/src/templates/menu.html @@ -1,11 +1,10 @@ {% macro searchResults () %} - + position="0 0.644 0"> + - - {% raw %} - - {% endraw %} {% endmacro %} +{% raw %} + +{% endraw %} +