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