menu-controls allow unselecting / going back, remove unnoticable animations for perf

src/components/intro-song.js

@@ -1,9 +1,33 @@
 AFRAME.registerComponent('intro-song', {
-  multiple: true,
+  schema: {
+    isPlaying: {default: true}
+  },
+
+  init: function () {
+    this.analyserEl = document.getElementById('audioAnalyser');
+    this.audio = document.getElementById('introSong');
+  },
+
+  update: function (oldData) {
+    const audio = this.audio;
+
+    if (!this.el.sceneEl.isPlaying) { return; }
+
+    if (!oldData.isPlaying && this.data.isPlaying) {
+      setTimeout(() => {
+        // TODO: Fade in volume.
+        this.analyserEl.setAttribute('audioanalyser', 'src', audio);
+        audio.play();
+      }, 1000);
+    }
+
+    if (oldData.isPlaying && !this.data.isPlaying) {
+      audio.pause();
+    }
+  },
 
   play: function () {
-    const audio = document.getElementById('introSong');
-    audio.volume = 0.5;
-    audio.play();
+    this.audio.volume = 0.5;
+    this.audio.play();
   }
 });

src/components/menu-controls.js

@@ -111,7 +111,9 @@ AFRAME.registerComponent('menu-controls', {
 
   unselect: function () {
     if (!this.data.enabled) { return; }
-    this.el.sceneEl.emit('menuunselect', null, false);
+    if (this.data.selectedChallengeId) {
+      this.el.sceneEl.emit('menuchallengeunselect', null, false);
+    }
   },
 
   hoverResult: function (i) {

src/components/song-preview.js

@@ -9,6 +9,7 @@ AFRAME.registerComponent('song-preview-system', {
   },
 
   init: function () {
+    this.analyserEl = document.getElementById('audioAnalyser');
     this.audio = null;
     this.audioStore = {};
     this.preloadedAudioIds = [];
@@ -162,8 +163,7 @@ AFRAME.registerComponent('song-preview-system', {
   },
 
   updateAnalyser: function () {
-    document.getElementById('audioAnalyser').setAttribute('audioanalyser', 'src', this.audio);
-    document.getElementById('introSong').pause();
+    this.analyserEl.setAttribute('audioanalyser', 'src', this.audio);
   },
 
   /**

src/index.html

@@ -10,19 +10,20 @@
 
     <a-scene
       bind__beat-loader="challengeId: challenge.id; difficulty: challenge.difficulty; isPaused: !isPlaying"
+      bind__intro-song="isPlaying: menu.active && !menuSelectedChallenge.id"
       bind__song="challengeId: challenge.id; isPlaying: isPlaying && !challenge.isLoading"
       bind__song-preview-system="selectedChallengeId: menuSelectedChallenge.id"
       bind__overlay="enabled: !isPlaying"
       console-shortcuts
       debug-controller
       effect-bloom="strength: 1"
-      intro-song
       overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh'], #pauseDialog"
       pool__beat-arrow-blue="mixin: beat arrow-blue-beat; size: 5; container: #beatContainer"
       pool__beat-arrow-red="mixin: beat arrow-red-beat; size: 10; container: #beatContainer"
       pool__beat-dot-blue="mixin: beat dot-blue-beat; size: 10; container: #beatContainer"
       pool__beat-dot-red="mixin: beat dot-red-beat; size: 10; container: #beatContainer"
-      proxy-event="event: menuchallengeselect; to: #searchResultsContainer, #menuDifficultiesGroup"
+      proxy-event__menuleft="event: menuchallengeunselect; to: .menuAnimation"
+      proxy-event__menuright="event: menuchallengeselect; to: .menuAnimation"
       search
       stage-colors="blue"
       fog="color: #a00; density: 0.035; type: exponential">

src/state/index.js

@@ -131,6 +131,10 @@ AFRAME.registerState({
       state.menuSelectedChallenge.downloadsText = `${challengeData.downloads} Plays`;
     },
 
+    menuchallengeunselect: () => {
+      state.menuSelectedChallenge.id = '';
+    },
+
     menudifficultyselect: (state, difficulty) => {
       state.menuSelectedChallenge.difficulty = difficulty;
     },

src/templates/menu.html

@@ -93,40 +93,32 @@
 
 <!-- Menu container begins here. -->
 <a-entity id="menu" bind__visible="menu.active" position="0 1.6 -2">
-  <a-entity id="menuBackground"
+  <a-entity id="menuchallengeunselectground"
       mixin="slice"
       slice9="width: 2.5; height: 1.4"
       position="0 0 -0.005"
       raycastable></a-entity>
 
   <a-entity id="searchResultsContainer" position="0 0 0.001"
-    animation__toleft="property: object3D.position.x;  to: -0.59; dur: 200; easing: easeOutCubic; startEvents: menuchallengeselect"
-    animation__toright="property: object3D.position.x; to: 0; dur: 200; easing: easeOutCubic; startEvents: menuback"
-    proxy-event__divisor1="event: menuchallengeselect; to: #divisorA, #divisorB"
-    proxy-event__divisor2="event: menuback; to: #divisorA, #divisorB">
+    class="menuAnimation"
+    animation__menuleft="property: object3D.position.x;  to: -0.59; dur: 200; easing: easeOutCubic; startEvents: menuchallengeselect"
+    animation__menuright="property: object3D.position.x; to: 0; dur: 200; easing: easeOutCubic; startEvents: menuchallengeunselect">
 
     <a-entity id="divisorA"
+      class="menuAnimation"
       position="0.566 0 -0.0025"
       geometry="primitive:plane; height:1.17; width:0.005"
-      material="shader: flat; color: #fff; transparent: true; opacity: 0.0"
-      animation__fadein ="property: components.material.material.opacity; to: 1.0; startEvents: menuchallengeselect; dur: 200"
-      animation__fadeout="property: components.material.material.opacity; to: 0.0; startEvents: menuback; dur: 200"></a-entity>
+      material="shader: flat; color: #fff; transparent: true; opacity: 0"></a-entity>
 
     {{ searchResults() }}
   </a-entity>
 
-  <a-entity id="menuDifficultiesGroup"
-    position="0.35 0.18 0"
-    animation__toleft="property: object3D.position.x; to: 0.195; dur: 200; easing: easeOutCubic; startEvents: menuchallengeselect"
-    animation__toright="property: object3D.position.x; to: 0.35; dur: 200; easing: easeOutCubic; startEvents: menuback">
-
+  <a-entity id="menuDifficultiesGroup" position="0.195 0.18 0">
     <a-entity id="divisorB"
+      class="menuAnimation"
       position="0.218 -0.179 -0.003"
       geometry="primitive: plane; height: 1.17; width: 0.005"
-      material="shader: flat; color: #fff; transparent: true; opacity: 0.0"
-      animation__fadein="property: components.material.opacity; to: 1.0; startEvents: menuchallengeselect; dur: 200"
-      animation__fadeout="property: components.material.opacity; to: 0.0; startEvents: menuback; dur: 200"
-      ></a-entity>
+      material="shader: flat; color: #fff; transparent: true; opacity: 0.0"></a-entity>
 
     <!-- Top-aligned. TODO: Smart-centering. -->
     <!-- Uses bind-for and bind-item to render difficulties. -->