1 files changed, 26 insertions, 4 deletions
diff --git a/test-client/visual.ts b/test-client/visual.ts
index 09b6ec85..863fea41 100644
--- a/test-client/visual.ts
+++ b/test-client/visual.ts
@@ -15,6 +15,7 @@
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 */
+import { tr } from "./locale.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, server_hints, tiles, time_remaining } from "./main.ts";
 import { PLAYER_SIZE } from "./movement.ts";
 import { draw_item_sprite, draw_tile_sprite, ItemName, TileName } from "./tiles.ts";
@@ -91,12 +92,12 @@ export function draw_ingame() {
     ctx.textBaseline = "bottom"
     ctx.font = "20px sans-serif"
     if (time_remaining != undefined)
-        ctx.fillText(`Time remaining: ${time_remaining?.toFixed(2)}`, 10, canvas.height - 90)
+        ctx.fillText(`${tr("c.score.time_remaining")}: ${time_remaining?.toFixed(2)}`, 10, canvas.height - 90)
     ctx.font = "30px sans-serif"
-    ctx.fillText(`Points: ${points}`, 10, canvas.height - 60)
+    ctx.fillText(`${tr("c.score.points")}: ${points}`, 10, canvas.height - 60)
     ctx.font = "20px sans-serif"
-    ctx.fillText(`Completed: ${demands_completed}`, 10, canvas.height - 30)
-    ctx.fillText(`Failed: ${demands_failed}`, 10, canvas.height - 10)
+    ctx.fillText(`${tr("c.score.completed")}: ${demands_completed}`, 10, canvas.height - 30)
+    ctx.fillText(`${tr("c.score.failed")}: ${demands_failed}`, 10, canvas.height - 10)
 
     if (keys_down.has("KeyP")) {
         draw_debug()
@@ -258,6 +259,27 @@ function draw_message(m: MessageData) {
 
         ctx.translate(0, 1)
     }
+    if ("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 w = ctx.measureText(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(text, 0, 0)
+
+        ctx.translate(0, 1)
+    }
     ctx.restore()
 }