snap-pair

// Controller: batch normalized points every 33 ms (≤30 msg/s, ≤64 points), addressed to the host
pad.addEventListener('pointermove', (e) => points.push([e.offsetX / w, e.offsetY / h]));
setInterval(() => {
  if (!points.length) return;
  const to = transport.room.hostId;
  transport.send({ type: 'stroke', payload: { id, color, width: 4, points: points.splice(0, 64) }, to });
}, 33);

// Host: draw every peer's strokes (clamp points to 0..1 first)
transport.onMessage((m) => m.type === 'stroke' && drawPath(m.from, m.payload));

// Controller: a tap or a swipe becomes a burst (throttled to ≤10 msg/s)
pad.addEventListener('pointerup', throttle((e) => {
  const power = swipePower(e); // 0..1
  transport.send({ type: 'blast', payload: { x: e.offsetX / w, y: e.offsetY / h, power, hue }, to: transport.room.hostId });
}, 100));

// Host: spawn particles on the big canvas
transport.onMessage((m) => m.type === 'blast' && emitter.burst(m.payload, m.from));

// Controller: type a short message, flick it to throw (≤2 msg/s)
form.onsubmit = (e) => {
  e.preventDefault();
  const { vx, vy } = lastFlick;
  transport.send({ type: 'throw', payload: { text: input.value.slice(0, 40), vx, vy, color }, to: transport.room.hostId });
  input.value = '';
};

// Host: messages fly onto the wall (validate and limit length on the host too)
transport.onMessage((m) => m.type === 'throw' && wall.add(sanitize(m.payload.text), m.payload));

// PartyKit + PIN: the host owns the state, phones only send votes
const [party] = useState(() => new PartyKitTransport({ host, pairing: 'pin', maxPlayers: 300, allowGuestState: false }));
const { room, createRoom, updateState } = useSnapPair({ transport: party, guest: { id: '', name } });

// Phone: vote once for the current question
party.send({ type: 'vote', payload: { questionId: room.state.questionId, choice: 2 }, to: room.hostId });

// Host: keep the latest vote per peer, publish the tally at most 4×/s
party.onMessage((m) => m.type === 'vote' && votes.set(m.from, m.payload.choice));
publishTally(() => updateState({ ...room.state, tally: countVotes(votes) }));

// Controller: send d-pad + buttons only when they change (≤60 msg/s)
let seq = 0, last = '';
function onInput({ x, y, buttons } /* x, y: -1 | 0 | 1; buttons: A = 1, B = 2 */) {
  const key = `${x},${y},${buttons}`;
  if (key === last) return;
  last = key;
  transport.send({ type: 'input', payload: { seq: ++seq, x, y, buttons }, to: room.hostId });
}

// Host: one player per peer id; drop out-of-order input by seq
transport.onMessage((m) => m.type === 'input' && players.get(m.from)?.setInput(m.payload));

import { ControllerWrapper, subscribeOrientation } from 'snap-pair-core';

// Controller: ControllerWrapper shows the iOS permission button and keeps the screen on
<ControllerWrapper transport={transport} motion wakeLock orientation="portrait">
  {({ motionPermission }) => motionPermission === 'granted' && <Tilt />}
</ControllerWrapper>;

// Inside <Tilt />: stream orientation, throttled to ≤30 msg/s
subscribeOrientation(throttle(({ beta, gamma }) =>
  transport.send({ type: 'motion', payload: { beta, gamma, shake: 0 }, to: transport.room.hostId }), 33));

// Host: steer the scene
transport.onMessage((m) => m.type === 'motion' && ship(m.from).steer(m.payload));

import { BroadcastChannelTransport } from 'snap-pair-core';

// Every window joins the same local room; the first one hosts
const t = new BroadcastChannelTransport({ pairing: 'code' });
await t.connect();

// Each window announces itself and picks its slice of the scene
await t.broadcast('hello', { id: t.peerId, index });

// Leader window: a clock so every window renders the same frame (≤60 msg/s)
setInterval(() => t.broadcast('tick', { t: performance.now(), scene }), 1000 / 60);

// Display windows: render their slice
t.onMessage((m) => m.type === 'tick' && renderSlice(m.payload, index));