1import yorkie, { DocEventType } from '@yorkie-js/sdk';
2import { getRandomName, getRandomColor } from './util.js';
3
4async function main() {
5  const client = new yorkie.Client(import.meta.env.VITE_YORKIE_API_ADDR, {
6    apiKey: import.meta.env.VITE_YORKIE_API_KEY,
7  });
8  await client.activate();
9  const doc = new yorkie.Document('profile-stack', {
10    enableDevtools: true,
11  });
12  doc.subscribe('presence', (event) => {
13    if (event.type !== DocEventType.PresenceChanged) {
14      displayPeerList(doc.getPresences(), client.getID());
15    }
16  });
17  await client.attach(doc, {
18    // set the client's name and color to presence.
19    initialPresence: {
20      name: getRandomName(),
21      color: getRandomColor(),
22    },
23  });
24
25  window.addEventListener('beforeunload', () => {
26    client.deactivate({ keepalive: true });
27  });
28}
29
30const MAX_PEER_VIEW = 4;
31const createPeer = (name, color, type) => {
32  const $peer = document.createElement('div');
33  $peer.className = 'peer';
34
35  if (type === 'main') {
36    $peer.innerHTML = `
37    <div class="profile">
38      <img src="./images/profile-${color}.svg" alt="profile" class="profile-img"/>
39    </div>
40    <div class="name speech-bubbles">${name}</div>
41  `;
42  } else if (type === 'more') {
43    $peer.innerHTML = `
44    <img src="./images/profile-${color}.svg" alt="profile" class="profile-img"/>
45    <span class="name">${name}</span>
46  `;
47  }
48  return $peer;
49};
50
51const displayPeerList = (peers, myClientID) => {
52  const peerList = peers.filter(
53    ({ clientID: id, presence }) =>
54      id !== myClientID && presence.name && presence.color,
55  );
56  const peerCount = peerList.length + 1;
57  const hasMorePeers = peerCount > MAX_PEER_VIEW;
58  const $peerList = document.getElementById('peerList');
59  $peerList.innerHTML = '';
60  const $peerMoreList = document.createElement('div');
61  $peerMoreList.className = 'peer-more-list speech-bubbles';
62
63  const myPresence = peers.find(
64    ({ clientID: id }) => id === myClientID,
65  ).presence;
66  const $me = createPeer(`${myPresence.name} (me)`, myPresence.color, 'main');
67  $me.classList.add('me');
68  $peerList.appendChild($me);
69  peerList.forEach((peer, i) => {
70    const { name, color } = peer.presence;
71    if (i < MAX_PEER_VIEW - 1) {
72      const $peer = createPeer(name, color, 'main');
73      $peerList.appendChild($peer);
74      return;
75    }
76    const $peer = createPeer(name, color, 'more');
77    $peerMoreList.appendChild($peer);
78  });
79
80  if (hasMorePeers) {
81    const $peer = document.createElement('div');
82    $peer.className = 'peer more';
83    $peer.innerHTML = `
84      <div class="profile">
85      +${peerCount - MAX_PEER_VIEW}
86      </div>
87    `;
88    $peer.appendChild($peerMoreList);
89    $peerList.appendChild($peer);
90  }
91};
92
93main();