Unfinished webgl renderer

client/systems/ui_render_system.ts

@@ -2,9 +2,9 @@ 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";
+import { draw_text, Texture } from "../renderer.ts";
 
 const SCALE = 4;
 
@@ -12,18 +12,7 @@ export class UIRenderSystem implements System {
 	constructor() {}
 
 	update(world: ClientWorld, _delta: number) {
-		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");
+		const ui = AssetManager.instance.get<Texture>("bworld:ui");
 
 		for (const entity of world.get_entities()) {
 			const position = entity.get(Position);
@@ -31,7 +20,6 @@ export class UIRenderSystem implements System {
 
 			if (position && button) {
 				draw_nine_slice(
-					ctx,
 					ui,
 					16 * (button.hovered ? 14 : 11),
 					16 * (button.hovered ? 1 : 0),
@@ -46,18 +34,16 @@ export class UIRenderSystem implements System {
 					button.width / SCALE,
 					button.height / SCALE,
 				);
-				const measure = measure_text(ctx, button.text, 1.25);
+				// const measure = measure_text(ctx, button.text, 1.25);
 				draw_text(
-					ctx,
 					button.text,
-					(position.x / SCALE) + (button.width / SCALE / 2) - (measure / 2),
+					(position.x / SCALE) + (button.width / SCALE / 2) - (100 / 2),
 					position.y / SCALE + (button.height / SCALE / 2),
-					1.5,
-					"white",
-					"middle",
+					//1.5,
+					//"white",
+					//"middle",
 				);
 			}
 		}
-		ctx.restore();
 	}
 }