Center inventory (ugly)

client/systems/inventory_system.ts

@@ -6,6 +6,7 @@ import { InputManager } from "$/client/input_manager.ts";
 import { ClientWorld } from "$/client/client_world.ts";
 import { Position } from "../../common/components/position.ts";
 import { AnimatedSprite, Sprite } from "../components/sprite.ts";
+import { canvas } from "../renderer.ts";
 
 export class InventorySystem extends System {
 	update(world: ClientWorld, _delta: number): void {
@@ -20,13 +21,19 @@ export class InventorySystem extends System {
 	}
 
 	handle_interaction(player_inventory: PlayerInventory) {
+		const inventory_width = 10 * 2 + SLOT_SIZE * 9;
+		const inventory_height = 10 * 2 + SLOT_SIZE * 4;
+
+		const offset_x = canvas.width / 2 - (inventory_width / 2);
+		const offset_y = canvas.height / 2 - (inventory_height / 2);
+
 		player_inventory.hovering_slot = -1;
 		const container = player_inventory.container;
 		if (player_inventory.is_open) {
 			for (const [index, slot] of player_inventory.layout.slots.entries()) {
 				const mouse = InputManager.get_mouse_position();
-				const slot_x = slot.x + player_inventory.layout.offset_x;
+				const slot_x = slot.x + player_inventory.layout.offset_x + offset_x;
-				const slot_y = slot.y + player_inventory.layout.offset_y;
+				const slot_y = slot.y + player_inventory.layout.offset_y + offset_y;
 				const hovering = point_inside_rec(mouse.x, mouse.y, slot_x, slot_y, SLOT_SIZE, SLOT_SIZE);
 				if (hovering) {
 					player_inventory.hovering_slot = index;

client/systems/rendering/player.ts

@@ -3,15 +3,23 @@ import { AssetManager } from "$/client/assets.ts";
 import { PlayerInventory } from "$/client/components/inventory.ts";
 import { InputManager } from "$/client/input_manager.ts";
 import { draw_item, draw_nine_slice } from "./render_utils.ts";
-import { canvas, draw_text, measure_text, Texture } from "$/client/renderer.ts";
+import { canvas, draw_rect, draw_text, measure_text, Texture } from "$/client/renderer.ts";
 import { EverythingRegistry, ItemRegistry } from "$/common/everything_registry.ts";
 
 const PADDING = 10;
 
 export function render_player_inventory(player_inventory: PlayerInventory) {
+	draw_rect(0, 0, canvas.width, canvas.height, [0, 0, 0, 0.8]);
+
 	const ui = AssetManager.instance.get<Texture>("bworld:ui");
 	const layout = player_inventory.layout.slots;
 
+	const inventory_width = PADDING * 2 + SLOT_SIZE * 9;
+	const inventory_height = PADDING * 2 + SLOT_SIZE * 4;
+
+	const offset_x = canvas.width / 2 - (inventory_width / 2);
+	const offset_y = canvas.height / 2 - (inventory_height / 2);
+
 	draw_nine_slice(
 		ui,
 		160,
@@ -22,10 +30,10 @@ export function render_player_inventory(player_inventory: PlayerInventory) {
 		4,
 		4,
 		4,
-		0,
+		offset_x,
-		0,
+		offset_y,
-		PADDING * 2 + SLOT_SIZE * 9,
+		inventory_width,
-		PADDING * 2 + SLOT_SIZE * 4,
+		inventory_height,
 	);
 
 	for (const [index, slot] of layout.entries()) {
@@ -41,8 +49,8 @@ export function render_player_inventory(player_inventory: PlayerInventory) {
 			4,
 			4,
 			4,
-			x,
+			offset_x + x,
-			y,
+			offset_y + y,
 			SLOT_SIZE,
 			SLOT_SIZE,
 		);
@@ -52,7 +60,7 @@ export function render_player_inventory(player_inventory: PlayerInventory) {
 		const y = slot.y + PADDING;
 		const item = player_inventory.container.get_item(index);
 		if (item) {
-			draw_item(item, x, y);
+			draw_item(item, offset_x + x, offset_y + y);
 		}
 	}