Revert "Optimised easter animation (#305)" (#364)

This reverts commit e581544.

stregsystem/static/stregsystem/easter.css

@@ -1,16 +1,4 @@
-.easter-style {
-    color: black;
-    background-image: url(/media/stregsystem/easter.jpg);
-    background-repeat: repeat-x;
-    background-size: auto 100%;
-    padding: 0;
-    margin: 0;
-    width: 100vw;
-    height: 100vh;
-    position: relative;
-}
-
-.kylle {
+.kylle{
     position: fixed;
     top: 72%;
     right:-42%;
@@ -25,15 +13,6 @@
     animation-play-state: running;
 }
 
-.--kylle-normal {
-    background-image: url(/static/stregsystem/kylle.gif);
-}
-
-.--kylle-cursed {
-    background-image: url(/static/stregsystem/kylleCursed.gif);
-    top: 60%;
-}
-
 @keyframes play {
     0%,80% {right:-80%;}
     100%{right:180%;}
@@ -58,25 +37,13 @@
 
 @keyframes beerflakes-shake {
     0% {
-        transform: translateX(0px);
-    }
-    50% {
-        transform: translateX(80px);
-    }
-    100% {
-        transform: translateX(0px);
-    }
-}
-
-@keyframes beerflakes-rotate {
-    0% {
-        transform: rotateZ(0deg);
+        transform: translateX(0px)
     }
     50% {
-        transform: rotateZ(180deg)
+        transform: translateX(80px)
     }
     100% {
-        transform: rotateZ(360deg);
+        transform: translateX(0px)
     }
 }
 
@@ -89,25 +56,11 @@
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    animation-name: beerflakes-fall, beerflakes-shake, beerflakes-rotate;
-    animation-duration: 10s, 3s, 3s;
-    animation-timing-function: linear, ease-in-out, linear;
-    animation-iteration-count: infinite, infinite, infinite;
-    animation-play-state: running, running, running;
-}
-
-.--flake-normal {
-    background-image: url(/static/stregsystem/beerflake.webp);
-    background-size: contain;
-    width: 66px;
-    height: 100px;
-}
-
-.--flake-cursed {
-    background-image: url(/static/stregsystem/beerflakeCursed.gif);
-    background-size: cover;
-    width: 100px;
-    height: 100px;
+    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;
 }
 
 .beerflake:nth-of-type(0) {
@@ -119,47 +72,43 @@
 .beerflake:nth-of-type(1) {
     left: 10%;
     -webkit-animation-delay: 1s, 1s;
-    animation-delay: 1s, 1s;
-    transform: scale(50%);
+    animation-delay: 1s, 1s
 }
 
 .beerflake:nth-of-type(2) {
     left: 20%;
     -webkit-animation-delay: 6s, .5s;
-    animation-delay: 6s, .5s;
+    animation-delay: 6s, .5s
 }
 
 .beerflake:nth-of-type(3) {
     left: 30%;
     -webkit-animation-delay: 4s, 2s;
-    animation-delay: 4s, 2s;
-    transform: scale(50%);
+    animation-delay: 4s, 2s
 }
 
 .beerflake:nth-of-type(4) {
     left: 40%;
     -webkit-animation-delay: 2s, 2s;
-    animation-delay: 2s, 2s;
+    animation-delay: 2s, 2s
 }
 
 .beerflake:nth-of-type(5) {
     left: 50%;
     -webkit-animation-delay: 8s, 3s;
-    animation-delay: 8s, 3s;
-    transform: scale(50%);
+    animation-delay: 8s, 3s
 }
 
 .beerflake:nth-of-type(6) {
     left: 60%;
     -webkit-animation-delay: 6s, 2s;
-    animation-delay: 6s, 2s;
+    animation-delay: 6s, 2s
 }
 
 .beerflake:nth-of-type(7) {
     left: 70%;
     -webkit-animation-delay: 2.5s, 1s;
-    animation-delay: 2.5s, 1s;
-    transform: scale(50%);
+    animation-delay: 2.5s, 1s
 }
 
 .beerflake:nth-of-type(8) {
@@ -171,8 +120,7 @@
 .beerflake:nth-of-type(9) {
     left: 90%;
     -webkit-animation-delay: 7s, 4s;
-    animation-delay: 2.5s, 5.77s;
-    transform: scale(50%);
+    animation-delay: 2.5s, 5.77s
 }
 
 .beerflake:nth-of-type(10) {
@@ -184,8 +132,7 @@
 .beerflake:nth-of-type(11) {
     left: 15%;
     -webkit-animation-delay: 12s, 12.9s;
-    animation-delay: 17s, 7.5s;
-    transform: scale(50%);
+    animation-delay: 17s, 7.5s
 }
 
 .beerflake:nth-of-type(12) {

stregsystem/static/stregsystem/easter.js

@@ -1,26 +1,58 @@
 d = new Date();
 
-if (d.getMonth() === 3) {
-    const flakeType = (d.getHours() === 13 && d.getMinutes() === 37) ? "--flake-cursed" : "--flake-normal";
-
-    for(let beerflakes = 0; beerflakes < Math.min(d.getDate(), 24); beerflakes++)
-        SpawnBeerflake(flakeType);
+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();
+        }
+    }
 
-    const kylle = document.createElement('div'),
-        kylleType = (d.getHours() === 13 && d.getMinutes() === 37) ? "--kylle-cursed" : "--kylle-normal";
-
-    kylle.classList.add("kylle", kylleType);
+    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";
+    }
+    kylle.appendChild(gif);
     document.body.querySelector(".easter-container").appendChild(kylle);
 
     SetBodyEasterStyle();
 }
 
-function SpawnBeerflake (type = "--flake-normal") {
+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", type);
+    beerflake.classList.add("beerflake");
+    const gif = document.createElement("img")
+    gif.src="/static/stregsystem/beerflake.gif";
+    beerflake.appendChild(gif);
     document.body.querySelector(".easter-container").appendChild(beerflake);
 }
 
 function SetBodyEasterStyle() {
-    document.body.classList.add("easter-style");
+    const bodyStyle = document.body.style;
+    bodyStyle.color = "black";
+    bodyStyle.backgroundImage = "url(\"" + media_url + "stregsystem/easter.jpg\")";
+    bodyStyle.backgroundRepeat = "repeat-x";
+    bodyStyle.backgroundSize = "auto 100%";
+    bodyStyle.padding = "0";
+    bodyStyle.margin = "0";
+    bodyStyle.width = "100vw";
+    bodyStyle.height = "100vh";
+    bodyStyle.position = "relative";
 }