edwin/WoWLoginScreens
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add bfa

Browse Source
This commit is contained in:
Xiexe
2020-10-02 20:25:00 -04:00
parent c76b19c859
commit 2c9d59b933
6 changed files with 121 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/audio/BattleForAzeroth.ogg
BIN
View File
Binary file not shown.
assets/css/styles.css
+26 -7
View File
@@ -19,13 +19,6 @@ html, body {
z-index: -1; z-index: -1;
} }
#logo {
z-index: 1;
top: 20px;
left: 20px;
position: absolute;
}
#quitButtonContainer { #quitButtonContainer {
bottom: 10px; bottom: 10px;
right: 10px; right: 10px;
@@ -150,4 +143,30 @@ html, body {
.foreground { .foreground {
z-index: 1; 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/img/bg/BattleForAzeroth.webm
BIN
View File
Binary file not shown.
assets/img/ui/logos/BattleForAzeroth.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 309 KiB

assets/js/audiohandler.js
+93 -3
View File
@@ -1,15 +1,24 @@
var bgSelection = 0; var expansion = 8;
var audioSelect = { var audioSelect = {
'BattleForAzeroth' : './assets/audio/BattleForAzeroth.ogg',
'Shadowlands' : './assets/audio/Shadowlands.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 audioInitialPlayback = false;
var queuePos = null; var queuePos = null;
var disconnected = false; var disconnected = false;
function init() function init()
{ {
audio = new Audio(audioSelect.Shadowlands); switchExpansion();
window.addEventListener('click', waitForInteractionToPlayAudio); window.addEventListener('click', waitForInteractionToPlayAudio);
getPositionInQueue(); getPositionInQueue();
@@ -23,6 +32,8 @@ function waitForInteractionToPlayAudio()
{ {
if(!audioInitialPlayback) if(!audioInitialPlayback)
{ {
audio.volume = 0.1;
audio.loop = true;
audio.play(); audio.play();
audioInitialPlayback = true; audioInitialPlayback = true;
} }
@@ -80,4 +91,83 @@ function doDisconnect()
{ {
// disconnected = true; // disconnected = true;
// console.log("DC'd") // 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();
} }
index.html
+2 -2
View File
@@ -9,11 +9,11 @@
<body onload="init();"> <body onload="init();">
<!-- LOGO --> <!-- LOGO -->
<img src="assets/img/ui/logos/Shadowlands.png" style="width: 400px;" id="logo"> <button class="xPacButton" id="logo" onclick="manualChangeExpac();"></button>
<!--QUIT BUTTON--> <!--QUIT BUTTON-->
<div id="quitButtonContainer" class="foreground"> <div id="quitButtonContainer" class="foreground">
<button class="button"> Quit </button> <button class="button" onclick="location.href='http://www.wowaholics.org/';"> Quit </button>
</div> </div>
<!--QUEUE BOX--> <!--QUEUE BOX-->