diff options
| -rw-r--r-- | test-client/main.ts | 4 | ||||
| -rw-r--r-- | test-client/visual.ts | 21 |
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) } |