Step 11 - presence

1 min czytania

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.

Dyskusja

Komentarze: 0

Brak komentarzy. Rozpocznij dyskusję.