feat: reconnection

app/src/react/components/play/index.jsx

@@ -21,6 +21,10 @@ const Play = () => {
       dispatch(setSelfEntity(await socket.send(['Join', uuid])));
     };
     join();
+    socket.on('reconnect', join);
+    return () => {
+      socket.off('reconnect', join);
+    };
   }, [dispatch, socket, uuid]);
   useEffect(() => {
     if (!ref.current) {

app/src/react/components/renderers/room-view.jsx

@@ -36,15 +36,12 @@ const RoomViewComponent = () => {
       return renderer;
     }
     return undefined;
-  }, [app.renderer]);
+  }, [app]);
   const selfEntity = useSelfEntity();
   const [offset, setOffset] = useState([0, 0]);
   const room = useRoom();
   useEffect(() => {
-    if (!room) {
-      return undefined;
-    }
-    if (!selfEntity) {
+    if (!room || !selfEntity) {
       return undefined;
     }
     selfEntity.camera.realPosition = selfEntity.camera.position;

packages/core/package.json

@@ -30,6 +30,7 @@
     "@latus/core": "^2.0.0",
     "@latus/react": "^2.0.0",
     "@latus/redux": "^2.0.0",
+    "@latus/socket": "^2.0.0",
     "debug": "4.3.1"
   },
   "devDependencies": {

packages/core/src/hooks/use-room.js

@@ -1,10 +1,25 @@
 import {resource} from '@avocado/resource';
 import {useEffect, useLatus, useState} from '@latus/react/client';
+import {useSocket} from '@latus/socket';
 
 export default () => {
   const [room, setRoom] = useState();
   const latus = useLatus();
+  const socket = useSocket();
   const synchronizer = latus.get('%synchronizer');
+  useEffect(() => {
+    if (!room) {
+      return undefined;
+    }
+    const onDisconnect = () => {
+      synchronizer.deleteSynchronized(room.constructor.resourceId, room.s13nId());
+      setRoom(undefined);
+    };
+    socket.on('disconnect', onDisconnect);
+    return () => {
+      socket.off('disconnect', onDisconnect);
+    };
+  }, [room, socket, synchronizer]);
   useEffect(() => {
     if (!synchronizer) {
       return undefined;
@@ -24,6 +39,6 @@ export default () => {
     return () => {
       synchronizer.off('created', onCreated);
     };
-  }, [latus, synchronizer]);
+  }, [latus, room, synchronizer]);
   return room;
 };

packages/universe/src/resources/universe.js

@@ -70,6 +70,10 @@ export default (latus) => class Universe extends JsonResource {
     this.#tps = tps;
   }
 
+  playerForSocket(socketId) {
+    return this.#players.find(({socket}) => socket.id === socketId);
+  }
+
   playerForUser(userId) {
     return this.#players.find(({user}) => user.id === userId);
   }

packages/universe/src/server/packets/join.js

@@ -42,7 +42,10 @@ export default (latus) => class ServerJoin extends Join() {
       user,
     });
     socket.on('disconnect', () => {
-      universe.removePlayer(player);
+      const player = universe.playerForSocket(socket.id);
+      if (player) {
+        universe.removePlayer(player);
+      }
     });
     return entity.instanceUuid;
   }