-
Notifications
You must be signed in to change notification settings - Fork 0
/
logic.js
101 lines (91 loc) · 3.77 KB
/
logic.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
// ========== Adjust SVG size =======================================>
let GitHubBtn = document.getElementById("GithubButton");
let GitHubBtnBox = GitHubBtn.getBBox();
GitHubBtn.setAttribute("viewBox", (GitHubBtnBox.x - 0.5).toString() + " "
+ (GitHubBtnBox.y - 0.5).toString() + " "
+ GitHubBtnBox.width.toString() + " "
+ GitHubBtnBox.height.toString());
GitHubBtn.setAttribute("width", GitHubBtnBox.width.toString());
GitHubBtn.setAttribute("height", GitHubBtnBox.height.toString());
// ========== UI logic =========================================>
// String formatting
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined'
? args[number]
: match
;
});
};
}
function addHoverListener(btn, bg, text, tile)
{
btn.addEventListener("mouseover", function(event){
if(!btn.MapSvg.Selected)
{
bg.setAttribute("fill-opacity", "0");
text.setAttribute("fill", bg.getAttribute("fill"));
text.setAttribute("font-weight", "bold");
tile.style.display = "block";
}
});
btn.addEventListener("mouseout", function(event){
if(!btn.MapSvg.Selected)
{
bg.setAttribute("fill-opacity", "1");
text.setAttribute("fill", "white");
text.setAttribute("font-weight", "normal");
tile.style.display = "none";
}
});
}
let MapWrappers = document.querySelectorAll(".MapWrapper");
MapWrappers.forEach(function(map_wrapper, i, wrappers) {
let Match = map_wrapper.getAttribute("id").match(/MapWrapper-(.*)/);
let MapName = Match[1];
let MapSvg = document.getElementById("Map-" + MapName);
let Tiles = map_wrapper.querySelectorAll(".TileWrapper");
MapSvg.Selected = null;
Tiles.forEach(function(tile, i, tiles){
let Match = tile.getAttribute("id").match(/Tile-.*-(.*)/);
let Coord = Match[1];
let SvgButton = document.getElementById(
"TileBtn-{0}-{1}".format(MapName, Coord));
SvgButton.MapSvg = MapSvg;
let SvgGroup = SvgButton.parentElement;
let SvgBg = SvgGroup.querySelector("rect.TileBG");
let SvgText = SvgGroup.querySelector("text.TileText");
addHoverListener(SvgButton, SvgBg, SvgText, tile);
SvgButton.addEventListener("click", function(event){
if(SvgButton.MapSvg.Selected == null)
{
SvgButton.MapSvg.Selected = tile;
SvgButton.MapSvg.SelectedSvgGroup = SvgGroup;
}
else if(SvgButton.MapSvg.Selected != tile)
{
SvgButton.MapSvg.Selected.style.display = "none";
tile.style.display = "block";
let SelectedSvgBg = SvgButton.MapSvg.SelectedSvgGroup
.querySelector("rect.TileBG");
let SelectedSvgText = SvgButton.MapSvg.SelectedSvgGroup
.querySelector("text.TileText");
SelectedSvgBg.setAttribute("fill-opacity", "1");
SelectedSvgText.setAttribute("fill", "white");
SelectedSvgText.setAttribute("font-weight", "normal");
SvgButton.MapSvg.Selected = tile;
SvgButton.MapSvg.SelectedSvgGroup = SvgGroup;
SvgBg.setAttribute("fill-opacity", "0");
SvgText.setAttribute("fill", SvgBg.getAttribute("fill"));
SvgText.setAttribute("font-weight", "bold");
}
else
{
SvgButton.MapSvg.Selected = null;
SvgButton.MapSvg.SelectedSvgGroup = null;
}
});
})
});