correct sprite cropping

src/routes/scene/+page.svelte

@@ -29,6 +29,7 @@
   let showFullscreenModal = $state(false);
   let fullscreenImageSrc = $state("");
   let headpatSenderId = $state<string | null>(null);
+  let headpatTimer: ReturnType<typeof setTimeout> | null = null;
 
   // Queue for pending headpats (when modal is already showing)
   let headpatQueue = $state<Array<{ userId: string; content: string }>>([]);
@@ -41,12 +42,23 @@
       fullscreenImageSrc = `data:image/gif;base64,${next.content}`;
       headpatSenderId = next.userId;
       showFullscreenModal = true;
+      scheduleHeadpatDismiss();
     } else {
       fullscreenImageSrc = "";
       headpatSenderId = null;
     }
   }
 
+  function scheduleHeadpatDismiss() {
+    if (headpatTimer) {
+      clearTimeout(headpatTimer);
+    }
+    headpatTimer = setTimeout(() => {
+      showFullscreenModal = false;
+      headpatTimer = null;
+    }, 3000);
+  }
+
   function getHeadpatSenderName(userId: string | null): string {
     if (!userId) return "";
     const friend = getFriendById(userId);
@@ -57,32 +69,44 @@
   $effect(() => {
     for (const [userId, interaction] of $receivedInteractions) {
       if (interaction.type === INTERACTION_TYPE_HEADPAT) {
-        // Deduplicate: replace existing headpat from same user instead of queueing
-        const existingIndex = headpatQueue.findIndex((h) => h.userId === userId);
-        if (existingIndex >= 0) {
-          headpatQueue[existingIndex] = { userId, content: interaction.content };
-        } else if (showFullscreenModal) {
-          headpatQueue.push({ userId, content: interaction.content });
+        if (showFullscreenModal) {
+          // Queue the headpat for later (deduplicate by replacing existing from same user)
+          const existingIndex = headpatQueue.findIndex((h) => h.userId === userId);
+          if (existingIndex >= 0) {
+            headpatQueue[existingIndex] = { userId, content: interaction.content };
+          } else {
+            headpatQueue.push({ userId, content: interaction.content });
+          }
+          scheduleHeadpatDismiss();
         } else {
+          // Show immediately and clear from store
           clearInteraction(userId);
           fullscreenImageSrc = `data:image/gif;base64,${interaction.content}`;
           headpatSenderId = userId;
           showFullscreenModal = true;
+          scheduleHeadpatDismiss();
         }
       }
     }
   });
 
-  // Clear headpat interaction when modal closes, then process next in queue
+  // When modal closes, process next headpat in queue
   $effect(() => {
     if (!showFullscreenModal && headpatSenderId) {
-      clearInteraction(headpatSenderId);
       headpatSenderId = null;
-      // Process next headpat in queue
       processNextHeadpat();
     }
   });
 
+  $effect(() => {
+    return () => {
+      if (headpatTimer) {
+        clearTimeout(headpatTimer);
+        headpatTimer = null;
+      }
+    };
+  });
+
   function getFriendById(userId: string) {
     const friend = $appData?.friends?.find((f) => f.friend?.id === userId);
     return friend?.friend;

src/routes/scene/components/FullscreenModal.svelte

@@ -20,22 +20,6 @@
     senderName = "",
   }: { imageSrc: string; visible: boolean; senderName?: string } = $props();
 
-  let timer: ReturnType<typeof setTimeout> | null = null;
-
-  $effect(() => {
-    if (visible) {
-      timer = setTimeout(() => {
-        visible = false;
-      }, 3000);
-    }
-
-    return () => {
-      if (timer) {
-        clearTimeout(timer);
-        timer = null;
-      }
-    };
-  });
 </script>
 
 {#if visible}