add a song change dialog (#1036)

fix styles:

fix styles

add changes'

add changes to caret

add pointer

make pointer changes

fix pointer related issues

change color of play buttons on hover

css/custom.css

@@ -62,7 +62,7 @@ div.social-container {
 
 i.fa {background: none !important;}
 
-i.fa.fa-play:hover, i.fa.fa-pause:hover, i.fa.fa-step-forward:hover, i.fa.fa-times:hover, i.fa.fa-step-backward:hover {
+ i.fa.fa-step-forward:hover, i.fa.fa-times:hover, i.fa.fa-step-backward:hover {
   color:#0e8664;
   transition: 0.3s;
 }
@@ -499,3 +499,31 @@ i.fa.fa-thumbs-down.fa-5x:hover{
   text-align:center;
   background:rgb(48, 187, 104);
 }
+#changeTrackParent{
+  width: 25vw;
+  height: 70vh;
+  overflow-y: scroll;
+}
+.track{
+  padding:20px;
+  display: flex;
+  transition: all .2s ease-in-out;
+  justify-content: space-between;
+  border:solid 1px #f4f0ed;
+  background-color: #82b75b;
+}
+#track-head{
+  padding-bottom:20px;
+}
+#artist{
+  font-size: 80%;
+}
+.fa-caret-down{
+  cursor: pointer;
+}
+.track:hover{
+  background-color: #82b70a;
+}
+.fa-play{
+  cursor: pointer;
+}

index.html

@@ -161,8 +161,7 @@
               <li><input type="button" value="Change character" onClick="choosePlayerCharacter(player)" class="waves-effect waves-light btn blue-grey darken-2"/></li>
               <li><input type="button" value="Get Path" onClick="show_p()" class="waves-effect waves-light btn blue-grey darken-2"/></li>
               <li> <p id="pa"></p></li>
-              <li><input type="button" value="Restart" onClick="reset()" class="waves-effect waves-light btn blue-grey darken-2"/></li>
-
+	            <li><input type="button" value="Restart" onClick="reset()" class="waves-effect waves-light btn blue-grey darken-2"/></li>
             </ul>
       </div>
 
@@ -210,6 +209,15 @@
           <p class="range-field">
             <input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.1 value='1'>
           </p>
+          <h4 id="track-head" onclick="$('#changeTrackParent').fadeToggle();">Change Track  <span><i class="fa fa-caret-down"></i></span></h4>
+          <div id="changeTrackParent">
+          </div>
+          <script>
+          const ParentElement = document.getElementById("changeTrackParent")
+          backgroundAudio.forEach(function(element,index) {
+              ParentElement.innerHTML+=`<div class="track"><div><p>`+ element.backgroundSongName +`</p><p id="artist">`+element.author+`</p></div><div><a class="waves-effect waves-light btn blue-grey darken-2" onclick="playBgAudio('`+element.filename+`',`+index+`);"><i id='changeTrack`+index+`' class="fa fa-play"></i></a></div></div>`
+          });
+          </script>
           <div id="tileLicense"></div>
         </div>
         <div class="border1"></div>

js/sound.js

@@ -254,7 +254,7 @@ function stopBackgroundAudio() {
     document.getElementById("pause").style.display ="none";
     document.getElementById("play-pause-float").children[0].classList.remove("fa-pause");
     document.getElementById("play-pause-float").children[0].classList.add("fa-play");
-    togglePause();
+
 }
 
 function setVolume() {
@@ -279,9 +279,24 @@ function playAudio(audio, licenseNum) {
 }
 
 function playPauseFloat() {
-    if(backgroundPlay.paused === true) {
+    if(backgroundPlay.paused) {
         startBackgroundAudio();
     } else {
         stopBackgroundAudio();
     }
 }
+function playBgAudio(filename,index){
+    if(!backgroundPlay.paused){
+        document.getElementById("changeTrack"+index).className="fa fa-play";
+        stopBackgroundAudio();
+    }else{
+        document.getElementById("changeTrack"+index).className="fa fa-pause";
+        backgroundPlay = new Audio(filename);
+        startBackgroundAudio();
+        $("#legalNotice").html(backgroundAudio[index].legalNotice);
+        $("#backgroundSongName").html(backgroundAudio[index].backgroundSongName);
+        $("#legalNotice").attr("href", backgroundAudio[index].link);
+        $("#backgroundSongAuthor").html(backgroundAudio[index].author);
+    }
+
+}