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()
 }