fix menu difficulty list rendering

src/components/menu-difficulty-select.js

@@ -4,6 +4,14 @@ var bindEvent = require('aframe-event-decorators').bindEvent;
  * Select difficulty.
  */
 AFRAME.registerComponent('menu-difficulty-select', {
+  init: function () {
+    this.el.sceneEl.addEventListener('menuchallengeselect', () => {
+      setTimeout(() => {
+        this.el.components.layout.update();
+      });
+    });
+  },
+
   click: bindEvent(function (evt) {
     this.el.emit('menudifficultyselect',
                  evt.target.closest('.difficultyOption').dataset.difficulty,

src/components/song.js

@@ -25,11 +25,11 @@ AFRAME.registerComponent('song', {
       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) {
+      console.log(`Playing ${this.audio.src}...`);
       this.audio.play();
       return;
     } else if ((!data.isPlaying || !data.challengeId) && !this.audio.paused) {

src/templates/menu.html

@@ -47,11 +47,13 @@
     {{ searchResults() }}
   </a-entity>
 
+  <template id="difficultyOptionTemplate">
+  </template>
   <a-entity id="menuDifficulties"
     bind-for="for: difficulty; in: menuDifficulties"
     bind__visible="!!menuSelectedChallenge.id"
     menu-difficulty-select
-    layout="type: box; columns: 1; marginRow: -0.1"
+    layout="type: box; columns: 1; marginRow: -0.1; orderAttribute: data-bind-for-key"
     position="0.455 .3 0">
     {% raw %}
       <template>