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

make minimap dynamic

Browse Source
This commit is contained in:
Thayol
2025-01-18 11:07:06 +09:00
parent 7415475cb0
commit 18c3ace616
3 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/client.js
+16 -2
View File
@@ -34,6 +34,7 @@ const teamMaterials = {
range: new THREE.MeshToonMaterial({ color: 0x00ffff, transparent: true, opacity: opacity / 2 }), range: new THREE.MeshToonMaterial({ color: 0x00ffff, transparent: true, opacity: opacity / 2 }),
} }
const minimapCameraZ = 10
const minimapCamera = new THREE.OrthographicCamera(-10, 10, 10, -10) const minimapCamera = new THREE.OrthographicCamera(-10, 10, 10, -10)
const minimapRenderer = new THREE.WebGLRenderer() const minimapRenderer = new THREE.WebGLRenderer()
@@ -171,8 +172,21 @@ function connectWebSocket() {
websocket.onmessage = (event) => { websocket.onmessage = (event) => {
state.byteSize = new Blob([event.data]).size state.byteSize = new Blob([event.data]).size
const stateUpdates = JSON.parse(event.data) 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)) { 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 state[key] = value
} }
} }
@@ -282,7 +296,7 @@ function connectWebSocket() {
if (e.id == playerId) { if (e.id == playerId) {
const rangeMaterial = teamMaterials['range'] 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 rangeMarker = new THREE.Mesh(new THREE.CylinderGeometry((rangeSize) / 100, (rangeSize) / 100, 1), rangeMaterial)
const rangeMarkerSize = 4000 const rangeMarkerSize = 4000
rangeMarker.scale.y = e.height / rangeMarkerSize rangeMarker.scale.y = e.height / rangeMarkerSize
public/index.html
+1
View File
@@ -135,6 +135,7 @@
</style> </style>
</head> </head>
<body> <body>
<!-- TODO: display buffs -->
<div class="debug-panel"> <div class="debug-panel">
<p>Connection: <span id="connection"></span></p> <p>Connection: <span id="connection"></span></p>
<pre id="state"></pre> <pre id="state"></pre>
src/game.js
+2 -2
View File
@@ -11,12 +11,12 @@ export default class Game {
averageTick = 0 averageTick = 0
currentTick = 0 currentTick = 0
entities = [] entities = []
height = 2000 height = 5000
projectiles = [] projectiles = []
secondToSlowestTick = 0 secondToSlowestTick = 0
terrains = [] terrains = []
tickRate = 30 tickRate = 30
width = 2000 width = 5000
#currentTiming = 0 #currentTiming = 0
#eventEmitter = new EventEmitter() #eventEmitter = new EventEmitter()