add song info for feiss to format

src/components/beat-loader.js

@@ -27,6 +27,7 @@ AFRAME.registerComponent('beat-loader', {
     this.beatsTime = undefined;
     this.beatsTimeOffset = undefined;
     this.bpm = undefined;
+    this.loadFinishEventDetail = {numBeats: undefined};
     this.songCurrentTime = undefined;
     this.onKeyDown = this.onKeyDown.bind(this);
     this.xhr = null;
@@ -87,7 +88,8 @@ AFRAME.registerComponent('beat-loader', {
       this.beatData = JSON.parse(xhr.responseText);
       this.beatDataProcessed = false;
       this.xhr = null;
-      this.el.sceneEl.emit('beatloaderfinish', null, false);
+      this.loadFinishEventDetail.numBeats = this.beatData._notes.length;
+      this.el.sceneEl.emit('beatloaderfinish', this.loadFinishEventDetail, false);
     });
     xhr.send();
   },

src/state/index.js

@@ -29,10 +29,9 @@ AFRAME.registerState({
       image: '',
       isLoading: false,
       isBeatsPreloaded: false,
-      numBeats: 0,
       songName: '',
-      songSubName: '',
-      songLength: 0
+      songLength: 0,
+      songSubName: ''
     },
     damage: 0,
     inVR: false,
@@ -53,8 +52,10 @@ AFRAME.registerState({
       id: '',
       index: -1,
       image: '',
+      numBeats: undefined,
+      songInfoText: '',
+      songLength: undefined,
       songName: '',
-      songLength: 0,
       songSubName: ''
     },
     multiplierText: '1x',
@@ -116,6 +117,8 @@ AFRAME.registerState({
 
     beatloaderfinish: (state, payload) => {
       state.challenge.isLoading = false;
+      state.menuSelectedChallenge.numBeats = payload.numBeats;
+      computeMenuSelectedChallengeInfoText(state);
     },
 
     beatloaderpreloadfinish: (state) => {
@@ -125,6 +128,9 @@ AFRAME.registerState({
     beatloaderstart: (state) => {
       state.challenge.isBeatsPreloaded = false;
       state.challenge.isLoading = true;
+      state.menuSelectedChallenge.songInfoText = '';
+      state.menuSelectedChallenge.numBeats = undefined;
+      state.menuSelectedChallenge.songLength = undefined;
     },
 
     gamemenuresume: (state) => {
@@ -172,6 +178,7 @@ AFRAME.registerState({
         state.menuDifficulties.unshift(challengeData.difficulties[i]);
       }
       state.menuDifficulties.sort(difficultyComparator);
+
       // Default to easiest difficulty.
       state.menuSelectedChallenge.difficulty = state.menuDifficulties[0];
 
@@ -192,6 +199,7 @@ AFRAME.registerState({
 
     menuselectedchallengesonglength: (state, seconds) => {
       state.menuSelectedChallenge.songLength = seconds;
+      computeMenuSelectedChallengeInfoText(state);
     },
 
     minehit: state => {
@@ -404,3 +412,17 @@ function computeMenuSelectedChallengeIndex (state) {
     }
   }
 }
+
+function computeMenuSelectedChallengeInfoText (state) {
+  const numBeats = state.menuSelectedChallenge.numBeats;
+  const songLength = state.menuSelectedChallenge.songLength;
+  if (!numBeats || !songLength) { return; }
+  state.menuSelectedChallenge.songInfoText =
+    `${formatSongLength(songLength)} / ${numBeats} beats`;
+}
+
+function formatSongLength (songLength) {
+  songLength /= 60;
+  const minutes = `${Math.floor(songLength)}`;
+  return `${minutes}:${Math.round((songLength - minutes) * 60)}`;
+}

src/templates/menu.html

@@ -177,22 +177,44 @@
       geometry="primitive: plane; height: 0.3; width: 0.3"
       material="shader: flat"
       position="0 0.382 0"></a-entity>
+
     <a-entity id="menuSelectedChallengeInfo">
-      <a-entity class="menuSelectedChallengeSongAuthor" position="0 0.058 0"
-        mixin="textFont" text="wrapCount: 40; align: center; color: #FF185B" bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
-      <a-entity class="menuSelectedChallengeSongName" position="0 -0.031 0"
-        mixin="textFont" text="align: center; color: #FF185B; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
+      <a-entity
+        id="menuSelectedChallengeSongAuthor"
+        position="0 0.058 0"
+        mixin="textFont"
+        text="wrapCount: 40; align: center; color: #FF185B"
+        bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
+      <a-entity
+        id="menuSelectedChallengeSongName"
+        position="0 -0.031 0"
+        mixin="textFont"
+        text="align: center; color: #FF185B; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
         bind__text="value: menuSelectedChallenge.songName"></a-entity>
-      <a-entity class="menuSelectedChallengeAuthor" position="0 -0.257 0"
-        mixin="textFont" text="align: center; color: #FFF; wrapCount: 33; width: 0.78; baseline: bottom" bind__text="value: menuSelectedChallenge.author"></a-entity>
-      <a-entity class="menuSelectedChallengeDownloads" position="0 -0.325 0"
-        mixin="textFont" text="align: center; color: #FFF; wrapCount: 35" bind__text="value: menuSelectedChallenge.downloadsText"></a-entity>
+      <a-entity
+        id="menuSelectedChallengeAuthor"
+        position="0 -0.257 0"
+        mixin="textFont"
+        text="align: center; color: #FFF; wrapCount: 33; width: 0.78; baseline: bottom"
+        bind__text="value: menuSelectedChallenge.author"></a-entity>
+      <a-entity
+        id="menuSelectedChallengeDownloads"
+        position="0 -0.325 0"
+        mixin="textFont"
+        text="align: center; color: #FFF; wrapCount: 35"
+        bind__text="value: menuSelectedChallenge.downloadsText"></a-entity>
+      <a-entity
+        id="menuSelectedChallengeSongInfo"
+        position="0 -0.395 0"
+        mixin="textFont"
+        text="align: center; color: #FFF; wrapCount: 35"
+        bind__text="value: menuSelectedChallenge.songInfoText"></a-entity>
     </a-entity>
 
     <a-plane
       id="playButton"
       play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
-      position="0 -0.482 0"
+      position="0 -0.51 0"
       proxy-event="event: click; to: a-scene; as: playbuttonclick"
       material="shader: flat; src: #playImg; transparent: true; color: #CCC"
       width="0.4"