Optimize easter-theme & Remove 13:37 Easter egg (#329)

* WIP, no gifs, just webms and css animations

* merge error

* clean up

* better flake ratation

* clean up

---------

Co-authored-by: miniJmo <jmol20student.aau.dk>
Co-authored-by: Falke Carlsen <[email protected]>
Co-authored-by: Kresten Laust <[email protected]>

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
 }

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);
 }