exclude dead entities from auto-attack target selection

public/client.js

@@ -467,36 +467,50 @@ function connectWebSocket() {
     if (playerId != null) {
       const player = state.entities.find((e) => e.id == playerId)
       if (player != null) {
-        for (let abilityIndex = 0; abilityIndex < 7; abilityIndex++) {
-          const abilityKey = ['a', 'q', 'w', 'e', 'r', 'd', 'f'][abilityIndex]
-          if (player.abilities[abilityKey] != null) {
-            const abilityId = player.abilities[abilityKey]
-            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
-            let cssPercentage = '100%'
-            let text = ''
-            if (remainingCooldown > 0) {
-              const cooldownPercentage = 1 - (remainingCooldown / cooldownDuration)
-              cssPercentage = `${Math.round(100 * cooldownPercentage)}%`
-              if (remainingCooldown / state.tickRate <= 5) {
-                text = `${(Math.round(10 * remainingCooldown / state.tickRate) / 10).toFixed(1)}`
-              }
-              else {
-                text = `${Math.round(remainingCooldown / state.tickRate)}`
-              }
-            }
+        const playerAbilities = player.abilities
 
-            if (player.casting?.ability == ability.id) {
-              document.getElementById(`ability-${abilityIndex}-cooldown`).style.clipPath = `polygon(50% 0%, 0% 100%, 100% 100%)` // triangle
+        let abilitiesHTML = ''
+
+        let i = 0
+        for (const [abilityKey, _abilityId] of Object.entries(playerAbilities)) {
+          i++
+          const abilityKeyText = abilityKey.toUpperCase()
+          const abilityTemplate = `<div id="ability-${i}" class="ability">${abilityKeyText}<div id="ability-${i}-cooldown" class="cooldown"></div><div id="ability-${i}-cooldown-text" class="cooldown-text"></div></div>`
+          abilitiesHTML += abilityTemplate
+        }
+
+        if (document.getElementById(`abilities`).innerHTML != abilitiesHTML) {
+          document.getElementById(`abilities`).innerHTML = abilitiesHTML
+        }
+
+        let abilityIndex = 0
+        for (const [_abilityKey, abilityId] of Object.entries(playerAbilities)) {
+          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
+          let cssPercentage = '100%'
+          let text = ''
+          if (remainingCooldown > 0) {
+            const cooldownPercentage = 1 - (remainingCooldown / cooldownDuration)
+            cssPercentage = `${Math.round(100 * cooldownPercentage)}%`
+            if (remainingCooldown / state.tickRate <= 5) {
+              text = `${(Math.round(10 * remainingCooldown / state.tickRate) / 10).toFixed(1)}`
             }
             else {
-              document.getElementById(`ability-${abilityIndex}-cooldown`).style.clipPath = `polygon(0 ${cssPercentage}, 100% ${cssPercentage}, 100% 100%, 0 100%)`
+              text = `${Math.round(remainingCooldown / state.tickRate)}`
             }
-
-            document.getElementById(`ability-${abilityIndex}-cooldown-text`).innerHTML = text
           }
+
+          if (player.casting?.ability == ability.id) {
+            document.getElementById(`ability-${abilityIndex}-cooldown`).style.clipPath = `polygon(50% 0%, 0% 100%, 100% 100%)` // triangle
+          }
+          else {
+            document.getElementById(`ability-${abilityIndex}-cooldown`).style.clipPath = `polygon(0 ${cssPercentage}, 100% ${cssPercentage}, 100% 100%, 0 100%)`
+          }
+
+          document.getElementById(`ability-${abilityIndex}-cooldown-text`).innerHTML = text
         }
 
         let buffs = ``
@@ -577,24 +591,14 @@ window.addEventListener('load', () => {
         websocket.send(JSON.stringify({ action: 'halt', id: playerId }))
       }
 
-      if (event.code == 'KeyQ') {
-        websocket.send(JSON.stringify({ action: 'cast', slot: 'q', id: playerId, x, y }))
-      }
-      if (event.code == 'KeyW') {
-        websocket.send(JSON.stringify({ action: 'cast', slot: 'w', id: playerId, x, y }))
-      }
-      if (event.code == 'KeyE') {
-        websocket.send(JSON.stringify({ action: 'cast', slot: 'e', id: playerId, x, y }))
-      }
-      if (event.code == 'KeyR') {
-        websocket.send(JSON.stringify({ action: 'cast', slot: 'r', id: playerId, x, y }))
-      }
-      if (event.code == 'KeyD') {
-        websocket.send(JSON.stringify({ action: 'cast', slot: 'd', id: playerId, x, y }))
-      }
-      if (event.code == 'KeyF') {
-        websocket.send(JSON.stringify({ action: 'cast', slot: 'f', id: playerId, x, y }))
-      }
+      const alreadyBound = ['A', 'X', 'S', 'H']
+      const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').forEach((letter) => {
+        if (alreadyBound.includes(letter)) { return }
+
+        if (event.code == `Key${letter}`) {
+          websocket.send(JSON.stringify({ action: 'cast', slot: letter.toLowerCase(), id: playerId, x, y }))  
+        }
+      })
     }
   })
 

public/index.html

@@ -58,12 +58,12 @@
         border-right: none;
       }
 
-      .hud {
+      .abilities {
+        display: none;
         position: fixed;
         gap: 10px;
         padding: 15px;
         padding-bottom: 10px;
-        display: flex;
         inset: auto 0 0 0;
         width: fit-content;
         margin: auto;
@@ -74,6 +74,10 @@
         border-bottom: none;
       }
 
+      .abilities:has(.ability) {
+        display: flex;
+      }
+
       .ability {
         position: relative;
         flex: 1 0 0;
@@ -178,42 +182,7 @@
         <div id="cast_indicator_progress" class="cast-indicator-progress"></div>
       </div>
     </div>
-    <div class="hud">
-      <div id="ability-0" class="ability">
-        A
-        <div id="ability-0-cooldown" class="cooldown"></div>
-        <div id="ability-0-cooldown-text" class="cooldown-text"></div>
-      </div>
-      <div id="ability-1" class="ability">
-        Q
-        <div id="ability-1-cooldown" class="cooldown"></div>
-        <div id="ability-1-cooldown-text" class="cooldown-text"></div>
-      </div>
-      <div id="ability-2" class="ability">
-        W
-        <div id="ability-2-cooldown" class="cooldown"></div>
-        <div id="ability-2-cooldown-text" class="cooldown-text"></div>
-      </div>
-      <div id="ability-3" class="ability">
-        E
-        <div id="ability-3-cooldown" class="cooldown"></div>
-        <div id="ability-3-cooldown-text" class="cooldown-text"></div>
-      </div>
-      <div id="ability-4" class="ability">
-        R
-        <div id="ability-4-cooldown" class="cooldown"></div>
-        <div id="ability-4-cooldown-text" class="cooldown-text"></div>
-      </div>
-      <div id="ability-5" class="ability">
-        D
-        <div id="ability-5-cooldown" class="cooldown"></div>
-        <div id="ability-5-cooldown-text" class="cooldown-text"></div>
-      </div>
-      <div id="ability-6" class="ability">
-        F
-        <div id="ability-6-cooldown" class="cooldown"></div>
-        <div id="ability-6-cooldown-text" class="cooldown-text"></div>
-      </div>
+    <div id="abilities" class="abilities">
     </div>
     <div id="buffs" class="buffs"></div>
     <script type="module" src="client.js"></script>