paula/bworld
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gui handler and basic inventory screen

Browse Source
This commit is contained in:
paula
2026-03-10 17:43:58 -03:00
parent 608ae55db4
commit ada5d80023
17 changed files with 435 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/systems/inventory_system.ts
-187
View File
@@ -1,187 +0,0 @@
import { System } from "$/common/ecs/mod.ts";
import { get_sprite_region, point_inside_rec } from "$/common/utils.ts";
import { SLOT_SIZE } from "$/common/constants.ts";
import { Container, PlayerInventory } from "$/client/components/inventory.ts";
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 {
for (const entity of world.get_entities()) {
const player_inventory = entity.get(PlayerInventory);
if (player_inventory) {
this.handle_interaction(player_inventory);
this.handle_hotbar(world, player_inventory);
}
}
}
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 + offset_x;
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;
if (InputManager.is_mouse_pressed(0)) {
InputManager.consume_mouse(0);
this.handle_left_click(player_inventory, container, index);
return;
}
if (InputManager.is_mouse_pressed(2)) {
InputManager.consume_mouse(2);
this.handle_right_click(player_inventory, container, index);
return;
}
}
}
} else {
if (player_inventory.holding_item) {
container.add_item(player_inventory.holding_item);
player_inventory.holding_item = undefined;
}
}
if (player_inventory.holding_item?.amount === 0) {
player_inventory.holding_item = undefined;
}
}
switch_item_with_holding(player_inventory: PlayerInventory, index: number) {
const container_slot = player_inventory.container.get_slot(index);
const original_holding_item = player_inventory.holding_item;
player_inventory.holding_item = container_slot.get_item();
container_slot.set_item(original_holding_item);
}
handle_left_click(player_inventory: PlayerInventory, container: Container, index: number) {
const holding = player_inventory.holding_item;
const slot = container.get_slot(index);
const slot_item = 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(player_inventory, index);
return;
}
// if you are holding something and slot type equals holding type
// try to add to stack
if (slot_item && slot.type_id === holding.type_id) {
const space_left = 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(player_inventory, index);
}
handle_right_click(player_inventory: PlayerInventory, container: Container, index: number) {
const holding = player_inventory.holding_item;
const slot = container.get_slot(index);
const slot_item = slot.get_item();
// if holding something
if (holding) {
// and slot type equals holding type
// add 1 to matching stack
if (slot_item && 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;
slot.set_item(new_item);
holding.amount -= 1;
return;
}
// if something on hand but not the same
// swap
this.switch_item_with_holding(player_inventory, 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;
player_inventory.holding_item = picked_up;
if (slot_item.amount === 0) {
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;
}
}
}
client/systems/player_controls.ts
+10 -5
View File
@@ -4,10 +4,11 @@ import { InputManager } from "../input_manager.ts";
import { AnimatedSprite } from "../components/sprite.ts";
import { ClientWorld } from "../client_world.ts";
import { PlayerControls } from "../components/player_controls.ts";
import { PlayerInventory } from "../components/inventory.ts";
import { Camera } from "../components/camera.ts";
import { Position } from "../../common/components/position.ts";
import { canvas } from "../renderer.ts";
import { PlayerComponent } from "../player.ts";
import { GuiPlayerInventory } from "../gui/gui_player_inventory.ts";
export class PlayerControlsSystem extends System {
constructor() {
@@ -18,7 +19,7 @@ export class PlayerControlsSystem extends System {
const [player] = world.get_tag("player")!;
const velocity = player.get(Velocity)!;
const controls = player.get(PlayerControls)!;
const player_inventory = player.get(PlayerInventory)!;
const player_component = player.get(PlayerComponent)!;
if (InputManager.is_key_down(controls.move_left)) {
velocity.vx = -controls.move_speed;
@@ -54,8 +55,11 @@ export class PlayerControlsSystem extends System {
}
if (InputManager.is_key_pressed(controls.open_inventory)) {
const inventory = player.get(PlayerInventory)!;
inventory.is_open = !inventory.is_open;
if (player_component.screens.length === 0) {
player_component.screens.push(new GuiPlayerInventory(player_component.player_inventory));
} else {
player_component.pop_screen();
}
}
if (InputManager.is_key_pressed(controls.open_debug)) {
@@ -70,7 +74,8 @@ export class PlayerControlsSystem extends System {
camera.offset_x = Math.floor(canvas.width / 2);
camera.offset_y = Math.floor(canvas.height / 2);
if (!player_inventory.is_open) {
if (player_component.screens.length === 0) {
const player_inventory = player_component.player_inventory;
const scroll = InputManager.get_wheel_delta();
if (scroll > 0) {
player_inventory.hotbar_selected = Math.min(8, player_inventory.hotbar_selected + 1);
client/systems/render_system.ts
+5 -8
View File
@@ -3,13 +3,13 @@ import { World } from "$/common/ecs/world.ts";
import { Position } from "$/common/components/position.ts";
import { AnimatedSprite, Sprite } from "$/client/components/sprite.ts";
import { Dimension } from "../components/dimension.ts";
import { PlayerInventory } from "$/client/components/inventory.ts";
import { Camera } from "$/client/components/camera.ts";
import { render_animated_sprite, render_sprite } from "./rendering/sprites.ts";
import { render_dimension } from "./rendering/dimension.ts";
import { render_player_hotbar, render_player_inventory } from "./rendering/player.ts";
import { render_player_hotbar } from "./rendering/player.ts";
import { begin_mode_2d, end_mode_2d } from "../renderer.ts";
import { PlayerComponent } from "../player.ts";
export class RenderSystem extends System {
constructor() {
@@ -50,13 +50,10 @@ export class RenderSystem extends System {
end_mode_2d();
for (const entity of world.get_entities()) {
const player_inventory = entity.get(PlayerInventory);
const player_component = entity.get(PlayerComponent);
if (player_inventory) {
render_player_hotbar(player_inventory);
if (player_inventory.is_open) {
render_player_inventory(player_inventory);
}
if (player_component) {
render_player_hotbar(player_component.player_inventory);
}
}
}
client/systems/rendering/player.ts
+2 -97
View File
@@ -1,106 +1,11 @@
import { SLOT_SIZE } from "$/common/constants.ts";
import { AssetManager } from "$/client/assets.ts";
import { PlayerInventory } from "$/client/components/inventory.ts";
import { InputManager } from "$/client/input_manager.ts";
import { PlayerInventory } from "../../inventory.ts";
import { draw_item, draw_nine_slice } from "./render_utils.ts";
import { canvas, draw_rect, draw_text, measure_text, Texture } from "$/client/renderer.ts";
import { EverythingRegistry, ItemRegistry } from "$/common/everything_registry.ts";
import { canvas, Texture } from "$/client/renderer.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,
0,
16,
16,
4,
4,
4,
4,
offset_x,
offset_y,
inventory_width,
inventory_height,
);
for (const [index, slot] of layout.entries()) {
const x = slot.x + PADDING;
const y = slot.y + PADDING;
draw_nine_slice(
ui,
player_inventory.hovering_slot === index ? 19 * 16 : 160 + 32,
player_inventory.hovering_slot === index ? 16 : 0,
16,
16,
4,
4,
4,
4,
offset_x + x,
offset_y + y,
SLOT_SIZE,
SLOT_SIZE,
);
}
for (const [index, slot] of layout.entries()) {
const x = slot.x + PADDING;
const y = slot.y + PADDING;
const item = player_inventory.container.get_item(index);
if (item) {
draw_item(item, offset_x + x, offset_y + y);
}
}
const mouse = InputManager.get_mouse_position();
if (player_inventory.holding_item) {
draw_item(player_inventory.holding_item, mouse.x, mouse.y);
}
if (player_inventory.hovering_slot !== -1) {
const item = player_inventory.container.get_item(player_inventory.hovering_slot);
if (item) {
const item_info = EverythingRegistry.get<ItemRegistry>("items", item.type_id);
const item_name = item.type_id;
const box_width = measure_text(item_name, 2) + 4 * 3;
const lines = item_info?.get_lore ? 2 : 1;
draw_nine_slice(
ui,
16 * 11,
0,
16,
16,
4,
4,
4,
4,
mouse.x + 4,
mouse.y,
box_width,
32 * lines + 4 * (lines + 2),
[1, 1, 1, 0.8],
);
draw_text(item_name, mouse.x + 4, mouse.y, 2);
if (item_info?.get_lore) {
draw_text(item_info.get_lore(item), mouse.x + 4, mouse.y + 32, 2);
}
}
}
}
export function render_player_hotbar(player_inventory: PlayerInventory) {
const ui = AssetManager.instance.get<Texture>("bworld:ui");
client/systems/rendering/render_utils.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { SLOT_SIZE } from "$/common/constants.ts";
import { get_sprite_region } from "$/common/utils.ts";
import { AssetManager } from "$/client/assets.ts";
import { ItemStack } from "$/client/components/inventory.ts";
import { ItemStack } from "../../inventory.ts";
import { draw_text, draw_texture_region, Texture } from "$/client/renderer.ts";
export function draw_nine_slice(