Hotbar improvments

client/components/player_controls.ts

@@ -10,6 +10,16 @@ export class PlayerControls extends Component {
 	move_left: KeyCode = "KeyA";
 	move_right: KeyCode = "KeyD";
 
+	hotbar_1: KeyCode = "Digit1";
+	hotbar_2: KeyCode = "Digit2";
+	hotbar_3: KeyCode = "Digit3";
+	hotbar_4: KeyCode = "Digit4";
+	hotbar_5: KeyCode = "Digit5";
+	hotbar_6: KeyCode = "Digit6";
+	hotbar_7: KeyCode = "Digit7";
+	hotbar_8: KeyCode = "Digit8";
+	hotbar_9: KeyCode = "Digit9";
+
 	open_inventory: KeyCode = "KeyE";
 
 	open_debug: KeyCode = "F3";

client/systems/player_controls.ts

@@ -70,11 +70,33 @@ 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) {
 			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);
 			}
+
+			if (InputManager.is_key_pressed(controls.hotbar_1)) {
+				player_inventory.hotbar_selected = 0;
+			} else if (InputManager.is_key_pressed(controls.hotbar_2)) {
+				player_inventory.hotbar_selected = 1;
+			} else if (InputManager.is_key_pressed(controls.hotbar_3)) {
+				player_inventory.hotbar_selected = 2;
+			} else if (InputManager.is_key_pressed(controls.hotbar_4)) {
+				player_inventory.hotbar_selected = 3;
+			} else if (InputManager.is_key_pressed(controls.hotbar_5)) {
+				player_inventory.hotbar_selected = 4;
+			} else if (InputManager.is_key_pressed(controls.hotbar_6)) {
+				player_inventory.hotbar_selected = 5;
+			} else if (InputManager.is_key_pressed(controls.hotbar_7)) {
+				player_inventory.hotbar_selected = 6;
+			} else if (InputManager.is_key_pressed(controls.hotbar_8)) {
+				player_inventory.hotbar_selected = 7;
+			} else if (InputManager.is_key_pressed(controls.hotbar_9)) {
+				player_inventory.hotbar_selected = 8;
+			}
+		}
 	}
 }

client/systems/render_system.ts

@@ -8,7 +8,7 @@ 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_inventory } from "./rendering/player.ts";
+import { render_player_hotbar, render_player_inventory } from "./rendering/player.ts";
 import { begin_mode_2d, end_mode_2d } from "../renderer.ts";
 
 export class RenderSystem extends System {
@@ -52,9 +52,12 @@ export class RenderSystem extends System {
 		for (const entity of world.get_entities()) {
 			const player_inventory = entity.get(PlayerInventory);
 
-			if (player_inventory && player_inventory.is_open) {
+			if (player_inventory) {
+				render_player_hotbar(player_inventory);
+				if (player_inventory.is_open) {
 					render_player_inventory(player_inventory);
 				}
 			}
 		}
 	}
+}

client/systems/rendering/player.ts

@@ -3,10 +3,11 @@ import { AssetManager } from "$/client/assets.ts";
 import { PlayerInventory } from "$/client/components/inventory.ts";
 import { InputManager } from "$/client/input_manager.ts";
 import { draw_item, draw_nine_slice } from "./render_utils.ts";
-import { Texture } from "$/client/renderer.ts";
+import { canvas, Texture } from "$/client/renderer.ts";
+
+const PADDING = 10;
 
 export function render_player_inventory(player_inventory: PlayerInventory) {
-	const PADDING = 10;
 	const ui = AssetManager.instance.get<Texture>("bworld:ui");
 	const layout = player_inventory.layout.slots;
 
@@ -59,3 +60,54 @@ export function render_player_inventory(player_inventory: PlayerInventory) {
 		draw_item(player_inventory.holding_item, mouse.x, mouse.y);
 	}
 }
+
+export function render_player_hotbar(player_inventory: PlayerInventory) {
+	const ui = AssetManager.instance.get<Texture>("bworld:ui");
+
+	const hotbar_width = PADDING * 2 + SLOT_SIZE * 9;
+	const hotbar_height = PADDING * 2 + SLOT_SIZE;
+
+	const x = canvas.width / 2 - hotbar_width / 2;
+	const y = canvas.height - hotbar_height;
+
+	draw_nine_slice(
+		ui,
+		160,
+		0,
+		16,
+		16,
+		4,
+		4,
+		4,
+		4,
+		x,
+		y,
+		hotbar_width,
+		hotbar_height,
+	);
+
+	for (let index = 0; index < 9; index += 1) {
+		draw_nine_slice(
+			ui,
+			player_inventory.hotbar_selected === index ? 19 * 16 : 160 + 32,
+			player_inventory.hotbar_selected === index ? 16 : 0,
+			16,
+			16,
+			4,
+			4,
+			4,
+			4,
+			x + PADDING + index * SLOT_SIZE,
+			y + PADDING,
+			SLOT_SIZE,
+			SLOT_SIZE,
+		);
+	}
+
+	for (let index = 0; index < 9; index += 1) {
+		const item = player_inventory.container.get_item(index);
+		if (item) {
+			draw_item(item, x + PADDING + index * SLOT_SIZE, y + PADDING);
+		}
+	}
+}