rely on stringification instead of state reports

public/client.js

@@ -11,8 +11,9 @@ scene.background = backgroundColor
 renderer.setSize(window.innerWidth, window.innerHeight)
 renderer.setAnimationLoop(render)
 camera.position.set(5, -12, 20)
-// camera.position.set(5, -12, 10)
 camera.rotation.set((56 / 180) * Math.PI, 0, 0)
+camera.zoom += 0.4
+camera.updateProjectionMatrix()
 camera.layers.enable(1)
 camera.layers.enable(2)
 
@@ -38,6 +39,7 @@ const entities = {}
 const projectiles = {}
 const positionTweens = {}
 const terrains = {}
+let state = { abilities: [], entities: [], terrains: [], projectiles: [] }
 
 const geometry = new THREE.PlaneGeometry(0, 0)
 const material = new THREE.MeshToonMaterial({ color: 0x115011 })
@@ -164,7 +166,71 @@ function connectWebSocket() {
   }
 
   websocket.onmessage = (event) => {
-    let state = JSON.parse(event.data)
+    state.byteSize = new Blob([event.data]).size
+    const stateUpdates = JSON.parse(event.data)
+    for (const [key, value] of Object.entries(stateUpdates)) {
+      if (!['abilities', 'terrains', 'entities', 'projectiles'].includes(key)) {
+        state[key] = value
+      }
+    }
+
+    if (stateUpdates.abilities != null) {
+      const ids = stateUpdates.abilities.map((it) => it.id)
+      state.abilities = state.abilities.filter((it) => ids.includes(it.id))
+      for (const ability of stateUpdates.abilities ?? []) {
+        const index = state?.abilities?.findIndex((it) => it.id == ability.id)
+        if (index > -1) {
+          state.abilities[index] = {...state.abilities[index], ...ability}
+        }
+        else {
+          state.abilities.push(ability)
+        }
+      }
+    }
+
+    if (stateUpdates.entities != null) {
+      const ids = stateUpdates.entities.map((it) => it.id)
+      state.entities = state.entities.filter((it) => ids.includes(it.id))
+      for (const entity of stateUpdates.entities ?? []) {
+        const index = state?.entities?.findIndex((it) => it.id == entity.id)
+        if (index > -1) {
+          state.entities[index] = {...state.entities[index], ...entity}
+        }
+        else {
+          state.entities.push(entity)
+        }
+      }
+    }
+
+    if (stateUpdates.terrains != null) {
+      const ids = stateUpdates.terrains.map((it) => it.id)
+      state.terrains = state.terrains.filter((it) => ids.includes(it.id))
+      for (const terrain of stateUpdates.terrains ?? []) {
+        const index = state?.terrains?.findIndex((it) => it.id == terrain.id)
+        if (index > -1) {
+          state.terrains[index] = {...state.terrains[index], ...terrain}
+        }
+        else {
+          state.terrains.push(terrain)
+        }
+      }
+    }
+
+    if (stateUpdates.projectiles != null) {
+      const ids = stateUpdates.projectiles.map((it) => it.id)
+      state.projectiles = state.projectiles.filter((it) => ids.includes(it.id))
+      for (const projectile of stateUpdates.projectiles) {
+        const index = state?.projectiles?.findIndex((it) => it.id == projectile.id)
+        if (index > -1) {
+          state.projectiles[index] = {...state.projectiles[index], ...projectile}
+        }
+        else {
+          state.projectiles.push(projectile)
+        }
+      }
+    }
+
+    console.log(state)
 
     if (state.width != null && state.height != null && (ground.geometry.attributes.width != state.width || ground.geometry.attributes.height != state.height)) {
       ground.geometry = new THREE.PlaneGeometry(state.width / 100, state.height / 100)
@@ -246,13 +312,13 @@ function connectWebSocket() {
         projectile.layers.set(2)
         scene.add(projectile)
 
+        projectile.rotation.x = Math.PI / 2 // needed for the team marker...
         const teamMaterial = teamMaterials['projectile']
         const teamMarker = new THREE.Mesh(new THREE.CylinderGeometry((p.radius) / 100, (p.radius) / 100, 1), teamMaterial)
         const teamMarkerSize = 4000
         teamMarker.scale.y = p.height / teamMarkerSize
         teamMarker.position.y = (p.height / (teamMarkerSize * 2)) - (p.height / 100)
-        projectile.rotation.x = Math.PI / 2
-        projectile.layers.set(2)
+        teamMarker.layers.set(2)
         projectile.add(teamMarker)
 
         projectiles[p.id] = projectile
@@ -295,7 +361,8 @@ function connectWebSocket() {
       if (player != null) {
         for (let abilityIndex = 0; abilityIndex < 4; abilityIndex++) {
           if (player.abilities[abilityIndex] != null) {
-            const ability = player.abilities[abilityIndex]
+            const abilityId = player.abilities[abilityIndex]
+            const ability = state.abilities.find((it) => it.id == abilityId)
             const lastCast = player.cooldowns[ability.id] ?? -Infinity
             const cooldownDuration = (ability.cooldown * state.tickRate) ?? 0
             const remainingCooldown = (lastCast + cooldownDuration) - state.currentTick
@@ -342,7 +409,7 @@ function connectWebSocket() {
       }
     }
 
-    document.getElementById('state').innerHTML = JSON.stringify(state, null, 2)
+    // document.getElementById('state').innerHTML = JSON.stringify(stateUpdates, null, 2)
   }
 }