replace hp with clapper

Signed-off-by: Naman Sood <mail@nsood.in>

README.md

@@ -5,7 +5,7 @@ This is the code for my personal website and resume. The main branch of this rep
 ## Cool things that I never get to brag about
 
 * The header section of the website always correctly indicates my age, as long as you have JavaScript enabled. It will calculate and display my age based on my most recent birthday.
-* There is a dark mode in this website, accessible by typing `nox`. Light mode can be restored by typing `lumos`.
+* There is a dark mode in this website, accessible by typing `clapoff`. Light mode can be restored by typing `clapon`.
 * The fading gradient background thing took a surprising amount of head-banging to figure out. It's a fixed-position element in the background that fades in/out the right backgrounds based on scroll offset using `opacity` to mimic transitions (since you can't transition `background-image`s).
 
 ## License

css/style.css

@@ -17,6 +17,9 @@ body.dark-mode {
 body.dark-mode .image-container img {
   filter: invert(100%);
 }
+body.dark-mode .clapper {
+  filter: invert(100%);
+}
 body.dark-mode .bg {
   opacity: 0 !important;
 }
@@ -451,6 +454,39 @@ footer {
   will-change: opacity;
 }
 
+.clapper {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 10rem;
+  line-height: 10rem;
+  text-align: center;
+  z-index: 100000;
+  font-size: 5rem;
+  pointer-events: none;
+  transition: none;
+  opacity: 0;
+}
+
+.clapper.clapping {
+  animation: clap 1s ease-in-out;
+}
+
+@keyframes clap {
+  0% {
+    opacity: 1;
+  }
+  49% {
+    opacity: 0;
+  }
+  51% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 @media (min-width: 1800px) {
   html {
     font-size: 20px;

css/style.scss

@@ -18,6 +18,10 @@ body.dark-mode {
 		filter: invert(100%);
 	}
 
+	.clapper {
+		filter: invert(100%);
+	}
+
 	.bg {
 		opacity: 0 !important;
 	}
@@ -522,6 +526,32 @@ footer {
 	}
 }
 
+.clapper {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 10rem;
+	line-height: 10rem;
+	text-align: center;
+	z-index: 100000;
+	font-size: 5rem;
+	pointer-events: none;
+	transition: none;
+	opacity: 0;
+}
+
+.clapper.clapping {
+	animation: clap 1s ease-in-out;
+}
+
+@keyframes clap {
+	0% { opacity: 1; }
+	49% { opacity: 0; }
+	51% { opacity: 1; }
+	100% { opacity: 0; }
+}
+
 @media(min-width: 1800px) {
   html {
     font-size: 20px;

index.html

@@ -137,6 +137,8 @@
 
 <div class="bg-scroller"></div>
 
+<div class="clapper">👏👏👏</div>
+
 <script src="js/jquery-3.3.1.min.js"></script>
 <script src="js/script.js"></script>
 </body>

js/script.js

@@ -290,33 +290,38 @@ $('.age').html(`${tens[Math.floor(age / 10)]} ${ones[age % 10]}`);
 // easter egg
 
 var sequences = [
-	[ 78, 79, 88 ],
-	[ 76, 85, 77, 79, 83 ],
+	[ 99, 108, 97, 112, 111, 102, 102 ],
+	[ 99, 108, 97, 112, 111, 110 ],
 ];
 
 var mode = 0;
 
 var eei = 0;
 
-$(window).on('keyup', function(e) {
+$(window).on('keypress', function(e) {
+	const clapper = document.querySelector('.clapper');
 	var sequence = sequences[mode];
 	if(e.keyCode == sequence[eei]) {
 		eei++;
 	}
-
 	else {
 		eei = 0;
+		console.log(`expected ${sequence[eei]}, got ${e.keyCode}`);
 	}
 
 	if(eei == sequence.length) {
-		if(mode === 1) {
-			$('body').removeClass('dark-mode');
-			mode = 0;
-		}
-		else {
-			$('body').addClass('dark-mode');
-			mode = 1;
-		}
-		eei = 0;
+		clapper.classList.toggle('clapping');
+		setTimeout(() => {
+			if(mode === 1) {
+				$('body').removeClass('dark-mode');
+				mode = 0;
+			}
+			else {
+				$('body').addClass('dark-mode');
+				mode = 1;
+			}
+			eei = 0;
+			setTimeout(() => clapper.classList.toggle('clapping'), 500);
+		}, 500);
 	}
 })