proper message draw order

1 files changed, 45 insertions, 34 deletions

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