Server authority
This commit is contained in:
+3
-28
@@ -3,7 +3,6 @@ import { canvas, draw_rect, draw_text, measure_text } from "$/client/renderer/mo
|
||||
import { InputManager } from "../input_manager.ts";
|
||||
import { ClientWorld } from "../client_world.ts";
|
||||
import { PlayerComponent } from "../player.ts";
|
||||
import { ItemStack } from "../inventory.ts";
|
||||
import { MAX_CHAT_LENGTH } from "$/common/protocol.ts";
|
||||
import { render_chat_log } from "../systems/rendering/network.ts";
|
||||
|
||||
@@ -102,14 +101,9 @@ export class GuiChat extends GuiScreen {
|
||||
override on_close(): void {}
|
||||
|
||||
submit() {
|
||||
if (this.text_typed.startsWith("/")) {
|
||||
this.command();
|
||||
} else if (this.text_typed.trim().length > 0) {
|
||||
if (this.world.connection) {
|
||||
this.world.connection.send({ type: "chat", text: this.text_typed });
|
||||
} else {
|
||||
this.world.add_chat(this.text_typed);
|
||||
}
|
||||
// commands like /give run on the server too
|
||||
if (this.text_typed.trim().length > 0) {
|
||||
this.world.connection.send({ type: "chat", text: this.text_typed });
|
||||
}
|
||||
this.text_typed = "";
|
||||
|
||||
@@ -119,23 +113,4 @@ export class GuiChat extends GuiScreen {
|
||||
player_component.pop_screen();
|
||||
}
|
||||
}
|
||||
|
||||
command() {
|
||||
if (this.text_typed.startsWith("/give")) {
|
||||
let [_, item_id, quantity] = this.text_typed.split(" ");
|
||||
|
||||
if (!item_id.includes(":")) {
|
||||
item_id = `bworld:${item_id}`;
|
||||
}
|
||||
if (quantity === undefined) {
|
||||
quantity = "1";
|
||||
}
|
||||
|
||||
const [player] = this.world.get_tag("player")!;
|
||||
const player_component = player.get(PlayerComponent);
|
||||
if (player_component) {
|
||||
player_component.player_inventory.container.add_item(new ItemStack(item_id, Number(quantity)));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
import { Inventory, PlayerInventory } from "../inventory.ts";
|
||||
import { add_player_hotbar, add_player_inventory, GuiInventoryScreen, Slot } from "./gui_screen.ts";
|
||||
import { canvas, draw_rect, Texture } from "$/client/renderer/mod.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 GuiChest extends GuiInventoryScreen {
|
||||
override inventory_width = PADDING * 2 + SLOT_SIZE * 9;
|
||||
override inventory_height = PADDING * 4 + SLOT_SIZE * 7;
|
||||
|
||||
constructor(inventory: Inventory, player_inventory: PlayerInventory) {
|
||||
super(inventory, player_inventory, undefined);
|
||||
|
||||
add_player_hotbar(this, player_inventory, PADDING, PADDING);
|
||||
add_player_inventory(this, player_inventory, PADDING, PADDING * 2 + SLOT_SIZE);
|
||||
|
||||
const chest_x = PADDING;
|
||||
const chest_y = PADDING * 3 + SLOT_SIZE * 4;
|
||||
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
for (let l = 0; l < 9; ++l) {
|
||||
this.slots.push(
|
||||
new Slot(
|
||||
this.inventory,
|
||||
l + i * 9,
|
||||
chest_x + l * SLOT_SIZE,
|
||||
chest_y + i * 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();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
import { add_player_hotbar, add_player_inventory, GuiInventoryScreen, Slot } from "./gui_screen.ts";
|
||||
import { canvas, draw_rect, draw_texture_region, Texture } from "$/client/renderer/mod.ts";
|
||||
import { AssetManager } from "../assets.ts";
|
||||
import { SLOT_SIZE, TEXTURE_SIZE } from "$/common/constants.ts";
|
||||
import { ClientMessage, ScreenLayout } from "$/common/protocol.ts";
|
||||
import { draw_nine_slice } from "../systems/rendering/render_utils.ts";
|
||||
import { get_sprite_region } from "$/client/sprites.ts";
|
||||
import { ClientInventories } from "../inventory.ts";
|
||||
|
||||
const PADDING = 10;
|
||||
|
||||
// a screen opened by the server (chest, furnace, ...), drawn from the layout it sent
|
||||
export class GuiContainer extends GuiInventoryScreen {
|
||||
layout: ScreenLayout;
|
||||
properties: Record<string, number>;
|
||||
|
||||
constructor(
|
||||
inventories: ClientInventories,
|
||||
send: (message: ClientMessage) => void,
|
||||
layout: ScreenLayout,
|
||||
properties: Record<string, number>,
|
||||
) {
|
||||
super(inventories, send);
|
||||
this.layout = layout;
|
||||
this.properties = properties;
|
||||
|
||||
this.inventory_width = PADDING * 2 + SLOT_SIZE * 9;
|
||||
this.inventory_height = PADDING * 4 + SLOT_SIZE * (4 + layout.rows);
|
||||
|
||||
add_player_hotbar(this, PADDING, PADDING);
|
||||
add_player_inventory(this, PADDING, PADDING * 2 + SLOT_SIZE);
|
||||
|
||||
const area_y = PADDING * 3 + SLOT_SIZE * 4;
|
||||
for (const slot of layout.slots) {
|
||||
this.slots.push(
|
||||
new Slot("screen", slot.index, PADDING + slot.x * SLOT_SIZE, area_y + slot.y * SLOT_SIZE, slot.output),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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,
|
||||
);
|
||||
|
||||
this.draw_bars();
|
||||
|
||||
super.on_render();
|
||||
}
|
||||
|
||||
draw_bars() {
|
||||
const atlas = AssetManager.instance.get<Texture>("bworld:textures");
|
||||
const area_y = PADDING * 3 + SLOT_SIZE * 4;
|
||||
|
||||
for (const bar of this.layout.bars) {
|
||||
const x = this.x + PADDING + bar.x * SLOT_SIZE;
|
||||
const y = this.y + area_y + bar.y * SLOT_SIZE;
|
||||
const max = this.properties[bar.max] ?? 0;
|
||||
const pct = max > 0 ? Math.max(0, Math.min(1, (this.properties[bar.value] ?? 0) / max)) : 0;
|
||||
|
||||
const empty = get_sprite_region(bar.empty_texture);
|
||||
draw_texture_region(
|
||||
atlas,
|
||||
empty.x * TEXTURE_SIZE,
|
||||
empty.y * TEXTURE_SIZE,
|
||||
TEXTURE_SIZE,
|
||||
TEXTURE_SIZE,
|
||||
x,
|
||||
y,
|
||||
SLOT_SIZE,
|
||||
SLOT_SIZE,
|
||||
);
|
||||
|
||||
const full = get_sprite_region(bar.full_texture);
|
||||
if (bar.direction === "right") {
|
||||
draw_texture_region(
|
||||
atlas,
|
||||
full.x * TEXTURE_SIZE,
|
||||
full.y * TEXTURE_SIZE,
|
||||
TEXTURE_SIZE * pct,
|
||||
TEXTURE_SIZE,
|
||||
x,
|
||||
y,
|
||||
SLOT_SIZE * pct,
|
||||
SLOT_SIZE,
|
||||
);
|
||||
} else {
|
||||
// fills from the bottom up
|
||||
draw_texture_region(
|
||||
atlas,
|
||||
full.x * TEXTURE_SIZE,
|
||||
full.y * TEXTURE_SIZE + TEXTURE_SIZE * (1 - pct),
|
||||
TEXTURE_SIZE,
|
||||
TEXTURE_SIZE * pct,
|
||||
x,
|
||||
y + SLOT_SIZE * (1 - pct),
|
||||
SLOT_SIZE,
|
||||
SLOT_SIZE * pct,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,211 +0,0 @@
|
||||
import { Inventory, PlayerInventory } from "../inventory.ts";
|
||||
import { add_player_hotbar, add_player_inventory, GuiInventoryScreen, Slot } from "./gui_screen.ts";
|
||||
import { canvas, draw_rect, draw_texture_region, Texture } from "$/client/renderer/mod.ts";
|
||||
import { AssetManager } from "../assets.ts";
|
||||
import { SLOT_SIZE, TEXTURE_SIZE } from "$/common/constants.ts";
|
||||
import { draw_nine_slice } from "../systems/rendering/render_utils.ts";
|
||||
import { get_sprite_region } from "$/common/utils.ts";
|
||||
|
||||
const PADDING = 10;
|
||||
|
||||
// crazy this is how i found out interface X {} is diffrent then type X = {}
|
||||
type TileChestData = {
|
||||
inventory: Inventory;
|
||||
progress: number;
|
||||
progress_max: number;
|
||||
fuel: number;
|
||||
fuel_max: number;
|
||||
};
|
||||
|
||||
export class GuiFurnace extends GuiInventoryScreen<Inventory, TileChestData> {
|
||||
override inventory_width = PADDING * 2 + SLOT_SIZE * 9;
|
||||
override inventory_height = PADDING * 4 + SLOT_SIZE * 7;
|
||||
|
||||
constructor(
|
||||
inventory: Inventory,
|
||||
player_inventory: PlayerInventory,
|
||||
properties: TileChestData,
|
||||
) {
|
||||
super(inventory, player_inventory, properties);
|
||||
|
||||
add_player_hotbar(this, player_inventory, PADDING, PADDING);
|
||||
add_player_inventory(this, player_inventory, PADDING, PADDING * 2 + SLOT_SIZE);
|
||||
|
||||
const furnace_y = PADDING * 3 + SLOT_SIZE * 4;
|
||||
|
||||
this.slots.push(
|
||||
new Slot(
|
||||
this.inventory,
|
||||
0,
|
||||
this.inventory_width / 2 - SLOT_SIZE,
|
||||
furnace_y,
|
||||
),
|
||||
);
|
||||
this.slots.push(
|
||||
new Slot(
|
||||
this.inventory,
|
||||
1,
|
||||
this.inventory_width / 2 - SLOT_SIZE,
|
||||
furnace_y + SLOT_SIZE * 2,
|
||||
),
|
||||
);
|
||||
this.slots.push(
|
||||
new Slot(
|
||||
this.inventory,
|
||||
2,
|
||||
this.inventory_width / 2 + SLOT_SIZE,
|
||||
furnace_y + 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,
|
||||
);
|
||||
|
||||
this.draw_fire();
|
||||
this.draw_arrow();
|
||||
|
||||
super.on_render();
|
||||
}
|
||||
|
||||
override handle_left_click(slot: Slot): void {
|
||||
if (slot.inventory === this.inventory && slot.index === 2) {
|
||||
if (this.inventory.container.get_item(2)) {
|
||||
this.pickup();
|
||||
}
|
||||
} else {
|
||||
super.handle_left_click(slot);
|
||||
}
|
||||
}
|
||||
|
||||
override handle_right_click(slot: Slot): void {
|
||||
if (slot.inventory === this.inventory && slot.index === 2) {
|
||||
if (this.inventory.container.get_item(2)) {
|
||||
this.pickup();
|
||||
}
|
||||
} else {
|
||||
super.handle_right_click(slot);
|
||||
}
|
||||
}
|
||||
|
||||
pickup() {
|
||||
const holding_item = this.player_inventory.holding_item;
|
||||
const item = this.inventory.container.get_item(2)!;
|
||||
|
||||
if (holding_item) {
|
||||
if (holding_item.type_id === item.type_id) {
|
||||
const items_left = holding_item.max_amount - holding_item.amount;
|
||||
if (items_left >= item.amount) {
|
||||
holding_item.amount += item.amount;
|
||||
this.inventory.container.set_item(2, undefined);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.player_inventory.holding_item = item;
|
||||
this.inventory.container.set_item(2, undefined);
|
||||
}
|
||||
}
|
||||
|
||||
draw_fire() {
|
||||
const atlas = AssetManager.instance.get<Texture>("bworld:textures");
|
||||
|
||||
const fire_empty_region = get_sprite_region("bworld:fire_empty");
|
||||
const fire_full_region = get_sprite_region("bworld:fire_full");
|
||||
|
||||
const fuel_pct = Math.max(0, Math.min(1, this.properties.fuel / this.properties.fuel_max));
|
||||
const full_height = SLOT_SIZE * fuel_pct;
|
||||
|
||||
const furnace_y = PADDING * 3 + SLOT_SIZE * 4;
|
||||
|
||||
draw_texture_region(
|
||||
atlas,
|
||||
fire_empty_region.x * TEXTURE_SIZE,
|
||||
fire_empty_region.y * TEXTURE_SIZE,
|
||||
TEXTURE_SIZE,
|
||||
TEXTURE_SIZE,
|
||||
this.x + this.inventory_width / 2 - SLOT_SIZE,
|
||||
this.y + furnace_y + SLOT_SIZE,
|
||||
SLOT_SIZE,
|
||||
SLOT_SIZE,
|
||||
);
|
||||
|
||||
const fire_draw_x = this.x + this.inventory_width / 2 - SLOT_SIZE;
|
||||
const fire_draw_y = this.y + furnace_y + SLOT_SIZE;
|
||||
|
||||
const fire_src_height = TEXTURE_SIZE * fuel_pct;
|
||||
|
||||
const fire_src_y_offset = TEXTURE_SIZE - fire_src_height;
|
||||
const fire_dst_y_offset = SLOT_SIZE - full_height;
|
||||
|
||||
draw_texture_region(
|
||||
atlas,
|
||||
fire_full_region.x * TEXTURE_SIZE,
|
||||
fire_full_region.y * TEXTURE_SIZE + fire_src_y_offset,
|
||||
TEXTURE_SIZE,
|
||||
fire_src_height,
|
||||
fire_draw_x,
|
||||
fire_draw_y + fire_dst_y_offset,
|
||||
SLOT_SIZE,
|
||||
full_height,
|
||||
);
|
||||
}
|
||||
|
||||
draw_arrow() {
|
||||
const atlas = AssetManager.instance.get<Texture>("bworld:textures");
|
||||
|
||||
const arrow_empty_region = get_sprite_region("bworld:arrow_empty");
|
||||
const arrow_full_region = get_sprite_region("bworld:arrow_full");
|
||||
|
||||
const progress_pct = Math.max(0, Math.min(1, this.properties.progress / this.properties.progress_max));
|
||||
const full_width = SLOT_SIZE * progress_pct;
|
||||
|
||||
const furnace_y = PADDING * 3 + SLOT_SIZE * 4;
|
||||
|
||||
draw_texture_region(
|
||||
atlas,
|
||||
arrow_empty_region.x * TEXTURE_SIZE,
|
||||
arrow_empty_region.y * TEXTURE_SIZE,
|
||||
TEXTURE_SIZE,
|
||||
TEXTURE_SIZE,
|
||||
this.x + this.inventory_width / 2,
|
||||
this.y + furnace_y + SLOT_SIZE,
|
||||
SLOT_SIZE,
|
||||
SLOT_SIZE,
|
||||
);
|
||||
|
||||
const draw_x = this.x + this.inventory_width / 2;
|
||||
const draw_y = this.y + furnace_y + SLOT_SIZE;
|
||||
|
||||
const src_width = TEXTURE_SIZE * progress_pct;
|
||||
|
||||
draw_texture_region(
|
||||
atlas,
|
||||
arrow_full_region.x * TEXTURE_SIZE,
|
||||
arrow_full_region.y * TEXTURE_SIZE,
|
||||
src_width,
|
||||
TEXTURE_SIZE,
|
||||
draw_x,
|
||||
draw_y,
|
||||
full_width,
|
||||
SLOT_SIZE,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,96 +1,23 @@
|
||||
import { Container, Inventory, ItemStack, PlayerInventory } from "../inventory.ts";
|
||||
import { add_player_hotbar, add_player_inventory, GuiInventoryScreen, Slot } from "./gui_screen.ts";
|
||||
import { canvas, draw_rect, Texture } from "$/client/renderer/mod.ts";
|
||||
import { AssetManager } from "../assets.ts";
|
||||
import { SLOT_SIZE } from "../../common/constants.ts";
|
||||
import { draw_nine_slice } from "../systems/rendering/render_utils.ts";
|
||||
|
||||
export interface CraftingRecipe {
|
||||
width: number;
|
||||
height: number;
|
||||
pattern: (string | undefined)[];
|
||||
result: ItemStack;
|
||||
}
|
||||
|
||||
const recipes: CraftingRecipe[] = [
|
||||
{
|
||||
width: 3,
|
||||
height: 3,
|
||||
pattern: [
|
||||
"bworld:planks",
|
||||
"bworld:planks",
|
||||
"bworld:planks",
|
||||
"bworld:planks",
|
||||
undefined,
|
||||
"bworld:planks",
|
||||
"bworld:planks",
|
||||
"bworld:planks",
|
||||
"bworld:planks",
|
||||
],
|
||||
result: new ItemStack("bworld:chest", 1),
|
||||
},
|
||||
{
|
||||
width: 3,
|
||||
height: 3,
|
||||
pattern: [
|
||||
"bworld:stone",
|
||||
"bworld:stone",
|
||||
"bworld:stone",
|
||||
"bworld:stone",
|
||||
undefined,
|
||||
"bworld:stone",
|
||||
"bworld:stone",
|
||||
"bworld:stone",
|
||||
"bworld:stone",
|
||||
],
|
||||
result: new ItemStack("bworld:furnace", 1),
|
||||
},
|
||||
{
|
||||
width: 1,
|
||||
height: 1,
|
||||
pattern: [
|
||||
"bworld:log",
|
||||
],
|
||||
result: new ItemStack("bworld:planks", 2),
|
||||
},
|
||||
{
|
||||
width: 1,
|
||||
height: 2,
|
||||
pattern: [
|
||||
"bworld:planks",
|
||||
"bworld:planks",
|
||||
],
|
||||
result: new ItemStack("bworld:stick", 2),
|
||||
},
|
||||
{
|
||||
width: 3,
|
||||
height: 3,
|
||||
pattern: [
|
||||
"bworld:planks",
|
||||
"bworld:planks",
|
||||
"bworld:planks",
|
||||
undefined,
|
||||
"bworld:stick",
|
||||
undefined,
|
||||
undefined,
|
||||
"bworld:stick",
|
||||
undefined,
|
||||
],
|
||||
result: new ItemStack("bworld:wood_pickaxe", 1),
|
||||
},
|
||||
];
|
||||
import { ClientInventories } from "../inventory.ts";
|
||||
import { ClientMessage, CRAFTING_RESULT_SLOT } from "$/common/protocol.ts";
|
||||
|
||||
const PADDING = 10;
|
||||
|
||||
// the recipes live on the server, which fills in the result slot
|
||||
export class GuiPlayerInventory extends GuiInventoryScreen {
|
||||
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);
|
||||
constructor(inventories: ClientInventories, send: (message: ClientMessage) => void) {
|
||||
super(inventories, send);
|
||||
|
||||
add_player_hotbar(this, player_inventory, PADDING, PADDING);
|
||||
add_player_inventory(this, player_inventory, PADDING, PADDING * 2 + SLOT_SIZE);
|
||||
add_player_hotbar(this, PADDING, PADDING);
|
||||
add_player_inventory(this, PADDING, PADDING * 2 + SLOT_SIZE);
|
||||
|
||||
const crafting_x = PADDING;
|
||||
const crafting_y = PADDING * 3 + SLOT_SIZE * 4;
|
||||
@@ -98,17 +25,14 @@ export class GuiPlayerInventory extends GuiInventoryScreen {
|
||||
for (let i = 0; i < 3; i += 1) {
|
||||
for (let j = 0; j < 3; j += 1) {
|
||||
this.slots.push(
|
||||
new Slot(this.inventory, j * 3 + i, crafting_x + i * SLOT_SIZE, crafting_y + j * SLOT_SIZE),
|
||||
new Slot("crafting", j * 3 + i, 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_tick(delta: number): void {
|
||||
super.on_tick(delta);
|
||||
this.update_crafting_result();
|
||||
this.slots.push(
|
||||
new Slot("crafting", CRAFTING_RESULT_SLOT, crafting_x + 5 * SLOT_SIZE, crafting_y + 1 * SLOT_SIZE, true),
|
||||
);
|
||||
}
|
||||
|
||||
override on_render(): void {
|
||||
@@ -134,136 +58,4 @@ export class GuiPlayerInventory extends GuiInventoryScreen {
|
||||
|
||||
super.on_render();
|
||||
}
|
||||
|
||||
override on_close(): void {
|
||||
for (let i = 0; i < 8; i += 1) {
|
||||
const item = this.inventory.container.get_item(i);
|
||||
if (item) {
|
||||
this.player_inventory.container.add_item(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get_crafting_grid(): (string | undefined)[] {
|
||||
const grid: (string | undefined)[] = [];
|
||||
|
||||
for (let i = 0; i < 9; i++) {
|
||||
const item = this.inventory.container.get_item(i);
|
||||
grid.push(item?.type_id);
|
||||
}
|
||||
|
||||
return grid;
|
||||
}
|
||||
|
||||
matches_recipe(
|
||||
grid: (string | undefined)[],
|
||||
recipe: CraftingRecipe,
|
||||
): boolean {
|
||||
for (let y = 0; y <= 3 - recipe.height; y++) {
|
||||
for (let x = 0; x <= 3 - recipe.width; x++) {
|
||||
let match = true;
|
||||
|
||||
for (let gy = 0; gy < 3; gy++) {
|
||||
for (let gx = 0; gx < 3; gx++) {
|
||||
const grid_index = gy * 3 + gx;
|
||||
|
||||
if (
|
||||
gx >= x &&
|
||||
gx < x + recipe.width &&
|
||||
gy >= y &&
|
||||
gy < y + recipe.height
|
||||
) {
|
||||
const rx = gx - x;
|
||||
const ry = gy - y;
|
||||
const recipe_index = ry * recipe.width + rx;
|
||||
|
||||
if (grid[grid_index] !== recipe.pattern[recipe_index]) {
|
||||
match = false;
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
if (grid[grid_index] !== undefined) {
|
||||
match = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!match) break;
|
||||
}
|
||||
|
||||
if (match) return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
update_crafting_result() {
|
||||
const grid = this.get_crafting_grid();
|
||||
|
||||
for (const recipe of recipes) {
|
||||
if (this.matches_recipe(grid, recipe)) {
|
||||
this.inventory.container.set_item(
|
||||
9,
|
||||
recipe.result.clone(),
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.inventory.container.set_item(9, undefined);
|
||||
}
|
||||
|
||||
consume_recipe_items() {
|
||||
for (let i = 0; i < 9; i++) {
|
||||
const item = this.inventory.container.get_item(i);
|
||||
if (!item) {
|
||||
continue;
|
||||
}
|
||||
|
||||
item.amount -= 1;
|
||||
|
||||
if (item.amount <= 0) {
|
||||
this.inventory.container.set_item(i, undefined);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
override handle_left_click(slot: Slot): void {
|
||||
if (slot.inventory === this.inventory && slot.index === 9) {
|
||||
if (this.inventory.container.get_item(9)) {
|
||||
this.craft();
|
||||
}
|
||||
} else {
|
||||
super.handle_left_click(slot);
|
||||
}
|
||||
}
|
||||
|
||||
override handle_right_click(slot: Slot): void {
|
||||
if (slot.inventory === this.inventory && slot.index === 9) {
|
||||
if (this.inventory.container.get_item(9)) {
|
||||
this.craft();
|
||||
}
|
||||
} else {
|
||||
super.handle_right_click(slot);
|
||||
}
|
||||
}
|
||||
|
||||
craft() {
|
||||
const holding_item = this.player_inventory.holding_item;
|
||||
const item = this.inventory.container.get_item(9)!;
|
||||
|
||||
if (holding_item) {
|
||||
if (holding_item.type_id === item.type_id) {
|
||||
const items_left = holding_item.max_amount - holding_item.amount;
|
||||
if (items_left >= item.amount) {
|
||||
this.consume_recipe_items();
|
||||
holding_item.amount += item.amount;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.player_inventory.holding_item = item;
|
||||
this.consume_recipe_items();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+75
-185
@@ -1,27 +1,28 @@
|
||||
import { SLOT_SIZE } from "$/common/constants.ts";
|
||||
import { click_slot, Container } from "$/common/inventory.ts";
|
||||
import { ClientMessage, ContainerKey, CRAFTING_RESULT_SLOT } from "$/common/protocol.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 { ClientInventories } from "../inventory.ts";
|
||||
import { canvas, Texture } from "../renderer/mod.ts";
|
||||
import { draw_item, draw_nine_slice } from "../systems/rendering/render_utils.ts";
|
||||
|
||||
export class Slot {
|
||||
inventory: Inventory;
|
||||
container: ContainerKey;
|
||||
index: number;
|
||||
// relative to screen top left
|
||||
x: number;
|
||||
y: number;
|
||||
// can only be taken from, like the crafting or furnace result
|
||||
output: boolean;
|
||||
|
||||
constructor(inventory: Inventory, index: number, x: number, y: number) {
|
||||
this.inventory = inventory;
|
||||
constructor(container: ContainerKey, index: number, x: number, y: number, output = false) {
|
||||
this.container = container;
|
||||
this.index = index;
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
|
||||
get item(): ItemStack | undefined {
|
||||
return this.inventory.container.get_item(this.index);
|
||||
this.output = output;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,25 +35,32 @@ export abstract class GuiScreen {
|
||||
abstract on_close(): void;
|
||||
}
|
||||
|
||||
export class GuiInventoryScreen<Inv extends Inventory = Inventory, Properties = Record<string, unknown> | undefined>
|
||||
extends GuiScreen {
|
||||
inventory: Inv;
|
||||
player_inventory: PlayerInventory;
|
||||
properties: Properties;
|
||||
// a screen of slots. the server owns the contents: clicks are sent to it and guessed locally
|
||||
// so they feel instant, then whatever the server syncs back wins
|
||||
export class GuiInventoryScreen extends GuiScreen {
|
||||
inventories: ClientInventories;
|
||||
send: (message: ClientMessage) => void;
|
||||
|
||||
slots: Slot[] = [];
|
||||
hovering: Slot | undefined;
|
||||
inventory_width: number = 500;
|
||||
inventory_height: number = 500;
|
||||
|
||||
constructor(
|
||||
inventory: Inv,
|
||||
player_inventory: PlayerInventory,
|
||||
properties: Properties,
|
||||
) {
|
||||
constructor(inventories: ClientInventories, send: (message: ClientMessage) => void) {
|
||||
super();
|
||||
this.inventory = inventory;
|
||||
this.player_inventory = player_inventory;
|
||||
this.properties = properties;
|
||||
this.inventories = inventories;
|
||||
this.send = send;
|
||||
}
|
||||
|
||||
get_container(key: ContainerKey): Container | undefined {
|
||||
switch (key) {
|
||||
case "inventory":
|
||||
return this.inventories.inventory;
|
||||
case "crafting":
|
||||
return this.inventories.crafting;
|
||||
case "screen":
|
||||
return this.inventories.screen;
|
||||
}
|
||||
}
|
||||
|
||||
on_tick(_delta: number): void {
|
||||
@@ -60,20 +68,17 @@ export class GuiInventoryScreen<Inv extends Inventory = Inventory, Properties =
|
||||
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) {
|
||||
const hovered = slot === this.hovering;
|
||||
draw_nine_slice(
|
||||
ui,
|
||||
slot.inventory.hovering_slot === slot.index ? 19 * 16 : 160 + 32,
|
||||
slot.inventory.hovering_slot === slot.index ? 16 : 0,
|
||||
hovered ? 19 * 16 : 160 + 32,
|
||||
hovered ? 16 : 0,
|
||||
16,
|
||||
16,
|
||||
4,
|
||||
@@ -88,198 +93,83 @@ export class GuiInventoryScreen<Inv extends Inventory = Inventory, Properties =
|
||||
}
|
||||
|
||||
for (const slot of this.slots) {
|
||||
const item = slot.item;
|
||||
const item = this.get_container(slot.container)?.get_item(slot.index);
|
||||
if (item) {
|
||||
draw_item(item, this.x + slot.x, this.y + slot.y);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.player_inventory.holding_item) {
|
||||
if (this.inventories.cursor.item) {
|
||||
const mouse = InputManager.get_mouse_position();
|
||||
draw_item(this.player_inventory.holding_item, mouse.x, mouse.y);
|
||||
draw_item(this.inventories.cursor.item, mouse.x, mouse.y);
|
||||
}
|
||||
}
|
||||
|
||||
on_close(): void {}
|
||||
on_close(): void {
|
||||
this.send({ type: "close_screen" });
|
||||
|
||||
// the server puts these back in the inventory, show it right away
|
||||
const { inventory, crafting, cursor } = this.inventories;
|
||||
for (let i = 0; i < CRAFTING_RESULT_SLOT; i++) {
|
||||
const item = crafting.get_item(i);
|
||||
if (item) {
|
||||
inventory.add_item(item);
|
||||
crafting.set_item(i, undefined);
|
||||
}
|
||||
}
|
||||
crafting.set_item(CRAFTING_RESULT_SLOT, undefined);
|
||||
if (cursor.item) {
|
||||
inventory.add_item(cursor.item);
|
||||
cursor.item = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
handle_interaction() {
|
||||
this.player_inventory.hovering_slot = -1;
|
||||
this.inventory.hovering_slot = -1;
|
||||
this.hovering = undefined;
|
||||
const mouse = InputManager.get_mouse_position();
|
||||
|
||||
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;
|
||||
const hovering = point_inside_rec(mouse.x, mouse.y, this.x + slot.x, this.y + slot.y, SLOT_SIZE, SLOT_SIZE);
|
||||
if (!hovering) {
|
||||
continue;
|
||||
}
|
||||
this.hovering = slot;
|
||||
|
||||
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);
|
||||
for (const button of [0, 2]) {
|
||||
if (InputManager.is_mouse_pressed(button)) {
|
||||
InputManager.consume_mouse(button);
|
||||
this.click(slot, button);
|
||||
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);
|
||||
}
|
||||
click(slot: Slot, button: number) {
|
||||
this.send({ type: "click", container: slot.container, index: slot.index, button });
|
||||
|
||||
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);
|
||||
// output slots depend on server side things like recipes, just wait for the server
|
||||
const container = this.get_container(slot.container);
|
||||
if (container && !slot.output) {
|
||||
click_slot(container, slot.index, this.inventories.cursor, button);
|
||||
}
|
||||
}
|
||||
|
||||
/*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: GuiInventoryScreen,
|
||||
player_inventory: PlayerInventory,
|
||||
offset_x: number,
|
||||
offset_y: number,
|
||||
) {
|
||||
export function add_player_inventory(handler: GuiInventoryScreen, 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,
|
||||
),
|
||||
new Slot("inventory", l + i * 9 + 9, offset_x + l * SLOT_SIZE, offset_y + i * SLOT_SIZE),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function add_player_hotbar(
|
||||
handler: GuiInventoryScreen,
|
||||
player_inventory: PlayerInventory,
|
||||
offset_x: number,
|
||||
offset_y: number,
|
||||
) {
|
||||
export function add_player_hotbar(handler: GuiInventoryScreen, 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));
|
||||
handler.slots.push(new Slot("inventory", i, offset_x + i * SLOT_SIZE, offset_y));
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user