Konami code makes background scroll infinitely (#13)

Konami code makes background scroll infinitely

Co-authored-by: Kevin Belisle <kev.belisle@gmail.com>
Reviewed-on: https://git.etztech.xyz/BirbMC/birbmc.com/pulls/13
Reviewed-by: Etzelia <etzelia@hotmail.com>

src/assets/js/main.js

@@ -120,9 +120,35 @@
 		speed: 1000
 	});
 
-	// Easter Eggs
+	// Logo Easter Egg
 	document.querySelector("span.logo").addEventListener("dblclick", (e) => {
 		e.currentTarget.classList.toggle("rotated");
 	});
 
+	// Konami Code Easter Egg
+	var pattern = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
+	var current = 0;
+
+	var keyHandler = function (event) {
+
+		// If the key isn't in the pattern, or isn't the current key in the pattern, reset
+		if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
+			current = 0;
+			return;
+		}
+
+		// Update how much of the pattern is complete
+		current++;
+
+		// If complete, alert and reset
+		if (pattern.length === current) {
+			current = 0;
+			document.querySelector("body").classList.add("animate");
+		}
+
+	};
+
+	// Listen for keydown events
+	document.addEventListener('keydown', keyHandler, false);
+
 })(jQuery);

src/assets/sass/base/_page.scss

@@ -41,9 +41,11 @@ body {
   @include vendor(
     "background-image",
     (
-      "linear-gradient(45deg, #{_palette(accent)} 15%, #{_palette(accent1)} 29%, #{_palette(accent2)} 43%, #{_palette(accent3)} 57%, #{_palette(accent4)} 71%, #{_palette(accent5) 85%})"
+      "linear-gradient(45deg,#{_palette(accent)} 0.00%,#{_palette(accent1)} 6.67%,#{_palette(accent2)} 13.33%,#{_palette(accent3)} 20.00%,#{_palette(accent4)} 26.67%,#{_palette(accent5)} 33.33%,#{_palette(accent4)} 40.00%,#{_palette(accent3)} 46.67%,#{_palette(accent2)} 53.33%,#{_palette(accent1)} 60.00%,#{_palette(accent)} 66.67%,#{_palette(accent1)} 73.33%,#{_palette(accent2)} 80.00%,#{_palette(accent3)} 86.67%,#{_palette(accent4)} 93.33%,#{_palette(accent5)} 100.00%)"
     )
   );
+  background-size: 300% 300%;
+  background-position: 100% 0%;
 
   // Stops initial animations until page loads.
   &.is-preload {
@@ -54,4 +56,17 @@ body {
       @include vendor("transition", "none !important");
     }
   }
+
+  &.animate {
+    animation: ScrollBackground 5s linear infinite;
+  }
+}
+
+@keyframes ScrollBackground {
+  0% {
+    background-position: 100% 0%;
+  }
+  100% {
+    background-position: 0% 100%;
+  }
 }