Step 11 - presence
1 min read
Add live presence on top of the presence subcollection (doc id = uid, enforced by rules).
Publishing:
one pushPresence() writes my cursor position (world coords), active tool draft, laser state, viewport center + scale, name and color. Throttle with a 55 ms minimum gap plus a trailing call, and a 4-second heartbeat interval so idle users stay "present". Downsample any in-progress pen draft to max 200 points before broadcasting. Clear my presence doc on beforeunload.
Consuming:
- Filter stale peers (updatedAt older than ~10 s).
- Remote cursors: draw as name-tagged pointers in the screen-space overlay pass, EASED toward their latest position each frame. Run the easing in a self-terminating rAF loop: keep animating only while any cursor is still settling, then stop scheduling frames (do not run a permanent 60fps loop on an idle board).
- Live drafts: render other users' in-progress pen strokes faintly so drawing feels shared before the stroke commits.
- Laser pointer tool: while active, publish laser points; render trails that fade over 3000 ms, drawn as ~10 stacked strokes at alpha 0.09 with a brighter head dot. Trail points expire client-side.
Identity:
signed-in users use their profile name; anonymous guests get a random friendly animal name persisted in localStorage and a deterministic color derived from their uid (colorFromSeed). Guests can rename themselves from the participants panel.
Participants panel:
avatar chips of everyone present.
Acceptance: cursors from a second window glide smoothly and disappear on close; drafts stream while drawing; the laser leaves a fading comet trail; an idle board schedules zero animation frames.
Discussion
0 commentsNo comments yet. Start the discussion.