fix menu difficulty list rendering

package-lock.json

@@ -148,9 +148,9 @@
       "integrity": "sha1-+w+EQdrdHosRzCRRK6eqaS1iK+E="
     },
     "aframe-state-component": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-4.1.0.tgz",
-      "integrity": "sha512-TqmBTeikL0/zjQYSk/2rak3g8iPLHCIN5sn5RYdQqp8KNXzhM8PAClnkwlaXMRTH6+fKfnNtKlTm+6fbfgQH1g==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-4.4.1.tgz",
+      "integrity": "sha512-V3YcjWMGBGZx8QIqs8csk+v+zmyPoIMelj0l+P57spSjPhyF4wivf5/QFRyEhcrwZIrytLZKRodW431tp30LZA==",
       "requires": {
         "aframe": "github:aframevr/aframe#2afb6ac191f1a44edbbfe6f0e733380356a9e0c8"
       }

package.json

@@ -18,7 +18,7 @@
     "aframe-particle-system-component": "^1.0.11",
     "aframe-proxy-event-component": "^1.1.1",
     "aframe-slice9-component": "^1.0.0",
-    "aframe-state-component": "^4.1.0",
+    "aframe-state-component": "^4.4.1",
     "aframe-super-keyboard": "^2.0.0",
     "algoliasearch": "^3.29.0",
     "ansi-html": "0.0.7",

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>