Add abillity to stick to a player in web-app

This commit is contained in:
Blue (Lukas Rieger) 2020-08-16 21:21:02 +02:00
parent e60d60fc93
commit d5f12ee451
3 changed files with 48 additions and 7 deletions

View File

@ -2,6 +2,7 @@ import $ from 'jquery';
import {
Raycaster,
Vector2,
Vector3,
BoxBufferGeometry,
Mesh,
MeshBasicMaterial
@ -155,10 +156,21 @@ export default class HudInfo {
let lrpath = this.blueMap.dataRoot + this.blueMap.map + '/lowres/';
lrpath += pathFromCoords(lowresTile.x, lowresTile.y);
lrpath += '.json';
//chunk
let chunkCoords = new Vector3(block.x, block.y, block.z).divide({x:16,y:16,z:16}).floor();
let chunk = `x:${chunkCoords.x}, y:${chunkCoords.y}, z:${chunkCoords.z}`;
//region
let regionCoords = new Vector2(block.x, block.z).divide({x:512,y:512}).floor();
let region = `r.${regionCoords.x}.${regionCoords.y}.mca`;
$(`
<div class="files">
<span class="value">${hrpath}</span><br>
<span class="value">${lrpath}</span>
<span class="value">${lrpath}</span><br>
<span class="value">chunk: ${chunk}</span><br>
<span class="value">region: ${region}</span>
</div>
`).appendTo(content);
}

View File

@ -15,6 +15,8 @@ export default class PlayerMarker extends Marker {
this.animationRunning = false;
this.lastFrame = -1;
this.follow = false;
}
setVisible(visible){
@ -23,17 +25,18 @@ export default class PlayerMarker extends Marker {
this.blueMap.updateFrame = true;
if (!this.renderObject){
let iconElement = $(`<div class="marker-player"><img src="assets/playerheads/${this.player}.png" onerror="this.onerror=null;this.src='${STEVE}';"><div class="nameplate">${this.label}</div></div>`);
iconElement.find("img").click(this.onClick);
this.iconElement = $(`<div class="marker-player"><img src="assets/playerheads/${this.player}.png" onerror="this.onerror=null;this.src='${STEVE}';"><div class="nameplate">${this.label}</div></div>`);
this.iconElement.find("img").click(this.onClick);
$(window).on('mousedown touchstart', this.onStopFollowing);
this.renderObject = new CSS2DObject(iconElement[0]);
this.renderObject = new CSS2DObject(this.iconElement[0]);
this.renderObject.position.copy(this.position);
this.renderObject.onBeforeRender = (renderer, scene, camera) => {
let distanceSquared = this.position.distanceToSquared(camera.position);
if (distanceSquared > 1000000) {
iconElement.addClass("distant");
this.iconElement.addClass("distant");
} else {
iconElement.removeClass("distant");
this.iconElement.removeClass("distant");
}
this.updateRenderObject(this.renderObject, scene, camera);
@ -57,6 +60,11 @@ export default class PlayerMarker extends Marker {
} else {
this.renderObject.position.copy(this.position);
}
if (this.follow){
this.blueMap.controls.targetPosition.x = this.position.x;
this.blueMap.controls.targetPosition.z = this.position.z;
}
}
};
@ -86,7 +94,18 @@ export default class PlayerMarker extends Marker {
};
onClick = () => {
this.follow = true;
this.iconElement.addClass("following");
}
this.blueMap.controls.targetPosition.x = this.position.x;
this.blueMap.controls.targetPosition.z = this.position.z;
};
onStopFollowing = event => {
if(this.follow) {
this.follow = true;
this.iconElement.removeClass("following");
}
};
}

View File

@ -96,6 +96,8 @@
image-rendering: pixelated;
image-rendering: crisp-edges;
border: solid 2px transparent;
transition: all 0.3s;
}
@ -115,10 +117,18 @@
img {
width: 16px;
height: 16px;
border-width: 1px;
}
.nameplate {
opacity: 0;
}
}
&.following {
img {
border-color: white;
}
}
}