diff options
Diffstat (limited to 'test-client')
| -rw-r--r-- | test-client/main.ts | 13 | ||||
| -rw-r--r-- | test-client/protocol.ts | 3 | ||||
| -rw-r--r-- | test-client/visual.ts | 38 |
3 files changed, 21 insertions, 33 deletions
diff --git a/test-client/main.ts b/test-client/main.ts index 8eab832d..2f828576 100644 --- a/test-client/main.ts +++ b/test-client/main.ts @@ -235,20 +235,19 @@ function packet(p: PacketC) { score.points = p.points score.time_remaining = p.time_remaining ?? null break; - case "error": - global_message = { inner: { text: p.message }, anim_size: 0., anim_position: { x: 0, y: 0 }, timeout: { initial: 5, remaining: 5 } } - console.warn(p.message) - break; case "server_message": - global_message = { inner: { text: p.text }, anim_size: 0., anim_position: { x: 0, y: 0 }, timeout: { initial: 5, remaining: 5 } } + // TODO error -> red + global_message = { inner: p.message, anim_size: 0., anim_position: { x: 0, y: 0 }, timeout: { initial: 5, remaining: 5 } } break; case "set_ingame": console.log(`ingame ${p.state}`); is_lobby = p.lobby break; - case "movement_sync": - players.get(my_id)!.position = last_server_sent_position + case "movement_sync": { + const me = players.get(my_id) + if (me) me.position = last_server_sent_position 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 }) else server_hints.delete(p.position + "") diff --git a/test-client/protocol.ts b/test-client/protocol.ts index 3bceb351..b6ef9046 100644 --- a/test-client/protocol.ts +++ b/test-client/protocol.ts @@ -59,13 +59,12 @@ export type PacketC = | { type: "update_map", tile: Vec2, kind: TileIndex | null, neighbors: [TileIndex | null] } // A map tile was changed | { type: "communicate", player: PlayerID, message?: Message, timeout?: MessageTimeout } // A player wants to communicate something, message is null when cleared | { type: "effect", player: PlayerID, name: string } // Player sent an effect - | { type: "server_message", text: string } // Text message from the server + | { type: "server_message", message: Message, error: boolean } // Text message from the server | { type: "server_hint", message?: Message, position?: Vec2 } // Hint message from server with optional position. Message is unset to clear previous message | { type: "score" } & Score // Supplies information for score OSD | { type: "menu" } & Menu // Open a menu on the client-side | { type: "environment", effects: string[] } | { type: "set_ingame", state: boolean, lobby: boolean } // Set to false when entering the game or switching maps - | { type: "error", message: string } // Your client did something wrong. export type Menu = { menu: "book" } diff --git a/test-client/visual.ts b/test-client/visual.ts index ece31b8b..d63bee03 100644 --- a/test-client/visual.ts +++ b/test-client/visual.ts @@ -221,7 +221,7 @@ function message_str(m: Message): string { return "[unknown message type]" } -function draw_message(m: MessageData) { +function draw_message(m: MessageData, server?: boolean) { ctx.save() ctx.translate(m.anim_position.x, m.anim_position.y) const scale = Math.min(m.anim_size, 1 - nametag_scale_anim); @@ -251,20 +251,24 @@ function draw_message(m: MessageData) { ctx.translate(0, -1) ctx.textAlign = "center" - ctx.font = "15px sans-serif" - ctx.scale(2 / camera_scale, 2 / camera_scale) + ctx.font = "15px " + (server ? "monospace" : "sans-serif") + if (!server) ctx.scale(2 / camera_scale, 2 / camera_scale) + + const lines = message_str(m.inner).split("\n") + const w = lines.reduce((a, v) => Math.max(a, ctx.measureText(v).width), 0) + 10 - const text = message_str(m.inner); - const w = ctx.measureText(text).width + 30 + if (!server) ctx.translate(0, -lines.length * 15 / 2) ctx.fillStyle = "#fffa" ctx.beginPath() - ctx.roundRect(-w / 2, -15, w, 30, 5) + ctx.roundRect(-w / 2, -5, w, lines.length * 15 + 10, 5) ctx.fill() ctx.fillStyle = "black" - ctx.textBaseline = "middle" - ctx.fillText(text, 0, 0) + ctx.textAlign = "left" + ctx.textBaseline = "top" + for (let i = 0; i < lines.length; i++) + ctx.fillText(lines[i], -w / 2 + 5, i * 15) ctx.translate(0, 1) } @@ -275,22 +279,8 @@ 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.scale(2, 2) + draw_message(global_message, true) ctx.restore() } |