1import { useEffect, useState } from 'react';
2import yorkie from 'yorkie-js-sdk';
3import Cursor from './components/Cursor';
4import CursorSelections from './components/CursorSelections';
5import './App.css';
6
7const client = new yorkie.Client(import.meta.env.VITE_YORKIE_API_ADDR, {
8  apiKey: import.meta.env.VITE_YORKIE_API_KEY,
9});
10
11const doc = new yorkie.Document('simultaneous-cursors', {
12  enableDevtools: true,
13});
14
15const App = () => {
16  const [clients, setClients] = useState([]);
17
18  const handleCursorShapeSelect = (cursorShape) => {
19    doc.update((root, presence) => {
20      presence.set({
21        cursorShape,
22      });
23    });
24  };
25
26  useEffect(() => {
27    const setup = async () => {
28      await client.activate();
29
30      doc.subscribe('presence', (event) => {
31        setClients(doc.getPresences());
32      });
33
34      await client.attach(doc, {
35        initialPresence: {
36          cursorShape: 'cursor',
37          cursor: {
38            xPos: 0,
39            yPos: 0,
40          },
41          pointerDown: false,
42        },
43      });
44
45      window.addEventListener('beforeunload', () => {
46        client.deactivate();
47      });
48    };
49
50    setup();
51
52    const handlePointerUp = () => {
53      doc.update((root, presence) => {
54        presence.set({
55          pointerDown: false,
56        });
57      });
58    };
59    const handlePointerDown = () => {
60      doc.update((root, presence) => {
61        presence.set({
62          pointerDown: true,
63        });
64      });
65    };
66    const handleMouseMove = (event) => {
67      doc.update((root, presence) => {
68        presence.set({
69          cursor: {
70            xPos: event.clientX,
71            yPos: event.clientY,
72          },
73        });
74      });
75    };
76
77    window.addEventListener('mousedown', handlePointerDown);
78    window.addEventListener('mouseup', handlePointerUp);
79    window.addEventListener('mousemove', handleMouseMove);
80
81    return () => {
82      window.removeEventListener('mousedown', handlePointerDown);
83      window.removeEventListener('mouseup', handlePointerUp);
84      window.removeEventListener('mousemove', handleMouseMove);
85    };
86  }, []);
87
88  return (
89    <div className="general-container">
90      {clients.map(
91        ({ clientID, presence: { cursorShape, cursor, pointerDown } }) => {
92          if (!cursor) return null;
93          return (
94            <Cursor
95              selectedCursorShape={cursorShape}
96              x={cursor.xPos}
97              y={cursor.yPos}
98              pointerDown={pointerDown}
99              key={clientID}
100            />
101          );
102        },
103      )}
104
105      <CursorSelections
106        handleCursorShapeSelect={handleCursorShapeSelect}
107        clientsLength={clients.length}
108      />
109    </div>
110  );
111};
112
113export default App;