diff --git a/src/components/preview-song.js b/src/components/preview-song.js
new file mode 100644
index 0000000..29414db
--- /dev/null
+++ b/src/components/preview-song.js
@@ -0,0 +1,49 @@
+var utils = require('../utils');
+
+/**
+ * Handle song preview play, pause, fades.
+ */
+AFRAME.registerComponent('preview-song', {
+ schema: {
+ challengeId: {type: 'string'},
+ previewStartTime: {type: 'number'}
+ },
+
+ init: function() {
+ var el = this.el;
+ this.audio = new Audio();
+ this.audio.volume = 0;
+
+ // anime.js animation.
+ this.volumeTarget = {volume: 0};
+ this.animation = AFRAME.anime({
+ targets: this.volumeTarget,
+ delay: 250,
+ duration: 1500,
+ easing: 'easeInQuad',
+ volume: 0.5,
+ autoplay: false,
+ loop: false,
+ update: () => {
+ this.audio.volume = this.volumeTarget.volume;
+ }
+ });
+ },
+
+ update: function (oldData) {
+ if (oldData.challengeId && !this.data.challengeId) {
+ if (this.animation) { this.animation.pause(); }
+ 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();
+ }
+});
diff --git a/src/components/search.js b/src/components/search.js
index ed3b637..36ccf33 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -1,6 +1,5 @@
var algoliasearch = require('algoliasearch/lite');
var bindEvent = require('aframe-event-decorators').bindEvent;
-var utils = require('../utils');
var client = algoliasearch('QULTOY3ZWU', 'be07164192471df7e97e6fa70c1d041d');
var index = client.initIndex('supersaber');
@@ -34,56 +33,9 @@ AFRAME.registerComponent('search', {
/**
* Click listener for search result.
*/
-AFRAME.registerComponent('search-result', {
- init: function() {
- var el = this.el;
- this.audio = new Audio();
- this.audio.currentTime = el.getAttribute('data-preview-start-time');
- this.audio.src = utils.getS3FileUrl(el.getAttribute('data-id'), 'song.ogg');
- this.audio.volume = 0;
- this.eventDetail = {};
-
- this.volumeTarget = {volume: 0};
- this.animation = AFRAME.anime({
- targets: this.volumeTarget,
- delay: 250,
- duration: 1500,
- easing: 'easeInQuad',
- volume: 0.5,
- autoplay: false,
- loop: false,
- update: () => {
- this.audio.volume = this.volumeTarget.volume;
- }
- });
- },
-
- remove: function () {
- if (this.animation) { this.animation.pause(); }
- this.audio.pause();
- },
-
- /**
- * Preview song.
- */
- mouseenter: bindEvent(function () {
- this.audio.volume = 0;
- this.volumeTarget.volume = 0;
- this.audio.play();
- this.animation.restart();
- }),
-
- mouseleave: bindEvent(function () {
- if (this.animation) { this.animation.pause(); }
- this.audio.pause();
- }),
-
- click: bindEvent(function () {
- var el = this.el;
- this.eventDetail.id = el.getAttribute('data-id');
- this.eventDetail.title = el.getAttribute('data-title');
-
- // Tell application we are starting a challenge and initiate beat-loader.
- el.sceneEl.emit('challengeset', this.eventDetail);
+AFRAME.registerComponent('search-result-list', {
+ click: bindEvent(function (evt) {
+ this.el.sceneEl.emit('menuchallengeclick', evt.target.closest('.searchResult').dataset.id,
+ false);
}),
});
diff --git a/src/index.html b/src/index.html
index e559fbb..7d6b68d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,7 +10,7 @@
diff --git a/src/state/index.js b/src/state/index.js
index 6123ced..8378edb 100644
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -1,16 +1,22 @@
var hasInitialChallenge = !!AFRAME.utils.getUrlParameter('challenge');
+var challengeDataStore = {};
+
AFRAME.registerState({
initialState: {
challenge: {
id: AFRAME.utils.getUrlParameter('challenge'),
- isLoading: false
+ isLoading: false,
},
- discoLightsOn: true,
- discotube: {speedX: -0.05, speedY: -0.1},
inVR: false,
maxStreak: 0,
- menuActive: true,
+ menu: {
+ active: true
+ },
+ menuSelectedChallenge: {
+ id: '',
+ difficulties: []
+ },
playButtonText: 'Play',
score: 0,
scoreText: '',
@@ -35,10 +41,23 @@ AFRAME.registerState({
state.score = 0;
state.streak = 0;
state.maxStreak = 0;
- state.menuActive = false;
+ state.menu.active = false;
+ state.menuSelectedChallenge.id = '';
setScreen(state, 'challenge');
},
+ /**
+ * Song clicked from menu.
+ */
+ menuchallengeclick: function (state, id) {
+ let challengeData = challengeDataStore[id];
+ state.menuSelectedChallenge.id = id;
+ state.menuSelectedChallenge.difficulties.length = 0;
+ for (let i = 0; i < challengeData.difficulties.length; i++) {
+ state.menuSelectedChallenge.difficulties.push(challengeData.difficulties[i]);
+ }
+ },
+
playbuttonclick: function (state) {
state.menuActive = false;
},
@@ -51,15 +70,12 @@ AFRAME.registerState({
state.searchResults.length = 0;
for (i = 0; i < 6; i++) {
if (!payload.results[i]) { continue; }
+ challengeDataStore[payload.results[i].id] = payload.results[i];
state.searchResults.push(payload.results[i]);
}
state.searchResults.__dirty = true;
},
- togglediscolights: function (state, payload) {
- state.discoLightsOn = !state.discoLightsOn;
- },
-
togglemenu: function (state) {
state.menuActive = !state.menuActive;
},
diff --git a/src/templates/environment.html b/src/templates/environment.html
index 8f7b8bc..efbe8d3 100644
--- a/src/templates/environment.html
+++ b/src/templates/environment.html
@@ -1,42 +1,22 @@
-
+
-
-
+ material="src: #gridImg; transparent: true; color: #f9e3fb; repeat: 80 80; depthWrite: false">
-
-
-
-
-
+
+
diff --git a/src/templates/menu.html b/src/templates/menu.html
index c3b2d4a..a8745f2 100644
--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -1,14 +1,13 @@
{% macro searchResults () %}
+ search-result-list>
{% raw %}
-
+