Add volume slider

assets/css/styles.css

@@ -2,7 +2,6 @@ html, body {
     margin: 0;
     height: 100%;
     overflow: hidden;
-    
 }
 
 @font-face{
@@ -34,12 +33,6 @@ html, body {
     z-index: 2;
 }
 
-
-
-#queue {
-
-}
-
 #queueTextContainer {
     position: fixed;
     margin-bottom: 50px;
@@ -96,6 +89,16 @@ html, body {
     left: 10px;
 }
 
+#cursor {
+    z-index: 5;
+    position: fixed;
+    top: -50px;
+    left: 0px;
+    width: 32px;
+    height: 32px;
+    pointer-events: none;
+}
+
 .queueText {
     font-family: 'FRIZQT';
     font-size: 22px;
@@ -104,11 +107,20 @@ html, body {
     text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 3px #000, 10px 10px 2px #0000;
 }
 
+.text {
+    font-family: 'FRIZQT';
+    font-size: 14px;
+    text-align: left;
+    color: #ffc700;
+    text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 3px #000, 10px 10px 2px #0000;
+}
+
 .UIBox {
     position: fixed;
     border: 40px solid;
     border-image: url('../img/ui/UI_BorderAtlas.png') 40% round;
     z-index: 1;
+    pointer-events: none;
 }
 
 .UIBoxBackground 
@@ -116,6 +128,7 @@ html, body {
     position: fixed;
     background-color: rgba(0, 0, 0, 0.75);
     z-index: 0;
+    pointer-events: none;
 }
 
 .button {
@@ -130,7 +143,8 @@ html, body {
     height: 71px;
     border: none;
     outline: none;
-    display: inline-block;
+    display: block;
+    margin-top: -25px;
     transform: scale(0.8);
     filter: drop-shadow(0px 0px 8px #000);
     z-index: 2;
@@ -174,6 +188,7 @@ html, body {
     width: 100%;
     height: 40px;
     z-index: 2;
+    pointer-events: none;
 }
 
 .fullScreen
@@ -204,7 +219,6 @@ html, body {
     transform: scale(0.65);
     transition: 0.2s;
     filter: drop-shadow(0px 0px 6px #000);
-
 }
 
 .xPacButton:hover {
@@ -215,4 +229,48 @@ html, body {
 .xPacButton:active {
     transform: scale(0.64);
     filter: drop-shadow(0px 0px 0px #000);
+}
+
+.slidecontainer {
+    width: 450px;
+    z-index: 4;
+}
+
+.slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 50%;
+    height: 1px;
+    padding: 0px;
+    margin-left: 50%;
+    background: transparent;
+    border: 8px solid;
+    border-image: url('../img/ui/UI_SliderBorder.png') 35% round;
+    outline: none;
+    opacity: 1;
+    -webkit-transition: .2s;
+    transition: .2s;
+    transform: scale(0.8);
+}
+
+.slider:hover {
+    opacity: 1; /* Fully shown on mouse-over */
+}
+  
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 32px;
+    height: 32px;
+    background: url('../img/ui/UI_SliderHandle.png');
+    cursor: pointer;
+    transform: scale(1.6);
+}
+  
+.slider::-moz-range-thumb {
+    width: 32px;
+    height: 32px;
+    background: url('../img/ui/UI_SliderHandle.png');
+    cursor: pointer;
+    transform: scale(1.6);
 }

assets/js/audiohandler.js

@@ -52,12 +52,15 @@ var copyMap = [
     2020
 ];
 
+var cursor;
 var audio = new Audio();
 var buttonAudio = new Audio();
 var audioInitialPlayback = false;
 var queuePos = null;
 var disconnected = false;
 
+document.onmousemove = updateCursorPosition;
+
 function init()
 {
     switchExpansion();
@@ -173,6 +176,7 @@ function switchExpansion()
     bg.load();
     bg.play();
     audio.play();
+    
 }
 
 function playButtonAudio(index)
@@ -211,4 +215,33 @@ function resetQueue()
     disconnected = false;
     showDisconnect();
     hideQueue();
+}
+
+function showSettings()
+{
+    var opt = document.getElementById("options");
+    if(opt.style.display == "none")
+        opt.style.display = "flex";
+    else
+        opt.style.display = "none";
+}
+
+function updateCursorPosition(e)
+{
+    if(cursor === undefined)
+    {
+        cursor = document.getElementById("cursor");
+        console.log('Setting cursor');
+    }
+    cursor.style.top = e.y + 'px';
+    cursor.style.left = e.x + 'px';
+}
+
+function adjustVolume()
+{
+    var slider = document.getElementById("volumeSlider");
+    var val = slider.value * 0.01;
+    audio.volume = val;
+    buttonAudio.volume = val;
+    document.getElementById('background').volume = val;
 }