diff --git a/package-lock.json b/package-lock.json
index 4745c60..24e39a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -81,9 +81,9 @@
}
},
"aframe-animation-component": {
- "version": "4.2.0",
- "resolved": "https://registry.npmjs.org/aframe-animation-component/-/aframe-animation-component-4.2.0.tgz",
- "integrity": "sha512-XkcaGqcEIjUgkL1UoE1GBph8O0Vixkd9K/mlttZzeiCcQQBKq1XN2BVaDlJIs3krhjRL7MhWT/RdLIlh3ki2CQ==",
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/aframe-animation-component/-/aframe-animation-component-5.0.0.tgz",
+ "integrity": "sha512-cqQ5o5iK5RvUUxS8e8VZ419Z/7N3eGvKhP6IUypZE2we71O0YuTOkd3DHGuvjoaI8mhqcJQ20lsUEfE8tWNEYA==",
"requires": {
"animejs": "2.2.0"
}
@@ -98,6 +98,11 @@
"resolved": "https://registry.npmjs.org/aframe-cubemap-component/-/aframe-cubemap-component-0.1.4.tgz",
"integrity": "sha512-9k5CVFltFACmoQxmS9Jf3XpjqpES9iNSRnCxamxSDCpNyXn7myHii7bjnfIuzs6zwSeJU8Gbb72zzRyQ6Csp9g=="
},
+ "aframe-event-decorators": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/aframe-event-decorators/-/aframe-event-decorators-1.0.2.tgz",
+ "integrity": "sha512-Y2ngTXj5Zi48mvGyApPtDyXDX78TDhuKriOaMKuDOeInYbw5Z7Irzkamo/GdHKhyCRId/NcaaqgtlOBWlYK+5A=="
+ },
"aframe-event-set-component": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/aframe-event-set-component/-/aframe-event-set-component-4.1.2.tgz",
diff --git a/package.json b/package.json
index 011c318..3381d05 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,10 @@
"start": "webpack-dev-server --host 0.0.0.0 --progress --colors --hot --inline --port 3000"
},
"dependencies": {
- "aframe-animation-component": "^4.1.1",
+ "aframe-animation-component": "^5.0.0",
"aframe-animation-timeline-component": "^1.3.1",
"aframe-cubemap-component": "^0.1.2",
+ "aframe-event-decorators": "^1.0.2",
"aframe-event-set-component": "^4.0.1",
"aframe-gltf-part-component": "1.1.0",
"aframe-haptics-component": "^1.4.1",
diff --git a/src/components/beat-loader.js b/src/components/beat-loader.js
new file mode 100644
index 0000000..3abc7e6
--- /dev/null
+++ b/src/components/beat-loader.js
@@ -0,0 +1,55 @@
+var utils = require('../utils');
+
+/**
+ * Load beat data (all the beats and such).
+ */
+AFRAME.registerComponent('beat-loader', {
+ schema: {
+ challengeId: {type: 'string'},
+ difficulty: {type: 'string'}
+ },
+
+ update: function () {
+ var challengeId = this.data.challengeId;
+ var el = this.el;
+ var xhr;
+
+ if (!challengeId || !diffjculty) { return; }
+
+ // Load beats.
+ xhr = new XMLHttpRequest();
+ el.emit('beatloaderstart');
+ xhr.open('GET', utils.getS3FileUrl(challengeId, `${this.data.difficulty}.json`));
+ xhr.addEventListener('load', () => {
+ this.handleBeats(JSON.parse(xhr.responseText));
+ });
+ xhr.send();
+ },
+
+ /**
+ * TODO: Load the beat data into the game.
+ */
+ handleBeats: function (beatData) {
+ var el = this.el;
+
+ history.pushState(
+ '',
+ challenge.songName,
+ updateQueryParam(window.location.href, 'challenge', this.data.challengeId)
+ );
+
+ document.title = `Super Saber - ${challenge.songName}`;
+ el.emit('beatloaderfinish');
+ console.log('Finished loading challenge data.');
+ },
+});
+
+function updateQueryParam(uri, key, value) {
+ var re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
+ var separator = uri.indexOf('?') !== -1 ? '&' : '?';
+ if (uri.match(re)) {
+ return uri.replace(re, '$1' + key + '=' + value + '$2');
+ } else {
+ return uri + separator + key + '=' + value;
+ }
+}
diff --git a/src/components/challenge-loader.js b/src/components/challenge-loader.js
deleted file mode 100644
index 87fd892..0000000
--- a/src/components/challenge-loader.js
+++ /dev/null
@@ -1,57 +0,0 @@
-AFRAME.registerComponent('song-loader', {
- schema: {
- challengeId: {type: 'string'},
- },
-
- update: async function () {
- var challengeId = this.data.challengeId;
- var frameSystem = this.el.systems.frames;
- var punchSystem = this.el.systems.punches;
-
- if (!challengeId) {
- return;
- }
-
- const firstClient = new Client({ query: { id: challengeId } });
- const resp = await firstClient.challengeById(challengeId);
- const challenge = resp.performance;
- const auth = firstClient.serialize();
-
- const client = new Client({ auth });
- this.el.emit('challengeloadstart');
-
- console.log('Loading punches...');
- this.el.emit('challengeloadingpunches');
- const punches = await client.challengePunches(challenge);
-
- console.log('Loading frames...');
- this.el.emit('challengeloadingframes');
- const frames = await client.challengeFrames(challenge);
-
- history.pushState(
- '',
- challenge.song_name,
- updateQueryParam(window.location.href, 'challenge', this.data.challengeId)
- );
-
- document.title = `Soundboxing - ${challenge.song_name}`;
- this.el.emit('challengeloaded', {
- frames: frames,
- punches: punches,
- title: challenge.song_name,
- videoId: challenge.youtube_id,
- });
-
- console.log('Finished loading challenge data.');
- },
-});
-
-function updateQueryParam(uri, key, value) {
- var re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
- var separator = uri.indexOf('?') !== -1 ? '&' : '?';
- if (uri.match(re)) {
- return uri.replace(re, '$1' + key + '=' + value + '$2');
- } else {
- return uri + separator + key + '=' + value;
- }
-}
diff --git a/src/components/search.js b/src/components/search.js
index ba32537..47566ea 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -1,4 +1,6 @@
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');
@@ -19,7 +21,6 @@ AFRAME.registerComponent('search', {
this.queryObject.query = query;
index.search(this.queryObject, (err, content) => {
this.eventDetail.results = content.hits;
- console.log(content.hits);
this.el.sceneEl.emit('searchresults', this.eventDetail);
});
}
@@ -31,12 +32,33 @@ AFRAME.registerComponent('search', {
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.eventDetail = {};
- el.addEventListener('click', () => {
- this.eventDetail.challengeId = el.getAttribute('data-song-id');
- this.eventDetail.title = el.getAttribute('data-title');
- el.sceneEl.emit('challengeset', this.eventDetail);
- });
},
+
+ remove: function () {
+ this.audio.pause();
+ },
+
+ /**
+ * Preview song.
+ */
+ mouseenter: bindEvent(function () {
+ this.audio.play();
+ }),
+
+ mouseleave: bindEvent(function () {
+ 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);
+ }),
});
diff --git a/src/index.html b/src/index.html
index aa1befb..42becd0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,14 +9,13 @@
-
-
+
@@ -42,7 +41,7 @@
-
+