better UI
This commit is contained in:
parent
a1f858080c
commit
52b76e934c
3 changed files with 28 additions and 10 deletions
|
@ -28,7 +28,7 @@ class Player extends Entity {
|
||||||
this.isYou = false;
|
this.isYou = false;
|
||||||
|
|
||||||
this.serverProps = [
|
this.serverProps = [
|
||||||
'type', 'camera', 'pos', 'vel', 'rot', 'dir', 'ticks', 'health', 'you', 'isPlayer', 'headCount', 'isMenu', 'r', 'isYou'
|
'type', 'camera', 'pos', 'vel', 'rot', 'dir', 'ticks', 'health', 'you', 'isPlayer', 'headCount', 'isMenu', 'r', 'isYou', 'username'
|
||||||
];
|
];
|
||||||
|
|
||||||
this.legalProps = [
|
this.legalProps = [
|
||||||
|
|
2
index.js
2
index.js
|
@ -66,7 +66,7 @@ app.ws('/', function (ws, req) {
|
||||||
console.log(`Player ${player.you} uses username ${x.username} illegally`)
|
console.log(`Player ${player.you} uses username ${x.username} illegally`)
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
ws.username = j.username;
|
ws.ent.username = ws.username = j.username;
|
||||||
|
|
||||||
console.log(`Player ${player.you} uses username ${ws.username}`)
|
console.log(`Player ${player.you} uses username ${ws.username}`)
|
||||||
})()
|
})()
|
||||||
|
|
|
@ -56,12 +56,22 @@ class Game extends GameBasic {
|
||||||
|
|
||||||
ctx.clearRect(0, 0, cs, cs);
|
ctx.clearRect(0, 0, cs, cs);
|
||||||
|
|
||||||
|
ctx.strokeStyle = "rgb(255,255,255)";
|
||||||
|
ctx.lineWidth = "8";
|
||||||
|
ctx.textAlign = "center";
|
||||||
|
ctx.textBaseline = "bottom";
|
||||||
|
ctx.lineCap = "round";
|
||||||
|
ctx.lineJoin = "round";
|
||||||
|
ctx.font = "bold 16px sans-serif";
|
||||||
|
|
||||||
ctx.save();
|
ctx.save();
|
||||||
|
|
||||||
ctx.translate(player.camera.x + cs / 2, player.camera.y + cs / 2);
|
ctx.translate(player.camera.x + cs / 2, player.camera.y + cs / 2);
|
||||||
|
|
||||||
ctx.drawImage(assetsIn[2], -width / 2, -height / 2, width, height);
|
ctx.drawImage(assetsIn[2], -width / 2, -height / 2, width, height);
|
||||||
|
|
||||||
|
let textArgs = [];
|
||||||
|
|
||||||
for (let ent of entities) {
|
for (let ent of entities) {
|
||||||
if (ent.health <= 0) continue;
|
if (ent.health <= 0) continue;
|
||||||
|
|
||||||
|
@ -94,20 +104,28 @@ class Game extends GameBasic {
|
||||||
|
|
||||||
if (ent.type != 'Player') continue;
|
if (ent.type != 'Player') continue;
|
||||||
|
|
||||||
ctx.strokeStyle = "rgb(255,255,255)";
|
textArgs = [`HP: ${ent.health} PT: ${ent.headCount}`, ent.pos.x, ent.pos.y - 64 / 2];
|
||||||
ctx.lineWidth = "8";
|
|
||||||
ctx.textAlign = "center";
|
|
||||||
ctx.textBaseline = "bottom";
|
|
||||||
ctx.font = "bold 16px sans-serif";
|
|
||||||
|
|
||||||
let args = [`HP: ${ent.health} PT: ${ent.headCount} XY: ${Math.round(ent.pos.x)}, ${Math.round(ent.pos.y)}`, ent.pos.x, ent.pos.y - 64 / 2];
|
ctx.strokeText(...textArgs);
|
||||||
|
ctx.fillText(...textArgs);
|
||||||
|
|
||||||
ctx.strokeText(...args);
|
ctx.textBaseline = "top";
|
||||||
ctx.fillText(...args);
|
textArgs = [`${ent.username || 'Guest'}`, ent.pos.x, ent.pos.y + 64 / 2];
|
||||||
|
|
||||||
|
ctx.strokeText(...textArgs);
|
||||||
|
ctx.fillText(...textArgs);
|
||||||
}
|
}
|
||||||
|
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
|
|
||||||
|
ctx.textAlign = "start";
|
||||||
|
ctx.textBaseline = "top";
|
||||||
|
ctx.font = "bold 32px sans-serif";
|
||||||
|
|
||||||
|
textArgs = [`XY: ${-Math.round(player.camera.x)}, ${-Math.round(player.camera.y)}`,25,25];
|
||||||
|
ctx.strokeText(...textArgs);
|
||||||
|
ctx.fillText(...textArgs);
|
||||||
|
|
||||||
if (player.health <= 0 || player.isMenu) {
|
if (player.health <= 0 || player.isMenu) {
|
||||||
this.doMenu();
|
this.doMenu();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue