Introduce Unique Monsters

app/[slug]/page.tsx

@@ -43,7 +43,7 @@ export default async function ({
                 </div>
                 <div className="w-full flex flex-col gap-2 items-center justify-center">
                     <div className="flex items-center relative w-full pt-8 pb-2">
-                        <div className="mx-auto w-40 h-40 aspect-square border bg-white rounded-full overflow-hidden">
+                        <div className="mx-auto w-40 h-40 aspect-square border bg-white rounded-full overflow-hidden z-10">
                             <img
                                 src={enstate.avatar}
                                 alt="profile"

app/global.css

@@ -30,3 +30,50 @@
         opacity: 0;
     }
 }
+
+.animate-bob {
+    animation: bob 1s ease-in-out forwards;
+}
+
+@keyframes bob {
+    10%,
+    90% {
+        transform: translate3d(-1px, 0, 0);
+    }
+
+    20%,
+    80% {
+        transform: translate3d(2px, 0, 0);
+    }
+
+    30%,
+    50%,
+    70% {
+        transform: translate3d(-4px, 0, 0);
+    }
+
+    40%,
+    60% {
+        transform: translate3d(4px, 0, 0);
+    }
+}
+
+.animate-monster-out {
+    animation: monster-out 0.5s ease-in-out forwards;
+}
+
+@keyframes monster-out {
+    0% {
+        transform: scale(1) translateY(0);
+    }
+    10% {
+        transform: scale(1.05) translateY(-10%);
+    }
+    99% {
+        transform: scale(0.95) translateY(100%) rotate(5deg);
+    }
+    100% {
+        transform: scale(0);
+        opacity: 0;
+    }
+}

components/Monsters/Monster.tsx

@@ -0,0 +1,48 @@
+'use client';
+/* eslint-disable sonarjs/no-identical-functions */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+import clsx from 'clsx';
+import { FC, useEffect, useMemo, useState } from 'react';
+
+export const Monster: FC<{ src: string; className: string }> = ({
+    src,
+    className,
+}) => {
+    const health = useMemo(() => Math.round(Math.random() * 10), [0]);
+    const [blinkAnimationTriggered, setBlinkAnimationTriggered] =
+        useState(false);
+    const [clickCount, setClickCount] = useState(0);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setBlinkAnimationTriggered(true);
+            setTimeout(() => {
+                setBlinkAnimationTriggered(false);
+            }, 250);
+        }, 3000 + Math.random() * 3000);
+
+        return () => clearInterval(interval);
+    }, [0]);
+
+    return (
+        <img
+            src={src}
+            alt=""
+            className={clsx(
+                blinkAnimationTriggered ? 'animate-bob' : '',
+                clickCount > health ? 'animate-monster-out' : '',
+                className
+            )}
+            onClick={() => {
+                setBlinkAnimationTriggered(true);
+                setClickCount(clickCount + 1);
+                setTimeout(() => {
+                    setBlinkAnimationTriggered(false);
+                }, 250);
+            }}
+        />
+    );
+};

components/Monsters/Overlay.tsx

@@ -1,5 +1,7 @@
 import { FC } from 'react';
 
+import { Monster } from './Monster';
+
 export const MonsterOverlay: FC = () => {
     return (
         <div className="aspect-[300/200] max-h-full max-w-full mx-auto object-contain relative">
@@ -8,36 +10,27 @@ export const MonsterOverlay: FC = () => {
                 alt="frensday"
                 className="w-full h-full object-contain"
             /> */}
-            <img
+            <Monster
                 src="/monster_1.svg"
-                alt=""
-                className="absolute top-0 right-3.5"
+                className="absolute top-0 right-3.5 z-10"
             />
-            <img
+            <Monster
                 src="/monster_2.svg"
-                alt=""
                 className="absolute bottom-4 right-1.5"
             />
-            <img
+            <Monster
                 src="/monster_3.svg"
-                alt=""
                 className="absolute bottom-2 left-0.5"
             />
-            <img
+            <Monster
                 src="/monster_4.svg"
-                alt=""
                 className="absolute bottom-2 left-9"
             />
-            <img
+            <Monster
                 src="/monster_5.svg"
-                alt=""
-                className="absolute top-3 left-[69px] -z-10"
-            />
-            <img
-                src="/monster_6.svg"
-                alt=""
-                className="absolute top-1.5 left-2"
+                className="absolute top-3 left-[69px]"
             />
+            <Monster src="/monster_6.svg" className="absolute top-1.5 left-2" />
         </div>
     );
 };