colorize message if hint or error

2 files changed, 36 insertions, 7 deletions

diff --git a/test-client/main.ts b/test-client/main.ts
index 2f828576..c4340fe8 100644
--- a/test-client/main.ts
+++ b/test-client/main.ts
@@ -98,6 +98,7 @@ export interface TileData {
     item?: ItemData
 }
 export interface MessageData {
+    style: "hint" | "normal" | "error"
     inner: Message
     anim_position: V2,
     anim_size: number,
@@ -221,7 +222,13 @@ function packet(p: PacketC) {
         case "communicate": {
             const player = players.get(p.player)!
             if (p.message) {
-                const message = { inner: p.message, anim_size: 0., anim_position: player.anim_position, timeout: p.timeout ?? { initial: 5, remaining: 5 } };
+                const message = {
+                    inner: p.message,
+                    anim_size: 0.,
+                    anim_position: player.anim_position,
+                    timeout: p.timeout ?? { initial: 5, remaining: 5 },
+                    style: "normal" as const
+                };
                 if (p.timeout === undefined) player.message = message
                 else player.message_persist = message
             } else if (p.timeout !== undefined) {
@@ -236,8 +243,13 @@ function packet(p: PacketC) {
             score.time_remaining = p.time_remaining ?? null
             break;
         case "server_message":
-            // TODO error -> red
-            global_message = { inner: p.message, anim_size: 0., anim_position: { x: 0, y: 0 }, timeout: { initial: 5, remaining: 5 } }
+            global_message = {
+                inner: p.message,
+                style: p.error ? "error" : "normal",
+                anim_size: 0.,
+                anim_position: { x: 0, y: 0 },
+                timeout: { initial: 5, remaining: 5 }
+            }
             break;
         case "set_ingame":
             console.log(`ingame ${p.state}`);
@@ -249,7 +261,14 @@ function packet(p: PacketC) {
             break;
         }
         case "server_hint":
-            if (p.message) server_hints.set(p.position + "", { inner: p.message, anim_size: 0., anim_position: p.position ? { x: p.position[0] + 0.5, y: p.position[1] + 0.5 } : players.get(my_id)!.anim_position })
+            if (p.message) server_hints.set(p.position + "", {
+                inner: p.message,
+                anim_size: 0.,
+                anim_position: p.position ?
+                    { x: p.position[0] + 0.5, y: p.position[1] + 0.5 } :
+                    players.get(my_id)!.anim_position,
+                style: "hint"
+            })
             else server_hints.delete(p.position + "")
             break;
         case "environment":
@@ -259,7 +278,15 @@ function packet(p: PacketC) {
         case "menu":
             switch (p.menu) {
                 case "book": open("https://s.metamuffin.org/static/hurrycurry/book.pdf"); break
-                case "score": global_message = { timeout: { initial: 5, remaining: 5 }, inner: { text: `Score: ${JSON.stringify(p.data, null, 4)}` }, anim_position: { x: 0, y: 0 }, anim_size: 0 }; break
+                case "score":
+                    global_message = {
+                        timeout: { initial: 5, remaining: 5 },
+                        inner: { text: `Score: ${JSON.stringify(p.data, null, 4)}` },
+                        anim_position: { x: 0, y: 0 },
+                        anim_size: 0,
+                        style: "normal"
+                    };
+                    break
                 default: console.warn("unknown menu");
             }
             break;
diff --git a/test-client/visual.ts b/test-client/visual.ts
index d63bee03..6802b2b4 100644
--- a/test-client/visual.ts
+++ b/test-client/visual.ts
@@ -221,6 +221,8 @@ function message_str(m: Message): string {
     return "[unknown message type]"
 }
 
+const MESSAGE_BG = { "normal": "#fff", "hint": "#111", "error": "#fff" }
+const MESSAGE_FG = { "normal": "#000", "hint": "#fff", "error": "#a00" }
 function draw_message(m: MessageData, server?: boolean) {
     ctx.save()
     ctx.translate(m.anim_position.x, m.anim_position.y)
@@ -259,12 +261,12 @@ function draw_message(m: MessageData, server?: boolean) {
 
         if (!server) ctx.translate(0, -lines.length * 15 / 2)
 
-        ctx.fillStyle = "#fffa"
+        ctx.fillStyle = MESSAGE_BG[m.style]
         ctx.beginPath()
         ctx.roundRect(-w / 2, -5, w, lines.length * 15 + 10, 5)
         ctx.fill()
 
-        ctx.fillStyle = "black"
+        ctx.fillStyle = MESSAGE_FG[m.style]
         ctx.textAlign = "left"
         ctx.textBaseline = "top"
         for (let i = 0; i < lines.length; i++)