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

add vision

Browse Source
This commit is contained in:
Thayol
2025-01-20 00:05:48 +09:00
parent 634dde2a3b
commit bf38f69071
8 changed files with 241 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/client.js
+21 -15
View File
@@ -23,12 +23,13 @@ camera.layers.enable(2)
const projectileMaterial = new THREE.MeshToonMaterial({ color: 0xcccccc })
const terrainMaterial = new THREE.MeshToonMaterial({ color: 0x5c4033 })
const bboxMaterial = new THREE.MeshToonMaterial({ color: 0xffd700, transparent: true, opacity: 0.2 })
// const bboxMaterial = new THREE.MeshToonMaterial({ color: 0xffd700, transparent: true, opacity: 0.2 })
const opacity = 0.3
const teamMaterials = {
blue: new THREE.MeshToonMaterial({ color: 0x4444ff }),
blueTransparent: new THREE.MeshToonMaterial({ color: 0x4444ff, transparent: true, opacity }),
neutral: new THREE.MeshToonMaterial({ color: 0x22dd22, transparent: true, opacity }),
neutral: new THREE.MeshToonMaterial({ color: 0xcccccc }),
neutralTransparent: new THREE.MeshToonMaterial({ color: 0xcccccc, transparent: true, opacity }),
red: new THREE.MeshToonMaterial({ color: 0xff4444 }),
redTransparent: new THREE.MeshToonMaterial({ color: 0xff4444, transparent: true, opacity }),
projectile: new THREE.MeshToonMaterial({ color: 0xff00ff, transparent: true, opacity }),
@@ -169,6 +170,7 @@ function connectWebSocket() {
websocket.onopen = () => {
document.getElementById('connection').innerHTML = 'open'
clearInterval(timerId)
websocket.send(JSON.stringify({ action: 'join', id: playerId }))
}
websocket.onclose = () => {
websocket = null
@@ -329,9 +331,10 @@ function connectWebSocket() {
rotationBase.add(castingMarker)
const rangeMaterial = teamMaterials['range']
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 = 4000
const rangeMarkerSize = 5000
rangeMarker.scale.y = e.height / rangeMarkerSize
rangeMarker.position.y = (e.height / (rangeMarkerSize * 2)) - (e.height / 100)
rangeMarker.layers.set(1)
@@ -382,7 +385,7 @@ function connectWebSocket() {
scene.add(projectile)
projectile.rotation.x = Math.PI / 2 // needed for the team marker...
const teamMaterial = teamMaterials['projectile']
const teamMaterial = teamMaterials[`${p.team}Transparent`] ?? teamMaterials['projectile']
const teamMarker = new THREE.Mesh(new THREE.CylinderGeometry((p.radius) / 100, (p.radius) / 100, 1), teamMaterial)
const teamMarkerSize = 4000
teamMarker.scale.y = p.height / teamMarkerSize
@@ -462,7 +465,7 @@ function connectWebSocket() {
}
}
if (player.casting?.ability?.id == ability.id) {
if (player.casting?.ability == ability.id) {
document.getElementById(`ability-${abilityIndex}-cooldown`).style.clipPath = `polygon(50% 0%, 0% 100%, 100% 100%)` // triangle
}
else {
@@ -485,16 +488,19 @@ function connectWebSocket() {
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)}%`
}
const ability = state.abilities.find((it) => it.id == player.casting.ability)
if (ability != null) {
const castDuration = (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_progress').style.clipPath = `polygon(0 0, ${cssPercentage} 0, ${cssPercentage} 100%, 0% 100%)`
document.getElementById('cast_indicator_name').innerHTML = ability.name ?? ''
}
}
document.getElementById('cast_indicator').style.display = castIndicatorDisplay