friends cursor broadcast system (?)

src/events/cursor.ts

@@ -2,13 +2,24 @@ import { invoke } from "@tauri-apps/api/core";
 import { listen, type UnlistenFn } from "@tauri-apps/api/event";
 import { writable } from "svelte/store";
 import type { CursorPositions } from "../types/bindings/CursorPositions";
+import type { CursorPosition } from "../types/bindings/CursorPosition";
 
 export let cursorPositionOnScreen = writable<CursorPositions>({
   raw: { x: 0, y: 0 },
   mapped: { x: 0, y: 0 },
 });
 
-let unlisten: UnlistenFn | null = null;
+export type FriendCursorPosition = {
+  userId: string;
+  position: CursorPosition;
+};
+
+export let friendsCursorPositions = writable<Record<string, CursorPosition>>(
+  {},
+);
+
+let unlistenCursor: UnlistenFn | null = null;
+let unlistenFriendCursor: UnlistenFn | null = null;
 let isListening = false;
 
 /**
@@ -26,9 +37,44 @@ export async function initCursorTracking() {
     await invoke("start_cursor_tracking");
 
     // Listen to cursor position events (each window subscribes independently)
-    unlisten = await listen<CursorPositions>("cursor-position", (event) => {
-      cursorPositionOnScreen.set(event.payload);
-    });
+    unlistenCursor = await listen<CursorPositions>(
+      "cursor-position",
+      (event) => {
+        cursorPositionOnScreen.set(event.payload);
+      },
+    );
+
+    // Listen to friend cursor position events
+    unlistenFriendCursor = await listen<[FriendCursorPosition]>(
+      "friend-cursor-position",
+      (event) => {
+        // payload might be a string JSON if it comes directly from rust_socketio Payload::Text
+        let payload = event.payload;
+
+        if (typeof payload === "string") {
+          try {
+            payload = JSON.parse(payload);
+          } catch (e) {
+            console.error(
+              "[Cursor] Failed to parse friend cursor position payload:",
+              e,
+            );
+            return;
+          }
+        }
+
+        // Rust socket.io client returns payload as an array of arguments
+        // Since we only send one argument { userId, position }, it's the first element
+        const data = Array.isArray(payload) ? payload[0] : payload;
+
+        friendsCursorPositions.update((current) => {
+          return {
+            ...current,
+            [data.userId]: data.position,
+          };
+        });
+      },
+    );
 
     isListening = true;
   } catch (err) {
@@ -42,11 +88,15 @@ export async function initCursorTracking() {
  * Note: This doesn't stop the Rust-side tracking, just stops this window from receiving events.
  */
 export function stopCursorTracking() {
-  if (unlisten) {
-    unlisten();
-    unlisten = null;
-    isListening = false;
+  if (unlistenCursor) {
+    unlistenCursor();
+    unlistenCursor = null;
   }
+  if (unlistenFriendCursor) {
+    unlistenFriendCursor();
+    unlistenFriendCursor = null;
+  }
+  isListening = false;
 }
 
 // Handle HMR (Hot Module Replacement) cleanup

src/routes/scene/+page.svelte

@@ -1,5 +1,14 @@
 <script lang="ts">
-  import { cursorPositionOnScreen } from "../../events/cursor";
+  import {
+    cursorPositionOnScreen,
+    friendsCursorPositions,
+  } from "../../events/cursor";
+  import { appData } from "../../events/app-data";
+
+  function getFriendName(userId: string) {
+    const friend = $appData?.friends?.find((f) => f.friend.id === userId);
+    return friend ? friend.friend.name : userId.slice(0, 8) + "...";
+  }
 </script>
 
 <div class="w-svw h-svh p-4 relative">
@@ -19,6 +28,20 @@
             .mapped.y})
         </span>
       </div>
+
+      {#if Object.keys($friendsCursorPositions).length > 0}
+        <div class="mt-4 flex flex-col gap-2">
+          <p class="text-sm font-semibold opacity-75">Friends Online</p>
+          <div>
+            {#each Object.entries($friendsCursorPositions) as [userId, position]}
+              <div class="bg-base-200/50 p-2 rounded text-xs text-left">
+                <span class="font-bold">{getFriendName(userId)}</span>
+                <span class="font-mono ml-2">({position.x}, {position.y})</span>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/if}
     </div>
   </div>
 </div>