diff --git a/stregsystem/static/stregsystem/beerflake.gif b/stregsystem/static/stregsystem/beerflake.gif deleted file mode 100644 index af7de299..00000000 Binary files a/stregsystem/static/stregsystem/beerflake.gif and /dev/null differ diff --git a/stregsystem/static/stregsystem/beerflake.webp b/stregsystem/static/stregsystem/beerflake.webp new file mode 100644 index 00000000..b5e93329 Binary files /dev/null and b/stregsystem/static/stregsystem/beerflake.webp differ diff --git a/stregsystem/static/stregsystem/beerflakeCursed.gif b/stregsystem/static/stregsystem/beerflakeCursed.gif deleted file mode 100644 index b42f966a..00000000 Binary files a/stregsystem/static/stregsystem/beerflakeCursed.gif and /dev/null differ diff --git a/stregsystem/static/stregsystem/easter.css b/stregsystem/static/stregsystem/easter.css index f3b1167a..b7cc86d1 100644 --- a/stregsystem/static/stregsystem/easter.css +++ b/stregsystem/static/stregsystem/easter.css @@ -1,5 +1,6 @@ .kylle{ position: fixed; + z-index: 0; top: 72%; right:-42%; -webkit-user-select: none; @@ -28,27 +29,28 @@ @keyframes beerflakes-fall { 0% { - top: -10% + top: -10%; } 100% { - top: 100% + top: 100%; } } @keyframes beerflakes-shake { 0% { - transform: translateX(0px) + transform: translateX(0px) rotate(0deg); } 50% { - transform: translateX(80px) + transform: translateX(80px) rotate(180deg); } 100% { - transform: translateX(0px) + transform: translateX(0px) rotate(360deg); } } .beerflake { position: fixed; + z-index: 0; top: -30%; background: transparent; cursor: default; @@ -57,152 +59,152 @@ -ms-user-select: none; user-select: none; animation-name: beerflakes-fall, beerflakes-shake; - animation-duration: 10s, 3s; - animation-timing-function: linear, ease-in-out; - animation-iteration-count: infinite, infinite; - animation-play-state: running, running; + animation-duration: 10s, 3s, 3s; + animation-timing-function: linear, linear, linear; + animation-iteration-count: infinite, infinite, infinite; + animation-play-state: running, running, running; } .beerflake:nth-of-type(0) { left: 1%; - -webkit-animation-delay: 0s, 0s; - animation-delay: 0s, 0s + -webkit-animation-delay: 0s, 1s; + animation-delay: 0s, 0s; } .beerflake:nth-of-type(1) { left: 10%; - -webkit-animation-delay: 1s, 1s; - animation-delay: 1s, 1s + -webkit-animation-delay: 1s, 2.1s; + animation-delay: 1s, 0.5s } .beerflake:nth-of-type(2) { left: 20%; - -webkit-animation-delay: 6s, .5s; - animation-delay: 6s, .5s + -webkit-animation-delay: 6s, 3s; + animation-delay: 6s, 2.7s } .beerflake:nth-of-type(3) { left: 30%; - -webkit-animation-delay: 4s, 2s; - animation-delay: 4s, 2s + -webkit-animation-delay: 4s, 1s; + animation-delay: 4s, 1.3s } .beerflake:nth-of-type(4) { left: 40%; -webkit-animation-delay: 2s, 2s; - animation-delay: 2s, 2s + animation-delay: 2s, 1.8s } .beerflake:nth-of-type(5) { left: 50%; -webkit-animation-delay: 8s, 3s; - animation-delay: 8s, 3s + animation-delay: 8s, 1.65s } .beerflake:nth-of-type(6) { left: 60%; - -webkit-animation-delay: 6s, 2s; - animation-delay: 6s, 2s + -webkit-animation-delay: 6s, 1.4s; + animation-delay: 6s, 1.77s } .beerflake:nth-of-type(7) { left: 70%; - -webkit-animation-delay: 2.5s, 1s; - animation-delay: 2.5s, 1s + -webkit-animation-delay: 2.5s, 1.75s; + animation-delay: 2.5s, 1.24s } .beerflake:nth-of-type(8) { left: 80%; - -webkit-animation-delay: 1s, 0s; - animation-delay: 1s, 0s + -webkit-animation-delay: 1s, 1s; + animation-delay: 1s, 1.05s } .beerflake:nth-of-type(9) { left: 90%; - -webkit-animation-delay: 7s, 4s; - animation-delay: 2.5s, 5.77s + -webkit-animation-delay: 7s, 0.5s; + animation-delay: 2.5s, 1.3s } .beerflake:nth-of-type(10) { left: 5%; - -webkit-animation-delay: 5.69s, 7.5s; - animation-delay: 7s, 5.77s + -webkit-animation-delay: 5.69s, 1s; + animation-delay: 7s, 1.9s } .beerflake:nth-of-type(11) { left: 15%; - -webkit-animation-delay: 12s, 12.9s; - animation-delay: 17s, 7.5s + -webkit-animation-delay: 12s, 1s; + animation-delay: 17s, 1.434s } .beerflake:nth-of-type(12) { left: 25%; - -webkit-animation-delay: 5.69s, 4s; - animation-delay: 2.5s, 4s + -webkit-animation-delay: 5.69s, 1s; + animation-delay: 2.5s, 1.76s } .beerflake:nth-of-type(13) { left: 35%; - -webkit-animation-delay: 7s, 6s; - animation-delay: 7s, 8s + -webkit-animation-delay: 7s, 1s; + animation-delay: 7s, 1.12s } .beerflake:nth-of-type(14) { left: 45%; - -webkit-animation-delay: 4s, 12.9s; - animation-delay: 5.69s, 7.5s + -webkit-animation-delay: 4s, 1s; + animation-delay: 5.69s, 1s } .beerflake:nth-of-type(15) { left: 55%; -webkit-animation-delay: 2.5s, 1s; - animation-delay: 7s, 4s + animation-delay: 7s, 1.82s } .beerflake:nth-of-type(16) { left: 65%; - -webkit-animation-delay: 8s, 6s; - animation-delay: 2.5s, 3.2s + -webkit-animation-delay: 8s, 0s; + animation-delay: 2.5s, 0.121s } .beerflake:nth-of-type(17) { left: 75%; - -webkit-animation-delay: 7s, 2.5s; - animation-delay: 2.5s, 7.5s + -webkit-animation-delay: 7s, 2s; + animation-delay: 2.5s, 0.72s } .beerflake:nth-of-type(18) { left: 85%; - -webkit-animation-delay: 8.5s, 12.9s; - animation-delay: 5.69s, 4s + -webkit-animation-delay: 8.5s, 1s; + animation-delay: 5.69s, 1.3s } .beerflake:nth-of-type(19) { left: 95%; - -webkit-animation-delay: 2.5s, 6s; - animation-delay: 4s, 12.9s + -webkit-animation-delay: 2.5s, 1s; + animation-delay: 4s, 1.598s } .beerflake:nth-of-type(20) { left: 3%; - -webkit-animation-delay: 7s, 2.5s; - animation-delay: 13s, 4s + -webkit-animation-delay: 7s, 1s; + animation-delay: 13s, 1.05s } .beerflake:nth-of-type(21) { left: 13%; - -webkit-animation-delay: 5.77s, 6s; - animation-delay: 2.5s, 4s + -webkit-animation-delay: 5.77s, 1s; + animation-delay: 2.5s, 1.99s } .beerflake:nth-of-type(22) { left: 42%; - -webkit-animation-delay: 7s, 4s; - animation-delay: 5.69s, 7.5s + -webkit-animation-delay: 7s, 1s; + animation-delay: 5.69s, 1.66s } .beerflake:nth-of-type(23) { left: 69%; - -webkit-animation-delay: 2.5s, 4s; - animation-delay: 42s, 12.9s + -webkit-animation-delay: 2.5s, 1s; + animation-delay: 42s, 1.27s } diff --git a/stregsystem/static/stregsystem/easter.js b/stregsystem/static/stregsystem/easter.js index d7f44b69..23bbec20 100644 --- a/stregsystem/static/stregsystem/easter.js +++ b/stregsystem/static/stregsystem/easter.js @@ -1,45 +1,27 @@ d = new Date(); if(d.getMonth() === 3){ - if(d.getHours() === 13 && d.getMinutes() === 37){ - for(let beerflakes=0; beerflakes < Math.min(d.getDate(), 24); beerflakes++){ - SpawnBeerflakeCursed(); - } - }else{ - for(let beerflakes=0; beerflakes < Math.min(d.getDate(), 24); beerflakes++){ - SpawnBeerflake(); - } + //spawning beercans/beerflakes. Adds another beerflake each day for the first 24 days. + for(let beerflakes=0; beerflakes < Math.min(d.getDate(), 24); beerflakes++){ + SpawnBeerflake(); } const kylle = document.createElement('div'); kylle.classList.add("kylle"); const gif = document.createElement("img") - if(d.getHours() === 13 && d.getMinutes() === 37){ - gif.src="/static/stregsystem/kylleCursed.gif"; - kylle.setAttribute('style', 'top: 60%'); - }else{ - gif.src="/static/stregsystem/kylle.gif"; - } + gif.src="/static/stregsystem/kylle.gif"; kylle.appendChild(gif); document.body.querySelector(".easter-container").appendChild(kylle); SetBodyEasterStyle(); } -function SpawnBeerflakeCursed () { - const beerflakeCursed = document.createElement('div'); - beerflakeCursed.classList.add("beerflake"); - const gif = document.createElement("img") - gif.src="/static/stregsystem/beerflakeCursed.gif"; - beerflakeCursed.appendChild(gif); - document.body.querySelector(".easter-container").appendChild(beerflakeCursed); -} - function SpawnBeerflake () { const beerflake = document.createElement('div'); beerflake.classList.add("beerflake"); + beerflake.style.zIndex="0"; const gif = document.createElement("img") - gif.src="/static/stregsystem/beerflake.gif"; + gif.src="/static/stregsystem/beerflake.webp"; beerflake.appendChild(gif); document.body.querySelector(".easter-container").appendChild(beerflake); } diff --git a/stregsystem/static/stregsystem/kylleCursed.gif b/stregsystem/static/stregsystem/kylleCursed.gif deleted file mode 100644 index 4da1a0f5..00000000 Binary files a/stregsystem/static/stregsystem/kylleCursed.gif and /dev/null differ