From a1aea07a4561d5b763e0e39bdfa439da973768a4 Mon Sep 17 00:00:00 2001 From: Xiexe Date: Sat, 3 Oct 2020 23:04:50 -0400 Subject: [PATCH] Add volume slider --- assets/css/styles.css | 76 ++++++++++++++++++++++++++---- assets/img/ui/Point.png | Bin 0 -> 1401 bytes assets/img/ui/UI_SliderBorder.png | Bin 0 -> 286 bytes assets/img/ui/UI_SliderHandle.PNG | Bin 0 -> 438 bytes assets/js/audiohandler.js | 33 +++++++++++++ index.html | 15 +++++- 6 files changed, 114 insertions(+), 10 deletions(-) create mode 100644 assets/img/ui/Point.png create mode 100644 assets/img/ui/UI_SliderBorder.png create mode 100644 assets/img/ui/UI_SliderHandle.PNG diff --git a/assets/css/styles.css b/assets/css/styles.css index c5c8e1a..ff80a58 100644 --- a/assets/css/styles.css +++ b/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); } \ No newline at end of file diff --git a/assets/img/ui/Point.png b/assets/img/ui/Point.png new file mode 100644 index 0000000000000000000000000000000000000000..c1dc693cbbd5b9dd879fb9e39cdd68304243efb2 GIT binary patch literal 1401 zcmV-<1%~>GP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1rA9>K~z{r?Urjy z6?7QJSr;=v5kW1k9xj1^5{O)d4gvykkvp8gOB^o3K?f+MK@dl=IHJXEmEfivSqYkQ zaifscyiBJ_NFQ`rZjANC**BYgV0+?ucQ~`w;?kLY@!kGoJHY?_z3=FY&o zOgNTXTOu+s32IF#bnTy^`rrXczIu(PbSPwFh=3aIS$MD$D*`qmX?uYrVb#>e?tOa@ z7`<5_*75{Q>+YP2ZaS0`T4KR9HBm;t!^ z(;X2jyTC);M8rhR4}fiBs}=S(A|!%P`2k^}NXSuPYe|`?zxDVDSyO^=6hjw>QT0KC zR6qFj0FLXsuyaoZ{5SZ`Zw&UXZXzO8ZYGowAp$}pvbVF9E~Mqt_#h3k$@gZ;?bbx+7A_j@)#C;E9OaEP(6)6Y6`;;Le@9 z_;KtOzC7NH?oSV)MOTN4-Gx#_L5X_)UGVS^KzKq1veacLsyYCD?|F1|w8L+$yXYe< zGF(pX&SC**I^2N5tY{pq-Gxg-=ft>vfAk0w6Te_!upi~`RLb8|%!U-R2S-7OH`0o+ zDZL0ajV)+Aq7wifwwGH$`(=kZI*$p=?OV5vq8uB&CEzqG`Ubs(CN<~vTw(73KV<@f z6Y>$2T_$s<(@__m3R@XTRD85-#lf~t(E}@{AIz8(^+2PdIQfVXhVXNSpe7VP>){(7 zkBB6djKtH`Ng((zQ7h{5y`q<0`>SRC-(2_#6Zh{MJHe4~UAeY2DQ*YB=R6Yn03RD_ zgCMkGZUq7OCd6&Y5)j>o^-?ic^ZJ!*q5}fZtZx2rL%KuDrb$uAhAzwvf~#a$C;7=k zcO+2qbZ087-b34oZW#r&aA{;jG{EHS!07mGT)S}b=t5g@8gv=2qe$tBpfz^luG3d6JUN3M@LC&;sOUT-XBJ|crW}=Z^&&_@ za0Ru+DQFG0MPryfBG$Qp-z}F~Et{V^{#(#5!a`F7g2qJ%u4-w{n<$TcO)8FDtB}Oh z47Y0f-%OL7Ve7OSe!fa5Lo%^GC`OECQ;-+p16|xcl{x!2_R@17rW+HSVgd*#IN2V^l{D1gB)uIs8FB3cmU1bipZHwww@j(^+ kHGV*J8ix6pemiFXPl}>yBFM`fB>(^b07*qoM6N<$g8ia*{r~^~ literal 0 HcmV?d00001 diff --git a/assets/img/ui/UI_SliderHandle.PNG b/assets/img/ui/UI_SliderHandle.PNG new file mode 100644 index 0000000000000000000000000000000000000000..2ac3e15561346bff601ff5e448b135bfcbb1f591 GIT binary patch literal 438 zcmV;n0ZIOeP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0ZU0lK~z{r?Uu1h z13?gmx6DMF80J zn-oHQ9C*qF!c%|%fpMsJ;fTFtyLQs19dKbE*VQELAJik;T|dzK#}^U(&|Cj0Hm2q= z?5U1Ho<4>T>JtZZuuC9RyC48bI05E(bdF$w$PNJK2C%nxa|t{+JSDhk8m^67KdrH< z0pP{DU|WPfzq|^Bw-29QO;rJgRaN2U{H@nJ2sjDv{dK(#;Kr?=vmXHfLO42s(-2kx zh?0|Vd^RR{b~B^yvJ>+@I>dmw$FUqnY?}h04*OYtkPxziz#8f-;ZYIdU;Yn7VH^ln goq17Fk+O{W1#rE%1wdtzs{jB107*qoM6N<$g6_1jL;wH) literal 0 HcmV?d00001 diff --git a/assets/js/audiohandler.js b/assets/js/audiohandler.js index 48eff6a..481f0cd 100644 --- a/assets/js/audiohandler.js +++ b/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; } \ No newline at end of file diff --git a/index.html b/index.html index 5408a3a..0eff7b3 100644 --- a/index.html +++ b/index.html @@ -8,15 +8,28 @@
+
+
+ + +
@@ -43,7 +56,7 @@
- +

Copyright 2004-2020 Blizzard Entertainment. All Right Reserved.