engine/hudbar.js

   1 /*
   2  * hudbar.js
   3  *
   4  * Copyright 2020 Elias Fleckenstein <eliasfleckenstein@web.de>
   5  *
   6  * This program is free software; you can redistribute it and/or modify
   7  * it under the terms of the GNU General Public License as published by
   8  * the Free Software Foundation; either version 2 of the License, or
   9  * (at your option) any later version.
  10  *
  11  * This program is distributed in the hope that it will be useful,
  12  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  14  * GNU General Public License for more details.
  15  *
  16  * You should have received a copy of the GNU General Public License
  17  * along with this program; if not, write to the Free Software
  18  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  19  * MA 02110-1301, USA.
  20  *
  21  *
  22  */
  23
  24 dragonblocks.Hudbar = class
  25 {
  26         constructor(inventory, slots)
  27         {
  28                 this.id = dragonblocks.getToken();
  29
  30                 this.inventory = inventory;
  31                 this.slots = slots;
  32
  33                 this.selectedSlot = 0;
  34
  35                 let display = document.body.insertBefore(document.createElement("div"), document.getElementById("dragonblocks.map").nextSibling);
  36                 display.id = "dragonblocks.hudbar[" + this.id + "]";
  37                 display.style.position = "fixed";
  38                 display.style.bottom = "5px";
  39                 display.style.height = "60px";
  40                 display.style.width = "445px";
  41
  42                 dblib.center(display);
  43
  44                 for(let i = 0; i < this.slots; i++){
  45                         let slotDisplay = display.appendChild(document.createElement("div"));
  46                         slotDisplay.id = "dragonblocks.hudbar[" + this.id + "].slot[" + i + "]";
  47                         slotDisplay.style.position = "absolute";
  48                         slotDisplay.style.top = "3px";
  49                         slotDisplay.style.left = i * 53 + "px";
  50                         slotDisplay.style.width = "50px";
  51                         slotDisplay.style.height = "50px";
  52                         slotDisplay.style.backgroundColor = "black";
  53                         slotDisplay.style.boxShadow = "0 0 0 3px #C5C5C5";
  54
  55                         let slotCountDisplay = slotDisplay.appendChild(document.createElement("span"));
  56                         slotCountDisplay.id = slotDisplay.id + ".count";
  57                         slotCountDisplay.style.position = "absolute";
  58                         slotCountDisplay.style.right = "5px";
  59                         slotCountDisplay.style.bottom = "5px";
  60                         slotCountDisplay.style.color = "white";
  61                 }
  62
  63                 let selectorDisplay = display.appendChild(document.createElement("div"));
  64                 selectorDisplay.id = "dragonblocks.hudbar[" + this.id + "].selector";
  65                 selectorDisplay.style.position = "absolute";
  66                 selectorDisplay.style.top = "3px";
  67                 selectorDisplay.style.width = "50px";
  68                 selectorDisplay.style.height = "50px";
  69                 selectorDisplay.style.boxShadow = "0 0 0 5px #999999";
  70
  71                 let itemnameDisplay = display.appendChild(document.createElement("span"));
  72                 itemnameDisplay.id = "dragonblocks.hudbar[" + this.id + "].itemname";
  73                 itemnameDisplay.style.position = "absolute";
  74                 itemnameDisplay.style.bottom = "60px";
  75                 itemnameDisplay.style.color = "white";
  76                 itemnameDisplay.style.fontSize = "20px";
  77
  78                 this.update();
  79         }
  80
  81         nextItem()
  82         {
  83                 if (++this.selectedSlot == this.slots)
  84                         this.selectedSlot = 0;
  85
  86                 this.update();
  87         }
  88
  89         previousItem()
  90         {
  91                 if (--this.selectedSlot == -1)
  92                         this.selectedSlot = this.slots - 1;
  93                 this.update();
  94         }
  95
  96         select(i)
  97         {
  98                 this.selectedSlot = i;
  99                 this.update();
 100         }
 101
 102         update()
 103         {
 104                 let display = document.getElementById("dragonblocks.hudbar[" + this.id + "]");
 105
 106                 if (! display)
 107                         return;
 108
 109                 for (let i = 0; i < this.slots; i++) {
 110                         let itemstack = this.inventory.getSlot(i);
 111
 112                         let slotDisplay = document.getElementById("dragonblocks.hudbar[" + this.id + "].slot[" + i + "]");
 113                         slotDisplay.style.background = itemstack.item ? dragonblocks.getTexture(itemstack.toItem().texture) : "black";
 114                         slotDisplay.style.backgroundSize = "cover";
 115                         slotDisplay.style.opacity = itemstack.item ? 1 : 0.3;
 116
 117                         document.getElementById(slotDisplay.id + ".count").innerHTML = (itemstack.count <= 1) ? "" : itemstack.count;
 118
 119                         if (i == this.selectedSlot) {
 120                                 document.getElementById("dragonblocks.hudbar[" + this.id + "].selector").style.left = slotDisplay.style.left;
 121
 122                                 let itemname_elem = document.getElementById("dragonblocks.hudbar[" + this.id + "].itemname");
 123                                 itemname_elem.innerHTML = itemstack.item ? itemstack.toItem().desc : "";
 124                                 dblib.center(itemname_elem);
 125                         }
 126                 }
 127         }
 128
 129         getSelectedItem()
 130         {
 131                 return this.inventory.getSlot(this.selectedSlot);
 132         }
 133 };