start beatmap characteristics dropdown

Author: ngokevin

src/components/song-controls.js

@@ -64,9 +64,11 @@ AFRAME.registerComponent('song-controls', {
   },
 
   play: function () {
-    this.controls = document.getElementById('controls');
+    const controls = this.controls = document.getElementById('controls');
     this.difficulty = document.getElementById('controlsDifficulty');
     this.difficultyOptions = document.getElementById('controlsDifficultyOptions');
+    this.modeDropdownEl = document.getElementById('controlsMode');
+    this.modeOptionEls = document.getElementById('controlsModes');
     this.playhead = document.getElementById('playhead');
     const timeline = this.timeline = document.getElementById('timeline');
     const timelineHover = this.timelineHover = document.getElementById('timelineHover');
@@ -77,7 +79,7 @@ AFRAME.registerComponent('song-controls', {
       this.customDifficultyLabels = {};
 
       // Show controls on load.
-      this.controls.classList.add('challengeLoaded');
+      controls.classList.add('challengeLoaded');
 
       // Update difficulty list.
       for (let i = 0; i < this.difficultyOptions.children.length; i++) {
@@ -145,10 +147,10 @@ AFRAME.registerComponent('song-controls', {
 
     // Difficulty dropdown.
     this.difficulty.addEventListener('click', () => {
-      this.controls.classList.toggle('difficultyOptionsActive');
+      controls.classList.toggle('difficultyOptionsActive');
     });
     this.el.sceneEl.addEventListener('click', evt => {
-      this.controls.classList.remove('difficultyOptionsActive');
+      controls.classList.remove('difficultyOptionsActive');
     });
 
     // Difficulty select.
@@ -157,7 +159,24 @@ AFRAME.registerComponent('song-controls', {
       this.playhead.style.width = '0%';
       this.el.sceneEl.emit('difficultyselect', evt.target.dataset.difficulty, false);
       this.difficulty.innerHTML = evt.target.innerHTML;
-      this.controls.classList.remove('difficultyOptionsActive');
+      controls.classList.remove('difficultyOptionsActive');
+    });
+
+    // Mode dropdown.
+    this.modeDropdownEl.addEventListener('click', () => {
+      controls.classList.toggle('modeOptionsActive');
+    });
+    this.el.sceneEl.addEventListener('click', evt => {
+      controls.classList.remove('modeOptionsActive');
+    });
+
+    // Mode select.
+    this.modeOptionEls.addEventListener('click', evt => {
+      this.songProgress.innerHTML = formatSeconds(0);
+      this.playhead.style.width = '0%';
+      this.el.sceneEl.emit('modeselect', evt.target.dataset.mode, false);
+      this.modeDropdownEl.innerHTML = evt.target.innerHTML;
+      controls.classList.remove('modeOptionsActive');
     });
 
     // Hide volume if click anywhere.

src/index.styl

@@ -20,7 +20,7 @@ html
   padding 10px
   position fixed
   right 0
-  width 675px
+  width 710px
   z-index 99999999
 
   &.challengeLoaded
@@ -94,7 +94,7 @@ html
   color $gray
   font-size 11px
   margin-left 15px
-  margin-right 5px
+  margin-right 0
   width 70px
 
 #songInfoContainer
@@ -124,13 +124,15 @@ html
     align-items center
     display flex
     position absolute
-    right 0
+    right 5px
 
-  #controlsDifficulty
+  #controlsDifficulty,
+  #controlsMode
     border 1px solid $gray
     border-radius 5px
     color $gray
     cursor pointer
+    font-size 11px
     padding 5px 10px
     text-align center
     transition all .1s
@@ -145,6 +147,10 @@ html
       border-color $white
       color $white
 
+  #controlsMode
+    margin-right 5px
+
+#controlsModes,
 #controlsDifficultyOptions
   background #020202
   border 1px solid $gray
@@ -170,6 +176,14 @@ html
     &:hover
       color $red
 
+#controlsModes
+  right 120px
+
+.modeOptionsActive
+  #controlsModes
+    display flex
+    opacity 1
+
 .difficultyOptionsActive
   #controlsDifficultyOptions
     display flex

src/templates/controls.html

@@ -29,7 +29,17 @@
       <p id="songName"></p>
     </div>
     <div id="songInfoSelect">
+      <p id="controlsMode">Standard</p>
       <p id="controlsDifficulty"></p>
+      <ul id="controlsModes">
+        <li data-mode="Standard">Standard</li>
+        <!--
+        <li data-mode="NoArrows">NoArrows</li>
+        <li data-mode="OneSaber">OneSaber</li>
+        <li data-mode="Lawless">Lawless</li>
+        <li data-mode="Lightshow">Lightshow</li>
+        -->
+      </ul>
       <ul id="controlsDifficultyOptions">
         <li data-difficulty="Easy">Easy</li>
         <li data-difficulty="Normal">Normal</li>