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
15  client.subscribe((event) => {
16    if (event.type === 'peers-changed') {
17      // show peer list
18      displayPeerList(client.getPeersByDocKey(doc.getKey()), client.getID());
19    }
20  });
21
22  const doc = new yorkie.Document('profile-stack');
23  await client.attach(doc);
24
25  window.addEventListener('beforeunload', () => {
26    client.deactivate();
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();