update

app/home/DJHomeRoot.tsx

@@ -1,24 +1,50 @@
-import { defineComponent } from "vue";
+import { defineComponent, computed, ref, type Ref } from "vue";
 import useHead from "@/useHead.ts";
-import DJTooltip from "@/DJTooltip.tsx";
+import DJTooltip, { setupTooltip } from "@/DJTooltip.tsx";
 import DJEmail from "@/DJEmail.tsx";
 
 export default defineComponent({
     name: "app-root",
     setup() {
         useHead({ title: "DJ Ledda's Homepage" });
-        return () => (
+
+        const tooltipCarrier = ref<HTMLDivElement | null>(null);
+        setupTooltip({ carrier: tooltipCarrier });
+
+        const dude1Spinning = ref(false);
+        const dude2Spinning = ref(false);
+
+        function toggleDude(event: MouseEvent, dudeRef: Ref<boolean>) {
+            const dude = event.target as HTMLImageElement;
+            if (dudeRef.value) {
+                dude.addEventListener("animationiteration", function listener() {
+                    dudeRef.value = false;
+                    dude.removeEventListener("animationiteration", listener as EventListenerOrEventListenerObject);
+                });
+            } else {
+                dudeRef.value = true;
+            }
+        }
+
+        const shaking = computed(() => dude1Spinning.value || dude2Spinning.value);
+
+        return () => <>
+            <div ref={tooltipCarrier} class="tooltip-carrier" />
             <div class="supercontainer">
-                <div class="shakeable">
+                <div class={{ shakeable: true, shakeMe: shaking.value }}>
                     <div class="title_name">
                         <DJTooltip tooltip="I wonder what he's listening to?">
-                            <img src="/home/img/dj.gif" alt="dj legt krasse Mucke auf" class="dude" />
+                            <img src="/home/img/dj.gif" alt="dj legt krasse Mucke auf" 
+                                 class={{ dude: true, spinMe: dude1Spinning.value }} 
+                                 onClick={ (e) => toggleDude(e, dude1Spinning)} />
                         </DJTooltip>
                         <DJTooltip tooltip="Easily the coolest guy out there.">
                             <span>DJ Ledda</span>
                         </DJTooltip>
                         <DJTooltip tooltip="I once heard this guy played at revs.">
-                            <img src="/home/img/dj.gif" alt="dj laying down some sick beats" class="dude" />
+                            <img src="/home/img/dj.gif" alt="dj laying down some sick beats" 
+                                 class={{ dude: true, spinMe: dude2Spinning.value }} 
+                                 onClick={ (e) => toggleDude(e, dude2Spinning) } />
                         </DJTooltip>
                     </div>
                     <div class="main">
@@ -71,6 +97,6 @@ export default defineComponent({
                     <div id="tooltipCarrier"></div>
                 </div>
             </div>
-        );
+        </>;
     },
 });

app/home/client.ts

@@ -1,4 +1,4 @@
 import { createSSRApp } from "vue";
-import App from "@/home/App.tsx";
+import DJHomeRoot from "@/home/DJHomeRoot.tsx";
 
-createSSRApp(App).mount("#app-root");
+createSSRApp(DJHomeRoot).mount("#app-root");

app/home/server.ts

@@ -1,7 +1,7 @@
 import { createSSRApp } from "vue";
-import App from "@/home/App.tsx";
+import DJHomeRoot from "@/home/DJHomeRoot.tsx";
 
 export default function createApp() {
-    const app = createSSRApp(App);
+    const app = createSSRApp(DJHomeRoot);
     return { app, router: null };
 }