display buffs in the client

2025-01-18 12:00:12 +09:00
parent 18c3ace616
commit 8457312f63
5 changed files with 90 additions and 27 deletions
@@ -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)
  }
 }

@@ -132,6 +132,38 @@
        height: 20px;
        padding: 2px;
      }
+
+      .buffs {
+        position: fixed;
+        display: flex;
+        gap: 10px;
+        inset: auto 0 120px calc(50vw - 165px);
+        width: fit-content;
+      }
+
+      .buff {
+        flex: 1 0 0;
+        width: 30px;
+        height: 30px;
+        background-color: black;
+        /* border: 1px solid gray; */
+        border-right: 1px solid gray;
+        color: white;
+        overflow: hidden;
+      }
+
+      .buff:hover {
+        overflow: visible;
+        z-index: 3;
+      }
+
+      .buff-body {
+        border: 1px solid gray;
+        padding: 5px;
+        background-color: black;
+        width: fit-content;
+        height: 100%;
+      }
    </style>
  </head>
  <body>
@@ -168,6 +200,7 @@
        <div id="ability-3-cooldown-text" class="cooldown-text"></div>
      </div>
    </div>
+    <div id="buffs" class="buffs"></div>
    <script type="module" src="client.js"></script>
  </body>
 </html>