-
Notifications
You must be signed in to change notification settings - Fork 3
/
atlas_map.html
216 lines (202 loc) · 12.1 KB
/
atlas_map.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
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="poeatlas,poe,path of exile,guides,tools,atlas,atlas of worlds,map,tier,normal,white,yellow,rare,magic,shaper,orb,upgrade,shape,guardians,sextant,mods,progress">
<meta name="Description" content="A tool for navigating Path of Exile's Atlas of Worlds from the web!">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/core_style.css">
<link rel="stylesheet" type="text/css" href="css/map_style.css">
<script src="js/multi-palette.min.js"></script>
<meta name="theme-color" content="var(--color-base)"/>
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
<title>PoE Atlas | Path of Exile Interactive Atlas</title>
</head>
<body>
<div id="page_container">
<header>
<div id="navbar" class="shadow">
<div id="title"><h4>PoE Atlas by <a href="https://github.com/John-Paul-R">JP</a> - Current Patch: 3.14</h4></div>
<div class="end flex row">
<a href="https://ko-fi.com/johnpaul" class="logo button tooltip" target="_blank" rel="noopener noreferrer" data-tooltip="Support me on ko-fi">
<img src="https://static.jpcode.dev/img/icon/ko-fi.svg" alt="ko-fi" class="invert icon_after">
</a>
<a href="https://patreon.com/jpcode" class="logo button tooltip" target="_blank" rel="noopener noreferrer" data-tooltip="Support me on Patreon">
<img src="https://static.jpcode.dev/img/icon/patreon.svg" alt="Patreon" class="invert icon_after">
</a>
<a href="https://github.com/John-Paul-R/PoE-Atlas-Website" class="logo button tooltip" target="_blank" rel="noopener noreferrer" data-tooltip="View source on GitHub">
<img src="https://static.jpcode.dev/img/icon/github.svg" alt="GitHub" class="invert icon_after">
</a>
<a href="https://discord.jpcode.dev" class="logo button tooltip" target="_blank" rel="noopener noreferrer" data-tooltip="Contact me on Discord">
<img src="https://static.jpcode.dev/img/icon/discord.svg" alt="Discord" class="invert icon_after">
</a>
<div id="help_container" class="dropdown_container">
<button id="help_button" class="dropdown_button tooltip" data-tooltip="Site help / Tutorial">
<i class="material-icons", style="display: block;">help</i>
</button>
<div id="help_content" class="dropdown content hidden">
<h3>Help</h3>
<hr>
<b>
Hi there! Welcome to PoE Atlas.
</b>
<p>
You can navigate this site similarly to the Atlas within PoE.
(Zoom, pan, hover over maps, etc.)
</p>
<p>
However, this site also has some unique features that the
in-game atlas does not have:
</p>
<p>
<b>Improved Search: </b>
In addition to searching for specific maps, you can also
search by map tier.
<br>
Prefix a search with <b>b</b> to search for maps by their base
(natural, or lowest) tier. (Useful for Horizon orbs!) (ex: 'b16')
<br>
Prefix a search with <b>t</b> to search for any maps that are
currently visible on the screen. (ex: 't12')
<br>
You can also view a list of all the maps the match your query by
clicking the <b>"Show Results"</b> button on the search bar.
</p>
<p>
<b>Clickable Maps: </b>
You can click any map node to bring up an information pane
which shows the tiers at which that map can drop, as well as
a list of all the map nodes it connects to at the region's
highest watchstone level.
</p>
<hr>
<b>Support me Financially</b>
<p>
If you find this site helpful and wish to support me
financially, you can do so via
<a href="https://patreon.com/jpcode">Patreon</a> or
<a href="https://ko-fi.com/johnpaul">KoFi</a>!
</p>
<b>Report a Bug</b>
<p>
Find a bug? You can report it at the
<a href="https://github.com/John-Paul-R/PoE-Atlas-Website/issues">
issue tracker</a>, so that I know to fix it!
</p>
<b>Contribute Code</b>
<p>
Want to make a code contribution to the project?
You can do so on the project's
<a href="https://github.com/John-Paul-R/PoE-Atlas-Website">
GitHub page</a>.
</p>
</div>
</div>
<button class="dropdown_button fl swap_palette"><p>Theme</p><i class="material-icons">style</i></button>
<div id="options_container" class="dropdown_container">
<button id="options_button" class='fl dropdown'><p>Options</p><i class="material-icons">tune</i></button>
<div id="options_content" class="dropdown options content hidden"></div>
</div>
</div>
</div>
</header>
<div id="content_main" class="filled">
<div id="widget_sidebar">
<div id="w_header">
<div class="w_head">
<h2>Widgets</h2>
</div>
<hr>
</div>
<div id="widget_list"></div>
</div>
<button id="w_sidebar_showhide"><i class="material-icons">chevron_left</i></button>
<div id="atlas_of_worlds">
<div class="overlay top">
<div class="flex row aligncenter justifycenter">
<div class="searchbar filled">
<!-- display option show all -->
<i class="material-icons first"><label for="search_field">search</label></i>
<input type="text" id="search_field" class="searchField" placeholder="Search for a map or tier." tabindex="0" autofocus>
<button id="show_results_btn">Show Results</button>
</div>
</div>
</div>
<div id="search_results" class="overlay left flex col filled hidden">
<div id="node_head" class="head flex row">
<h3>Search Results</h3>
<button id="search_exit" class="overlay_exit end">×</button>
</div>
<hr>
<p><span class="bold">Query: </span><span id="search_query_text"></span></p>
<hr>
<ol id="search_results_list"></ol>
</div>
<!-- <div class="overlay right flex col"> -->
<div id="node_info" class="overlay flex col filled hidden">
<div id="node_head" class="head flex row">
<h2 id="node_name">Node Name</h2>
<button id="node_exit" class="overlay_exit end">×</button>
</div>
<hr>
<div id="node_body" class="flex col">
<div id="links" class="flex row justifycenter spacechildh">
<a id="node_poedb" class="button push_button" target="_blank" rel="noopener noreferrer">PoEDB</a>
<a id="node_poewiki"class="button push_button" target="_blank" rel="noopener noreferrer">Wiki</a>
</div>
<hr>
<h3 id="node_region">Region</h3>
<img id="node_image" src="" alt="Image of selected map node">
<h3>Tiers</h3>
<table id="node_tiers_list" class="nobullet inline">
<tbody><tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr></tbody>
</table>
<h3>Connections</h3>
<ul id="node_connections_list" class="nobullet"></ul>
<!-- <h3>Pantheon</h3>
<p id="node_pantheon_desc">Lorem Ipsum</p> -->
</div>
</div>
<!-- </div> -->
<div class="overlay bottom"></div>
</div>
</div>
<div id="iframe_1_container_outer" class="frame_container_outer hidden">
<div id="iframe_1_container" class="frame_container">
<iframe id="iframe_1" name="iframe_1" src="about:blank" title="iframe - terms & support"></iframe>
<button id="iframe_1_exit" class="overlay_exit end">×</button>
</div>
</div>
<script src="js/iframe_controller.js"></script>
<footer>
<div><p class='small text aligncenter'>
© 2020 <a href="https://github.com/John-Paul-R" target="_blank" rel="noopener"> John Paul R.</a> -
<a href="terms.html" target="iframe_1" onclick="window.iframe.show()">Terms</a> -
<a href="support.html" target="iframe_1" onclick="window.iframe.show()">Support</a>
</p></div>
</footer>
</div>
<div id="eof_scripts">
<script src="js/util.js" type="module"></script>
<!-- todo: Warn user if using canvas instead of webgl. Webgl is faster/smoother. -->
<script id="PIXI" src="pixi/pixi-legacy.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/pixi-filters.js"></script> -->
<script defer src="pixi/filter-kawase-blur.js"></script>
<script defer src="pixi/filter-drop-shadow.js"></script>
<script src="pixi/pixi-layers.js"></script>
<script src="js/pixi_atlas_of_worlds.js" type="module"></script>
<script src='js/graphics_zoom_pan.js' type="module"></script>
<script src="js/fuzzysort.js"></script>
<script src="js/atlas_search.js" type="module"></script>
<script src='js/widget.js' type="module"></script>
<!-- <script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> -->
<script defer src="js/gsap.min.js"></script>
<script src='js/searchbar_focus.js' type="module"></script>
</div>
</body>
</html>