-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
191 lines (180 loc) · 13.1 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
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Pokémon Warp Tracker</title>
<link rel="stylesheet" href="main.css"/>
<script src="games/_tooltips.js"></script>
<script src="games/rb.js"></script>
<script src="games/crystal.js"></script>
<script src="games/crystalg.js"></script>
<script src="games/emerald.js"></script>
<script src="games/platinum.js"></script>
<script src="games/hgss.js"></script>
<script src="games/frlg.js"></script>
<script src="games/frlg_nosevii.js"></script>
<script src="games/white2.js"></script>
<script src="games/white2ad.js"></script>
<script src="games/black2ad.js"></script>
<script src="games/white2_a.js"></script>
<script src="games/gen3crossover.js"></script>
<script src="games/crystal_fir.js"></script>
<script src="games/emerald_ex.js"></script>
<script src="code/main.js"></script>
<script src="code/render.js"></script>
<script src="code/input.js"></script>
<script src="code/config.js"></script>
<script src="code/network.js"></script>
<script src="code/automarker.js"></script>
<script src="code/tests.js"></script>
<script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>
<meta name="viewport" content="width=device-width, initial-MAP_SCALE=1">
<link rel="icon" href="images/icon.png">
<!-- Social media metadata -->
<meta property="og:title" content="Pokémon Warp Tracker"/>
<meta property="og:description" content="Tool to track Warps in Pokémon Warp Randomizer"/>
<meta property="og:image" content="https://sekii.gitlab.io/pokemon-tracker/images/thumbnail.png"/>
<meta name="twitter:card" content="summary_large_image"></meta>
</head>
<body>
<article>
<canvas id="canvas">Your browser does not support canvas element.</canvas>
<div id="config_window" class="window window_hidden">
<div class="config_content">
<span class="close" onclick="HideConfig()">×</span>
<div class="settings-row">
<button onclick="LoadFile()">Load</button>
<button onclick="SaveFile()">Save</button>
<button onclick="ResetButton()">Reset Tracker</button>
<label><input type="checkbox" id="checkbox_smooth" onclick="ChangeSmooth(checked)" >Smooth Images</label>
<label><input type="checkbox" id="checkbox_tooltips" onclick="ChangeTooltips(checked)" >Disable Tooltips</label>
<label><input type="checkbox" id="checkbox_fittoscreen" onclick="ChangeFitToScreen(checked)" >Fit to Window</label>
</div>
<div class="settings-row">
<label>Line color:</label>
<input type="color" id="line_color" onchange="ChangeLineColor(value)">
<button onclick="ResetColor()">Default color</button>
</div>
<p id="game_buttons"></p> <!-- They get created in code -->
<p id="loading_game_text">Loading game...</p>
<p id="config_networktoggle" class="config_toggle" onclick="ShowConfigNetwork()">+ Show network options (don't show on stream)</p>
<div id="config_network" class="config_hidden">
<hr>
<p class="config_toggle" onclick="HideConfigNetwork()">- Hide networking options</p>
<p>
<b> Your ID: </b><b id="network_id">---</b>
<b id="network_name"> | Username: <input type="text" id="networkinput_name" onfocusout="ChangeUsername(value)" onkeydown="PressedEnter(event)"></b>
</p>
<p id="network_connectto"><b>Connect to ID: <input type="text" id="networkinput_connect"></b>
<button onclick="ConnectButton()">Connect</button></p>
<p id="network_connections" class="config_hidden">Connected!</p>
<p id="network_warning"><i>Only one user should act as a host, all users should connect to the same ID. If someone can't connect, switch to Chrome (including the host).</i></p>
</div>
</div>
</div>
<div id="help_window" class="window window_hidden">
<div class="config_content">
<span class="close" onclick="HideHelp()">×</span>
<div id="help_v1">
<h1>Download Links</h1>
<li><u>Pokémon Red/Blue</u> available on <a href="https://archipelago.gg/tutorial/Pokemon%20Red%20and%20Blue/setup/en">Archipelago</a></li>
<li><u>Pokémon Crystal</u> available on <a href="https://github.com/iFatRain/pokemon-crystal-map-randomizer">iFatRain's GitHub</a></li>
<li><u>Pokémon Emerald</u> available on <a href="https://warprandomizer.com/">warprandomizer.com</a></li>
<li><u>Pokémon FireRed/LeafGreen</u> available on <a href="https://warprandomizer.com/">warprandomizer.com</a></li>
<li><u>Pokémon Platinum</u> available on <a href="https://warprandomizer.com/">warprandomizer.com</a></li>
<li><u>Pokémon HeartGold/SoulSilver</u> available on <a href="https://github.com/adrienntindall/hgss-map-randomizer/releases">Adrienn's GitHub</a></li>
<li><u>Pokémon White 2</u> available on <a href="https://warprandomizer.com/">warprandomizer.com</a></li>
<li><u>Pokémon White 2/Black 2</u> available on <a href="https://github.com/adrienntindall/hgss-map-randomizer/releases">Adrienn's GitHub</a></li>
<li><u>Pokémon FireRed+CrystalDust+Emerald Crossover</u> available at <a href="https://kittypboxx.github.io/GBAXG/">KittyPBoxx's GitHub</a></li>
<li><u>Pokémon Emerald Ex Speedchoice</u> available at <a href="https://kittypboxx.github.io/Emerald-Ex-Map-Rando/">KittyPBoxx's GitHub</a></li>
<h1>Controls</h1>
Warp linking:
<ul>
<li><b>Left click</b> on a warp to start linking. Then, change location, click a mark to set it or another warp to create a link. <b>Right click</b> to cancel this state.</li>
<li><b>Right click</b> on any known warp to undo and mark it as unknown (if it's a link, it will mark the other end as unknown too).</li>
</ul>
<br>
Location changing:
<ul>
<li><b>Left click</b> on the map to change current location.</li>
<li><b>Left click twice</b> on a linked warp to change to the linked location.</li>
</ul>
<br>
Progress tracking:
<ul>
<li><b>Right click</b> on any highlighted mark to cycle through all the maps with the mark in it.</li>
<li><b>Left click</b> on the progress tracker to mark an objective as completed.</li>
</ul>
<br>
Other:
<ul>
<li><b>Left click</b> on an empty space in an overcrowded location's map to check its layout.</li>
<li><b>Left click</b> the remaining warps number to highlight all warps & locations left to check.</li>
</ul>
<br>
The map is color coded (i.e. Emerald has <b style="color:#ff3910;">cities</b>, <b style="color:#39ad08;">routes</b> and <b style="color:#6638ef;">dungeons</b>)
<br><u>The progress tracker can be used to mark warps too</u>.
<h1>Credits</h1>
<li><u>Pokémon Red/Blue</u>: made by Archipelago</li>
<li><u>Pokémon Crystal</u>: user-friendly version created by <a href="https://github.com/iFatRain">iFatRain</a> (and more, check download link to get the full list). A more chaotic version is currently in development by G-Meister.</li>
<li><u>Pokémon Emerald</u>: commissioned by <a href="https://www.twitch.tv/PointCrow">PointCrow</a> and created by <a href="https://www.reddit.com/r/pokemon/comments/qel5h4/i_created_a_mod_that_randomizes_the_entire_map_of/">XLuma, Turtleisaac, and AtSign</a>. Tracker uses assets and information from <a href="https://github.com/SaltContainer/PokemonEmeraldMapRandoTracker/releases">SaltContainer's tracker</a>.</li>
<li><u>Pokémon FireRed/LeafGreen</u>: commissioned by <a href="https://www.twitch.tv/PointCrow">PointCrow</a> and created by <a href="https://www.reddit.com/r/pokemon/comments/qel5h4/i_created_a_mod_that_randomizes_the_entire_map_of/">XLuma, Turtleisaac, and AtSign</a>. Tracker created by <a href="https://saltcontainer.github.io/">SaltContainer</a>.</li>
<li><u>Pokémon Platinum</u>: commissioned by <a href="https://www.twitch.tv/PointCrow">PointCrow</a> and created by <a href="https://www.reddit.com/r/pokemon/comments/qel5h4/i_created_a_mod_that_randomizes_the_entire_map_of/">XLuma, Turtleisaac, and AtSign</a>. Tracker uses assets and information from <a href="https://github.com/SaltContainer/PokemonEmeraldMapRandoTracker/releases">SaltContainer's tracker</a>.</li>
<li><u>Pokémon HeartGold/SoulSilver</u>: created by <a href="https://github.com/adrienntindall">Adrienn Tindall</a>. Tracker created by <a href="https://twitter.com/RealSeb95">Seb Hammes</a>.</li>
<li><u>Pokémon White 2</u>: commissioned by <a href="https://www.twitch.tv/PointCrow">PointCrow</a> and created by <a href="https://www.reddit.com/r/pokemon/comments/qel5h4/i_created_a_mod_that_randomizes_the_entire_map_of/">XLuma, Turtleisaac, and AtSign</a>. Tracker created by <a href="https://twitter.com/RealSeb95">Seb Hammes</a>.</li>
<li><u>Pokémon Black2/White2</u>: created by <a href="https://github.com/adrienntindall">Adrienn Tindall</a>. Two different trackers created by <a href="https://twitter.com/KrakenJaken">KrakenTheJaken</a> & <a href="https://twitter.com/RealSeb95">Seb Hammes</a>.</li>
<li><u>Pokémon FireRed+CrystalDust+Emerald Crossover</u>: created by <a href="https://github.com/kittyPBoxx">KittyPBoxx</a>. Tracker created by <a href="https://github.com/kittyPBoxx">KittyPBoxx</a>.</li>
<li><u>Pokémon Emerald Ex Speedchoice</u>: created by <a href="https://github.com/kittyPBoxx">KittyPBoxx</a>. Tracker created by <a href="https://github.com/kittyPBoxx">KittyPBoxx</a>.</li>
<p>Additional thanks to:</p>
<li><a href="https://gitlab.com/Eijebong">Eijebong</a> for helping me with networking issues.</li>
<li><a href="https://gitlab.com/Geshode">Geshode</a> for adding features.</li>
<h1 id="changelog_header" class="changelog_header">Changelog</h1>
</div>
<div id="help_v2">
<h1>Version 2</h1>
<ul>
<li>Implemented <u><b>modifiers</b></u>: add color to links and marks to keep track of non-essential important locations (i.e. Pokémon Centers).</li>
<p class="credit_description">Pokémon FireRed/LeafGreen & Pokémon White 2 Randomizers are available to download in PointCrow's Discord!</p>
</ul>
</div>
<div id="help_v3">
<h1>Version 3</h1>
<ul>
<li><u><b>Right click and hold</b></u> on an empty space to hide the warps to check the location's layout.</li>
<li><u><b>Added corridors (grey unknown warps)</b></u>. They work the same way as normal unknown warps, but they are in a separate category so it's easier to cycle through unchecked warps.</li>
<li>Added a bunch of corridors to the <u><b>Crystal (iFatRain's) tracker for Warp & Item randomizer games</b></u>. <i>Cycle through the new grey unknown mark to check all new locations. If I missed any let me know.</i></li>
</ul>
</div>
<div id="help_v4">
<h1>Version 4</h1>
<ul>
<li>Hover the mouse over icons to get a tooltips with descriptions. Toggle off it in the settings.</li>
<li>Left click the remaining checks number to highlight all locations with unknown warps.</li>
<li>Modifiers no longer get removed when creating a new link over them.</li>
<li>Showing remaining unknown warps. Clicking on it will highlight them on the location and the map.</li>
<li>Improved rendering so Chrome users can use the tracker with Hardware Acceleration turned off.</li>
</ul>
</div>
<div id="help_v5">
<h1>Version 5</h1>
<ul>
<li>Fit to Window option added.</li>
<li>New map by KittyPBoxx: FireRed + CrystalDust + Emerald Crossover Map Randomizer.</li>
</ul>
</div>
<hr>
<p>
<a class="social-media" href="https://twitter.com/srcSantana"> <img class="social-media-image" src="images/_social-media/twitter-32x32.png"></a>
<a class="social-media" href="https://gitlab.com/Sekii/pokemon-tracker"><img class="social-media-image" src="images/_social-media/gitlab-32x32.png"></a>
<div>
<div>Project is <a href="https://github.com/zuils/pokemon-tracker">open source</a>, this is a fork of Sekii's <a href="https://gitlab.com/Sekii/pokemon-tracker">version</a><div>
</div>
</p>
</div>
</div>
</article>
</body>
<script type="text/javascript">init();</script>
</html>