add bfa

assets/css/styles.css

@@ -19,13 +19,6 @@ html, body {
     z-index: -1;
 }
 
-#logo {
-    z-index: 1;
-    top: 20px;
-    left: 20px;
-    position: absolute;
-}
-
 #quitButtonContainer {
     bottom: 10px;
     right: 10px;
@@ -150,4 +143,30 @@ html, body {
 
 .foreground {
     z-index: 1;
+}
+
+.xPacButton {
+    z-index: 1;
+    position: absolute;
+    top: -15px;
+    left: -55px;
+    width: 633px;
+    height: 289px;
+    border: none;
+    outline: none;
+    display: inline-block;
+    background: url('../img/ui/logos/Shadowlands.png') no-repeat top;
+    background-color: transparent;
+    transform: scale(0.8);
+    transition: 0.2s;
+}
+
+.xPacButton:hover {
+    transform: scale(0.81);
+    -webkit-filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
+}
+
+.xPacButton:active {
+    transform: scale(0.79);
+    -webkit-filter: drop-shadow(0px 0px 0px rgb(0, 0, 0));
 }

assets/js/audiohandler.js

@@ -1,15 +1,24 @@
-var bgSelection = 0;
+var expansion = 8;
 var audioSelect = {
+    'BattleForAzeroth' : './assets/audio/BattleForAzeroth.ogg',
     'Shadowlands' : './assets/audio/Shadowlands.ogg'
 }
-var audio;
+var videoSelect = {
+    'BattleForAzeroth' : './assets/img/bg/BattleForAzeroth.webm',
+    'Shadowlands' : './assets/img/bg/Shadowlands.webm'
+}
+var logoSelect = {
+    'BattleForAzeroth' : './assets/img/ui/logos/BattleForAzeroth.png',
+    'Shadowlands' : './assets/img/ui/logos/Shadowlands.png',
+}
+var audio = new Audio();
 var audioInitialPlayback = false;
 var queuePos = null;
 var disconnected = false;
 
 function init()
 {
-    audio = new Audio(audioSelect.Shadowlands);
+    switchExpansion();
     window.addEventListener('click', waitForInteractionToPlayAudio);
 
     getPositionInQueue();
@@ -23,6 +32,8 @@ function waitForInteractionToPlayAudio()
 {
     if(!audioInitialPlayback)
     {
+        audio.volume = 0.1;
+        audio.loop = true;
         audio.play();
         audioInitialPlayback = true;
     }
@@ -80,4 +91,83 @@ function doDisconnect()
 {
     // disconnected = true;
     // console.log("DC'd")
+}
+
+function manualChangeExpac()
+{
+    console.log("Changing xpac to: ");
+    expansion += 1;
+    if(expansion > 8)
+        expansion = 0;
+    
+    switchExpansion();
+}
+
+function switchExpansion()
+{
+    queuePos = null;
+    getPositionInQueue();
+
+    var bg = document.getElementById('background');
+    var logo = document.getElementById('logo')
+    audio.pause();
+    switch(expansion)
+    {
+        case 0:
+            console.log('Vanilla');
+            expansion = 7;
+            switchExpansion();
+        break;
+
+        case 1:
+            console.log('Burning Crusade');
+            expansion = 7;
+            switchExpansion();
+        break;
+
+        case 2:
+            console.log('Wrath of the Lich King');
+            expansion = 7;
+            switchExpansion();
+        break;
+
+        case 3:
+            console.log('Cataclysm');
+            expansion = 7;
+            switchExpansion();
+        break;
+
+        case 4:
+            console.log('Mists of Pandaria');
+            expansion = 7;
+            switchExpansion();
+        break;
+
+        case 5:
+            console.log('Warlords of Draenor');
+            expansion = 7;
+            switchExpansion();
+        break;
+
+        case 6:
+            console.log('Legion');
+            expansion = 7;
+            switchExpansion();
+        break;
+
+        case 7:
+            console.log('Battle for Azeroth');
+            audio.src = audioSelect.BattleForAzeroth;
+            bg.setAttribute('src', videoSelect.BattleForAzeroth);
+            logo.style.background = `url(${logoSelect.BattleForAzeroth})`;
+        break;
+
+        case 8:
+            console.log('Shadowlands');
+            audio.src = audioSelect.Shadowlands;
+            bg.setAttribute('src', videoSelect.Shadowlands);
+            logo.style.background = `url(${logoSelect.Shadowlands})`;
+        break;
+    }
+    audio.play();
 }