Broadcasts

// Send to everyone in the room
client.notifications.broadcast('cursor-click', { x: 100, y: 200 });

// Send to specific users
client.notifications.broadcast('ping', { message: 'hello' }, ['user-002']);

client.notifications.on('cursor-click', (data) => {
  console.log('Click at:', data.x, data.y);
});

client.notifications.once('welcome', (data) => {
  showWelcomeMessage(data.message);
});

const handler = (data) => console.log(data);
const offHandler = client.notifications.on('cursor-click', handler);

// Later, remove the listener
client.notifications.off('cursor-click', handler);
// Alternatively
offHandler();

// Send a floating emoji
function sendEmoji(emoji: string, x: number, y: number) {
  client.notifications.broadcast('emoji', { emoji, x, y });
}

// Render floating emojis from other users
client.notifications.on('emoji', ({ emoji, x, y }) => {
  const el = document.createElement('span');
  el.textContent = emoji;
  el.className = 'floating-emoji';
  el.style.left = `${x}px`;
  el.style.top = `${y}px`;
  document.body.appendChild(el);
  setTimeout(() => el.remove(), 2000);
});

// Notify a specific user
client.notifications.broadcast(
  'mention',
  { from: client.userId, message: 'Check this out!' },
  ['user-002']
);

// Listen for mentions
client.notifications.on('mention', ({ from, message }) => {
  const sender = client.users.active.get(from) ?? client.users.all.get(from);
  showNotification(`${sender?.name}: ${message}`);
});