Finish lobby refactor

packages/game-player/src/game-player.ts

@@ -25,7 +25,7 @@ export class GamePlayer implements GameLoopRunnable {
     private moduleUI: ModuleUI
     private moduleVisual: ModuleVisual
 
-    constructor(config: GamePlayerConfig, lobbyConfig: LobbyConfigResource) {
+    constructor(config: GamePlayerConfig, lobbyConfig?: LobbyConfigResource) {
         const renderer = new WebGLRenderer({
             antialias: true,
             alpha: true,
@@ -34,15 +34,18 @@ export class GamePlayer implements GameLoopRunnable {
         renderer.setClearColor(Color.NAMES["black"], 1)
 
         this.store = new GamePlayerStore(config, renderer)
-        this.store.resources.set("lobbyConfig", lobbyConfig)
 
         this.moduleCamera = new ModuleCamera(this.store)
         this.moduleInput = new ModuleInput(this.store)
         this.moduleInterpolation = new ModuleInterpolation(this.store)
-        this.moduleLobby = new ModuleLobby(this.store)
         this.moduleParticles = new ModuleParticles(this.store)
         this.moduleUI = new ModuleUI(this.store)
         this.moduleVisual = new ModuleVisual(this.store)
+
+        if (lobbyConfig) {
+            this.store.resources.set("lobbyConfig", lobbyConfig)
+            this.moduleLobby = new ModuleLobby(this.store)
+        }
     }
 
     onDispose() {
@@ -74,7 +77,6 @@ export class GamePlayer implements GameLoopRunnable {
         this.moduleInterpolation.onUpdate(overstep)
 
         this.moduleCamera.onUpdate(delta)
-        this.moduleLobby?.onUpdate(overstep)
         this.moduleParticles.update(delta)
         this.moduleVisual.onUpdate()
 

packages/game-player/src/modules/module-lobby/module-lobby.ts

@@ -77,10 +77,6 @@ export class ModuleLobby {
         }
     }
 
-    onUpdate(overstep: number) {
-        this.otherUserRegistry.onUpdate(overstep)
-    }
-
     private startWebsocket() {
         this.ws?.close()
         this.ws = new WebSocket(this.wsUrl)
@@ -130,6 +126,7 @@ export class ModuleLobby {
 
             this.store.events.invoke.lobbyDisconnected?.()
             if (this.ws === previousWs) {
+                this.failureCounter++
                 this.restartWebsocket()
             }
         }
@@ -138,6 +135,7 @@ export class ModuleLobby {
             console.error("Lobby websocket failure: ", error)
 
             if (this.ws === previousWs) {
+                this.failureCounter++
                 this.restartWebsocket()
             }
         }
@@ -149,15 +147,6 @@ export class ModuleLobby {
         this.ws?.close()
         this.ws = undefined
 
-        const now = Date.now()
-
-        if (now - this.lastSetup > this.baseFailureTimeout) {
-            this.startWebsocket()
-        } else {
-            setTimeout(
-                () => void this.restartWebsocket(),
-                this.baseFailureTimeout - (now - this.lastSetup),
-            )
-        }
+        setTimeout(() => this.startWebsocket(), this.baseFailureTimeout)
     }
 }

packages/game-player/src/modules/module-lobby/other-user-ghost.ts

@@ -1,28 +1,30 @@
-import { slerp } from "game/src/model/utils"
 import { Frame, FramePacket } from "shared/src/lobby-api/frame-packet"
 import { OtherUser } from "shared/src/lobby-api/other-user"
-import { lerp } from "three/src/math/MathUtils"
+import { Object3D } from "three"
 import { Text } from "troika-three-text"
 import { GamePlayerStore } from "../../model/store"
 import { Rocket } from "../module-visual/objects/rocket"
 
 export class OtherUserGhost {
+    private currentFrame: Frame
+    private mesh: Object3D
     private packets: FramePacket[] = []
-    private packetIterator = 0
-
-    private mesh: Rocket
-
-    private currentFrame: Frame | undefined
-    private previousFrame: Frame | undefined
+    private packetIterator: number
+    private resetInterpolation: () => void
 
     constructor(
         private store: GamePlayerStore,
         private otherUser: OtherUser,
     ) {
         this.mesh = new Rocket(0.2)
+        this.currentFrame = {
+            x: Infinity,
+            y: Infinity,
+            rotation: Infinity,
+        }
+        this.packetIterator = 0
 
         const text = new Text()
-
         text.text = otherUser.username
         text.fontSize = 0.8
         text.color = "white"
@@ -31,23 +33,33 @@ export class OtherUserGhost {
         text.textAlign = "center"
         text.anchorX = "center"
         text.anchorY = "bottom"
-
         this.mesh.add(text as any)
 
+        const interpolation = this.store.resources.get("interpolation")
         const scene = this.store.resources.get("scene")
+
         scene.add(this.mesh)
+
+        const registration = interpolation.register(this.mesh, () => ({
+            point: {
+                x: this.currentFrame.x,
+                y: this.currentFrame.y,
+            },
+            rotation: this.currentFrame.rotation,
+        }))
+        this.resetInterpolation = registration.reset
     }
 
     dispose() {
         const scene = this.store.resources.get("scene")
         scene.remove(this.mesh)
     }
 
-    addPacket(packet: FramePacket) {
+    loadPacket(packet: FramePacket) {
         this.packets.push(packet)
     }
 
-    onFixedUpdate(last: Boolean) {
+    onFixedUpdate() {
         // each packet consists of multiple positions. we always
         // work through the first packet and then remove it
 
@@ -69,32 +81,18 @@ export class OtherUserGhost {
             return
         }
 
-        this.previousFrame = this.currentFrame
         this.currentFrame = this.packets[0].frames[this.packetIterator]
 
         const dx = this.currentFrame.x - this.mesh.position.x
         const dy = this.currentFrame.y - this.mesh.position.y
 
         if (dx * dx + dy * dy > 4) {
-            this.previousFrame = this.currentFrame
+            this.resetInterpolation()
         }
 
         this.packetIterator++
     }
 
-    onUpdate(overstep: number) {
-        if (!this.previousFrame || !this.currentFrame) {
-            return
-        }
-
-        const x = lerp(this.previousFrame.x, this.currentFrame.x, overstep)
-        const y = lerp(this.previousFrame.y, this.currentFrame.y, overstep)
-        const rotation = slerp(this.previousFrame.rotation, this.currentFrame.rotation, overstep)
-
-        this.mesh.position.set(x, y, 0)
-        this.mesh.rotation.z = rotation
-    }
-
     getOtherUser() {
         return this.otherUser
     }

packages/game-player/src/modules/module-lobby/other-user-registry.ts

@@ -21,7 +21,7 @@ export class OtherUserRegistry {
             const ghost = this.ghosts.get(packet.username)
 
             if (ghost) {
-                ghost.addPacket(packet)
+                ghost.loadPacket(packet)
             }
         }
     }
@@ -59,15 +59,9 @@ export class OtherUserRegistry {
         return true
     }
 
-    onFixedUpdate(last: Boolean) {
+    onFixedUpdate() {
         for (const ghost of this.ghosts.values()) {
-            ghost.onFixedUpdate(last)
-        }
-    }
-
-    onUpdate(overstep: number) {
-        for (const ghost of this.ghosts.values()) {
-            ghost.onUpdate(overstep)
+            ghost.onFixedUpdate()
         }
     }
 }

packages/server/src/do-lobby/do-lobby.ts

@@ -2,13 +2,9 @@ import { DurableObject } from "cloudflare:workers"
 import { eq } from "drizzle-orm"
 import { drizzle } from "drizzle-orm/d1"
 import { randomUUID } from "node:crypto"
-import {
-    ClientUpdateMessage,
-    InitializeMessage,
-    ServerUpdateMessage,
-    clientUpdateMessage,
-} from "shared/src/lobby-api/lobby-api"
-import { UserOther } from "shared/src/lobby-api/user-other"
+import { ClientUpdateMessage, clientUpdateMessage } from "shared/src/lobby-api/message-client"
+import { InitializeMessage, ServerUpdateMessage } from "shared/src/lobby-api/message-server"
+import { OtherUser } from "shared/src/lobby-api/other-user"
 import { Env } from "../worker/env"
 import { users } from "../worker/framework/db-schema"
 import { userFromAuthorizationHeader as userFromRequest } from "../worker/framework/helper/user-from-authorization-header"
@@ -22,16 +18,16 @@ interface WebsocketClientContext {
 }
 
 interface ConnectedUser {
-    user: UserOther
+    user: OtherUser
     connection: WebSocket
 }
 
 class SingleLobby {
     private frameTracker: UserFrameTracker
     private currentlyPlaying: Map<string, ConnectedUser> = new Map()
 
-    private usersJoined: UserOther[]
-    private userLeft: UserOther[]
+    private usersJoined: OtherUser[]
+    private userLeft: OtherUser[]
 
     private interval: ReturnType<typeof setInterval>
 

packages/web/src/pages/play/play-store.ts

@@ -1,5 +1,6 @@
 import { GamePlayer } from "game-web/src/game-player"
 import { GameLoop } from "game-web/src/game-player-loop"
+import { LobbyConfigResource } from "game-web/src/modules/module-lobby/module-lobby"
 import { ReplayModel } from "game/proto/replay"
 import { WorldConfig } from "game/proto/world"
 import { createContext, useContext } from "react"
@@ -49,36 +50,25 @@ export interface PlayState extends PlayStoreProps {
 export type PlayStore = ReturnType<typeof createPlayStore>
 
 export const createPlayStore = (props: PlayStoreProps) => {
-    /*
-        const model = ReplayModel.create({
-            frames: replayFramesToBytes(game.store.resources.get("inputCapture").frames),
-        })
-
-        const summary = game.store.game.store.resources.get("summary")
-
-        store.getState().uploadReplay(model, summary.ticks, summary.deaths)
-    */
-
     const state = useAppStore.getState()
-    let lobby
 
+    let lobbyConfig: LobbyConfigResource | undefined = undefined
     if (state.jwt && state.user) {
-        lobby = {
-            host: new URL(import.meta.env.VITE_SERVER_URL).host,
+        lobbyConfig = {
+            lobbyWsUrl: new URL(import.meta.env.VITE_SERVER_URL).host,
             username: state.user.username,
             token: state.jwt,
         }
     }
 
-    const game = new GamePlayer({
-        instanceType: "play",
-
-        worldname: props.worldname,
-        world: props.world,
-        gamemode: props.gamemode,
-
-        lobby: lobby,
-    })
+    const game = new GamePlayer(
+        {
+            worldname: props.worldname,
+            world: props.world,
+            gamemode: props.gamemode,
+        },
+        lobbyConfig,
+    )
 
     const gameLoop = new GameLoop(game)