Gui handler and basic inventory screen
This commit is contained in:
@@ -0,0 +1,66 @@
|
||||
import { Container, Inventory, PlayerInventory } from "../inventory.ts";
|
||||
import { add_player_hotbar, add_player_inventory, GuiScreen, Slot } from "./gui_screen.ts";
|
||||
import { canvas, draw_rect, Texture } from "$/client/renderer.ts";
|
||||
import { AssetManager } from "../assets.ts";
|
||||
import { SLOT_SIZE } from "../../common/constants.ts";
|
||||
import { draw_nine_slice } from "../systems/rendering/render_utils.ts";
|
||||
|
||||
const PADDING = 10;
|
||||
|
||||
export class GuiPlayerInventory extends GuiScreen {
|
||||
override inventory_width = PADDING * 2 + SLOT_SIZE * 9;
|
||||
override inventory_height = PADDING * 2 + SLOT_SIZE * 4 + PADDING + SLOT_SIZE * 3 + PADDING;
|
||||
|
||||
constructor(player_inventory: PlayerInventory) {
|
||||
super(new Inventory(new Container(10)), player_inventory, undefined);
|
||||
|
||||
add_player_hotbar(this, player_inventory, PADDING, PADDING);
|
||||
add_player_inventory(this, player_inventory, PADDING, PADDING * 2 + SLOT_SIZE);
|
||||
|
||||
const crafting_x = PADDING;
|
||||
const crafting_y = PADDING * 3 + SLOT_SIZE * 4;
|
||||
|
||||
for (let i = 0; i < 3; i += 1) {
|
||||
for (let j = 0; j < 3; j += 1) {
|
||||
this.slots.push(
|
||||
new Slot(this.inventory, i * 3 + j, crafting_x + i * SLOT_SIZE, crafting_y + j * SLOT_SIZE),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
this.slots.push(new Slot(this.inventory, 9, crafting_x + 5 * SLOT_SIZE, crafting_y + 1 * 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,
|
||||
);
|
||||
|
||||
super.on_render();
|
||||
}
|
||||
|
||||
override on_close(): void {
|
||||
for (let i = 0; i < this.inventory.container.size; i += 1) {
|
||||
const item = this.inventory.container.get_item(i);
|
||||
if (item) {
|
||||
this.player_inventory.container.add_item(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,276 @@
|
||||
import { SLOT_SIZE } from "$/common/constants.ts";
|
||||
import { point_inside_rec } from "../../common/utils.ts";
|
||||
import { AssetManager } from "../assets.ts";
|
||||
import { InputManager } from "../input_manager.ts";
|
||||
import { Inventory, ItemStack, PlayerInventory } from "../inventory.ts";
|
||||
import { canvas, Texture } from "../renderer.ts";
|
||||
import { draw_item, draw_nine_slice } from "../systems/rendering/render_utils.ts";
|
||||
|
||||
export class Slot {
|
||||
inventory: Inventory;
|
||||
index: number;
|
||||
// relative to screen top left
|
||||
x: number;
|
||||
y: number;
|
||||
|
||||
constructor(inventory: Inventory, index: number, x: number, y: number) {
|
||||
this.inventory = inventory;
|
||||
this.index = index;
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
|
||||
get item(): ItemStack | undefined {
|
||||
return this.inventory.container.get_item(this.index);
|
||||
}
|
||||
}
|
||||
|
||||
export class GuiScreen<Inv extends Inventory = Inventory, Properties = Record<string, unknown> | undefined> {
|
||||
inventory: Inv;
|
||||
player_inventory: PlayerInventory;
|
||||
properties: Properties;
|
||||
|
||||
slots: Slot[] = [];
|
||||
x: number = 0;
|
||||
y: number = 0;
|
||||
inventory_width: number = 500;
|
||||
inventory_height: number = 500;
|
||||
|
||||
constructor(
|
||||
inventory: Inv,
|
||||
player_inventory: PlayerInventory,
|
||||
properties: Properties,
|
||||
) {
|
||||
this.inventory = inventory;
|
||||
this.player_inventory = player_inventory;
|
||||
this.properties = properties;
|
||||
}
|
||||
|
||||
on_tick(_delta: number): void {
|
||||
this.x = canvas.width / 2 - (this.inventory_width / 2);
|
||||
this.y = canvas.height / 2 - (this.inventory_height / 2);
|
||||
|
||||
this.handle_interaction();
|
||||
|
||||
if (this.player_inventory.holding_item?.amount === 0) {
|
||||
this.player_inventory.holding_item = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
on_render(): void {
|
||||
const ui = AssetManager.instance.get<Texture>("bworld:ui");
|
||||
|
||||
for (const slot of this.slots) {
|
||||
draw_nine_slice(
|
||||
ui,
|
||||
slot.inventory.hovering_slot === slot.index ? 19 * 16 : 160 + 32,
|
||||
slot.inventory.hovering_slot === slot.index ? 16 : 0,
|
||||
16,
|
||||
16,
|
||||
4,
|
||||
4,
|
||||
4,
|
||||
4,
|
||||
this.x + slot.x,
|
||||
this.y + slot.y,
|
||||
SLOT_SIZE,
|
||||
SLOT_SIZE,
|
||||
);
|
||||
}
|
||||
|
||||
for (const slot of this.slots) {
|
||||
const item = slot.item;
|
||||
if (item) {
|
||||
draw_item(item, this.x + slot.x, this.y + slot.y);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.player_inventory.holding_item) {
|
||||
const mouse = InputManager.get_mouse_position();
|
||||
draw_item(this.player_inventory.holding_item, mouse.x, mouse.y);
|
||||
}
|
||||
}
|
||||
|
||||
on_close(): void {}
|
||||
|
||||
handle_interaction() {
|
||||
this.player_inventory.hovering_slot = -1;
|
||||
this.inventory.hovering_slot = -1;
|
||||
for (const slot of this.slots) {
|
||||
const mouse = InputManager.get_mouse_position();
|
||||
const slot_x = slot.x + this.x;
|
||||
const slot_y = slot.y + this.y;
|
||||
const hovering = point_inside_rec(mouse.x, mouse.y, slot_x, slot_y, SLOT_SIZE, SLOT_SIZE);
|
||||
if (hovering) {
|
||||
slot.inventory.hovering_slot = slot.index;
|
||||
|
||||
if (InputManager.is_mouse_pressed(0)) {
|
||||
InputManager.consume_mouse(0);
|
||||
this.handle_left_click(slot);
|
||||
return;
|
||||
}
|
||||
|
||||
if (InputManager.is_mouse_pressed(2)) {
|
||||
InputManager.consume_mouse(2);
|
||||
this.handle_right_click(slot);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
switch_item_with_holding(inventory: Inventory, index: number) {
|
||||
const container_slot = inventory.container.get_slot(index);
|
||||
const original_holding_item = this.player_inventory.holding_item;
|
||||
this.player_inventory.holding_item = container_slot.get_item();
|
||||
container_slot.set_item(original_holding_item);
|
||||
}
|
||||
|
||||
handle_left_click(slot: Slot) {
|
||||
const holding = this.player_inventory.holding_item;
|
||||
const inventory_slot = slot.inventory.container.get_slot(slot.index);
|
||||
const slot_item = inventory_slot.get_item();
|
||||
|
||||
// if you aren't holding anything
|
||||
// "swap" with nothing on your hand (pick it up)
|
||||
if (!holding) {
|
||||
this.switch_item_with_holding(slot.inventory, slot.index);
|
||||
return;
|
||||
}
|
||||
|
||||
// if you are holding something and slot type equals holding type
|
||||
// try to add to stack
|
||||
if (slot_item && inventory_slot.type_id === holding.type_id) {
|
||||
const space_left = inventory_slot.max_amount! - slot_item.amount!;
|
||||
const amount_to_add = Math.min(space_left, holding.amount);
|
||||
|
||||
slot_item.amount += amount_to_add;
|
||||
holding.amount -= amount_to_add;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// if something on hand but not the same
|
||||
// swap
|
||||
this.switch_item_with_holding(slot.inventory, slot.index);
|
||||
}
|
||||
|
||||
handle_right_click(slot: Slot) {
|
||||
const holding = this.player_inventory.holding_item;
|
||||
const inventory_slot = slot.inventory.container.get_slot(slot.index);
|
||||
const slot_item = inventory_slot.get_item();
|
||||
|
||||
// if holding something
|
||||
if (holding) {
|
||||
// and slot type equals holding type
|
||||
// add 1 to matching stack
|
||||
if (slot_item && inventory_slot.type_id === holding.type_id) {
|
||||
if (slot_item.amount < slot_item.max_amount!) {
|
||||
slot_item.amount += 1;
|
||||
holding.amount -= 1;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// (actually the same as the last one but creates a new one techinically)
|
||||
// place 1 into empty slot
|
||||
if (!slot_item) {
|
||||
const new_item = holding.clone();
|
||||
new_item.amount = 1;
|
||||
inventory_slot.set_item(new_item);
|
||||
holding.amount -= 1;
|
||||
return;
|
||||
}
|
||||
|
||||
// if something on hand but not the same
|
||||
// swap
|
||||
this.switch_item_with_holding(slot.inventory, slot.index);
|
||||
return;
|
||||
}
|
||||
|
||||
// if player is holding nothing and clicks nothing, nothing happens
|
||||
if (!slot_item) {
|
||||
return;
|
||||
}
|
||||
|
||||
// pick up half of the stack
|
||||
const original_amount = slot_item.amount;
|
||||
const half = Math.floor(original_amount / 2);
|
||||
|
||||
slot_item.amount = half;
|
||||
|
||||
const picked_up = slot_item.clone();
|
||||
picked_up.amount = original_amount - half;
|
||||
|
||||
this.player_inventory.holding_item = picked_up;
|
||||
|
||||
if (slot_item.amount === 0) {
|
||||
inventory_slot.set_item(undefined);
|
||||
}
|
||||
}
|
||||
|
||||
/*handle_hotbar(world: ClientWorld, player_inventory: PlayerInventory) {
|
||||
const [player, player_hand] = world.get_tag("player")!;
|
||||
|
||||
const player_position = player.get(Position);
|
||||
const player_sprite = player.get(AnimatedSprite);
|
||||
const hand_position = player_hand.get(Position);
|
||||
const hand_sprite = player_hand.get(Sprite);
|
||||
|
||||
if (!player_position || !hand_position || !hand_sprite || !player_sprite) {
|
||||
return;
|
||||
}
|
||||
|
||||
// sync position
|
||||
hand_position.x = player_position.x + (player_sprite.flip_x ? 34 : 4);
|
||||
hand_position.y = player_position.y + 34;
|
||||
hand_sprite.flip_x = player_sprite.flip_x;
|
||||
|
||||
const maybe_item = player_inventory.container.get_item(player_inventory.hotbar_selected);
|
||||
if (maybe_item) {
|
||||
const region = get_sprite_region(maybe_item.type_id);
|
||||
hand_sprite.source_x = region.x * 16;
|
||||
hand_sprite.source_y = region.y * 16;
|
||||
hand_sprite.source_width = 16;
|
||||
hand_sprite.source_height = 16;
|
||||
hand_sprite.width = 32;
|
||||
hand_sprite.height = 32;
|
||||
} else {
|
||||
hand_sprite.width = 0;
|
||||
hand_sprite.height = 0;
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
// generic methods that is often needed
|
||||
|
||||
export function add_player_inventory(
|
||||
handler: GuiScreen,
|
||||
player_inventory: PlayerInventory,
|
||||
offset_x: number,
|
||||
offset_y: number,
|
||||
) {
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
for (let l = 0; l < 9; ++l) {
|
||||
handler.slots.push(
|
||||
new Slot(
|
||||
player_inventory,
|
||||
l + i * 9 + 9,
|
||||
offset_x + l * SLOT_SIZE,
|
||||
offset_y + i * SLOT_SIZE,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function add_player_hotbar(
|
||||
handler: GuiScreen,
|
||||
player_inventory: PlayerInventory,
|
||||
offset_x: number,
|
||||
offset_y: number,
|
||||
) {
|
||||
for (let i = 0; i < 9; ++i) {
|
||||
handler.slots.push(new Slot(player_inventory, i, offset_x + i * SLOT_SIZE, offset_y));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { System } from "$/common/ecs/mod.ts";
|
||||
import { ClientWorld } from "../client_world.ts";
|
||||
import { PlayerComponent } from "../player.ts";
|
||||
|
||||
export class GuiRenderSystem extends System {
|
||||
update(world: ClientWorld, _delta: number): void {
|
||||
const [player] = world.get_tag("player")!;
|
||||
const player_component = player.get(PlayerComponent)!;
|
||||
|
||||
for (const screen of player_component.screens) {
|
||||
screen.on_render();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class GuiTickSystem extends System {
|
||||
update(world: ClientWorld, delta: number): void {
|
||||
const [player] = world.get_tag("player")!;
|
||||
const player_component = player.get(PlayerComponent)!;
|
||||
|
||||
for (const screen of player_component.screens) {
|
||||
screen.on_tick(delta);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user