hooking up loading, flow, audio

src/components/beat-loader.js

@@ -10,16 +10,23 @@ AFRAME.registerComponent('beat-loader', {
   },
 
   update: function () {
-    var challengeId = this.data.challengeId;
+    if (!this.data.challengeId || !this.data.difficulty) { return; }
+    this.loadBeats(this.data.challengeId, this.data.difficulty);
+  },
+
+  /**
+   * XHR.
+   */
+  loadBeats: function (id, difficulty) {
     var el = this.el;
     var xhr;
 
-    if (!challengeId || !diffjculty) { return; }
-
     // Load beats.
+    let url = utils.getS3FileUrl(this.data.challengeId, `${this.data.difficulty}.json`);
     xhr = new XMLHttpRequest();
     el.emit('beatloaderstart');
-    xhr.open('GET', utils.getS3FileUrl(challengeId, `${this.data.difficulty}.json`));
+    console.log(`Fetching ${url}...`);
+    xhr.open('GET', url);
     xhr.addEventListener('load', () => {
       this.handleBeats(JSON.parse(xhr.responseText));
     });
@@ -30,16 +37,7 @@ AFRAME.registerComponent('beat-loader', {
    * 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');
+    this.el.sceneEl.emit('beatloaderfinish', beatData, false);
     console.log('Finished loading challenge data.');
   },
 });

src/components/console-shortcuts.js

@@ -1,6 +1,10 @@
 AFRAME.registerComponent('console-shortcuts', {
-  play: function() {
+  play: function () {
+    window.$ = val => document.querySelector(val);
+    window.$$ = val => document.querySelectorAll(val);
+    window.$$$ = val => document.querySelector(`[${val}]`).getAttribute(val);
+    window.$$$$ = val => document.querySelector(`[${val}]`).components[val];
     window.scene = this.el;
     window.state = this.el.systems.state.state;
-  },
+  }
 });

src/components/discolight.js

@@ -1,16 +0,0 @@
-AFRAME.registerComponent('discolight', {
-  schema: {
-    color: { type: 'color' },
-    speed: { default: 1.0 },
-  },
-  init: function() {
-    this.color = new THREE.Color(this.data.color);
-    this.hsl = this.color.getHSL();
-  },
-  tick: function(time, delta) {
-    this.hsl.h += delta * 0.0001 * this.data.speed;
-    if (this.hsl.l > 1.0) this.hsl.l = 0.0;
-    this.color.setHSL(this.hsl.h, this.hsl.s, this.hsl.l);
-    this.el.setAttribute('light', { color: this.color.getHex() });
-  },
-});

src/components/discotube.js

@@ -1,14 +0,0 @@
-AFRAME.registerComponent('discotube', {
-  schema: {
-    speedX: { default: 1.0 },
-    speedY: { default: 0.1 },
-  },
-  init: function() {
-    this.material = this.el.object3D.children[0].material;
-  },
-  tick: function(time, delta) {
-    if (this.material == null) return;
-    this.material.map.offset.x -= delta * 0.0001 * this.data.speedX;
-    this.material.map.offset.y -= delta * 0.0001 * this.data.speedY;
-  },
-});

src/components/history.js

@@ -0,0 +1,20 @@
+/**
+ * Update window title and history.
+ */
+AFRAME.registerComponent('history', {
+  schema: {
+    challengeId: {type: 'string'},
+    songName: {type: 'string'},
+    songSubName: {type: 'string'}
+  },
+
+  update: function () {
+    const data = this.data;
+    history.pushState(
+      '',
+      data.songName,
+      updateQueryParam(window.location.href, 'challenge', data.challengeId)
+    );
+    document.title = `Super Saber - ${data.songName}`;
+  }
+});

src/components/play-audio.js

@@ -1,26 +0,0 @@
-/**
- * Play audio element on event.
- */
-AFRAME.registerComponent('play-audio', {
-  schema: {
-    audio: { type: 'string' },
-    event: { type: 'string' },
-    volume: { type: 'number', default: 1 },
-  },
-
-  multiple: true,
-
-  init: function() {
-    var audio;
-    audio = document.querySelector(this.data.audio);
-    audio.volume = this.data.volume;
-
-    this.el.addEventListener(this.data.event, evt => {
-      if (!audio.paused) {
-        audio.pause();
-        audio.currentTime = 0;
-      }
-      audio.play();
-    });
-  },
-});

src/components/play-button.js

@@ -1,13 +0,0 @@
-AFRAME.registerComponent('play-button', {
-  init: function() {
-    var el = this.el;
-
-    el.addEventListener('click', () => {
-      el.sceneEl.emit('playbuttonclick');
-    });
-
-    el.sceneEl.addEventListener('youtubefinished', evt => {
-      el.object3D.visible = false;
-    });
-  },
-});

src/components/play-sound.js

@@ -0,0 +1,43 @@
+var SoundPool = require('../lib/soundpool');
+
+AFRAME.registerSystem('play-sound', {
+  init: function () {
+    this.lastSoundPlayed = '';
+    this.lastSoundPlayedTime = 0;
+    this.pools = {};
+  },
+
+  createPool: function (sound, volume) {
+    if (this.pools[sound]) { return; }
+    this.pools[sound] = new SoundPool(sound, volume);
+  },
+
+  playSound: function (sound, volume) {
+    this.createPool(sound, volume);
+    this.pools[sound].play();
+
+    this.lastSoundPlayed = sound;
+    this.lastSoundTime = this.el.time;
+  }
+});
+
+/**
+ * Play sound on event.
+ */
+AFRAME.registerComponent('play-sound', {
+  schema: {
+    enabled: {default: true},
+    event: {type: 'string'},
+    sound: {type: 'string'},
+    volume: {type: 'number', default: 1}
+  },
+
+  multiple: true,
+
+  init: function () {
+    this.el.addEventListener(this.data.event, evt => {
+      if (!this.data.enabled) { return; }
+      this.system.playSound(this.data.sound, this.data.volume);
+    });
+  }
+});

src/components/preview-song.js

@@ -31,6 +31,7 @@ AFRAME.registerComponent('preview-song', {
   },
 
   update: function (oldData) {
+    // Stop.
     if (oldData.challengeId && !this.data.challengeId) {
       if (this.animation) { this.animation.pause(); }
       this.audio.pause();

src/components/recenter.js

@@ -14,9 +14,7 @@ AFRAME.registerComponent('recenter', {
     this.checkInViewAfterRecenter = this.checkInViewAfterRecenter.bind(this);
     // Delay to make sure we have a valid pose.
     sceneEl.addEventListener('enter-vr', () => {
-      setTimeout(() => {
-        this.recenter();
-      }, 100);
+      setTimeout(() => { this.recenter(); }, 100);
     });
     // User can also recenter the menu manually.
     sceneEl.addEventListener('menudown', () => {
@@ -49,7 +47,7 @@ AFRAME.registerComponent('recenter', {
   checkInViewAfterRecenter: function() {
     var camera = this.el.sceneEl.camera;
     var frustum = this.frustum;
-    var menu = document.querySelector('#menu');
+    var menu = this.el;
     var menuPosition = this.menuPosition;
     camera.updateMatrix();
     camera.updateMatrixWorld();

src/components/song.js

@@ -0,0 +1,39 @@
+const utils = require('../utils');
+
+/**
+ * Active challenge song / audio.
+ */
+AFRAME.registerComponent('song', {
+  schema: {
+    challengeId: {default: ''},
+    isPlaying: {default: false}
+  },
+
+  init: function () {
+    // Use audio element for audioanalyser.
+    this.audio = document.createElement('audio');
+    this.audio.setAttribute('id', 'song');
+    this.el.sceneEl.appendChild(this.audio);
+  },
+
+  update: function (oldData) {
+    var el = this.el;
+    var data = this.data;
+
+    // Changed challenge.
+    if (data.challengeId !== oldData.challengeId) {
+      let songUrl = utils.getS3FileUrl(data.challengeId, 'song.ogg');
+      this.audio.currentTime = 0;
+      this.audio.src = data.challengeId ? songUrl : '';
+      console.log(`Playing ${songUrl}...`);
+    }
+
+    // Keep playback state up to date.
+    if ((data.isPlaying && data.challengeId) && this.audio.paused) {
+      this.audio.play();
+      return;
+    } else if ((!data.isPlaying || !data.challengeId) && !this.audio.paused) {
+      this.audio.pause();
+    }
+  }
+});