diff --git a/client/client_world.ts b/client/client_world.ts index a140ae8..7b7d6cc 100644 --- a/client/client_world.ts +++ b/client/client_world.ts @@ -64,8 +64,7 @@ export class ClientWorld extends World { ); this.add_entity(tilemap); - const player = create_player(); - this.add_entity(player); + const player = create_player(this); // UI ! const unpause_button = new Entity("unpausebutton"); diff --git a/client/components/inventory.ts b/client/components/inventory.ts index c2073cf..f906ea7 100644 --- a/client/components/inventory.ts +++ b/client/components/inventory.ts @@ -101,6 +101,7 @@ export class Inventory extends Component { export class PlayerInventory extends Inventory { owner_id: string; holding_item: ItemStack | undefined; + hotbar_selected: number = 0; constructor(owner_id: string) { const container = new Container(9 * 4); diff --git a/client/player.ts b/client/player.ts index 3d5fe9c..8a5a45e 100644 --- a/client/player.ts +++ b/client/player.ts @@ -4,9 +4,11 @@ import { Entity } from "$/common/ecs/mod.ts"; import { Camera } from "$/client/components/camera.ts"; import { ItemStack, PlayerInventory } from "$/client/components/inventory.ts"; import { PlayerControls } from "$/client/components/player_controls.ts"; -import { AnimatedSprite } from "$/client/components/sprite.ts"; +import { AnimatedSprite, Sprite } from "$/client/components/sprite.ts"; +import { ClientWorld } from "./client_world.ts"; +import { AssetManager } from "./assets.ts"; -export function create_player() { +export function create_player(world: ClientWorld) { const player = new Entity("player"); player.add(new Position(10, 10)); player.add(new Velocity(0, 0)); @@ -38,5 +40,16 @@ export function create_player() { player.get(PlayerInventory)!.container.add_item(new ItemStack("bworld:watering_can", 1, 1)); player.get(PlayerInventory)!.container.add_item(new ItemStack("bworld:bomb", 64)); player.add(new Camera(-100, -100)); + + world.add_entity(player); + + const player_hand = new Entity("playerhand"); + player_hand.add(new Position(0, 0)); + // empty sprite + player_hand.add(new Sprite(AssetManager.instance.get("bworld:textures"), 0, 0)); + world.add_entity(player_hand); + + world.add_tag("player", [player, player_hand]); + return player; } diff --git a/client/systems/inventory_system.ts b/client/systems/inventory_system.ts index ba70689..4270f7d 100644 --- a/client/systems/inventory_system.ts +++ b/client/systems/inventory_system.ts @@ -1,9 +1,11 @@ import { System } from "$/common/ecs/mod.ts"; -import { point_inside_rec } from "$/common/utils.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 { Sprite } from "../components/sprite.ts"; export class InventorySystem extends System { update(world: ClientWorld, _delta: number): void { @@ -15,41 +17,46 @@ export class InventorySystem extends System { const player_inventory = entity.get(PlayerInventory); if (player_inventory) { - 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_y = slot.y + player_inventory.layout.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; + this.handle_interaction(player_inventory); + this.handle_hotbar(world, player_inventory); + } + } + } - if (InputManager.is_mouse_pressed(0)) { - InputManager.consume_mouse(0); - this.handle_left_click(player_inventory, container, index); - return; - } + handle_interaction(player_inventory: PlayerInventory) { + 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_y = slot.y + player_inventory.layout.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(2)) { - InputManager.consume_mouse(2); - this.handle_right_click(player_inventory, container, index); - return; - } - } + if (InputManager.is_mouse_pressed(0)) { + InputManager.consume_mouse(0); + this.handle_left_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; + 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; } } @@ -142,4 +149,34 @@ export class InventorySystem extends System { 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 hand_position = player_hand.get(Position); + const hand_sprite = player_hand.get(Sprite); + + if (!player_position || !hand_position || !hand_sprite) { + return; + } + + // sync position + hand_position.x = player_position.x; + hand_position.y = player_position.y; + + 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; + } + } } diff --git a/client/systems/player_controls.ts b/client/systems/player_controls.ts index cda5f4f..14ea061 100644 --- a/client/systems/player_controls.ts +++ b/client/systems/player_controls.ts @@ -23,6 +23,7 @@ export class PlayerControlsSystem extends System { const velocity = this.player.get(Velocity)!; const controls = this.player.get(PlayerControls)!; + const player_inventory = this.player.get(PlayerInventory)!; if (InputManager.is_key_down(controls.move_left)) { velocity.vx = -controls.move_speed; @@ -72,6 +73,13 @@ export class PlayerControlsSystem extends System { camera.x = Math.round(position.x); camera.y = Math.round(position.y); + const scroll = InputManager.get_wheel_delta(); + if (scroll > 0) { + player_inventory.hotbar_selected = Math.min(8, player_inventory.hotbar_selected + 1); + } else if (scroll < 0) { + player_inventory.hotbar_selected = Math.max(0, player_inventory.hotbar_selected - 1); + } + // --- APPLY BOUNDS --- /*if (camera.bounds) { camera.x = Math.max( diff --git a/common/utils.ts b/common/utils.ts index 240b62c..0ef0e8b 100644 --- a/common/utils.ts +++ b/common/utils.ts @@ -15,7 +15,7 @@ export function point_inside_rec( point_y < rec_y + rec_h; } -type TexturesInfo = Record; +type TexturesInfo = Record; export function get_sprite_region(id: string): SpriteRegion { const textures_info = AssetManager.instance.get("bworld:textures_info");