initial game over slowdown (will tween the rate / fade out later)

src/components/song-preview.js

@@ -7,6 +7,7 @@ var utils = require('../utils');
 AFRAME.registerComponent('song-preview-system', {
   schema: {
     debug: {default: false},
+    isSongLoading: {default: false},  // Continue to play preview song during loading.
     selectedChallengeId: {type: 'string'}
   },
 
@@ -36,10 +37,8 @@ AFRAME.registerComponent('song-preview-system', {
   update: function (oldData) {
     const data = this.data;
 
-    if (oldData.selectedChallengeId &&
-        oldData.selectedChallengeId !== data.selectedChallengeId) {
-      this.stopSong();
-    }
+    // Continue to play preview song during loading to keep entertained.
+    if (oldData.isSongLoading && !data.isSongLoading) { this.stopSong(); }
 
     // Selected challenge ID updated.
     if (data.selectedChallengeId && oldData.selectedChallengeId !== data.selectedChallengeId) {

src/components/song.js

@@ -50,10 +50,10 @@ AFRAME.registerComponent('song', {
 
     // Game over, slow down audio, and then stop.
     if (!oldData.isGameOver && data.isGameOver) {
-      this.source.playbackRate = 0.5;
+      this.source.playbackRate.value = 0.75;
       setTimeout(() => {
         this.stopAudio();
-      }, 1000);
+      }, 2000);
       return;
     }
 

src/index.html

@@ -13,8 +13,8 @@
       bind__beat-loader="challengeId: challenge.id; difficulty: challenge.difficulty; isPlaying: isPlaying"
       bind__gameover="isGameOver: isGameOver"
       bind__intro-song="isPlaying: menu.active && !menuSelectedChallenge.id"
-      bind__song="challengeId: challenge.id; isPlaying: isPlaying; isBeatsPreloaded: challenge.isBeatsPreloaded"
-      bind__song-preview-system="selectedChallengeId: menuSelectedChallenge.id"
+      bind__song="challengeId: challenge.id; isPlaying: isPlaying; isBeatsPreloaded: challenge.isBeatsPreloaded; isGameOver: isGameOver"
+      bind__song-preview-system="isSongLoading: isSongLoading; selectedChallengeId: menuSelectedChallenge.id"
       bind__stage-colors="isGameOver: isGameOver"
       bind__overlay="enabled: !isPlaying"
       animation__gameover="property: object3D.background; type: color; to: #750000; startEvents: gameover"

src/state/index.js

@@ -143,9 +143,6 @@ AFRAME.registerState({
       state.menuSelectedChallenge.image = utils.getS3FileUrl(id, 'image.jpg');
       state.menuSelectedChallenge.downloadsText = `${challengeData.downloads} Plays`;
       computeMenuSelectedChallengeIndex(state);
-
-      state.challenge.isLoading = true;
-      state.isSongLoading = true;
     },
 
     menuchallengeunselect: () => {
@@ -197,6 +194,8 @@ AFRAME.registerState({
       state.menuSelectedChallenge.id = '';
 
       state.keyboardActive = false;
+      state.challenge.isLoading = true;
+      state.isSongLoading = true;
     },
 
     searchprevpage: function (state) {