Hold item !

client/client_world.ts

@@ -64,8 +64,7 @@ export class ClientWorld extends World {
 		);
 		this.add_entity(tilemap);
 
-		const player = create_player();
+		const player = create_player(this);
-		this.add_entity(player);
 
 		// UI !
 		const unpause_button = new Entity("unpausebutton");

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);

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;
 }

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;
+				this.handle_interaction(player_inventory);
-				const container = player_inventory.container;
+				this.handle_hotbar(world, player_inventory);
-				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(0)) {
+	handle_interaction(player_inventory: PlayerInventory) {
-								InputManager.consume_mouse(0);
+		player_inventory.hovering_slot = -1;
-								this.handle_left_click(player_inventory, container, index);
+		const container = player_inventory.container;
-								return;
+		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)) {
+					if (InputManager.is_mouse_pressed(0)) {
-								InputManager.consume_mouse(2);
+						InputManager.consume_mouse(0);
-								this.handle_right_click(player_inventory, container, index);
+						this.handle_left_click(player_inventory, container, index);
-								return;
+						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) {
+					if (InputManager.is_mouse_pressed(2)) {
-					player_inventory.holding_item = undefined;
+						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;
+		}
+	}
 }

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(

common/utils.ts

@@ -15,7 +15,7 @@ export function point_inside_rec(
 		point_y < rec_y + rec_h;
 }
 
-type TexturesInfo = Record<string, { x: number; y: number }>;
+type TexturesInfo = Record<string, SpriteRegion>;
 
 export function get_sprite_region(id: string): SpriteRegion {
 	const textures_info = AssetManager.instance.get<TexturesInfo>("bworld:textures_info");