[RFC] Randomized names next to mouse pointers. (#971)

* [WIP] Add names next to pointers

This implements the rendering and messaging across. Still need to do the UI to set the name.

Also, not really sure what's the best place to send the name and store it.

* Add randomized names

Co-authored-by: Christopher Chedeau <vjeux@fb.com>

src/components/App.tsx

@@ -42,6 +42,7 @@ import {
   SOCKET_SERVER,
   SocketUpdateDataSource,
   exportCanvas,
+  createNameFromSocketId,
 } from "../data";
 import { restore } from "../data/restore";
 
@@ -360,13 +361,15 @@ export class App extends React.Component<any, AppState> {
               }
               break;
             case "MOUSE_LOCATION":
-              const { socketID, pointerCoords } = decryptedData.payload;
+              const {
+                socketID,
+                pointerCoords,
+                username,
+              } = decryptedData.payload;
               this.setState(state => {
-                if (!state.collaborators.has(socketID)) {
-                  state.collaborators.set(socketID, {});
-                }
-                const user = state.collaborators.get(socketID)!;
+                const user = state.collaborators.get(socketID) || {};
                 user.pointer = pointerCoords;
+                user.username = username;
                 state.collaborators.set(socketID, user);
                 return state;
               });
@@ -411,6 +414,7 @@ export class App extends React.Component<any, AppState> {
         payload: {
           socketID: this.socket.id,
           pointerCoords: payload.pointerCoords,
+          username: createNameFromSocketId(this.socket.id),
         },
       };
       return this._broadcastSocketData(
@@ -2282,6 +2286,7 @@ export class App extends React.Component<any, AppState> {
     const pointerViewportCoords: {
       [id: string]: { x: number; y: number };
     } = {};
+    const pointerUsernames: { [id: string]: string } = {};
     this.state.collaborators.forEach((user, socketID) => {
       if (!user.pointer) {
         return;
@@ -2295,6 +2300,9 @@ export class App extends React.Component<any, AppState> {
         this.canvas,
         window.devicePixelRatio,
       );
+      if (user.username) {
+        pointerUsernames[socketID] = user.username;
+      }
     });
     const { atLeastOneVisibleElement, scrollBars } = renderScene(
       globalSceneState.getAllElements(),
@@ -2309,6 +2317,7 @@ export class App extends React.Component<any, AppState> {
         viewBackgroundColor: this.state.viewBackgroundColor,
         zoom: this.state.zoom,
         remotePointerViewportCoords: pointerViewportCoords,
+        remotePointerUsernames: pointerUsernames,
       },
       {
         renderOptimizations: true,