diff --git a/assets/css/styles.css b/assets/css/styles.css index b9c8193..7e7b18b 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -58,6 +58,10 @@ html, body { margin-top: 95px; } +#disconButton{ + margin-top: 95px; +} + #copyrightText { font-family: 'FRIZQT'; font-size: 15px; @@ -171,6 +175,45 @@ html, body { background: url('../img/ui/buttons/button_pressed.png') no-repeat top; } +.button_b { + font-family: 'FRIZQT'; + font-size: 23px; + text-align: center; + color: #ffc700; + text-shadow: 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000; + + background: url('../img/ui/buttons/button_idle_b.png') no-repeat top; + width: 270px; + height: 71px; + border: none; + outline: none; + display: block; + margin-top: -25px; + transform: scale(0.8); + filter: drop-shadow(0px 0px 8px #000); + z-index: 2; + cursor: url('../img/ui/Point.png'), auto; +} + +.button_b:hover { + font-family: 'FRIZQT'; + text-align: center; + color: #ffffff; + text-shadow: 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000; + + background: url('../img/ui/buttons/button_hover_b.png') no-repeat top; +} + +.button_b:active { + font-family: 'FRIZQT'; + font-size: 22px; + text-align: center; + color: #ffffff; + text-shadow: 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000; + + background: url('../img/ui/buttons/button_pressed_b.png') no-repeat top; +} + .centered { min-height: 100vh; display:flex; @@ -249,6 +292,7 @@ html, body { background: transparent; border: 8px solid; border-image: url('../img/ui/UI_SliderBorder.png') 35% round; + cursor: url('../img/ui/Point.png'), auto; outline: none; opacity: 1; -webkit-transition: .2s; @@ -266,7 +310,7 @@ html, body { width: 32px; height: 32px; background: url('../img/ui/UI_SliderHandle.png'); - cursor: url('../img/ui/Point.png'), auto; + cursor: url('../img/ui/Cast.png'), auto; transform: scale(1.6); border: none; z-index: 4; @@ -276,7 +320,7 @@ html, body { width: 32px; height: 32px; background: url('../img/ui/UI_SliderHandle.png'); - cursor: url('../img/ui/Point.png'), auto; + cursor: url('../img/ui/Cast.png'), auto; transform: scale(1.6); border: none; z-index: 4; diff --git a/assets/img/ui/Cast.png b/assets/img/ui/Cast.png new file mode 100644 index 0000000..fe974f5 Binary files /dev/null and b/assets/img/ui/Cast.png differ diff --git a/assets/img/ui/buttons/button_hover_b.png b/assets/img/ui/buttons/button_hover_b.png new file mode 100644 index 0000000..4914782 Binary files /dev/null and b/assets/img/ui/buttons/button_hover_b.png differ diff --git a/assets/img/ui/buttons/button_idle_b.png b/assets/img/ui/buttons/button_idle_b.png new file mode 100644 index 0000000..6243415 Binary files /dev/null and b/assets/img/ui/buttons/button_idle_b.png differ diff --git a/assets/img/ui/buttons/button_pressed_b.png b/assets/img/ui/buttons/button_pressed_b.png new file mode 100644 index 0000000..3064e96 Binary files /dev/null and b/assets/img/ui/buttons/button_pressed_b.png differ diff --git a/assets/js/audiohandler.js b/assets/js/audiohandler.js index 19f25b1..5f77817 100644 --- a/assets/js/audiohandler.js +++ b/assets/js/audiohandler.js @@ -40,6 +40,18 @@ var dateMap = [ 'Oct 13 2020' ]; +var buttonColorMap = [ + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0 +]; + var copyMap = [ 2006, 2008, @@ -171,6 +183,8 @@ function switchExpansion() version.textContent = verMap[expansion]; date.textContent = dateMap[expansion]; copyright.textContent = `Copyright 2004-${copyMap[expansion]} Blizzard Entertainment. All Right Reserved.`; + setButtonColors(buttonColorMap[expansion]); + bg.load(); bg.play(); audio.play(); @@ -235,4 +249,28 @@ function adjustVolume() audio.volume = val; buttonAudio.volume = val; document.getElementById('background').volume = val; +} + +function setButtonColors(index) +{ + var quitButton = document.getElementById("quitButton"); + var optButton = document.getElementById("optButton"); + var realmListButton = document.getElementById("realmListButton"); + var disconButton = document.getElementById("disconButton"); + switch(index) + { + case 0: + quitButton.className = "button"; + optButton.className = "button"; + realmListButton.className = "button"; + disconButton.className = "button"; + break; + + case 1: + quitButton.className = "button_b"; + optButton.className = "button_b"; + realmListButton.className = "button_b"; + disconButton.className = "button_b"; + break; + } } \ No newline at end of file diff --git a/index.html b/index.html index 54dba41..96fbcad 100644 --- a/index.html +++ b/index.html @@ -8,14 +8,14 @@
(WOW51900319)