1import yorkie 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    // set the client's name and color to presence.
8    presence: {
9      name: getRandomName(),
10      color: getRandomColor(),
11    },
12  });
13  await client.activate();
14  const myClientID = client.getID();
15
16  client.subscribe((event) => {
17    if (event.type === 'peers-changed') {
18      // get presence of all clients connected to the Document.
19      // {<clientID>: {name: string, color: string}}
20      const peers = event.value[doc.getKey()];
21
22      // show peer list
23      displayPeerList(peers, myClientID);
24    }
25  });
26
27  const doc = new yorkie.Document('profile-stack');
28  await client.attach(doc);
29
30  window.addEventListener('beforeunload', () => {
31    client.deactivate();
32  });
33}
34
35const MAX_PEER_VIEW = 4;
36const createPeer = (name, color, type) => {
37  const $peer = document.createElement('div');
38  $peer.className = 'peer';
39
40  if (type === 'main') {
41    $peer.innerHTML = `
42    <div class="profile">
43      <img src="./images/profile-${color}.svg" alt="profile" class="profile-img"/>
44    </div>
45    <div class="name speech-bubbles">${name}</div>
46  `;
47  } else if (type === 'more') {
48    $peer.innerHTML = `
49    <img src="./images/profile-${color}.svg" alt="profile" class="profile-img"/>
50    <span class="name">${name}</span>
51  `;
52  }
53  return $peer;
54};
55
56const displayPeerList = (peers, myClientID) => {
57  const peerList = Object.entries(peers)
58    .filter(([id]) => id !== myClientID)
59    .filter(([, presence]) => presence.name && presence.color);
60  const peerCount = peerList.length + 1;
61  const hasMorePeers = peerCount > MAX_PEER_VIEW;
62  const $peerList = document.getElementById('peerList');
63  $peerList.innerHTML = '';
64  const $peerMoreList = document.createElement('div');
65  $peerMoreList.className = 'peer-more-list speech-bubbles';
66
67  const myInfo = peers[myClientID];
68  const $me = createPeer(`${myInfo.name} (me)`, myInfo.color, 'main');
69  $me.classList.add('me');
70  $peerList.appendChild($me);
71  peerList.forEach(([_, { name, color }], i) => {
72    if (i < MAX_PEER_VIEW - 1) {
73      const $peer = createPeer(name, color, 'main');
74      $peerList.appendChild($peer);
75      return;
76    }
77    const $peer = createPeer(name, color, 'more');
78    $peerMoreList.appendChild($peer);
79  });
80
81  if (hasMorePeers) {
82    const $peer = document.createElement('div');
83    $peer.className = 'peer more';
84    $peer.innerHTML = `
85      <div class="profile">
86      +${peerCount - MAX_PEER_VIEW}
87      </div>
88    `;
89    $peer.appendChild($peerMoreList);
90    $peerList.appendChild($peer);
91  }
92};
93
94main();