make confetti tied to award and make it more cancerous

files/assets/css/click_confetti.css

@@ -5,17 +5,15 @@
 	}
 }
 
-button {
-	position: relative;
+.click-confetti {
+	position: fixed;
+	animation: bang 700ms ease-out forwards;
 }
-.btn-confetti {
-	position: absolute;
-	display: block;
-	left: 50%;
-	top: 0;
+
+.click-confetti > i {
+	position: fixed;
 	width: 3px;
 	height: 8px;
-	background: red;
 	animation: bang 700ms ease-out forwards;
-	opacity: 0
+	opacity: 0;
 }

files/assets/events/bday/js/btn-confetti.js

@@ -1,22 +0,0 @@
-for (const btn of document.getElementsByTagName('button')) {
-	btn.addEventListener('click', function() {
-		function random(max){
-			return Math.random() * (max - 0) + 0;
-		}
-
-		const c = document.createElement('i');
-		for (let i = 0; i < 100; i++) {
-			const styles = 'transform: translate3d(' + (random(500) - 250) + 'px, ' + (random(200) - 150) + 'px, 0) rotate(' + random(360) + 'deg);\
-						background: hsla('+random(360)+',100%,50%,1)'
-			
-			const e = document.createElement("i");
-			e.style.cssText = styles.toString();
-			e.classList.add('btn-confetti')
-			c.appendChild(e);
-		}
-		btn.appendChild(c);
-		setTimeout(function() {
-			btn.removeChild(c)
-		}, 700)
-	})
-}

files/assets/js/click_confetti.js

@@ -0,0 +1,20 @@
+document.addEventListener('click', function(e) {
+	function random(max){
+		return Math.random() * (max - 0) + 0;
+	}
+
+	const c = document.createElement('div');
+	c.classList.add('click-confetti')
+	c.style.top = e.clientY + 'px';
+	c.style.left = e.clientX + 'px';
+	for (let i = 0; i < 100; i++) {		
+		const e = document.createElement("i");
+		e.style.transform = 'translate3d(' + (random(500) - 250) + 'px, ' + (random(200) - 150) + 'px, 0) rotate(' + random(360) + 'deg)'
+		e.style.background = `hsla(${random(360)},100%,50%,1)`
+		c.appendChild(e);
+	}
+	document.body.appendChild(c);
+	setTimeout(function() {
+		document.body.removeChild(c)
+	}, 700)
+})

files/templates/root.html

@@ -43,9 +43,9 @@
 			<script defer src="{{'events/homoween/js/jumpscare.js' | asset}}"></script>
 		{% endif %}
 
-		{% if IS_BDAY() and not (v and v.poor) %}
-			<link rel="stylesheet" href="{{('events/bday/css/btn-confetti.css') | asset}}">
-			<script defer src="{{'events/bday/js/btn-confetti.js' | asset}}"></script>
+		{% if (IS_BDAY() or p and p.award_count("confetti", v)) and not (v and v.poor) %}
+			<link rel="stylesheet" href="{{('css/click_confetti.css') | asset}}">
+			<script defer src="{{'js/click_confetti.js' | asset}}"></script>
 		{% endif %}
 
 		<input hidden id="gnonce" value="{{g.nonce}}">