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

extend moveset with attack, halt, stop

Browse Source
This commit is contained in:
Thayol
2025-01-12 17:03:42 +09:00
parent 302d2f0618
commit 6ff950640c
4 changed files with 167 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/client.js
+42 -5
View File
@@ -271,10 +271,33 @@ function connectWebSocket() {
}
}
document.getElementById(`ability-${abilityIndex}-cooldown`).style.clipPath = `polygon(0 ${cssPercentage}, 100% ${cssPercentage}, 100% 100%, 0 100%)`
if (player.casting?.ability?.id == 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 castIndicatorDisplay = 'none'
if (player.casting != null) {
castIndicatorDisplay = 'block'
const castDuration = (player.casting.ability.castTime * state.tickRate) ?? 0
const remainingCastTime = (player.casting.timestamp + castDuration) - state.currentTick
let cssPercentage = '100%'
if (remainingCastTime > 0) {
const castPercentage = 1 - (remainingCastTime / castDuration)
cssPercentage = `${Math.round(100 * castPercentage)}%`
}
document.getElementById('cast_indicator_progress').style.clipPath = `polygon(0 0, ${cssPercentage} 0, ${cssPercentage} 100%, 0% 100%)`
document.getElementById('cast_indicator_name').innerHTML = player.casting.ability?.name ?? ''
}
document.getElementById('cast_indicator').style.display = castIndicatorDisplay
}
}
@@ -294,12 +317,12 @@ window.addEventListener('load', () => {
const canvas = renderer.domElement
canvas.classList.add('canvas')
canvas.addEventListener('mousedown', (event) => {
window.addEventListener('mousedown', (event) => {
const intersect = raycastToGround()
if (intersect != null) {
const { x, y } = intersect
if (event.button == 0) {
websocket.send(JSON.stringify({ action: 'cast', slot: 0, id: playerId, x, y }))
websocket.send(JSON.stringify({ action: 'attack', id: playerId, x, y }))
}
if (event.button == 2) {
@@ -311,6 +334,20 @@ window.addEventListener('load', () => {
const intersect = raycastToGround()
if (intersect != null) {
const { x, y } = intersect
if (event.code == 'KeyA') {
websocket.send(JSON.stringify({ action: 'attack', id: playerId, x, y }))
}
if (event.code == 'KeyX') {
websocket.send(JSON.stringify({ action: 'cast', slot: 0, id: playerId, x, y }))
}
if (event.code == 'KeyS') {
websocket.send(JSON.stringify({ action: 'stop', id: playerId }))
}
if (event.code == 'KeyH') {
websocket.send(JSON.stringify({ action: 'halt', id: playerId }))
}
if (event.code == 'KeyQ') {
websocket.send(JSON.stringify({ action: 'cast', slot: 1, id: playerId, x, y }))
}
@@ -330,7 +367,7 @@ window.addEventListener('load', () => {
}
})
document.addEventListener('wheel', (event) => {
window.addEventListener('wheel', (event) => {
if (event.deltaY < 0) {
camera.zoom += 0.2
if (camera.zoom > 3) {
@@ -353,7 +390,7 @@ window.addEventListener('load', () => {
renderer.setSize(window.innerWidth, window.innerHeight)
})
document.addEventListener('contextmenu', (event) => event.preventDefault())
window.addEventListener('contextmenu', (event) => event.preventDefault())
window.addEventListener('keydown', (event) => keysDown[event.code] = true)
window.addEventListener('keyup', (event) => keysDown[event.code] = false)
window.addEventListener('keydown', (event) => {