display buffs in the client

public/client.js

@@ -247,7 +247,7 @@ function connectWebSocket() {
       }
     }
 
-    console.log(state)
+    // 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)
@@ -294,6 +294,14 @@ function connectWebSocket() {
         teamMarker.layers.set(1)
         entity.add(teamMarker)
 
+        const buffMaterial = new THREE.MeshToonMaterial({ color: 0xffff00, transparent: true, opacity: 0.4 })
+        const buffMarker = new THREE.Mesh(new THREE.CylinderGeometry((e.visualRadius + 10) / 100, (e.visualRadius + 10) / 100, 1), buffMaterial)
+        const buffMarkerSize = 400
+        buffMarker.scale.y = e.height / buffMarkerSize
+        buffMarker.layers.set(1)
+        buffMarker.visible = false
+        entity.add(buffMarker)
+
         if (e.id == playerId) {
           const rangeMaterial = teamMaterials['range']
           const rangeSize = (state.abilities.find((it) => it.id == e.abilities?.a)?.range ?? 0) + e.radius
@@ -308,6 +316,8 @@ function connectWebSocket() {
         entities[e.id] = entity
       }
 
+      entity.children.at(2).visible = e.buffs.some((it) => it.id == 'exposed') // TODO: only works for Exposed now
+
       entity.userData.flaggedForRemoval = false
       positionTweens[entity.id] = new Tween(entity.position).to({ x: e.position.x / 100, y: e.position.y / 100, z: e.height / 100 }, tweenDuration).start()
 
@@ -422,6 +432,15 @@ function connectWebSocket() {
           }
         }
 
+        let buffs = ``
+        player.buffs.forEach((b) => {
+          buffs += `<div class="buff"><div class="buff-body">${state.buffs.find((it) => it.id == b.id).name}</div></div>`
+        })
+
+        if (document.getElementById('buffs').innerHTML != buffs) {
+          document.getElementById('buffs').innerHTML = buffs
+        }
+
         let castIndicatorDisplay = 'none'
         if (player.casting != null) {
           castIndicatorDisplay = 'block'
@@ -441,7 +460,7 @@ function connectWebSocket() {
       }
     }
 
-    // document.getElementById('state').innerHTML = JSON.stringify(stateUpdates, null, 2)
+    document.getElementById('state').innerHTML = JSON.stringify(stateUpdates, null, 2)
   }
 }