Rename hudbar to hotbar; Use DOM references for hotbar

diff --git a/engine/hotbar.js b/engine/hotbar.js
new file mode 100644 (file)
index 0000000..755e03a
--- /dev/null
+++ b/engine/hotbar.js
@@ -0,0 +1,125 @@
+/*
+ * hotbar.js
+ *
+ * Copyright 2020 Elias Fleckenstein <eliasfleckenstein@web.de>
+ *
+ * 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 (file)
index 3855fe0..0000000
--- a/engine/hudbar.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/*
- * hudbar.js
- *
- * Copyright 2020 Elias Fleckenstein <eliasfleckenstein@web.de>
- *
- * 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 72fe1d43edaddb00e3f9fd43c7330c91a457fe82..a34fca87f2166c49cacff2d52f5dde1e8bbf467e 100644 (file)
--- 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 6b371cbda63500b4da288b4305f42d84a5e9e280..02155e283de685f9bb71837127bc126bab01ffdb 100644 (file)
--- 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)