Server

client/systems/rendering/network.ts

@@ -0,0 +1,53 @@
+import { ClientWorld } from "$/client/client_world.ts";
+import { Connection } from "$/client/network.ts";
+import {
+	canvas,
+	draw_rect,
+	draw_text,
+	flush_batch,
+	push_box,
+	set_current_texture,
+	white_tex,
+} from "$/client/renderer/mod.ts";
+
+const CHAT_LINE_HEIGHT = 24;
+const CHAT_VISIBLE_SECONDS = 10;
+const CHAT_MAX_LINES = 10;
+
+export function render_remote_players(connection: Connection) {
+	if (connection.players.size === 0) {
+		return;
+	}
+
+	flush_batch();
+	set_current_texture(white_tex!);
+
+	for (const player of connection.players.values()) {
+		const [r, g, b] = player.color;
+		const x = player.display_x;
+		const y = player.display_y;
+		const z = player.display_z;
+
+		// body
+		push_box(x - 0.3, y, z - 0.15, 0.6, 1.3, 0.3, r, g, b);
+		// head
+		push_box(x - 0.25, y + 1.3, z - 0.25, 0.5, 0.5, 0.5, 0.95, 0.8, 0.65);
+	}
+
+	flush_batch();
+}
+
+// draws the chat log above the bottom left corner, `all` shows old messages too (when the chat is open)
+export function render_chat_log(world: ClientWorld, all: boolean, bottom = canvas.height - 100) {
+	const now = performance.now();
+	const lines = world.chat_log
+		.filter((line) => all || now - line.time < CHAT_VISIBLE_SECONDS * 1000)
+		.slice(-CHAT_MAX_LINES);
+
+	let y = bottom - lines.length * CHAT_LINE_HEIGHT;
+	for (const line of lines) {
+		draw_rect(0, y, 600, CHAT_LINE_HEIGHT, [0, 0, 0, 0.4]);
+		draw_text(line.text, 4, y, 2, [1, 1, 1, 1]);
+		y += CHAT_LINE_HEIGHT;
+	}
+}