68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
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();
|
|
}
|
|
}
|