multiplayer

labs/folk-shape.ts

@@ -1,3 +1,4 @@
+import { sync } from '@labs/folk-sync';
 import { getResizeCursorUrl, getRotateCursorUrl } from '@labs/utils/cursors';
 import { DOMRectTransform, DOMRectTransformReadonly, FolkElement, Point, TransformEvent, Vector } from '@lib';
 import { ResizeManager } from '@lib/resize-manger';
@@ -187,6 +188,7 @@ export class FolkShape extends FolkElement {
     return this.#rect.x;
   }
 
+  @sync()
   set x(x) {
     this.#previousRect.x = this.#rect.x;
     this.#rect.x = x;
@@ -197,6 +199,7 @@ export class FolkShape extends FolkElement {
     return this.#rect.y;
   }
 
+  @sync()
   set y(y) {
     this.#previousRect.y = this.#rect.y;
     this.#rect.y = y;
@@ -207,6 +210,7 @@ export class FolkShape extends FolkElement {
     return this.#rect.width;
   }
 
+  @sync()
   set width(width: Dimension) {
     if (width === 'auto') {
       resizeManager.observe(this, this.#onAutoResize);
@@ -225,6 +229,7 @@ export class FolkShape extends FolkElement {
     return this.#rect.height;
   }
 
+  @sync()
   set height(height: Dimension) {
     if (height === 'auto') {
       resizeManager.observe(this, this.#onAutoResize);
@@ -244,6 +249,7 @@ export class FolkShape extends FolkElement {
     return this.#rect.rotation;
   }
 
+  @sync()
   set rotation(rotation: number) {
     this.#previousRect.rotation = this.#rect.rotation;
     this.#rect.rotation = rotation;

labs/folk-sync.ts

@@ -0,0 +1,97 @@
+import PartySocket from 'partysocket';
+
+export class FolkSync extends HTMLElement {
+  static tagName = 'folk-sync';
+
+  #socket!: PartySocket;
+  #subscribers = new Map<string, Set<(value: any) => void>>();
+
+  connectedCallback() {
+    const room = this.getAttribute('room');
+    if (!room) {
+      console.warn('FolkSync: No room specified, using "default"');
+    }
+
+    this.#socket = new PartySocket({
+      host: 'folk-sync.orionreed.partykit.dev',
+      room: room ?? 'default',
+    });
+
+    this.#socket.addEventListener('message', (event) => {
+      try {
+        const { id, property, value } = JSON.parse(event.data);
+        if (!id || !property) {
+          console.warn('FolkSync: Received malformed message', event.data);
+          return;
+        }
+        const key = `${id}:${property}`;
+        this.#subscribers.get(key)?.forEach((callback) => callback(value));
+      } catch (e) {
+        console.error('FolkSync: Failed to process message', e);
+      }
+    });
+  }
+
+  sync(elementId: string, property: string, value: any) {
+    if (!this.#socket) {
+      console.warn('FolkSync: Attempting to sync before socket connection');
+      return;
+    }
+    if (!elementId) {
+      console.error('FolkSync: Cannot sync element without ID');
+      return;
+    }
+    this.#socket.send(JSON.stringify({ id: elementId, property, value }));
+  }
+
+  subscribe(elementId: string, property: string, callback: (value: any) => void) {
+    if (!elementId) {
+      console.error('FolkSync: Cannot subscribe without element ID');
+      return;
+    }
+    const key = `${elementId}:${property}`;
+    if (!this.#subscribers.has(key)) {
+      this.#subscribers.set(key, new Set());
+    }
+    this.#subscribers.get(key)!.add(callback);
+  }
+
+  disconnectedCallback() {
+    this.#socket?.close();
+    this.#subscribers.clear();
+  }
+}
+
+export function sync() {
+  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
+    const originalSet = descriptor.set;
+
+    descriptor.set = function (this: HTMLElement & { [key: string]: boolean }, value) {
+      if (!this.id) {
+        console.error('FolkSync: Element must have an ID to use @sync', this);
+        originalSet?.call(this, value);
+        return;
+      }
+
+      originalSet?.call(this, value);
+
+      const syncElement = this.closest('folk-sync') as FolkSync;
+      if (!syncElement) {
+        console.warn('FolkSync: Element must be inside a <folk-sync> to sync', this);
+        return;
+      }
+
+      // Set up subscription if we haven't already
+      if (!this[`_sync_sub_${propertyKey}`]) {
+        this[`_sync_sub_${propertyKey}`] = true;
+        syncElement.subscribe(this.id, propertyKey, (newValue) => {
+          originalSet?.call(this, newValue);
+        });
+      }
+
+      syncElement.sync(this.id, propertyKey, value);
+    };
+
+    return descriptor;
+  };
+}

labs/standalone/folk-sync.ts

@@ -0,0 +1,5 @@
+import { FolkSync } from '../folk-sync';
+
+customElements.define(FolkSync.tagName, FolkSync);
+
+export { FolkSync };

website/canvas/multiplayer-sync.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -25,26 +25,29 @@
     </style>
   </head>
   <body>
-    <folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
-    <folk-shape id="box2" x="200" y="350">Hello World</folk-shape>
-    <folk-event-propagator
-      source="#box1"
-      target="#box2"
-      trigger="click"
-      expression="textContent: to.textContent + '!'"
-    ></folk-event-propagator>
+    <folk-sync room="sync-test">
+      <folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
+      <folk-shape id="box2" x="200" y="350">Hello World</folk-shape>
+      <folk-event-propagator
+        source="#box1"
+        target="#box2"
+        trigger="click"
+        expression="textContent: to.textContent + '!'"
+      ></folk-event-propagator>
 
-    <folk-shape id="box3" x="350" y="200" width="30" height="30"></folk-shape>
-    <folk-shape id="box4" x="500" y="250" width="30" height="30"></folk-shape>
-    <folk-event-propagator
-      source="#box3"
-      target="#box4"
-      trigger="transform"
-      expression="y: from.x, 
+      <folk-shape id="box3" x="350" y="200" width="30" height="30"></folk-shape>
+      <folk-shape id="box4" x="500" y="250" width="30" height="30"></folk-shape>
+      <folk-event-propagator
+        source="#box3"
+        target="#box4"
+        trigger="transform"
+        expression="y: from.x, 
 rotation: from.x/10"
-    ></folk-event-propagator>
+      ></folk-event-propagator>
+    </folk-sync>
 
     <script type="module">
+      import '@labs/standalone/folk-sync.ts';
       import '@labs/standalone/folk-shape.ts';
       import '@labs/standalone/folk-event-propagator.ts';
     </script>