engine/gui.js

   1 /*
   2  * gui.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.gui = {};
  25
  26 {
  27         let layer = document.body.appendChild(document.createElement("div"));
  28         layer.style.opacity = 0.7;
  29         layer.style.position = "fixed";
  30         layer.style.width = "100%";
  31         layer.style.height = "100%";
  32         layer.style.top = "0px";
  33         layer.style.left = "0px";
  34         layer.style.backgroundColor = "black";
  35         layer.style.visibility = "hidden";
  36
  37         let layerShown = false;
  38
  39         dragonblocks.gui.toggleLayer = _ => {
  40                 layerShown ? dragonblocks.gui.hideLayer() : dragonblocks.gui.showLayer();
  41         };
  42
  43         dragonblocks.gui.showLayer = dragonblocks.gui.openLayer = _ => {
  44                 layerShown = true;
  45                 layer.style.visibility = "visible";
  46         };
  47
  48         dragonblocks.gui.hideLayer = dragonblocks.gui.closeLayer = _ => {
  49                 layerShown = false;
  50                 layer.style.visibility = "hidden";
  51         };
  52 }
  53
  54 dragonblocks.gui.Box = class extends EventTarget
  55 {
  56         constructor(def)
  57         {
  58                 super();
  59                 this.moveable = false;
  60                 this.closeable = true;
  61                 this.big = true;
  62                 this.layer = true;
  63                 this.scroll = true;
  64                 this.keylock = false;
  65
  66                 if (def)
  67                         dblib.copy(this, def);
  68
  69                 this.x = 0;
  70                 this.y = 0;
  71
  72                 this.dragging = false;
  73
  74                 this.display = document.body.appendChild(document.createElement("div"));
  75                 this.display.style.width = this.big ? "700px" : "500px";
  76                 this.display.style.height = this.big ? "500px" : "300px";
  77                 this.display.style.position = "fixed";
  78                 this.display.style.backgroundColor = "#7E7E7E";
  79                 this.display.style.visibility = "hidden";
  80                 dblib.center(this.display);
  81                 dblib.centerVertical(this.display);
  82
  83                 if (this.scroll)
  84                         this.display.style.overflowY = "scroll";
  85
  86                 this.moveable && this.addMoveField();
  87                 this.closeable && this.addCloseField();
  88         }
  89
  90         addMoveField()
  91         {
  92                 let moveField = this.create("div");
  93                 moveField.style.position = "absolute";
  94                 moveField.style.left = "0px";
  95                 moveField.style.top = "0px";
  96                 moveField.style.width = this.big ? "50px": "30px";
  97                 moveField.style.height = this.big ? "50px": "30px";
  98                 moveField.style.background = dragonblocks.getTexture("move.png");
  99                 moveField.style.cursor = "move";
 100
 101                 let self = this;
 102
 103                 moveField.addEventListener("mousedown", event => {
 104                         self.x = event.clientX;
 105                         self.y = event.clientY;
 106
 107                         self.dragging = true;
 108                 });
 109
 110                 addEventListener("mousemove", event => {
 111                         if (! self.dragging)
 112                                 return;
 113
 114                         let x = self.x - event.clientX;
 115                         let y = self.y - event.clientY;
 116
 117                         self.x = event.clientX;
 118                         self.y = event.clientY;
 119
 120                         self.display.style.left = self.display.offsetLeft - x + "px";
 121                         self.display.style.top = self.display.offsetTop - y + "px";
 122                 });
 123
 124                 addEventListener("mouseup", event => {
 125                         self.dragging = false;
 126                 });
 127         }
 128
 129         addCloseField()
 130         {
 131                 let closeField = this.create("div");
 132                 closeField.style.position = "absolute";
 133                 closeField.style.right = "0px";
 134                 closeField.style.top = "0px";
 135                 closeField.style.width = this.big ? "50px": "30px";
 136                 closeField.style.height = this.big ? "50px": "30px";
 137                 closeField.style.background = dragonblocks.getTexture("close.png");
 138                 closeField.style.cursor = "pointer";
 139
 140                 let self = this;
 141                 closeField.addEventListener("mousedown", _ => {
 142                         self.close();
 143                 });
 144         }
 145
 146         setContent(html)
 147         {
 148                 this.display.innerHTML = html;
 149         }
 150
 151         open()
 152         {
 153                 this.display.style.visibility = "visible";
 154
 155                 this.layer && dragonblocks.gui.openLayer();
 156                 this.keylock && dragonblocks.keyHandler.lockAll();
 157
 158                 this.dispatchEvent(new dragonblocks.gui.Box.Event("open"));
 159         }
 160
 161         close()
 162         {
 163                 this.display.style.visibility = "hidden";
 164
 165                 this.layer && dragonblocks.gui.closeLayer();
 166                 this.keylock && dragonblocks.keyHandler.unlockAll();
 167
 168                 this.dispatchEvent(new dragonblocks.gui.Box.Event("close"));
 169         }
 170
 171         add(elem)
 172         {
 173                 return this.display.appendChild(elem);
 174         }
 175
 176         create(tag)
 177         {
 178                 return this.add(document.createElement(tag));
 179         }
 180 };
 181
 182 dragonblocks.gui.Box.Event = class extends Event
 183 {
 184         constructor(type, box)
 185         {
 186                 super(type);
 187                 this.box = box;
 188         }
 189 };