translate tutorial and add tile message

2 files changed, 17 insertions, 35 deletions

diff --git a/test-client/protocol.ts b/test-client/protocol.ts
index 4d243702..6d7bf464 100644
--- a/test-client/protocol.ts
+++ b/test-client/protocol.ts
@@ -88,6 +88,7 @@ export interface Score {
 
 export type Message =
     { item: number }
+    | { tile: number }
     | { text: string }
     | { effect: string }
     | { translation: { id: string, params: Message[] } }
diff --git a/test-client/visual.ts b/test-client/visual.ts
index f25be1ef..e1bb7681 100644
--- a/test-client/visual.ts
+++ b/test-client/visual.ts
@@ -20,6 +20,7 @@ import { ItemData, MessageData, PlayerData, TileData, camera, camera_scale, canv
 import { PLAYER_SIZE } from "./movement.ts";
 import { draw_item_sprite, draw_tile_sprite, ItemName, TileName } from "./tiles.ts";
 import { V2, ceil_v2, floor_v2 } from "./util.ts";
+import { Message } from "./protocol.ts";
 
 export function draw_wait(text: string) {
     ctx.fillStyle = "#444"
@@ -49,38 +50,30 @@ export function draw_ingame() {
 
     draw_grid()
 
-    // Draw tiles
-    for (const [_, tile] of tiles) {
+    for (const [_, tile] of tiles)
         draw_tile(tile)
-    }
 
-    // Draw players
     for (const [_, player] of players)
         draw_player(player)
 
-    // Draw removed items
     for (const item of items_removed)
         draw_item(item)
 
-    // Draw items on tiles
     for (const [_, tile] of tiles)
         if (tile.item) draw_item(tile.item)
 
-    // Draw player messages
-    for (const [_, player] of players) {
+    for (const [_, player] of players)
         if (player.message) draw_message(player.message)
+
+    for (const [_, player] of players)
         if (player.message_persist) draw_message(player.message_persist)
-    }
 
-    // Draw nametags
     for (const [_, player] of players)
         draw_player_nametag(player)
 
-    // Draw server hints
     for (const [_, message] of server_hints)
         draw_message(message)
 
-    // Draw interact target
     draw_interact_target()
 
     ctx.restore()
@@ -90,9 +83,8 @@ export function draw_ingame() {
     if (!is_lobby)
         draw_score()
 
-    if (keys_down.has("KeyP")) {
+    if (keys_down.has("KeyP"))
         draw_debug()
-    }
 }
 
 function draw_score() {
@@ -219,6 +211,14 @@ function draw_character(character: number) {
     ctx.fill()
 }
 
+function message_str(m: Message): string {
+    if ("text" in m) return m.text
+    if ("translation" in m) return tr(m.translation.id, ...m.translation.params.map(message_str))
+    if ("tile" in m) return data.tile_names[m.tile]
+    if ("item" in m) return data.item_names[m.item]
+    return "[unknown message type]"
+}
+
 function draw_message(m: MessageData) {
     ctx.save()
     ctx.translate(m.anim_position.x, m.anim_position.y)
@@ -245,33 +245,14 @@ function draw_message(m: MessageData) {
         draw_item_sprite(ctx, data.item_names[m.inner.item] as ItemName)
         ctx.translate(0, 1)
     }
-    if ("text" in m.inner) {
-        ctx.translate(0, -1)
-
-        ctx.textAlign = "center"
-        ctx.font = "15px sans-serif"
-        ctx.scale(2 / camera_scale, 2 / camera_scale)
-        const w = ctx.measureText(m.inner.text).width + 30
-
-        ctx.fillStyle = "#fffa"
-        ctx.beginPath()
-        ctx.roundRect(-w / 2, -15, w, 30, 5)
-        ctx.fill()
-
-        ctx.fillStyle = "black"
-        ctx.textBaseline = "middle"
-        ctx.fillText(m.inner.text, 0, 0)
-
-        ctx.translate(0, 1)
-    }
-    if ("translation" in m.inner) {
+    if ("text" in m.inner || "translation" in m.inner) {
         ctx.translate(0, -1)
 
         ctx.textAlign = "center"
         ctx.font = "15px sans-serif"
         ctx.scale(2 / camera_scale, 2 / camera_scale)
 
-        const text = tr(m.inner.translation.id, ...m.inner.translation.params.map(p => "text" in p ? p.text : "[not text]"));
+        const text = message_str(m.inner);
         const w = ctx.measureText(text).width + 30
 
         ctx.fillStyle = "#fffa"