bworld/client/gui/gui_furnace.ts

import { Inventory, PlayerInventory } from "../inventory.ts";
import { add_player_hotbar, add_player_inventory, GuiInventoryScreen, Slot } from "./gui_screen.ts";
import { canvas, draw_rect, draw_texture_region, Texture } from "$/client/renderer/mod.ts";
import { AssetManager } from "../assets.ts";
import { SLOT_SIZE, TEXTURE_SIZE } from "$/common/constants.ts";
import { draw_nine_slice } from "../systems/rendering/render_utils.ts";
import { get_sprite_region } from "$/common/utils.ts";

const PADDING = 10;

// crazy this is how i found out interface X {} is diffrent then type X = {}
type TileChestData = {
	inventory: Inventory;
	progress: number;
	progress_max: number;
	fuel: number;
	fuel_max: number;
};

export class GuiFurnace extends GuiInventoryScreen<Inventory, TileChestData> {
	override inventory_width = PADDING * 2 + SLOT_SIZE * 9;
	override inventory_height = PADDING * 4 + SLOT_SIZE * 7;

	constructor(
		inventory: Inventory,
		player_inventory: PlayerInventory,
		properties: TileChestData,
	) {
		super(inventory, player_inventory, properties);

		add_player_hotbar(this, player_inventory, PADDING, PADDING);
		add_player_inventory(this, player_inventory, PADDING, PADDING * 2 + SLOT_SIZE);

		const furnace_y = PADDING * 3 + SLOT_SIZE * 4;

		this.slots.push(
			new Slot(
				this.inventory,
				0,
				this.inventory_width / 2 - SLOT_SIZE,
				furnace_y,
			),
		);
		this.slots.push(
			new Slot(
				this.inventory,
				1,
				this.inventory_width / 2 - SLOT_SIZE,
				furnace_y + SLOT_SIZE * 2,
			),
		);
		this.slots.push(
			new Slot(
				this.inventory,
				2,
				this.inventory_width / 2 + SLOT_SIZE,
				furnace_y + SLOT_SIZE,
			),
		);
	}

	override on_render(): void {
		draw_rect(0, 0, canvas.width, canvas.height, [0, 0, 0, 0.8]);

		const ui = AssetManager.instance.get<Texture>("bworld:ui");

		draw_nine_slice(
			ui,
			160,
			0,
			16,
			16,
			4,
			4,
			4,
			4,
			this.x,
			this.y,
			this.inventory_width,
			this.inventory_height,
		);

		this.draw_fire();
		this.draw_arrow();

		super.on_render();
	}

	override handle_left_click(slot: Slot): void {
		if (slot.inventory === this.inventory && slot.index === 2) {
			if (this.inventory.container.get_item(2)) {
				this.pickup();
			}
		} else {
			super.handle_left_click(slot);
		}
	}

	override handle_right_click(slot: Slot): void {
		if (slot.inventory === this.inventory && slot.index === 2) {
			if (this.inventory.container.get_item(2)) {
				this.pickup();
			}
		} else {
			super.handle_right_click(slot);
		}
	}

	pickup() {
		const holding_item = this.player_inventory.holding_item;
		const item = this.inventory.container.get_item(2)!;

		if (holding_item) {
			if (holding_item.type_id === item.type_id) {
				const items_left = holding_item.max_amount - holding_item.amount;
				if (items_left >= item.amount) {
					holding_item.amount += item.amount;
					this.inventory.container.set_item(2, undefined);
				}
			}
		} else {
			this.player_inventory.holding_item = item;
			this.inventory.container.set_item(2, undefined);
		}
	}

	draw_fire() {
		const atlas = AssetManager.instance.get<Texture>("bworld:textures");

		const fire_empty_region = get_sprite_region("bworld:fire_empty");
		const fire_full_region = get_sprite_region("bworld:fire_full");

		const fuel_pct = Math.max(0, Math.min(1, this.properties.fuel / this.properties.fuel_max));
		const full_height = SLOT_SIZE * fuel_pct;

		const furnace_y = PADDING * 3 + SLOT_SIZE * 4;

		draw_texture_region(
			atlas,
			fire_empty_region.x * TEXTURE_SIZE,
			fire_empty_region.y * TEXTURE_SIZE,
			TEXTURE_SIZE,
			TEXTURE_SIZE,
			this.x + this.inventory_width / 2 - SLOT_SIZE,
			this.y + furnace_y + SLOT_SIZE,
			SLOT_SIZE,
			SLOT_SIZE,
		);

		const fire_draw_x = this.x + this.inventory_width / 2 - SLOT_SIZE;
		const fire_draw_y = this.y + furnace_y + SLOT_SIZE;

		const fire_src_height = TEXTURE_SIZE * fuel_pct;

		const fire_src_y_offset = TEXTURE_SIZE - fire_src_height;
		const fire_dst_y_offset = SLOT_SIZE - full_height;

		draw_texture_region(
			atlas,
			fire_full_region.x * TEXTURE_SIZE,
			fire_full_region.y * TEXTURE_SIZE + fire_src_y_offset,
			TEXTURE_SIZE,
			fire_src_height,
			fire_draw_x,
			fire_draw_y + fire_dst_y_offset,
			SLOT_SIZE,
			full_height,
		);
	}

	draw_arrow() {
		const atlas = AssetManager.instance.get<Texture>("bworld:textures");

		const arrow_empty_region = get_sprite_region("bworld:arrow_empty");
		const arrow_full_region = get_sprite_region("bworld:arrow_full");

		const progress_pct = Math.max(0, Math.min(1, this.properties.progress / this.properties.progress_max));
		const full_width = SLOT_SIZE * progress_pct;

		const furnace_y = PADDING * 3 + SLOT_SIZE * 4;

		draw_texture_region(
			atlas,
			arrow_empty_region.x * TEXTURE_SIZE,
			arrow_empty_region.y * TEXTURE_SIZE,
			TEXTURE_SIZE,
			TEXTURE_SIZE,
			this.x + this.inventory_width / 2,
			this.y + furnace_y + SLOT_SIZE,
			SLOT_SIZE,
			SLOT_SIZE,
		);

		const draw_x = this.x + this.inventory_width / 2;
		const draw_y = this.y + furnace_y + SLOT_SIZE;

		const src_width = TEXTURE_SIZE * progress_pct;

		draw_texture_region(
			atlas,
			arrow_full_region.x * TEXTURE_SIZE,
			arrow_full_region.y * TEXTURE_SIZE,
			src_width,
			TEXTURE_SIZE,
			draw_x,
			draw_y,
			full_width,
			SLOT_SIZE,
		);
	}
}