From: Elias Fleckenstein Date: Tue, 29 Jun 2021 14:32:28 +0000 (+0200) Subject: Rename hudbar to hotbar; Use DOM references for hotbar X-Git-Url: https://git.lizzy.rs/?a=commitdiff_plain;h=2f0aed80b99826fb69f4751942e8ca0271c45d2b;p=dragonblocks.git Rename hudbar to hotbar; Use DOM references for hotbar --- diff --git a/engine/hotbar.js b/engine/hotbar.js new file mode 100644 index 0000000..755e03a --- /dev/null +++ b/engine/hotbar.js @@ -0,0 +1,125 @@ +/* + * hotbar.js + * + * Copyright 2020 Elias Fleckenstein + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 2 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, + * MA 02110-1301, USA. + * + * + */ + +dragonblocks.Hotbar = class +{ + constructor(inventory, slots) + { + this.inventory = inventory; + this.slots = slots; + + this.selectedSlot = 0; + + this.display = document.body.insertBefore(document.createElement("div"), dragonblocks.mapDisplay.element.nextSibling); + this.display.style.position = "fixed"; + this.display.style.bottom = "5px"; + this.display.style.height = "60px"; + this.display.style.width = "445px"; + + dblib.center(this.display); + + this.slotDisplays = []; + + for (let i = 0; i < this.slots; i++) { + let slotDisplay = this.display.appendChild(document.createElement("div")); + slotDisplay.style.position = "absolute"; + slotDisplay.style.top = "3px"; + slotDisplay.style.left = i * 53 + "px"; + slotDisplay.style.width = "50px"; + slotDisplay.style.height = "50px"; + slotDisplay.style.boxShadow = "0 0 0 3px #C5C5C5"; + + let slotCountDisplay = slotDisplay.appendChild(document.createElement("span")); + slotCountDisplay.style.position = "absolute"; + slotCountDisplay.style.right = "5px"; + slotCountDisplay.style.bottom = "5px"; + slotCountDisplay.style.color = "white"; + + this.slotDisplays[i] = {slotDisplay, slotCountDisplay}; + } + + this.selectorDisplay = this.display.appendChild(document.createElement("div")); + this.selectorDisplay.style.position = "absolute"; + this.selectorDisplay.style.top = "3px"; + this.selectorDisplay.style.width = "50px"; + this.selectorDisplay.style.height = "50px"; + this.selectorDisplay.style.boxShadow = "0 0 0 5px #999999"; + + this.itemnameDisplay = this.display.appendChild(document.createElement("span")); + this.itemnameDisplay.style.position = "absolute"; + this.itemnameDisplay.style.bottom = "60px"; + this.itemnameDisplay.style.color = "white"; + this.itemnameDisplay.style.fontSize = "20px"; + + this.update(); + } + + nextItem() + { + if (++this.selectedSlot == this.slots) + this.selectedSlot = 0; + + this.update(); + } + + previousItem() + { + if (--this.selectedSlot == -1) + this.selectedSlot = this.slots - 1; + + this.update(); + } + + select(i) + { + this.selectedSlot = i; + this.update(); + } + + update() + { + for (let i = 0; i < this.slots; i++) { + let itemstack = this.inventory.getSlot(i); + let {slotDisplay, slotCountDisplay} = this.slotDisplays[i]; + + slotDisplay.style.background = itemstack.item && dragonblocks.getTexture(itemstack.toItem().texture); + if (! slotDisplay.style.backgroundColor || slotDisplay.style.backgroundColor == "initial") + slotDisplay.style.backgroundColor = "rgba(0, 0, 0, 0.3)"; + slotDisplay.style.backgroundSize = "cover"; + + slotCountDisplay.innerHTML = (itemstack.count <= 1) ? "" : itemstack.count; + + if (i == this.selectedSlot) { + this.selectorDisplay.style.left = slotDisplay.style.left; + + this.itemnameDisplay.innerHTML = itemstack.item ? itemstack.toItem().desc : ""; + dblib.center(this.itemnameDisplay); + } + } + } + + getSelectedItem() + { + return this.inventory.getSlot(this.selectedSlot); + } +}; diff --git a/engine/hudbar.js b/engine/hudbar.js deleted file mode 100644 index 3855fe0..0000000 --- a/engine/hudbar.js +++ /dev/null @@ -1,133 +0,0 @@ -/* - * hudbar.js - * - * Copyright 2020 Elias Fleckenstein - * - * This program is free software; you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation; either version 2 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program; if not, write to the Free Software - * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, - * MA 02110-1301, USA. - * - * - */ - -dragonblocks.Hudbar = class -{ - constructor(inventory, slots) - { - this.id = dragonblocks.getToken(); - - this.inventory = inventory; - this.slots = slots; - - this.selectedSlot = 0; - - let display = document.body.insertBefore(document.createElement("div"), dragonblocks.mapDisplay.element.nextSibling); - display.id = "dragonblocks.hudbar[" + this.id + "]"; - display.style.position = "fixed"; - display.style.bottom = "5px"; - display.style.height = "60px"; - display.style.width = "445px"; - - dblib.center(display); - - for (let i = 0; i < this.slots; i++) { - let slotDisplay = display.appendChild(document.createElement("div")); - slotDisplay.id = "dragonblocks.hudbar[" + this.id + "].slot[" + i + "]"; - slotDisplay.style.position = "absolute"; - slotDisplay.style.top = "3px"; - slotDisplay.style.left = i * 53 + "px"; - slotDisplay.style.width = "50px"; - slotDisplay.style.height = "50px"; - slotDisplay.style.backgroundColor = "black"; - slotDisplay.style.boxShadow = "0 0 0 3px #C5C5C5"; - - let slotCountDisplay = slotDisplay.appendChild(document.createElement("span")); - slotCountDisplay.id = slotDisplay.id + ".count"; - slotCountDisplay.style.position = "absolute"; - slotCountDisplay.style.right = "5px"; - slotCountDisplay.style.bottom = "5px"; - slotCountDisplay.style.color = "white"; - } - - let selectorDisplay = display.appendChild(document.createElement("div")); - selectorDisplay.id = "dragonblocks.hudbar[" + this.id + "].selector"; - selectorDisplay.style.position = "absolute"; - selectorDisplay.style.top = "3px"; - selectorDisplay.style.width = "50px"; - selectorDisplay.style.height = "50px"; - selectorDisplay.style.boxShadow = "0 0 0 5px #999999"; - - let itemnameDisplay = display.appendChild(document.createElement("span")); - itemnameDisplay.id = "dragonblocks.hudbar[" + this.id + "].itemname"; - itemnameDisplay.style.position = "absolute"; - itemnameDisplay.style.bottom = "60px"; - itemnameDisplay.style.color = "white"; - itemnameDisplay.style.fontSize = "20px"; - - this.update(); - } - - nextItem() - { - if (++this.selectedSlot == this.slots) - this.selectedSlot = 0; - - this.update(); - } - - previousItem() - { - if (--this.selectedSlot == -1) - this.selectedSlot = this.slots - 1; - this.update(); - } - - select(i) - { - this.selectedSlot = i; - this.update(); - } - - update() - { - let display = document.getElementById("dragonblocks.hudbar[" + this.id + "]"); - - if (! display) - return; - - for (let i = 0; i < this.slots; i++) { - let itemstack = this.inventory.getSlot(i); - - let slotDisplay = document.getElementById("dragonblocks.hudbar[" + this.id + "].slot[" + i + "]"); - slotDisplay.style.background = itemstack.item ? dragonblocks.getTexture(itemstack.toItem().texture) : "black"; - slotDisplay.style.backgroundSize = "cover"; - slotDisplay.style.opacity = itemstack.item ? 1 : 0.3; - - document.getElementById(slotDisplay.id + ".count").innerHTML = (itemstack.count <= 1) ? "" : itemstack.count; - - if (i == this.selectedSlot) { - document.getElementById("dragonblocks.hudbar[" + this.id + "].selector").style.left = slotDisplay.style.left; - - let itemname_elem = document.getElementById("dragonblocks.hudbar[" + this.id + "].itemname"); - itemname_elem.innerHTML = itemstack.item ? itemstack.toItem().desc : ""; - dblib.center(itemname_elem); - } - } - } - - getSelectedItem() - { - return this.inventory.getSlot(this.selectedSlot); - } -}; diff --git a/engine/init.js b/engine/init.js index 72fe1d4..a34fca8 100644 --- a/engine/init.js +++ b/engine/init.js @@ -189,7 +189,7 @@ "inventory", "out_stack", "inventory_group", - "hudbar", + "hotbar", "inventory_container", "creative_inventory", "recipe", diff --git a/engine/player.js b/engine/player.js index 6b371cb..02155e2 100644 --- a/engine/player.js +++ b/engine/player.js @@ -88,12 +88,12 @@ dragonblocks.Player = class extends dragonblocks.SpawnedEntity }); this.tmp.mainInventory.addEventListener("updateStack", _ => { - if (self.tmp.hudbar) - self.tmp.hudbar.update(); + if (self.tmp.hotbar) + self.tmp.hotbar.update(); }); - // Hudbar - this.tmp.hudbar = new dragonblocks.Hudbar(this.tmp.mainInventory, 8); // The hudbar has 8 slots + // Hotbar + this.tmp.hotbar = new dragonblocks.Hotbar(this.tmp.mainInventory, 8); // The hotbar has 8 slots // Creative Inventory let creativelist = []; @@ -357,22 +357,22 @@ dragonblocks.Player = class extends dragonblocks.SpawnedEntity previousItem() { - this.tmp.hudbar.previousItem(); + this.tmp.hotbar.previousItem(); } nextItem() { - this.tmp.hudbar.nextItem(); + this.tmp.hotbar.nextItem(); } select(i) { - this.tmp.hudbar.select(i); + this.tmp.hotbar.select(i); } getWieldedItem() { - return this.tmp.hudbar.getSelectedItem(); + return this.tmp.hotbar.getSelectedItem(); } set onNextInventoryClose(func)