diff --git a/src/components/beat-loader.js b/src/components/beat-loader.js index f482b5a..955cc0c 100644 --- a/src/components/beat-loader.js +++ b/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(); }, diff --git a/src/state/index.js b/src/state/index.js index 4082fc0..ff6d5db 100644 --- a/src/state/index.js +++ b/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)}`; +} diff --git a/src/templates/menu.html b/src/templates/menu.html index 23ed2e9..dd3bc5a 100644 --- a/src/templates/menu.html +++ b/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"> + - - + - - + + +