@sansavision/create-pulse 0.1.0-alpha.10 → 0.1.0-alpha.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sansavision/create-pulse",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.12",
   "description": "Scaffold a new Pulse application",
   "main": "dist/index.js",
   "bin": {

package/templates/react-all-features/src/App.tsx

@@ -69,12 +69,39 @@ export default function App() {
 
     const broadcastAction = useCallback((action: string, time: number) => {
         logEvent(`SEND: ${action} @ ${time.toFixed(2)}s`);
-        const msg = { action, time, ts: Date.now() };
+        const sendTs = Date.now();
+        const msg = { action, time, ts: sendTs };
         broadcast(msg);
 
-        // NOTE: We do NOT set peerTime here. The message travels through the
-        // Pulse relay and echoes back via handleSyncMessage, which updates
-        // peerTime. This gives us real drift and real delay measurements.
+        // Single-tab simulation: defer peerTime update by the measured relay
+        // round-trip so that drift is visible and realistic. In a real
+        // multi-tab setup the relay echo handler (handleSyncMessage) updates
+        // peerTime — but since the relay does not echo back to the sender,
+        // we simulate it here with the actual measured delay.
+        const simulatedDelay = delayHistoryRef.current.length > 0
+            ? delayHistoryRef.current[delayHistoryRef.current.length - 1]
+            : 4; // sensible default ~4ms first message
+
+        setTimeout(() => {
+            if (action === 'tick') {
+                setPeerTime(time);
+            } else if (action === 'play') {
+                setIsPlaying(true);
+                setPeerTime(time);
+            } else if (action === 'pause') {
+                setIsPlaying(false);
+                setPeerTime(time);
+            } else if (action === 'seek') {
+                setPeerTime(time);
+            }
+        }, simulatedDelay);
+
+        // Measure delay after the event loop processes the send
+        setTimeout(() => {
+            const delay = Date.now() - sendTs;
+            setLastDelay(delay);
+            delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), delay];
+        }, 0);
     }, [broadcast, logEvent]);
 
     // Computed delay stats

package/templates/react-all-features/src/components/GameSync.tsx

@@ -207,7 +207,13 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
             // Send to peers
             broadcast(payload);
 
-            // Delay is measured in handleSyncMessage when the relay echoes back
+            // Delay is measured in handleSyncMessage when the relay echoes back.
+            // Also measure locally via deferred setTimeout for single-tab demos.
+            setTimeout(() => {
+                const delay = Date.now() - sendTs;
+                setLastDelay(delay);
+                delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), delay];
+            }, 0);
 
             // Interpolate fallback for when broadcast doesn't echo locally fast enough
             const rv = remoteViewRef.current;

package/templates/react-all-features/src/components/ServerMetrics.tsx

@@ -101,7 +101,12 @@ export function ServerMetrics({ useChannel, logEvent }: ServerMetricsProps) {
             // Normally the server does this, here we do it so the demo "just works" locally
             broadcast(fakeMetrics);
 
-            // Delay is measured in handleMessage when the relay echoes back
+            // Measure delay via deferred setTimeout for single-tab demos
+            setTimeout(() => {
+                const delay = Date.now() - sendTs;
+                setLastDelay(delay);
+                delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), delay];
+            }, 0);
         }, 1000);
 
         return () => clearInterval(interval);

package/templates/react-watch-together/src/App.tsx

@@ -77,12 +77,40 @@ export default function App() {
 
     const broadcastAction = useCallback((action: string, time: number) => {
         logEvent(`SEND: ${action} @ ${time.toFixed(2)}s`);
-        const msg = { action, time, ts: Date.now() };
+        const sendTs = Date.now();
+        const msg = { action, time, ts: sendTs };
         broadcast(msg);
 
-        // NOTE: We do NOT set peerTime here. The message travels through the
-        // Pulse relay and echoes back via handleSyncMessage, which updates
-        // peerTime. This gives us real drift and real delay measurements.
+        // Single-tab simulation: defer peerTime update by the measured relay
+        // round-trip so that drift is visible and realistic. In a real
+        // multi-tab setup the relay echo handler (handleSyncMessage) updates
+        // peerTime — but since the relay does not echo back to the sender,
+        // we simulate it here with the actual measured delay.
+        const simulatedDelay = delayHistoryRef.current.length > 0
+            ? delayHistoryRef.current[delayHistoryRef.current.length - 1]
+            : 4; // sensible default ~4ms first message
+
+        setTimeout(() => {
+            if (action === 'tick') {
+                setPeerTime(time);
+            } else if (action === 'play') {
+                setIsPlaying(true);
+                setPeerTime(time);
+            } else if (action === 'pause') {
+                setIsPlaying(false);
+                setPeerTime(time);
+            } else if (action === 'seek') {
+                setPeerTime(time);
+            }
+        }, simulatedDelay);
+
+        // Measure delay after the event loop processes the send (captures
+        // real serialization + WebSocket write time, not synchronous 0).
+        setTimeout(() => {
+            const delay = Date.now() - sendTs;
+            setLastDelay(delay);
+            delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), delay];
+        }, 0);
     }, [broadcast, logEvent]);
 
     const handleQualityChange = useCallback((quality: typeof QUALITY_OPTIONS[0]) => {