message visuals in test-client

3 files changed, 52 insertions, 3 deletions

diff --git a/test-client/main.ts b/test-client/main.ts
index 7f33bc98..e3185c67 100644
--- a/test-client/main.ts
+++ b/test-client/main.ts
@@ -99,6 +99,8 @@ export const items_removed = new Set<ItemData>()
 
 export let data: Gamedata = { item_names: [], tile_names: [], spawn: [0, 0], tile_collide: [], tile_interact: [] }
 
+export let global_message: MessageData | undefined = undefined
+let global_message_clear: number | undefined = undefined
 export let my_id: PlayerID = -1
 export let points = 0
 export let demands_completed = 0
@@ -194,7 +196,7 @@ function packet(p: PacketC) {
             const player = players.get(p.player)!
             if (player.message_clear) clearTimeout(player.message_clear)
             if (p.message) player.message = { inner: p.message, anim_size: 0., anim_position: player.anim_position }
-            else player.message = undefined
+            if (p.persist && !p.message) player.message = undefined
             if (!p.persist) player.message_clear = setTimeout(() => delete player.message, 3000)
             break;
         }
@@ -204,6 +206,9 @@ function packet(p: PacketC) {
             points = p.points
             break;
         case "error":
+            if (global_message_clear) clearTimeout(global_message_clear)
+            global_message = { inner: { text: p.message }, anim_size: 0., anim_position: { x: 0, y: 0 } }
+            global_message_clear = setTimeout(() => global_message = undefined, 4000)
             console.warn(p.message)
             break;
         case "set_ingame":
diff --git a/test-client/protocol.ts b/test-client/protocol.ts
index 1334ddf8..f9f0dbaf 100644
--- a/test-client/protocol.ts
+++ b/test-client/protocol.ts
@@ -50,7 +50,7 @@ export type PacketC =
     | { type: "communicate", player: PlayerID, message?: Message, persist: boolean } // A player wants to communicate something, message is null when cleared
     | { type: "score", points: number, demands_failed: number, demands_completed: number, } // Supplies information for score OSD
     | { type: "set_ingame", state: boolean } // Set to false when entering the game or switching maps
-    | { type: "error", message?: Message } // Your client did something wrong.
+    | { type: "error", message: string } // Your client did something wrong.
 
 export type Message =
     { item: number }
diff --git a/test-client/visual.ts b/test-client/visual.ts
index 19866710..a26bab6c 100644
--- a/test-client/visual.ts
+++ b/test-client/visual.ts
@@ -15,7 +15,7 @@
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
     
 */
-import { ItemData, MessageData, PlayerData, TileData, camera, camera_scale, canvas, ctx, data, demands_completed, demands_failed, get_interact_target, interact_active_anim, interact_possible_anim, interact_target_anim, items_removed, keys_down, my_id, players, points, tiles } from "./main.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, players, points, tiles } from "./main.ts";
 import { PLAYER_SIZE } from "./movement.ts";
 import { FALLBACK_TILE, ITEMS, TILES, FALLBACK_ITEM } from "./tiles.ts";
 import { V2, ceil_v2, floor_v2 } from "./util.ts";
@@ -74,6 +74,8 @@ export function draw_ingame() {
 
     ctx.restore()
 
+    draw_global_message()
+
     ctx.fillStyle = "white"
     ctx.textAlign = "left"
     ctx.textBaseline = "bottom"
@@ -200,6 +202,48 @@ function draw_message(m: MessageData) {
         for (const c of comps) c(ctx)
         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)
+    }
+    ctx.restore()
+}
+
+function draw_global_message() {
+    if (!global_message) return
+    ctx.save()
+    ctx.translate(canvas.width / 2, canvas.height / 6)
+    if ("text" in global_message.inner) {
+        ctx.font = "20px monospace"
+        const lines = global_message.inner.text.split("\n")
+        const w = lines.reduce((a, v) => Math.max(a, ctx.measureText(v).width), 0) + 20
+
+        ctx.fillStyle = "#fffa"
+        ctx.beginPath()
+        ctx.roundRect(-w / 2, -20, w, lines.length * 25 + 20, 5)
+        ctx.fill()
+
+        ctx.fillStyle = "black"
+        ctx.textAlign = "left"
+        ctx.textBaseline = "middle"
+        for (let i = 0; i < lines.length; i++)
+            ctx.fillText(lines[i], -w / 2 + 10, i * 25)
+    }
     ctx.restore()
 }