Multiplayer Support [AARD-2024, AARD-2021]

fission/package.json

@@ -46,6 +46,7 @@
     "electron-squirrel-startup": "^1.0.1",
     "framer-motion": "^10.18.0",
     "lygia": "^1.3.3",
+    "peerjs": "^1.5.5",
     "msw": "^2.10.4",
     "notistack": "^3.0.2",
     "playwright": "^1.54.2",
@@ -96,11 +97,11 @@
     "eslint-plugin-react-refresh": "^0.4.20",
     "jsdom": "^24.1.3",
     "pako": "^2.1.0",
+    "peer": "^1.0.2",
     "postcss": "^8.5.6",
     "protobufjs": "^7.5.3",
     "protobufjs-cli": "^1.1.3",
     "rollup": "^4.46.2",
-    "sirv": "^3.0.1",
     "tailwindcss": "^3.4.17",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.9.2",

fission/src/Synthesis.tsx

@@ -1,8 +1,12 @@
 import { AnimatePresence } from "framer-motion"
 import { SnackbarProvider } from "notistack"
 import { useCallback, useEffect, useRef, useState } from "react"
+import { globalAddToast } from "@/components/GlobalUIControls.ts"
 import MainHUD from "@/components/MainHUD"
+import MultiplayerHUD from "@/components/MultiplayerHUD.tsx"
 import Scene from "@/components/Scene.tsx"
+import MultiplayerStartModal from "@/modals/MultiplayerStartModal.tsx"
+import MultiplayerSystem from "@/systems/multiplayer/MultiplayerSystem.ts"
 import World from "@/systems/World.ts"
 import { UIRenderer } from "@/ui/UIRenderer.tsx"
 import PreferencesSystem from "./systems/preferences/PreferencesSystem.ts"
@@ -23,34 +27,57 @@
     const [consentPopupDisable, setConsentPopupDisable] = useState<boolean>(true)
 
     const mainLoopHandle = useRef(0)
+    const startMainLoop = async () => {
+        await World.initWorld()
+        if (!PreferencesSystem.getGlobalPreference("ReportAnalytics") && !import.meta.env.DEV) {
+            setConsentPopupDisable(false)
+        }
+
+        const mainLoop = () => {
+            mainLoopHandle.current = requestAnimationFrame(mainLoop)
+            World.updateWorld()
+        }
 
+        mainLoop()
+    }
     useEffect(() => {
         const urlParams = new URLSearchParams(document.location.search)
         if (urlParams.has("code")) {
             window.opener.convertAuthToken(urlParams.get("code"))
             window.close()
             return
         }
-        const startSingleplayerCallback = () => {
-            World.initWorld()
 
-            if (!PreferencesSystem.getGlobalPreference("ReportAnalytics") && !import.meta.env.DEV) {
-                setConsentPopupDisable(false)
-            }
-
-            const mainLoop = () => {
-                mainLoopHandle.current = requestAnimationFrame(mainLoop)
-                World.updateWorld()
-            }
-
-            mainLoop()
-        }
-        globalOpenModal(MainMenuModal, { startSingleplayerCallback })
+        globalOpenModal(MainMenuModal, {
+            startSingleplayerCallback: async () => await startMainLoop(),
+            startMultiplayerCallback: () => {
+                globalOpenModal(MultiplayerStartModal, {
+                    startWorldCallback: async (name, room) => {
+                        const isHost = room == null
+                        if (room == null) {
+                            room = Math.random().toString(10).substring(2, 8)
+                        }
+                        PreferencesSystem.setGlobalPreference("MultiplayerUsername", name)
+                        PreferencesSystem.savePreferences()
+                        const success = await MultiplayerSystem.setup(room, name, isHost)
+                        if (success) {
+                            if (isHost) {
+                                globalAddToast("info", "Room Code", room)
+                            }
+                            await startMainLoop()
+                            return true
+                        }
+                        return false
+                    },
+                })
+            },
+        })
         // Cleanup
         return () => {
             // TODO: Teardown literally everything
             cancelAnimationFrame(mainLoopHandle.current)
             World.destroyWorld()
+            World.multiplayerSystem?.destroy()
             // World.SceneRenderer.RemoveAllSceneObjects();
         }
     }, [])
@@ -75,6 +102,7 @@
                             <Scene useStats={import.meta.env.DEV} key="scene-in-toast-provider" />
                             <SceneOverlay />
                             <ContextMenu />
+                            <MultiplayerHUD />
                             <MainHUD key={"main-hud"} />
                             <UIRenderer />
                             <ProgressNotifications key={"progress-notifications"} />

fission/src/mirabuf/EjectableSceneObject.ts

@@ -14,7 +14,7 @@ import type MirabufSceneObject from "./MirabufSceneObject"
 import ScoringZoneSceneObject from "./ScoringZoneSceneObject"
 
 class EjectableSceneObject extends SceneObject {
-    private _parentAssembly: MirabufSceneObject
+    private _parentSceneObject: MirabufSceneObject
     private _gamePieceBodyId?: Jolt.BodyID
 
     private _parentBodyId?: Jolt.BodyID
@@ -44,25 +44,29 @@ class EjectableSceneObject extends SceneObject {
         return this._parentBodyId
     }
 
+    public get parentSceneObject(): MirabufSceneObject {
+        return this._parentSceneObject
+    }
+
     public constructor(parentAssembly: MirabufSceneObject, gamePieceBody: Jolt.BodyID) {
         super()
 
         console.debug("Trying to create ejectable...")
 
-        this._parentAssembly = parentAssembly
+        this._parentSceneObject = parentAssembly
         this._gamePieceBodyId = gamePieceBody
     }
 
     public setup(): void {
-        if (this._parentAssembly.ejectorPreferences && this._gamePieceBodyId) {
-            this._parentBodyId = this._parentAssembly.mechanism.nodeToBody.get(
-                this._parentAssembly.ejectorPreferences.parentNode ?? this._parentAssembly.rootNodeId
+        if (this._parentSceneObject.ejectorPreferences && this._gamePieceBodyId) {
+            this._parentBodyId = this._parentSceneObject.mechanism.nodeToBody.get(
+                this._parentSceneObject.ejectorPreferences.parentNode ?? this._parentSceneObject.rootNodeId
             )
 
             this._deltaTransformation = convertArrayToThreeMatrix4(
-                this._parentAssembly.ejectorPreferences.deltaTransformation
+                this._parentSceneObject.ejectorPreferences.deltaTransformation
             )
-            this._ejectVelocity = this._parentAssembly.ejectorPreferences.ejectorVelocity
+            this._ejectVelocity = this._parentSceneObject.ejectorPreferences.ejectorVelocity
 
             // Record start transform at the game piece center of mass
             const gpBody = World.physicsSystem.getBody(this._gamePieceBodyId)