A rewrite of Poly+, my quality-of-life browser extension for Polytoria. Built entirely fresh using the WXT extension framework, Typescript, and with added better overall code quality.
indexx.dev
extension
1<!DOCTYPE html>
2<html>
3 <head>
4 <!-- META TAGS -->
5 <meta charset="utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7
8 <!-- PUBLIC -->
9 <title>Poly+ Preferences</title>
10 </head>
11
12 <body data-bs-theme="dark">
13 <dialog class="w-50" id="ResetDefaults-Modal">
14 <div class="modal-header">
15 <p>Are you sure?</p>
16 </div>
17 <div class="modal-body">
18 <p>
19 Are you sure you'd like to reset all settings to their defaults? (this
20 action is irreversible)
21 </p>
22 <button id="ResetDefaults-Modal-Yes" class="btn btn-danger">Yes</button>
23 <button id="ResetDefaults-Modal-No" class="btn btn-primary">No</button>
24 </div>
25 </dialog>
26 <dialog class="w-50" id="ThemeCreator-Modal" data-setting="ThemeCreator">
27 <div class="modal-header">
28 <p>Theme Creator</p>
29 </div>
30 <div class="modal-body">
31 <p>
32 Let out your creativity and turn it into a reality on Polytoria's
33 website!
34 </p>
35 <hr class="mt-3 mb-3" />
36
37 <label>Save Theme to JSON</label>
38 <div class="input-group mb-3">
39 <input
40 id="SaveThemeToJSONInput"
41 type="text"
42 class="form-control bg-dark ignore"
43 placeholder="JSON String..."
44 disabled
45 />
46 <button id="CopyThemeJSONBtn" class="btn btn-warning">Copy</button>
47 </div>
48
49 <label>Load Theme from JSON</label>
50 <div class="input-group">
51 <input
52 type="text"
53 class="form-control bg-dark ignore"
54 placeholder="JSON..."
55 />
56 <button id="LoadThemeFromJSONBtn" class="btn btn-success ignore">
57 Load
58 </button>
59 </div>
60
61 <hr class="mt-2 mb-3" />
62
63 <div class="card mb-2">
64 <div class="card-header">Navigation</div>
65 <div class="card-body">
66 <label>Navbar Background Color</label>
67 <input
68 class="form-control bg-dark mb-2"
69 placeholder="..."
70 data-setting="NavBGColor"
71 />
72
73 <label>Navbar Border Color</label>
74 <input
75 class="form-control bg-dark mb-2"
76 placeholder="..."
77 data-setting="NavBorderColor"
78 />
79
80 <label>Sidebar Background Color</label>
81 <input
82 class="form-control bg-dark mb-2"
83 placeholder="..."
84 data-setting="SideBGColor"
85 />
86
87 <label>Sidebar Border Color</label>
88 <input
89 class="form-control bg-dark mb-2"
90 placeholder="..."
91 data-setting="SideBorderColor"
92 />
93
94 <hr class="navbar-divider" />
95
96 <label>Navbar Item Color</label>
97 <input
98 class="form-control bg-dark mb-2"
99 placeholder="..."
100 data-setting="NavItemColor"
101 />
102
103 <label>Sidebar Item Background Color</label>
104 <input
105 class="form-control bg-dark mb-2"
106 placeholder="..."
107 data-setting="SideItemBGColor"
108 />
109
110 <label>Sidebar Item Border Color</label>
111 <input
112 class="form-control bg-dark mb-2"
113 placeholder="..."
114 data-setting="SideItemBorderColor"
115 />
116
117 <label>Sidebar Item Color</label>
118 <input
119 class="form-control bg-dark mb-2"
120 placeholder="..."
121 data-setting="SideItemColor"
122 />
123
124 <label>Sidebar Item Label Color</label>
125 <input
126 class="form-control bg-dark mb-2"
127 placeholder="..."
128 data-setting="SideItemLabelColor"
129 />
130 </div>
131 </div>
132
133 <div class="card mb-2">
134 <div class="card-header">Background</div>
135 <div class="card-body">
136 <label>Background Color</label>
137 <input
138 class="form-control bg-dark mb-2"
139 placeholder="..."
140 data-setting="BGColor"
141 />
142
143 <label>Background Image (URL)</label>
144 <input
145 class="form-control bg-dark mb-2"
146 placeholder="..."
147 data-setting="BGImage"
148 />
149
150 <label>Background Image Size (if there is a background image)</label
151 >
152 <select class="form-select bg-dark mb-2" data-setting="BGImageSize">
153 <option value="fit" selected>Fit (default)</option>
154 <option value="cover">Cover</option>
155 <option value="contain">Contain</option>
156 </select>
157 </div>
158 </div>
159
160 <div class="card mb-2">
161 <div class="card-header">Text</div>
162 <div class="card-body">
163 <label>Primary Text Color</label>
164 <input
165 class="form-control bg-dark mb-2"
166 placeholder="..."
167 data-setting="PrimaryTextColor"
168 />
169
170 <label>Secondary Text Color</label>
171 <input
172 class="form-control bg-dark mb-2"
173 placeholder="..."
174 data-setting="SecondaryTextColor"
175 />
176
177 <div class="row">
178 <div class="col">
179 <label>Link (state: default) Text Color</label>
180 </div>
181 <div class="col">
182 <label>Link (state: hovered) Text Color</label>
183 </div>
184 <div class="col">
185 <label>Link (state: focused) Text Color</label>
186 </div>
187 </div>
188
189 <div class="input-group">
190 <input
191 class="form-control bg-dark mb-2"
192 placeholder="..."
193 data-setting="LinkTextColor"
194 />
195 <input
196 class="form-control bg-dark mb-2"
197 placeholder="..."
198 data-setting="LinkHoveredTextColor"
199 />
200 <input
201 class="form-control bg-dark mb-2"
202 placeholder="..."
203 data-setting="LinkFocusedTextColor"
204 />
205 </div>
206 </div>
207 </div>
208
209 <div class="card mb-2">
210 <div class="card-header">Cards</div>
211 <div class="card-body">
212 <label>Card (Header) Background Color</label>
213 <input
214 class="form-control bg-dark mb-2"
215 placeholder="..."
216 data-setting="CardHeadBGColor"
217 />
218
219 <label>Card (Body) Background Color</label>
220 <input
221 class="form-control bg-dark mb-2"
222 placeholder="..."
223 data-setting="CardBodyBGColor"
224 />
225
226 <label>Card Border Color</label>
227 <input
228 class="form-control bg-dark mb-2"
229 placeholder="..."
230 data-setting="CardBorderColor"
231 />
232 </div>
233 </div>
234
235 <div class="card mb-2">
236 <div class="card-header">Branding</div>
237 <div class="card-body">
238 <label>Website Logo (URL)</label>
239 <input
240 class="form-control bg-dark mb-2"
241 placeholder="..."
242 data-setting="WebsiteLogo"
243 />
244 </div>
245 </div>
246
247 <div role="group" class="btn-group w-100">
248 <button class="btn btn-success w-25" data-setting="[save]">
249 Save
250 </button>
251 <button class="btn btn-warning w-25" data-setting="[reset-default]">
252 Reset to Defaults
253 </button>
254 <button class="btn btn-secondary w-25" data-setting="[cancel]">
255 Cancel
256 </button>
257 </div>
258 </div>
259 </dialog>
260 <dialog class="w-50" id="ModifyNav-Modal" data-setting="ModifyNav">
261 <div class="modal-header">
262 <p>Modify Navbar</p>
263 </div>
264 <div class="modal-body">
265 <p>Customize the navbar to your liking!</p>
266 <hr class="mt-2 mb-3" />
267 <div class="card mb-2">
268 <div class="card-header">#1 Navbar Item</div>
269 <div class="card-body">
270 <label>Label</label>
271 <input
272 class="form-control bg-dark mb-2"
273 placeholder="Play"
274 data-parent="0"
275 data-setting="Label"
276 />
277
278 <label>Link</label>
279 <input
280 class="form-control bg-dark mb-2"
281 placeholder="https://polytoria.com/places/"
282 data-parent="0"
283 data-setting="Link"
284 />
285 </div>
286 </div>
287 <div class="card mb-2">
288 <div class="card-header">#2 Navbar Item</div>
289 <div class="card-body">
290 <label>Label</label>
291 <input
292 class="form-control bg-dark mb-2"
293 placeholder="Store"
294 data-parent="1"
295 data-setting="Label"
296 />
297
298 <label>Link</label>
299 <input
300 class="form-control bg-dark mb-2"
301 placeholder="https://polytoria.com/store/"
302 data-parent="1"
303 data-setting="Link"
304 />
305 </div>
306 </div>
307 <div class="card mb-2">
308 <div class="card-header">#3 Navbar Item</div>
309 <div class="card-body">
310 <label>Label</label>
311 <input
312 class="form-control bg-dark mb-2"
313 placeholder="Guilds"
314 data-parent="2"
315 data-setting="Label"
316 />
317
318 <label>Link</label>
319 <input
320 class="form-control bg-dark mb-2"
321 placeholder="https://polytoria.com/guilds/"
322 data-parent="2"
323 data-setting="Link"
324 />
325 </div>
326 </div>
327 <div class="card mb-2">
328 <div class="card-header">#4 Navbar Item</div>
329 <div class="card-body">
330 <label>Label</label>
331 <input
332 class="form-control bg-dark mb-2"
333 placeholder="People"
334 data-parent="3"
335 data-setting="Label"
336 />
337
338 <label>Link</label>
339 <input
340 class="form-control bg-dark mb-2"
341 placeholder="https://polytoria.com/users/"
342 data-parent="3"
343 data-setting="Link"
344 />
345 </div>
346 </div>
347 <div class="card mb-2">
348 <div class="card-header">#5 Navbar Item</div>
349 <div class="card-body">
350 <label>Label</label>
351 <input
352 class="form-control bg-dark mb-2"
353 placeholder="Forum"
354 data-parent="4"
355 data-setting="Label"
356 />
357
358 <label>Link</label>
359 <input
360 class="form-control bg-dark mb-2"
361 placeholder="https://polytoria.com/forum"
362 data-parent="4"
363 data-setting="Link"
364 />
365 </div>
366 </div>
367
368 <div role="group" class="btn-group w-100">
369 <button class="btn btn-success w-25" data-setting="[save]">
370 Save
371 </button>
372 <button class="btn btn-warning w-25" data-setting="[reset-default]">
373 Reset to Defaults
374 </button>
375 <button class="btn btn-secondary w-25" data-setting="[cancel]">
376 Cancel
377 </button>
378 </div>
379 </div>
380 </dialog>
381 <dialog class="w-75" id="AutoAdBidding-Modal" data-setting="AutoAdBidding">
382 <div class="modal-header">
383 <p>Automatic Ad Bidding</p>
384 </div>
385 <div class="modal-body">
386 <p>description (max 10 ads)</p>
387 <hr class="mt-2 mb-3" />
388 <div class="input-group mb-2">
389 <input type="text" class="form-control ignore" placeholder="Ad ID..">
390 <button class="btn btn-primary" id="auto-ad-bidding-add">Add</button>
391 </div>
392 <table class="table">
393 <thead>
394 <tr>
395 <th scope="col">#</th>
396 <th scope="col">Ad Name</th>
397 <th scope="col">Bid</th>
398 <th scope="col">Automation</th>
399 <th scope="col">Actions</th>
400 </tr>
401 </thead>
402 <tbody>
403 <tr>
404 <th scope="row">1</th>
405 <td>
406 <a href="https://polytoria.com/create/ad/632"
407 >"everdayi m shuffling"</a>
408 </td>
409 <td class="text-success"><span class="pi">$</span> 150</td>
410 <td>
411 <select class="form-select ignore">
412 <option value="daily" selected>Daily</option>
413 <option value="weekly">Weekly</option>
414 <option value="monthly">Monthly</option>
415 </select>
416 </td>
417 <td>
418 <div role="group" class="btn-group w-100">
419 <button class="btn btn-success w-25">
420 BID
421 </button>
422 <button class="btn btn-orange w-25">
423 EDIT
424 </button>
425 <button class="btn btn-danger w-25">
426 DELETE
427 </button>
428 </div>
429 </td>
430 </tr>
431 </tbody>
432 </table>
433
434 <div role="group" class="btn-group w-100">
435 <button class="btn btn-success w-25" data-setting="[save]">
436 Save
437 </button>
438 <button class="btn btn-warning w-25" data-setting="[reset-default]">
439 Reset to Defaults
440 </button>
441 <button class="btn btn-secondary w-25" data-setting="[cancel]">
442 Cancel
443 </button>
444 </div>
445 </div>
446 </dialog>
447 <div id="page">
448 <h1
449 class="text-center title-popup-bg"
450 style="text-shadow: 0px 0px 5px orange; padding-bottom: 5px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center"
451 >
452 <span>Poly+</span>
453 </h1>
454 <div
455 id="discovery"
456 class="row flex-nowrap mb-2"
457 style="--bs-gutter-x: 5px; overflow-x: auto; scrollbar-width: none"
458 >
459 <div class="col-md-3">
460 <input
461 id="search"
462 type="text"
463 class="form-control form-control-sm"
464 placeholder="Search.."
465 />
466 </div>
467 </div>
468 <div id="settings"></div>
469 <hr />
470 <div class="btn-group w-100">
471 <button id="save" class="btn btn-primary w-50" disabled="true">
472 Save
473 </button>
474 <button id="reset" class="btn btn-warning w-50">
475 Reset to Default Settings
476 </button>
477 </div>
478 <p
479 id="footer-text"
480 class="text-center text-muted mt-2"
481 style="font-size: 0.8rem"
482 >
483 <span></span>
484 |
485 <a id="check-for-updates"><b>Check for Updates</b></a>
486 <br />
487 made by <a href="https://polytoria.com/u/Index" target="_blank"
488 >Index</a> with the help of several contributors <3
489 </p>
490 </div>
491 <script src="preferences-handler.js"></script>
492 </body>
493</html>