make minimap dynamic

2025-01-18 11:07:06 +09:00
parent 7415475cb0
commit 18c3ace616
3 changed files with 19 additions and 4 deletions
@@ -34,6 +34,7 @@ const teamMaterials = {
  range: new THREE.MeshToonMaterial({ color: 0x00ffff, transparent: true, opacity: opacity / 2 }),
 }

+const minimapCameraZ = 10
 const minimapCamera = new THREE.OrthographicCamera(-10, 10, 10, -10)
 const minimapRenderer = new THREE.WebGLRenderer()

@@ -171,8 +172,21 @@ function connectWebSocket() {
  websocket.onmessage = (event) => {
    state.byteSize = new Blob([event.data]).size
    const stateUpdates = JSON.parse(event.data)
+
+    if (stateUpdates.width != null && stateUpdates.height != null) {
+      state.width = stateUpdates.width
+      state.height = stateUpdates.height
+
+      minimapCamera.top = state.height / 200
+      minimapCamera.right = state.height / 200
+      minimapCamera.bottom = -state.height / 200
+      minimapCamera.left = -state.height / 200
+      minimapCamera.updateProjectionMatrix()
+      minimapCamera.position.set(state.width / 200, state.height / 200, minimapCameraZ)
+    }
+
    for (const [key, value] of Object.entries(stateUpdates)) {
-      if (!['abilities', 'terrains', 'entities', 'projectiles'].includes(key)) {
+      if (!['abilities', 'terrains', 'entities', 'projectiles', 'width', 'height'].includes(key)) {
        state[key] = value
      }
    }
@@ -282,7 +296,7 @@ function connectWebSocket() {

        if (e.id == playerId) {
          const rangeMaterial = teamMaterials['range']
-          const rangeSize = state.abilities.find((it) => it.id == e.abilities?.a)?.range ?? 0
+          const rangeSize = (state.abilities.find((it) => it.id == e.abilities?.a)?.range ?? 0) + e.radius
          const rangeMarker = new THREE.Mesh(new THREE.CylinderGeometry((rangeSize) / 100, (rangeSize) / 100, 1), rangeMaterial)
          const rangeMarkerSize = 4000
          rangeMarker.scale.y = e.height / rangeMarkerSize
@@ -135,6 +135,7 @@
    </style>
  </head>
  <body>
+    <!-- TODO: display buffs -->
    <div class="debug-panel">
      <p>Connection: <span id="connection"></span></p>
      <pre id="state"></pre>
@@ -11,12 +11,12 @@ export default class Game {
  averageTick = 0
  currentTick = 0
  entities = []
-  height = 2000
+  height = 5000
  projectiles = []
  secondToSlowestTick = 0
  terrains = []
  tickRate = 30
-  width = 2000
+  width = 5000

  #currentTiming = 0
  #eventEmitter = new EventEmitter()