Disconnect realms when leave page.

README.md

@@ -58,7 +58,7 @@ You can host the source files on either your Windows file system or on the Ubunt
 
 **Windows File System:** Run the Git commands to clone and pull source files from a Windows command prompt. You may find this best if you're using programs such as SourceTree as a Git GUI. You can also edit source using your usual IDE.
 
-**Ubuntu File System:** Run the Git commands to clone and pull source files from a WSL command prompt. In this case consider [using the Visual Studio Code WSL extension](https://code.visualstudio.com/docs/remote/wsl) as your dev environment - for features such as hot reload.
+**Ubuntu File System:** Run the Git commands to clone and pull source files from a WSL command prompt. In this case consider [using the Visual Studio Code WSL extension](https://code.visualstudio.com/docs/remote/wsl) as your dev environment - for features such as better hot reload.
 
 #### Running
 

src/components/title-screen/TitleScreen.jsx

@@ -872,6 +872,12 @@ class TitleScreenRenderer extends EventTarget {
                 virtualPlayers.removeEventListener('leave', onVirtualPlayersLeave);
             });
         };
+        /*
+        (async () => {
+            multiplayerConnect();
+        })();
+        */
+
         const keydown = e => {
             switch (e.key) {
                 case 'm': {
@@ -1084,7 +1090,7 @@ class TitleScreenRenderer extends EventTarget {
             const onConnect = async position => {
                 // Initialize network realms player.
                 this.realms.localPlayer.initializePlayer({
-                  position,
+                    position,
                 }, {});
                 this.localPlayer.setRealmsPlayer(this.realms.localPlayer);
             };
@@ -1152,13 +1158,13 @@ class TitleScreenRenderer extends EventTarget {
                 camera: this.camera,
                 keys: this.keys,
             });
-        for (const player of this.remotePlayers.values()) {
-            player.update({
-                timestamp,
-                timeDiff,
-                camera: this.camera,
-            });
-        }
+            for (const player of this.remotePlayers.values()) {
+                player.update({
+                    timestamp,
+                    timeDiff,
+                    camera: this.camera,
+                });
+            }
         }
     }
     destroy() {
@@ -1655,8 +1661,8 @@ const TitleScreen = () => {
             console.warn('got invalid file', {firstBytes, firstBytesString});
           }
         }
-      };
-      useEffect(() => {
+    };
+    useEffect(() => {
         const router = useRouter();
         if (!seenRouters.has(router)) {
             seenRouters.set(router, true);
@@ -1670,10 +1676,10 @@ const TitleScreen = () => {
             };
             router.addEventListener('srcchange', srcchange);
             return () => {
-              router.removeEventListener('srcchange', srcchange);
+                router.removeEventListener('srcchange', srcchange);
             };
         }
-      }, []);
+    }, []);
 
     useEffect(() => {
         const keydown = async e => {
@@ -1796,6 +1802,16 @@ const TitleScreen = () => {
         titleScreenRenderer?.keys.down,
     ]);
 
+    useEffect(() => {
+        const destroyTitleScreenRenderer = () => {
+            titleScreenRenderer && titleScreenRenderer.destroy();
+        }
+        window.addEventListener('beforeunload', destroyTitleScreenRenderer);
+        return () => {
+            window.removeEventListener('beforeunload', destroyTitleScreenRenderer);
+        };
+    }, [titleScreenRenderer]);
+
     return (
         <div
             className={styles.titleScreen}

vite.config.js

@@ -35,6 +35,12 @@ export default defineConfig(({command, mode, ssrBuild}) => {
       },
       host: '0.0.0.0',
       port: 9999,
+      watch: {
+        /* For Windows-hosted files. */
+        usePolling: true,
+        interval: 5000,
+        binaryInterval: 15000,
+      },
     },
   };
 })