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;
 }

index.html

@@ -8,15 +8,28 @@
     </head>
     <body onload="init();">
         <div class="noSelect">
+            <img src="assets/img/ui/Point.png" id="cursor">
 
             <!-- LOGO -->
             <button class="xPacButton" id="logo" onclick="manualChangeExpac(); playButtonAudio(1);"></button>
             
             <!--QUIT BUTTON-->
             <div id="quitButtonContainer" class="foreground">
+                <button class="button" onclick="playButtonAudio(0); showSettings();" > Options </button>
                 <button class="button" onclick="location.href='http://www.wowaholics.org/'; playButtonAudio(0);" > Quit </button>
             </div>
             
+            <!--OPTIONS PANEL-->
+            <div class="centered" id="options" style="display: none;">
+                <div class="UIBox" style="width: 450px; height: 15px;"></div>
+                <div class="UIBoxBackground" style="width: 500px; height: 75px;"></div>
+
+                <div class="slidecontainer">
+                    <p class="text" style="position: fixed; margin-top: 0%;">Sound</p>
+                    <input type="range" min="1" max="100" value="50" class="slider" id="volumeSlider" oninput="adjustVolume();">
+                </div>
+            </div>
+
             <!--QUEUE BOX-->
             <div class="centered" id="queue">
                 <div class="UIBox" style="width: 450px; height: 100px;"></div>
@@ -43,7 +56,7 @@
                 
                 <button class="button" id="realmListButton" onclick="playButtonAudio(1); resetQueue();"> Okay </button>
             </div>
-            
+
             <!--COPYRIGHT TEXT-->
             <div class="fullWidth">
                 <p id="copyrightText">Copyright 2004-2020 Blizzard Entertainment. All Right Reserved.</p>