UI and about page in game

client/systems/inventory_system.ts

@@ -1,11 +1,16 @@
-import { System, World } from "$/common/ecs/mod.ts";
+import { System } from "$/common/ecs/mod.ts";
 import { point_inside_rec } from "$/common/utils.ts";
 import { SLOT_SIZE } from "$/common/constants.ts";
 import { Container, PlayerInventory } from "$/client/components/inventory.ts";
 import { InputManager } from "$/client/input_manager.ts";
+import { ClientWorld } from "$/client/client_world.ts";
 
 export class InventorySystem extends System {
-	update(world: World, _delta: number): void {
+	update(world: ClientWorld, _delta: number): void {
+		if (world.paused) {
+			return;
+		}
+
 		for (const entity of world.get_entities()) {
 			const player_inventory = entity.get(PlayerInventory);
 

client/systems/player_controls.ts

@@ -17,6 +17,10 @@ export class PlayerControlsSystem extends System {
 	}
 
 	update(world: ClientWorld, _delta: number): void {
+		if (world.paused) {
+			return;
+		}
+
 		const velocity = this.player.get(Velocity)!;
 		const controls = this.player.get(PlayerControls)!;
 

client/systems/ui_interaction_system.ts

@@ -0,0 +1,35 @@
+import { System } from "$/common/ecs/mod.ts";
+import { Position } from "$/common/components/position.ts";
+import { point_inside_rec } from "$/common/utils.ts";
+import { ClientWorld } from "$/client/client_world.ts";
+import { UIButton } from "$/client/components/ui_components.ts";
+import { InputManager } from "$/client/input_manager.ts";
+
+export class UIInteractionSystem implements System {
+	update(world: ClientWorld, _delta: number) {
+		// TODO: dont like
+		if (InputManager.is_key_pressed("Escape")) {
+			world.paused = !world.paused;
+		}
+
+		if (!world.paused) {
+			return;
+		}
+
+		const mouse = InputManager.get_mouse_position();
+
+		for (const entity of world.get_entities()) {
+			const position = entity.get(Position);
+			const button = entity.get(UIButton);
+
+			if (position && button) {
+				const hovered = point_inside_rec(mouse.x, mouse.y, position.x, position.y, button.width, button.height);
+				button.hovered = hovered;
+				if (hovered && InputManager.is_mouse_pressed(0)) {
+					InputManager.consume_mouse(0);
+					button.on_click();
+				}
+			}
+		}
+	}
+}

client/systems/ui_render_system.ts

@@ -0,0 +1,67 @@
+import { System } from "$/common/ecs/mod.ts";
+import { Position } from "$/common/components/position.ts";
+import { ClientWorld } from "$/client/client_world.ts";
+import { UIButton } from "$/client/components/ui_components.ts";
+import { draw_text, measure_text } from "../text_rendering.ts";
+import { draw_nine_slice } from "./rendering/render_utils.ts";
+import { AssetManager } from "../assets.ts";
+
+const SCALE = 4;
+
+export class UIRenderSystem implements System {
+	constructor() {}
+
+	update(world: ClientWorld, _delta: number) {
+		if (!world.paused) {
+			return;
+		}
+
+		const ctx = world.ctx;
+
+		ctx.save();
+		ctx.resetTransform();
+
+		ctx.scale(SCALE, SCALE);
+
+		// dark background
+		ctx.fillStyle = "rgba(0,0,0,0.6)";
+		ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+		const ui = AssetManager.instance.get<HTMLImageElement>("bworld:ui");
+
+		for (const entity of world.get_entities()) {
+			const position = entity.get(Position);
+			const button = entity.get(UIButton);
+
+			if (position && button) {
+				draw_nine_slice(
+					ctx,
+					ui,
+					16 * (button.hovered ? 14 : 11),
+					16 * (button.hovered ? 1 : 0),
+					16,
+					16,
+					3,
+					3,
+					3,
+					3,
+					position.x / SCALE,
+					position.y / SCALE,
+					button.width / SCALE,
+					button.height / SCALE,
+				);
+				const measure = measure_text(ctx, button.text, 1.25);
+				draw_text(
+					ctx,
+					button.text,
+					(position.x / SCALE) + (button.width / SCALE / 2) - (measure / 2),
+					position.y / SCALE + (button.height / SCALE / 2),
+					1.5,
+					"white",
+					"middle",
+				);
+			}
+		}
+		ctx.restore();
+	}
+}