thayol/instructions-clear
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix dead state

Browse Source
This commit is contained in:
Thayol
2025-01-22 22:52:08 +09:00
parent 4f8dcebcd1
commit 0db1ceeedc
10 changed files with 263 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/client.js
+38 -8
View File
@@ -197,11 +197,18 @@ function connectWebSocket() {
state.height = stateUpdates.height
minimapCamera.top = state.height / 200
minimapCamera.right = state.height / 200
minimapCamera.right = state.width / 200
minimapCamera.bottom = -state.height / 200
minimapCamera.left = -state.height / 200
minimapCamera.left = -state.width / 200
minimapCamera.updateProjectionMatrix()
minimapCamera.position.set(state.width / 200, state.height / 200, minimapCameraZ)
const size = 300
const wide = state.width > state.height
minimapRenderer.setSize(
wide ? size : (state.width / state.height) * size,
wide ? (state.height / state.width) * size : size,
)
}
for (const [key, value] of Object.entries(stateUpdates)) {
@@ -333,8 +340,8 @@ function connectWebSocket() {
rotationBase.add(castingMarker)
const rangeMaterial = teamMaterials['range']
const rangeSize = e.visionRange ?? 0
// const rangeSize = (state.abilities.find((it) => it.id == e.abilities?.a)?.range ?? 0) + e.radius
// const rangeSize = e.visionRange ?? 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 = 5000
rangeMarker.scale.y = e.height / rangeMarkerSize
@@ -346,18 +353,32 @@ function connectWebSocket() {
entities[e.id] = entity
}
entity.children.at(0).visible = !e.dead
entity.children.at(1).visible = !e.dead
entity.children.at(2).visible = e.buffs.some((it) => it.id == 'exposed') // TODO: only works for Exposed now
let z = e.height / 100
if (e.dead) {
entity.rotation.x = 0
entity.position.z = 0
z = 0
}
else {
entity.rotation.x = Math.PI / 2
entity.position.z = e.height / 100
}
entity.userData.flaggedForRemoval = false
entity.children.at(3).rotation.y = e.rotation
positionTweens[entity.id] = new Tween(entity.position).to({ x: e.position.x / 100, y: e.position.y / 100, z: e.height / 100 }, tweenDuration).start()
positionTweens[entity.id] = new Tween(entity.position).to({ x: e.position.x / 100, y: e.position.y / 100, z }, tweenDuration).start()
const hp = entity.children.at(0).children.at(0)
const percentageHp = e.health / e.maxHealth
hp.scale.x = percentageHp
hp.position.x = -(1 - percentageHp) / 2
entity.children.at(4).visible = e.id == playerId // TODO: undo, just for clarity
// entity.children.at(4).visible = e.id == playerId
entity.children.at(3).children.at(0).visible = e.casting != null
}
@@ -446,8 +467,8 @@ function connectWebSocket() {
if (playerId != null) {
const player = state.entities.find((e) => e.id == playerId)
if (player != null) {
for (let abilityIndex = 0; abilityIndex < 4; abilityIndex++) {
const abilityKey = ['a', 'q', 'w', 'e'][abilityIndex]
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)
@@ -565,6 +586,15 @@ window.addEventListener('load', () => {
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 }))
}
}
})
public/index.html
+15
View File
@@ -199,6 +199,21 @@
<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>
<div id="buffs" class="buffs"></div>
<script type="module" src="client.js"></script>