nametags in testclient

2 files changed, 24 insertions, 1 deletions

diff --git a/test-client/main.ts b/test-client/main.ts
index 70c07212..c7d6cf1c 100644
--- a/test-client/main.ts
+++ b/test-client/main.ts
@@ -73,6 +73,7 @@ export interface ItemData {
     remove_anim?: number
 }
 export interface PlayerData extends MovementBase {
+    id: number,
     name: string,
     item?: ItemData,
     character: number,
@@ -111,6 +112,7 @@ export let camera_scale = 0.05;
 export const interact_target_anim: V2 = { x: 0, y: 0 }
 export let interact_possible_anim: number = 0
 export let interact_active_anim: number = 0
+export let nametag_scale_anim: number = 0
 let interacting: V2 | undefined;
 
 function get_item_location(loc: ItemLocation): PlayerData | TileData {
@@ -132,6 +134,7 @@ function packet(p: PacketC) {
             break;
         case "add_player": {
             players.set(p.id, {
+                id: p.id,
                 position: { x: p.position[0], y: p.position[1], },
                 anim_position: { x: p.position[0], y: p.position[1] },
                 character: p.character,
@@ -332,6 +335,7 @@ function frame_update(dt: number) {
 
     const zoom_target = Math.min(canvas.width, canvas.height) * (keys_down.has("KeyL") ? 0.05 : 0.1)
     camera_scale = lerp_exp(camera_scale, zoom_target, dt * 5)
+    nametag_scale_anim = lerp_exp(nametag_scale_anim, keys_down.has("KeyL") ? 1.5 : 0, dt * 10)
 }
 
 function resize() {
diff --git a/test-client/visual.ts b/test-client/visual.ts
index dd676435..2fbe9f78 100644
--- a/test-client/visual.ts
+++ b/test-client/visual.ts
@@ -15,7 +15,7 @@
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
     
 */
-import { ItemData, MessageData, PlayerData, TileData, camera, camera_scale, canvas, ctx, data, demands_completed, demands_failed, get_interact_target, global_message, interact_active_anim, interact_possible_anim, interact_target_anim, items_removed, keys_down, my_id, players, points, tiles, time_remaining } from "./main.ts";
+import { ItemData, MessageData, PlayerData, TileData, camera, camera_scale, canvas, ctx, data, demands_completed, demands_failed, get_interact_target, global_message, interact_active_anim, interact_possible_anim, interact_target_anim, items_removed, keys_down, my_id, nametag_scale_anim, players, points, tiles, time_remaining } from "./main.ts";
 import { PLAYER_SIZE } from "./movement.ts";
 import { FALLBACK_TILE, ITEMS, TILES, FALLBACK_ITEM } from "./tiles.ts";
 import { V2, ceil_v2, floor_v2 } from "./util.ts";
@@ -134,6 +134,25 @@ function draw_player(player: PlayerData) {
     ctx.rotate(-player.rot)
     draw_character(player.character)
     ctx.restore()
+
+    if (nametag_scale_anim > 0.01) {
+        ctx.save()
+        ctx.translate(player.anim_position.x, player.anim_position.y)
+        ctx.translate(0, -1)
+        ctx.textAlign = "center"
+        ctx.font = "10px sans-serif"
+        ctx.scale(nametag_scale_anim / camera_scale, nametag_scale_anim / camera_scale)
+        const w = ctx.measureText(player.name).width + 20
+        ctx.fillStyle = "#fffa"
+        ctx.beginPath()
+        ctx.roundRect(-w / 2, -10, w, 20, 5)
+        ctx.fill()
+        ctx.fillStyle = "black"
+        ctx.textBaseline = "middle"
+        ctx.fillText(player.name, 0, 0)
+        ctx.restore()
+    }
+
     if (player.item) draw_item(player.item)
 }