Server

client/systems/network_system.ts

@@ -0,0 +1,77 @@
+import { System } from "$/common/ecs/mod.ts";
+import { Position } from "$/common/components/position.ts";
+import { ClientWorld } from "../client_world.ts";
+import { Camera } from "../components/camera.ts";
+
+const MOVE_SEND_INTERVAL = 1 / 10;
+const REMOTE_PLAYER_SMOOTHING = 12;
+
+export class NetworkSystem extends System {
+	move_timer = 0;
+
+	update(world: ClientWorld, delta: number): void {
+		const connection = world.connection;
+		if (!connection) {
+			return;
+		}
+
+		for (const message of connection.incoming) {
+			switch (message.type) {
+				case "player_join":
+					connection.add_player(message.player);
+					break;
+				case "player_leave":
+					connection.players.delete(message.id);
+					break;
+				case "player_move": {
+					const player = connection.players.get(message.id);
+					if (player) {
+						player.x = message.x;
+						player.y = message.y;
+						player.z = message.z;
+						player.yaw = message.yaw;
+						player.pitch = message.pitch;
+					}
+					break;
+				}
+				case "set_block":
+					world.dimension.record_change(message.x, message.y, message.z, message.id);
+					world.dimension.apply_change(message.x, message.y, message.z, message.id);
+					break;
+				case "chat":
+					world.add_chat(message.from ? `<${message.from}> ${message.text}` : message.text);
+					break;
+			}
+		}
+		connection.incoming.length = 0;
+
+		if (connection.closed) {
+			world.add_chat("Lost connection to the server");
+			world.connection = undefined;
+			return;
+		}
+
+		const t = Math.min(1, delta * REMOTE_PLAYER_SMOOTHING);
+		for (const player of connection.players.values()) {
+			player.display_x += (player.x - player.display_x) * t;
+			player.display_y += (player.y - player.display_y) * t;
+			player.display_z += (player.z - player.display_z) * t;
+		}
+
+		this.move_timer += delta;
+		if (this.move_timer >= MOVE_SEND_INTERVAL) {
+			this.move_timer = 0;
+			const [player] = world.get_tag("player")!;
+			const position = player.get(Position)!;
+			const camera = player.get(Camera)!;
+			connection.send({
+				type: "move",
+				x: position.x,
+				y: position.y,
+				z: position.z,
+				yaw: camera.yaw,
+				pitch: camera.pitch,
+			});
+		}
+	}
+}

client/systems/player_controls.ts

@@ -138,6 +138,7 @@ export class PlayerControlsSystem extends System {
 					const drop_item = !block_info.requires_tool ||
 						holding_item_info?.tool_type === block_info.tool_to_break;
 					world.dimension.break_block(block.x, block.y, block.z, drop_item);
+					world.dimension.sync_block(block.x, block.y, block.z);
 					player_component.break_progress_max = 0;
 					player_component.break_progress = 0;
 				}
@@ -171,6 +172,7 @@ export class PlayerControlsSystem extends System {
 								z: block.z + offset.z,
 								id: item_info.block_id,
 							});
+							world.dimension.sync_block(block.x + offset.x, block.y + offset.y, block.z + offset.z);
 							hotbar_slot.amount! -= 1;
 						}
 					}

client/systems/render_system.ts

@@ -1,5 +1,4 @@
 import { System } from "$/common/ecs/mod.ts";
-import { World } from "$/common/ecs/world.ts";
 import { Position } from "$/common/components/position.ts";
 import { AnimatedSprite, Sprite } from "$/client/components/sprite.ts";
 import { Dimension } from "../components/dimension.ts";
@@ -10,13 +9,15 @@ import { render_dimension } from "./rendering/dimension.ts";
 import { render_player_breaking, render_player_crosshair, render_player_hotbar } from "./rendering/player.ts";
 import { PlayerComponent } from "../player.ts";
 import { begin_mode_3d, end_mode_3d } from "../renderer/core.ts";
+import { ClientWorld } from "../client_world.ts";
+import { render_chat_log, render_remote_players } from "./rendering/network.ts";
 
 export class RenderSystem extends System {
 	constructor() {
 		super();
 	}
 
-	update(world: World, _delta: number): void {
+	update(world: ClientWorld, _delta: number): void {
 		const camera_entity = world.get_entities().values().find((e) => e.get(Camera));
 		const camera = camera_entity?.get(Camera);
 
@@ -39,6 +40,10 @@ export class RenderSystem extends System {
 			}
 		}
 
+		if (world.connection) {
+			render_remote_players(world.connection);
+		}
+
 		end_mode_3d();
 
 		for (const entity of world.get_entities()) {
@@ -60,5 +65,7 @@ export class RenderSystem extends System {
 				render_player_crosshair();
 			}
 		}
+
+		render_chat_log(world, false);
 	}
 }

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;
+	}
+}