UI and about page in game

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