-
Notifications
You must be signed in to change notification settings - Fork 1
/
app.html
482 lines (481 loc) · 18.9 KB
/
app.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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sons Of The Forest Map</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap"
rel="stylesheet"
/>
<style>
@import url("/style.css");
@import url("leaflet/dist/leaflet.css");
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
<symbol id="window-control_close" viewBox="0 0 30 30">
<line
x1="19.5"
y1="10.5"
x2="10.5"
y2="19.5"
fill="none"
stroke="currentcolor"
stroke-linecap="round"
/>
<line
x1="10.5"
y1="10.5"
x2="19.5"
y2="19.5"
fill="none"
stroke="currentcolor"
stroke-linecap="round"
/>
</symbol>
<symbol id="window-control_maximize" viewBox="0 0 30 30">
<rect
x="10.5"
y="10.5"
width="9"
height="9"
fill="none"
stroke="currentcolor"
/>
</symbol>
<symbol id="window-control_restore" viewBox="0 0 30 30">
<polyline
points="13.5 12 13.5 9.5 20.5 9.5 20.5 16.5 18 16.5"
fill="none"
stroke="currentcolor"
/>
<rect
x="9.5"
y="13.5"
width="7"
height="7"
fill="none"
stroke="currentcolor"
/>
</symbol>
<symbol id="window-control_minimize" viewBox="0 0 30 30">
<line
x1="10"
y1="19.5"
x2="20"
y2="19.5"
fill="none"
stroke="currentcolor"
/>
</symbol>
<symbol id="window-control_discord" viewBox="0 0 30 30">
<path
d="M12.1364 14.3253C11.2364 14.3253 10.5818 15.0753 10.5818 15.9002C10.5818 16.8002 11.3182 17.4752 12.1364 17.4752C13.0364 17.4752 13.6909 16.7252 13.6909 15.9002C13.6909 15.0753 13.0364 14.3253 12.1364 14.3253ZM17.7818 14.3253C16.8818 14.3253 16.2273 15.0753 16.2273 15.9002C16.2273 16.8002 16.9636 17.4752 17.7818 17.4752C18.6818 17.4752 19.3364 16.7252 19.3364 15.9002C19.3364 15.0753 18.6 14.3253 17.7818 14.3253ZM19.2545 21C19.2545 21 18.6818 20.4 18.2727 19.8751C20.3182 19.3501 21.0545 18.1501 21.0545 18.1501C20.4 18.5251 19.8273 18.8251 19.2545 18.9751C18.5182 19.2751 17.7818 19.5001 17.0455 19.5751C15.5727 19.8001 14.1818 19.7251 13.0364 19.5751C12.1364 19.4251 11.4 19.2001 10.7455 18.9751C10.4182 18.8251 10.0091 18.6751 9.6 18.5251C9.51818 18.5251 9.51818 18.4501 9.43636 18.4501C9.43636 18.4501 9.35455 18.4501 9.35455 18.3751C9.10909 18.2251 8.94545 18.1501 8.94545 18.1501C8.94545 18.1501 9.68182 19.2751 11.6455 19.8001C11.2364 20.325 10.6636 21 10.6636 21C7.30909 20.925 6 18.8251 6 18.8251C6 14.2503 8.20909 10.5005 8.20909 10.5005C10.4182 8.92557 12.5455 9.00057 12.5455 9.00057L12.7091 9.15056C9.92727 9.90052 8.61818 11.0255 8.61818 11.0255C8.61818 11.0255 8.94545 10.8755 9.51818 10.5755C11.2364 9.97552 12.5455 9.75053 13.0364 9.75053C13.1182 9.75053 13.2 9.75053 13.2818 9.75053C14.1818 9.60054 15.2455 9.60054 16.3909 9.75053C17.8636 9.90052 19.4182 10.2755 21.0545 11.1005C21.0545 11.1005 19.8273 10.0505 17.2091 9.30055L17.4545 9.00057C17.4545 9.00057 19.5818 8.92557 21.7909 10.5005C21.7909 10.5005 24 14.2503 24 18.8251C24 18.8251 22.6909 20.925 19.2545 21Z"
fill="currentcolor"
/>
</symbol>
<symbol id="icon-menu" viewBox="0 0 24 24">
<path
d="M19 16a1 1 0 01.117 1.993L19 18H5a1 1 0 01-.117-1.993L5 16h14zm0-5a1 1 0 01.117 1.993L19 13H5a1 1 0 01-.117-1.993L5 11h14zm0-5a1 1 0 01.117 1.993L19 8H5a1 1 0 01-.117-1.993L5 6h14z"
fill="currentcolor"
fill-rule="evenodd"
></path>
</symbol>
<symbol
id="icon-close"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</symbol>
<symbol
id="icon-search"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="10" cy="10" r="7"></circle>
<line x1="21" y1="21" x2="15" y2="15"></line>
</symbol>
</svg>
<header class="app-header">
<h1 class="title">Sons Of The Forest Map</h1>
<a
href="https://www.th.gl/apps/Sons%20Of%20The%20Forest%20Map/release-notes"
target="_blank"
class="version"
></a>
<div class="window-controls-group">
<a
href="https://th.gl/discord"
target="_blank"
class="icon window-control window-control-social discord"
>
<svg>
<use xlink:href="#window-control_discord" />
</svg>
</a>
<button class="icon window-control" id="minimize">
<svg>
<use xlink:href="#window-control_minimize" />
</svg>
</button>
<button class="icon toggle-icons window-control" id="maximize">
<svg>
<use xlink:href="#window-control_maximize" />
</svg>
<svg>
<use xlink:href="#window-control_restore" />
</svg>
</button>
<button class="icon window-control window-control-close" id="close">
<svg>
<use xlink:href="#window-control_close" />
</svg>
</button>
</div>
</header>
<div class="layout">
<main class="main">
<div class="map"></div>
</main>
<button class="menu">
<svg width="1.5em" height="1.5em">
<use xlink:href="#icon-menu" />
</svg>
</button>
<aside class="aside">
<div class="aside-headline">
<label class="search">
<svg>
<use xlink:href="#icon-search" />
</svg>
<input type="text" placeholder="Search" />
<div class="search-results"></div>
</label>
<div class="locale-selector"></div>
</div>
<button class="menu" aria-controls="menu" aria-label="Close Menu">
<svg width="1.5em" height="1.5em">
<use xlink:href="#icon-close" />
</svg>
</button>
<div class="stack">
<section class="paper">
<h2 data-i18n>Nodes</h2>
<div class="types" id="filters"> </div>
<h3>
<span data-i18n>Custom Nodes</span> (<span
id="custom_nodes_count"
></span
>)
</h3>
<div class="group">
<button id="add_custom_node" data-i18n>Add Node</button>
<button id="backup_custom_node" data-i18n>Backup</button>
<button id="restore_custom_node" data-i18n>Restore</button>
</div>
<h3>
<span data-i18n>Discovered Nodes</span> (<span
id="discovered_nodes_count"
></span
>)
</h3>
<div class="group">
<button id="reset_discovered_nodes" data-i18n>Reset</button>
</div>
</section>
<section class="paper">
<h2 data-i18n>Game sessions</h2>
<p class="description" data-i18n>
Game sessions are auto-saved, allowing you to reload and track
your paths. Up to 5 recent sessions are saved.
</p>
<div id="game_sessions"></div>
</section>
<section class="paper">
<h2 data-i18n>Realtime Status</h2>
<p class="status" id="game_status">
<span class="indicator"></span>
<span data-i18n>Game is running</span>
<span data-i18n>Game is not running</span>
</p>
<p class="location-status"> </p>
<button class="show-on-map" data-i18n>Show on map</button>
<label class="group">
<input type="checkbox" id="follow_location" />
<span data-i18n>Follow Location</span>
</label>
<p class="description" data-i18n>
Player marker auto-centers whenever it gets updated.
</p>
<div class="game-overlay hidden">
<span class="warning" data-i18n>Game is disabled!</span>
<p>
<span data-i18n>Open the</span>
<a href="overwolf://store/game-settings/game-id/22638" data-i18n
>Overwolf settings</a
>
<span data-i18n>and activate Sons of the Forest.</span>
</p>
</div>
</section>
<section class="paper">
<h2 data-i18n>Position Sync</h2>
<p class="description">
<span data-i18n>Connect your position with the</span>
<a href="https://sotf.th.gl/" target="_blank" data-i18n
>web version</a
>
<span data-i18n
>for a real-time experience on any device! And add other
players, to see each other on the map. First, connect to the
peer server and connect to your friends afterwards.</span
>
</p>
<button id="peer_connect" data-i18n>Connect to peer server</button>
<p class="status issue" id="my_peer_status">
<span class="indicator"></span>
<span data-i18n>Connected to peer server</span>
<span data-i18n>Not connected to peer server</span>
</p>
<div class="group">
<label>
<span class="w-sm" data-i18n>Your ID</span>
<input type="text" id="peer_id" disabled />
</label>
<button id="copy_peer_id" data-i18n>Copy</button>
</div>
<p class="warning" id="peer_error"></p>
<form class="group" id="connection_form">
<label>
<span class="w-sm" data-i18n>Friend ID</span>
<input type="text" name="other_peer_id" required />
</label>
<button type="submit" data-i18n>Add friend</button>
</form>
<div id="connections"></div>
<a href="https://sotf.th.gl/" target="_blank" class="qr_link">
<canvas class="qr"></canvas
></a>
</section>
<section class="paper">
<h2 data-i18n>Settings</h2>
<div>
<span class="w-lg" data-i18n>Show/Hide app hotkey</span>
<button class="hotkey" id="toggle_app_hotkey"></button>
</div>
<div>
<span class="w-lg" data-i18n>Zoom in hotkey</span>
<button class="hotkey" id="zoom_in_app_hotkey"></button>
</div>
<div>
<span class="w-lg" data-i18n>Zoom out hotkey</span>
<button class="hotkey" id="zoom_out_app_hotkey"></button>
</div>
<div>
<span class="w-lg" data-i18n>Show/Hide Zones Grid</span>
<button class="hotkey" id="toggle_zones_grid_hotkey"></button>
</div>
<label class="group">
<input type="checkbox" id="images_toggle" class="toggle-switch" />
<label for="images_toggle"></label>
<span data-i18n>Show Images</span>
</label>
<p class="description" data-i18n>
Displays items images either on or under ground.
</p>
<label class="group">
<input
type="checkbox"
id="description_toggle"
class="toggle-switch"
/>
<label for="description_toggle"></label>
<span data-i18n>Show Description</span>
</label>
<p class="description" data-i18n>
Displays items description for more information.
</p>
<label class="group">
<input type="checkbox" id="rq_toggle" class="toggle-switch" />
<label for="rq_toggle"></label>
<span data-i18n>Show Requirements</span>
</label>
<p class="description" data-i18n>
Displays list of required items in order to obtain them.
</p>
<label class="group">
<input type="checkbox" id="tp_toggle" class="toggle-switch" />
<label for="tp_toggle"></label>
<span data-i18n>Show Teleporting</span>
</label>
<p class="description" data-i18n>
Displays command for teleporting to the nodes.
</p>
<label class="group">
<input type="checkbox" id="tg_toggle" class="toggle-switch" />
<label for="tg_toggle"></label>
<span data-i18n>Show Togglego</span>
</label>
<p class="description" data-i18n>
Displays command for hiding or showing water bodies.
</p>
<label class="group">
<input type="checkbox" id="itemid_toggle" class="toggle-switch" />
<label for="itemid_toggle"></label>
<span data-i18n>Show Item ID</span>
</label>
<p class="description" data-i18n>
Displays command for spawning items.
</p>
<label class="group">
<input
type="checkbox"
id="compass_toggle"
class="toggle-switch"
/>
<label for="compass_toggle"></label>
<span data-i18n>Show Compass</span>
</label>
<p class="description" data-i18n>
Displays a compass on top of the map.
</p>
<label class="group">
<input type="checkbox" id="trace_line" class="toggle-switch" />
<label for="trace_line"></label>
<span data-i18n>Show Trace Line</span>
</label>
<p class="description" data-i18n>
Displays small dots behind you, saving your paths.
</p>
<label class="group">
<input
type="checkbox"
id="direction_line"
class="toggle-switch"
/>
<label for="direction_line"></label>
<span data-i18n>Show Direction Line</span>
</label>
<p class="description" data-i18n>
Displays a line in walking direction.
</p>
<label class="group">
<input
type="checkbox"
id="show_icon_background"
class="toggle-switch"
/>
<label for="show_icon_background"></label>
<span data-i18n>Show Icon Background</span>
</label>
<p class="description" data-i18n>
Enhances icon visibility with a background.
</p>
<label class="group">
<input type="checkbox" id="zones_grid" class="toggle-switch" />
<label for="zones_grid"></label>
<span data-i18n>Show Zones</span>
</label>
<p class="description">
<span data-i18n>
Shows a map grid for teleporting to in-game zones. Use</span
>
<code>cheatstick</code>
<span data-i18n>in game press</span>
<code>F1</code> <span data-i18n>and type desired zone name.</span>
</p>
<label class="group">
<input type="checkbox" id="overlay" class="toggle-switch" />
<label for="overlay"></label>
<span data-i18n>Activate Overlay</span>
</label>
<p class="description" data-i18n>
Use this window exclusively as an in-game overlay. For
muliti-screen setups or to switch using ALT+TAB, disable this
option.
</p>
<span data-i18n>Change Icons Size</span>
<p class="description" data-i18n>
It is not advisable to change the size when all icons are active.
</p>
<div class="slidecontainer">
<input
type="range"
min="10"
max="26"
value="18"
class="slider"
id="iconSizeSlider"
/>
</div>
</section>
<section class="links">
<p>
Take your gaming to new heights with accurate tracking, richly
detailed waypoints, and a sleek overlay for real-time progress.<br />
Ensure your privacy by reviewing our:
<a href="https://sotf.th.gl/privacy-policy.html" target="_blank"
>Privacy Policy</a
>
<br />
Find more gaming enchancements at:
</p>
<a href="https://www.th/gl/" target="_blank"
>The Hidden Gaming Lair</a
>
<a href="https://palia.th.gl/" target="_blank">Palia Map</a>
<a href="https://diablo4.th.gl/" target="_blank">Diablo 4 Map</a>
<a href="https://aeternum-map.th.gl/" target="_blank"
>New Wolrd Interactice Map</a
>
<a href="https://www.nwmap.info/" target="_blank"
>New World Territory Map</a
>
<a href="https://www.hogwarts.th.gl/" target="_blank"
>Hogwarts Legacy</a
>
<a href="https://www.arkesia.th.gl/" target="_blank">Lost Ark</a>
<a href="https://lol.th.gl/" target="_blank">League of Legend</a>
<a href="https://www.soc.th.gl/" target="_blank"
>Songs of Conquest</a
>
<a href="https://github.com/lmachens/skeleton" target="_blank"
>Customizable Overlays</a
>
</section>
</div>
<div class="banner">
<a href="https://www.th.gl/support-me" target="_blank" data-i18n
>Unlock our hidden treasury with your generous Patronage</a
>
</div>
</aside>
<div class="ads"></div>
</div>
<div class="resize top"></div>
<div class="resize right"></div>
<div class="resize bottom"></div>
<div class="resize left"></div>
<div class="resize top-left"></div>
<div class="resize top-right"></div>
<div class="resize bottom-left"></div>
<div class="resize bottom-right"></div>
<script type="module" src="/src/app.ts"></script>
</body>
</html>