This repository has been archived by the owner on Jul 27, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (189 loc) · 7.75 KB
/
index.html
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<html>
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" lang="en" />
<meta content="EMC Mapmodes" property="og:title" />
<meta content="Visualize different statistics on EMC's map!" property="og:description" />
<meta content="#04aa6d" data-react-helmet="true" name="theme-color" />
<meta property="og:type" content="website" />
<meta name="twitter:title" content="EMC Mapmodes" />
<meta name="twitter:description" content="Visualize different statistics on EMC's map!" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/popup.css" />
<link rel="stylesheet" href="css/w3.css" />
<script src="js/leaflet.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<title>EMC Mapmodes</title>
</head>
<body>
<div id="loading"></div>
<div class="progress">
<span style="font-size: 200%" id="loadingtip">Please wait...</span>
<div id="loadingText">Initializing<br /><br /></div>
<div id="barContainer" width="200px">
<div class="w3-light-grey" style="width: 200px; height: 18px">
<div class="w3-container w3-indigo" style="width: 0%; height: 100%"></div>
</div>
</div>
</div>
<div id="townless">
<span style="font-size: 180%">Townless Players</span>
<p>
This tool lists townless players so you can recruit them.<br /><br />
Click Load to begin, or refresh.
</p>
<div id="townlessCtn"></div>
<span onclick="hideTownless()" id="hideBtn" style="left: 30%">Close</span>
<span
onclick="loadTownless()"
id="hideBtn"
class="townlessBtn"
style="left: 50%; background-color: #04aa6d"
>Load</span
>
</div>
<div id="tools">
<span style="font-size: 180%">Tools</span>
<p>There are several tools available! Click their name to open them!</p>
<span onclick="showTownless()" style="color: #3344ee">- Townless</span>
Find online townless players.<br />
<span onclick="enableDist()" style="color: #3344ee">- Distance</span>
Measure distance between two points.<br />
<!--<span onclick="enableCircle()" style="color: #3344ee">- Range</span>
Display a circle of given radius and center.<br />-->
<span onclick="hideTools()" id="hideBtn">Close</span>
</div>
<div id="info">
<span style="font-size: 200%">Information</span>
<p>
On this website you can visualize different statistics directly onto EarthMC's map, by
switching map modes with the buttons on the bottom of the page.
</p>
Current modes available:<br />
<u>- Default:</u> The regular map, but better looking.<br />
<u>- Colorful:</u> Every nation has its own color.<br />
<u>- Population:</u> Colors towns depending on their amount of residents.<br />
<u>- Claims:</u> Colors towns depending on their amount of chunks claimed.<br />
<u>- PvP status:</u> Shows which towns have PvP enabled.<br />
<u>- Density:</u> Colors towns depending on their population density.
<span onclick="howdense()" style="color: #3344ee">See how it is calculated</span><br />
<u>- Nation Bonus:</u> Colors nations depending on their nation bonus.<br />
<u>- Nation Population:</u> Colors nations depending on their total population.<br />
<u>- Tools:</u> Various tools for the map.<br />
<span style="font-size: 90%"
><a href="https://github.com/MeijiRestored/emc-mapmodes" target="_blank">Source code on Github</a
><br />Version 2.6.2 • Jan. 2024 • </span
>Made in
<img
src="https://raw.githubusercontent.com/MeijiRestored/emc-mapmodes/main/assets/be.svg"
width="20px" />
<span onclick="hideInfo()" id="hideBtn">Close</span>
</div>
<div id="densityInfo">
<span style="font-size: 150%">Density Calculation</span>
<p>
The density for each town is calculated depending on three factors: the amount of chunks
claimed, the amount of residents and the claim limit.
</p>
<p>The equation used:</p>
<img
src="https://chart.apis.google.com/chart?cht=tx&chl=(residents%20*%2012%20%2B%20nationbonus)%20-%20claims" />
<p>
This returns the difference between the claim limit of the town and it's claimed area, which
can range from -932
<span style="font-size: 80%">(1 resident, no nation bonus and 940 claimed)</span>
and +939
<span style="font-size: 80%">(max residents, max nation bonus and 1 claimed)</span>.
</p>
<p>
This system considers a town that has a lot of chunks claimed but then let its residents
decay to be lowly dense, while a town that strifes to keeping a good amount of residents to
not end below claim limit, highly dense.
</p>
<span onclick="nodense()" id="hideBtn">Close</span>
</div>
<div id="legend" title="Legend"></div>
<div id="hint" title="Hint"></div>
<ul>
<li class="active" onclick="showInfo()">Info</li>
<li onclick="loadmode('deft')">Default</li>
<li onclick="loadmode('clf')">Colorful</li>
<li onclick="loadmode('popu')">Population</li>
<li onclick="loadmode('claim')">Claims</li>
<li onclick="loadmode('pvp')">PvP status</li>
<li onclick="loadmode('den')">Density</li>
<li onclick="loadmode('nb')">Nation Bonus</li>
<li onclick="loadmode('ttpop')">Nation Pop.</li>
<li class="tool" onclick="showTools()">Tools</li>
</ul>
<div id="map"></div>
<script>
var emcmap = L.map("map", {
crs: L.CRS.Simple,
maxBounds: [
[-16666, -33333],
[16510, 33083],
],
}).setView([0, 0], -3);
// EMC background tiles
L.tileLayer(
"https://earthmc.net/map/aurora/standalone/MySQL_tiles.php?tile=earth/flat/{x}_{y6}/zzzzz_{x1}_{y1}.webp",
{
maxZoom: -4,
minZoom: -4,
tileSize: 128,
}
).addTo(emcmap);
L.tileLayer(
"https://earthmc.net/map/aurora/standalone/MySQL_tiles.php?tile=earth/flat/{xb2}_{yb2}/zzzz_{x2}_{y2}.webp",
{
maxZoom: -3,
minZoom: -3,
tileSize: 128,
}
).addTo(emcmap);
L.tileLayer(
"https://earthmc.net/map/aurora/standalone/MySQL_tiles.php?tile=earth/flat/{xb3}_{yb3}/zzz_{x3}_{y3}.webp",
{
maxZoom: -2,
minZoom: -2,
tileSize: 128,
}
).addTo(emcmap);
L.tileLayer(
"https://earthmc.net/map/aurora/standalone/MySQL_tiles.php?tile=earth/flat/{xb4}_{yb4}/zz_{x4}_{y4}.webp",
{
maxZoom: -1,
minZoom: -1,
tileSize: 128,
}
).addTo(emcmap);
L.tileLayer(
"https://earthmc.net/map/aurora/standalone/MySQL_tiles.php?tile=earth/flat/{xb5}_{yb5}/z_{x5}_{y5}.webp",
{
maxZoom: 0,
minZoom: 0,
tileSize: 128,
}
).addTo(emcmap);
L.tileLayer(
"https://earthmc.net/map/aurora/standalone/MySQL_tiles.php?tile=earth/flat/{xb6}_{yb6}/{x}_{y6}.webp",
{
maxZoom: 2,
maxNativeZoom: 1,
minZoom: 1,
tileSize: 128,
}
).addTo(emcmap);
</script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="assets/nation-colors.js"></script>
</body>
</html>