]> git.lizzy.rs Git - dragonblocks.git/blob - engine/skin.js
Make dragonblocks.getTexture() return value contain background-size: cover
[dragonblocks.git] / engine / skin.js
1 /*
2  * skin.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.registeredSkins = {};
25
26 dragonblocks.registerSkin = def => {
27         if (! def || ! def.name || ! def.texture)
28                 dragonblocks.error("Cannot register skin");
29
30         dragonblocks.registeredSkins[def.name] = def;
31 };
32
33 {
34         let gui = new dragonblocks.gui.Box({keylock: true});
35
36         let headline = gui.create("h1");
37         headline.innerHTML = "Skins";
38         headline.align = "center";
39
40         let status = gui.create("span");
41         status.style.position = "absolute";
42         status.style.top = "5px";
43         status.style.left = "5px";
44
45         let columns = parseInt(parseInt(gui.display.style.width) / (dragonblocks.settings.mapDisplay.scale * 1.5));
46
47         let container = gui.create("div");
48         container.style.width = parseInt(columns * dragonblocks.settings.mapDisplay.scale * 1.5) + "px";
49         container.style.position = "absolute";
50         container.style.top = "80px";
51         dblib.center(container);
52
53         dragonblocks.registerOnStarted(_ => {
54                 status.innerHTML = dragonblocks.player.skin;
55
56                 let i = 0;
57
58                 for (let skin in dragonblocks.registeredSkins) {
59                         let x = i % columns;
60                         let y = (i - x) / columns;
61
62                         i++;
63
64                         let def = dragonblocks.registeredSkins[skin];
65
66                         let skinDisplay = container.appendChild(document.createElement("div"));
67                         skinDisplay.style.position = "absolute";
68                         skinDisplay.style.left = parseInt(x * dragonblocks.settings.map.scale * 1.5) + "px";
69                         skinDisplay.style.top = parseInt(y * dragonblocks.settings.map.scale * 2 * 1.5) + "px";
70                         skinDisplay.style.width = parseInt(dragonblocks.settings.map.scale) + "px";
71                         skinDisplay.style.height = parseInt(dragonblocks.settings.map.scale * 2) + "px";
72                         skinDisplay.style.background = dragonblocks.getTexture(def.texture);
73                         skinDisplay.title = def.name + (def.desc ? "\n" + def.desc : "");
74
75                         if (dragonblocks.player.skin == def.name)
76                                 skinDisplay.style.boxShadow = "0 0 0 3px #BEBEBE";
77
78                         skinDisplay.addEventListener("click", event => {
79                                 event.srcElement.style.boxShadow = "0 0 0 3px #BEBEBE";
80
81                                 dragonblocks.player.skin = def.name;
82                                 status.innerHTML = dragonblocks.player.skin;
83
84                                 container.dispatchEvent(new Event("update"));
85                         });
86
87                         container.addEventListener("update", event => {
88                                 if (dragonblocks.player.skin != def.name)
89                                         skinDisplay.style.boxShadow = "none";
90                         });
91
92                         skinDisplay.addEventListener("mouseover", event => {
93                                 if (dragonblocks.player.skin != def.name)
94                                         event.srcElement.style.boxShadow = "0 0 0 1px black";
95                         });
96
97                         skinDisplay.addEventListener("mouseleave", event => {
98                                 if (dragonblocks.player.skin != def.name)
99                                         event.srcElement.style.boxShadow = "none";
100                         });
101                 }
102         });
103
104         dragonblocks.menu.addButton("Change Skin", _ => {
105                 gui.open();
106         });
107 }