diff options
| -rw-r--r-- | test-client/main.ts | 11 | ||||
| -rw-r--r-- | test-client/visual.ts | 79 |
2 files changed, 54 insertions, 36 deletions
diff --git a/test-client/main.ts b/test-client/main.ts index 1e6168ed..60a483d8 100644 --- a/test-client/main.ts +++ b/test-client/main.ts @@ -55,7 +55,7 @@ export interface PlayerData { character: number, anim_position: V2, vel: V2, - message?: Message, + message?: MessageData, } export interface TileData { x: number @@ -63,6 +63,11 @@ export interface TileData { kind: TileIndex item?: ItemData } +export interface MessageData { + inner: Message + anim_position: V2, + anim_size: number, +} export const players = new Map<PlayerID, PlayerData>() export const tiles = new Map<string, TileData>() @@ -151,7 +156,8 @@ function packet(p: PacketC) { break; case "communicate": { const player = players.get(p.player)! - player.message = p.message + if (p.message) player.message = { inner: p.message, anim_size: 0., anim_position: player.anim_position } + else player.message = undefined break; } default: @@ -213,6 +219,7 @@ function frame_update(dt: number) { if (pid == my_id) player.anim_position.x = player.x, player.anim_position.y = player.y else lerp_exp_v2_mut(player.anim_position, player, dt * 15) if (player.item !== undefined && player.item !== null) update_item(player.item) + if (player.message) player.message.anim_size = lerp_exp(player.message.anim_size, 1, dt * 3) } for (const [_, tile] of tiles) { if (tile.item !== undefined && tile.item !== null) update_item(tile.item) diff --git a/test-client/visual.ts b/test-client/visual.ts index cd32b77b..a70b6387 100644 --- a/test-client/visual.ts +++ b/test-client/visual.ts @@ -1,6 +1,5 @@ -import { ItemData, camera, canvas, ctx, data, get_interact_target, interact_possible_anim, interact_target_anim, items_removed, keys_down, players, tiles } from "./main.ts"; +import { ItemData, MessageData, PlayerData, TileData, camera, canvas, ctx, data, get_interact_target, interact_possible_anim, interact_target_anim, items_removed, keys_down, players, tiles } from "./main.ts"; import { PLAYER_SIZE } from "./movement.ts"; -import { Message } from "./protocol.ts"; import { FALLBACK_TILE, ITEMS, TILES, FALLBACK_ITEM } from "./tiles.ts"; import { V2, ceil_v2, floor_v2 } from "./util.ts"; @@ -29,6 +28,7 @@ export function draw_ingame() { ctx.fillRect(0, 0, canvas.width, canvas.height) scale = Math.min(canvas.width, canvas.height) * camera_zoom; + ctx.save() ctx.translate(canvas.width / 2, canvas.height / 2) ctx.scale(scale, scale) @@ -36,39 +36,28 @@ export function draw_ingame() { draw_grid() + // Draw tiles for (const [_, tile] of tiles) { - ctx.save() - ctx.translate(tile.x + 0.5, tile.y + 0.5) - const comps = TILES[data.tile_names[tile.kind]] ?? FALLBACK_TILE - for (const c of comps) { - c(ctx) - } - ctx.restore() + draw_tile(tile) } - for (const [_, player] of players) { - { - ctx.save() - ctx.translate(player.anim_position.x, player.anim_position.y) - { - ctx.save() - ctx.rotate(-player.rot) - draw_character(player.character) - ctx.restore() - } - if (player.message) draw_message(player.message) - ctx.restore() - } - if (player.item) draw_item(player.item) - } + // Draw players + for (const [_, player] of players) + draw_player(player) - for (const item of items_removed) { + // Draw removed items + for (const item of items_removed) draw_item(item) - } - for (const [_, tile] of tiles) { + + // Draw items on tiles + for (const [_, tile] of tiles) if (tile.item) draw_item(tile.item) - } + // Draw player messages + for (const [_, player] of players) + if (player.message) draw_message(player.message) + + // Draw interact target draw_interact_target() ctx.restore() @@ -83,6 +72,16 @@ export function draw_ingame() { } else { camera_zoom = 0.1 } } +function draw_tile(tile: TileData) { + ctx.save() + ctx.translate(tile.x + 0.5, tile.y + 0.5) + const comps = TILES[data.tile_names[tile.kind]] ?? FALLBACK_TILE + for (const c of comps) { + c(ctx) + } + ctx.restore() +} + function draw_item(item: ItemData) { ctx.save() ctx.translate(item.x, item.y) @@ -98,6 +97,15 @@ function draw_item(item: ItemData) { ctx.restore() } +function draw_player(player: PlayerData) { + ctx.save() + ctx.translate(player.anim_position.x, player.anim_position.y) + ctx.rotate(-player.rot) + draw_character(player.character) + ctx.restore() + if (player.item) draw_item(player.item) +} + function draw_interact_target() { ctx.save() ctx.translate(interact_target_anim.x, interact_target_anim.y) @@ -149,19 +157,22 @@ function draw_character(character: number) { ctx.fill() } -function draw_message(m: Message) { +function draw_message(m: MessageData) { ctx.save() - ctx.translate(0, -1) - if ("item" in m) { + ctx.translate(m.anim_position.x, m.anim_position.y) + ctx.scale(m.anim_size, m.anim_size) + if ("item" in m.inner) { ctx.fillStyle = "#fffa" ctx.beginPath() - ctx.moveTo(0, 0.7) - ctx.arc(0, 0, 0.5, Math.PI / 4, Math.PI - Math.PI / 4, true) + ctx.moveTo(0, -0.3) + ctx.arc(0, -1, 0.5, Math.PI / 4, Math.PI - Math.PI / 4, true) ctx.closePath() ctx.fill() - const comps = ITEMS[data.item_names[m.item]] ?? FALLBACK_ITEM + ctx.translate(0, -1) + const comps = ITEMS[data.item_names[m.inner.item]] ?? FALLBACK_ITEM for (const c of comps) c(ctx) + ctx.translate(0, 1) } ctx.restore() } |