add petting marsey

files/assets/css/main.css

@@ -7322,11 +7322,21 @@ button, .btn {
 	width: 32px;
 	height: 32px;
 	position: fixed;
-	pointer-events: none;
 	background-image: url('/i/marseko.webp?x=2');
 	image-rendering: pixelated;
 	background-position: -64px -32px;
 }
+#marseko-heart {
+	z-index: 1000000000000000;
+	width: 24px;
+	height: 24px;
+	position: fixed;
+	pointer-events: none;
+	background-image: url('/i/marseko-heart.webp?x=2');
+	background-size: cover;
+	left: 24px;
+	top: 0px;
+}
 
 .dots {
 	color: var(--primary) !important;

files/assets/js/marseko.js

@@ -1,4 +1,5 @@
 const marsekoEl = document.getElementById("marseko");
+const heartEl = document.getElementById("marseko-heart");
 
 function getInitialPosition(max) {
 	return Math.max(32, Math.floor(Math.random() * max));
@@ -176,6 +177,8 @@ function frame() {
 
 	marsekoEl.style.left = `${marsekoPosX}px`;
 	marsekoEl.style.top = `${marsekoPosY}px`;
+	heartEl.style.left = `${marsekoPosX+16}px`;
+	heartEl.style.top = `${marsekoPosY-16}px`;
 }
 
 document.onmousemove = (event) => {
@@ -183,3 +186,15 @@ document.onmousemove = (event) => {
 		mousePosY = event.clientY;
 	};
 window.marseykoInterval = setInterval(frame, 100);
+
+document.addEventListener('click', (event) => {
+	marsekoEl.style.removeProperty("pointer-events");
+	let elementClicked = document.elementFromPoint(event.clientX,event.clientY);
+	if(elementClicked.id === marsekoEl.id) {
+		heartEl.classList.remove("d-none");
+		setTimeout(() => {
+			heartEl.classList.add("d-none");
+		}, 2000);
+	}
+	marsekoEl.style.pointerEvents = "none";
+});

files/templates/root.html

@@ -46,6 +46,7 @@
 
 		{% if SITE_NAME == 'rDrama' %}
 			<div id="marseko"></div>
+			<div id="marseko-heart" class="d-none"></div>
 			<script defer src="{{'js/marseko.js' | asset}}"></script>
 		{% endif %}
 	</body>