-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
326 lines (272 loc) · 18.3 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- https://search.google.com/search-console/about -->
<!-- Making it self-closing/closing at all shouldn't matter, but this was the way that google provided the link, so I'm keeping it that way -->
<meta name="google-site-verification" content="DTNkB2nNCvd3ms-A5Y9mVcCtJJj-9jl-TIvuNIWZVjY" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hay Day Image Generator</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<!-- Using the unminified version since it might help me debug any issues; might want to eventually use https://code.jquery.com/jquery-3.6.4.min.js -->
<!-- Got the integrity sha/hash using https://www.srihash.org/ (found out about it here: https://stackoverflow.com/questions/51254596/how-to-get-the-integrity-value-for-a-jquery-version-for-script ); I decided to stick with the sha384 it defaults to. I'm unsure whether to append the attribute: referrerpolicy="no-referrer" -->
<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha384-SCPawFAkxFucxzK6X4Gpg3lmBZqjjmM8ghZCRH8hW4C+k4wCVXFd862J1juShkQ7" crossorigin="anonymous"></script>
<!-- Useful for finding which deprecated functions I'm using ( https://github.com/jquery/jquery-migrate/ )-->
<!-- <script src="https://code.jquery.com/jquery-migrate-3.1.0.js"></script> -->
<!-- Using the unminified version of math js; this is mainly for processing equations in the quantity input field, since I want to avoid using eval() [it also processes code, not just equations]. More info here: https://mathjs.org/download.html and https://cdnjs.com/libraries/mathjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.7.0/math.js" integrity="sha512-jVMFsAksn8aljb9IJ+3OCAq38dJpquMBjgEuz7Q5Oqu5xenfin/jxdbKw4P5eKjUF4xiG/GPT5CvCX3Io54gyA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.js" integrity="sha512-zPMZ/3MBK+R1rv6KcBFcf7rGwLnKS+xtB2OnWkAxgC6anqxlDhl/wMWtDbiYI4rgi/NrCJdXrmNGB8pIq+slJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuzzysort/2.0.4/fuzzysort.js" integrity="sha512-sdAWRZSPnL/EbXixTyBhffFggsxlPrxEMLKvseTBMfY3MGxYvXvm83S/WddNpx1tXPylK5warEPp7uu1yiNsgA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="style.css?v=3.1">
<script src="script.js?v=3.1"></script>
</head>
<body>
<h2>Options</h2>
<label for="itemsPerRowSlider">Items Per Row</label>
<input type="range" min="1" max="12" id="itemsPerRowSlider" style="vertical-align: sub;"> <!-- seems to align slightly better than "vertical-align: middle" -->
<label id="itemsPerRowLabel">8</label>
<button id="settingsOverlayShowButton" style="margin-left: 20px;">Settings</button>
<button id="changelogOverlayShowButton">Changelog</button>
<!-- TODO -- impl -->
<!-- <button id="tutorialOverlayShowButton">Tutorial</button> -->
<button id="contactOverlayShowButton">Contact</button>
<div style="height: 20px;"></div>
<hr>
<h2>
Add/Modify Item
<small><small>(Press enter inside any textbox to submit pending item changes)</small></small>
</h2>
<!-- Label MUST be outside of the div for the dimensions of the autocomplete/fuzzy match options to be proper -->
<label for="itemNameInput">Name</label>
<!-- this div needs to have position be relative in order for 100% width of the inner div to not cover the whole document ( https://stackoverflow.com/questions/6625116/css-position-absolute-and-full-width-problem ) -->
<div style="display: inline-block; position: relative;">
<!-- using em to be relative to the font size, since the font size is increased on iOS (to 16px) -->
<input type="text" id="itemNameInput" style="width: 8em;" autocomplete="off">
<div id="itemNameFuzzyMatchesHolder" class="fuzzyMatchesHolder"></div>
</div>
<label for="itemQuantityInput">Quantity</label>
<input type="text" id="itemQuantityInput" style="width: 3em;">
<label for="itemPriceOrMultiplierInput">Price/Multiplier</label>
<input type="text" id="itemPriceOrMultiplierInput" style="width: 3em;">
<button id="itemSubmitButton" style="margin-left: 10px;">Submit</button>
<button id="itemDeleteButton" class="disableInPriceCalculationMode">Delete</button>
<br>
<div style="height: 2px;"></div>
<button id="clearAllButton" class="disableInPriceCalculationMode">Clear All</button>
<button id="copyImageToClipboardButton">Copy Image to Clipboard</button>
<button id="copyAsTextListButton">Copy as Text List</button>
<div id="copyImageLoadingWheel" class="loading" hidden></div>
<br>
<div style="height: 2px;"></div>
<button id="priceCalculationToggleButton"><span id="priceCalculationModeStateSpan">Enable</span> Price Calculation Mode</button>
<button id="selectAllButton" class="disableOutsidePriceCalculationMode">Select All</button>
<button id="clearSelectionButton" class="disableOutsidePriceCalculationMode">Clear Selection</button>
<button id="subtractSelectedQuantitiesButton" class="disableOutsidePriceCalculationMode">Subtract Selected Quantities</button>
<button id="deleteSelectedButton" class="disableOutsidePriceCalculationMode">Delete Selected</button>
<br>
<div style="height: 2px;"></div>
<button id="resetCustomValuesButton" class="disableOutsidePriceCalculationMode">Reset Custom Values</button>
<button id="equationVisibilityToggleButton" class="disableOutsidePriceCalculationMode"><span id="equationVisibilityStateSpan">Show</span> Equation</button>
<button id="unselectedItemsVisibilityToggleButton" class="disableOutsidePriceCalculationMode"><span id="unselectedItemsVisibilityStateSpan">Hide</span> Unselected</button>
<div style="height: 15px;"></div>
<hr>
<div id="totalSelectedPriceArea" hidden>
<h2>Total Selected Price</h2>
<p id="totalSelectedPriceHolder"></p>
<p id="totalSelectedPriceEquationHolder" hidden></p>
<p id="totalSelectedPriceMessageHolder" hidden></p>
<hr>
</div>
<small>You can click on any item's image, quantity, or price to autofill all their information and focus the corresponding text box! (This includes the bottom text.)</small>
<br>
<small id="priceCalculationModeSelectionInfo" hidden>Click = individual toggle, Shift+Click = range additive, Alt+Click = range subtractive, Ctrl+Click = range toggle (invert)</small>
<div style="height: 20px;"></div>
<div id="screenshotRegion">
<table id="itemTable"></table>
<p id="bottomText"></p>
<p id="screenshotPriceHolder"></p>
<p class="watermark">jjcuber.github.io/hdig</p>
</div>
<div id="settingsOverlay" class="overlay" hidden>
<div class="overlayBackground"></div>
<div class="overlayBox">
<button class="overlayHideButton">X</button>
<div class="overlayInner">
<h2>Backup</h2>
<button id="ExportButton">Export All</button>
<button id="ImportButton">Import All</button>
<input type="file" id="importFileInput" accept="application/json" style="display: none;" />
<hr>
<h2>Item Lists</h2>
<div style="text-align: right; display: inline-block;">
<!-- Annoyingly, the size calculations for select differ from that of input, so they are slightly different in width. At first, I tried to make them be closer together, but I quickly realized that it would involve modifying the css of quite a few things, and it would likely be inconsistent across devices. -->
<select id="itemListDropdown" style="width: 12em; margin-right: 1px;"></select>
<button id="deleteItemListButton">Delete</button>
<br>
<hr style="border: 1px dashed grey;">
<input type="text" id="createItemListInput" style="width: 12em;">
<button id="createItemListButton">Create</button>
</div>
<br>
<div style="text-align: left; display: inline-block;">
<input type="checkbox" id="includeSettingsInItemListCheckBox">
<label for="includeSettingsInItemListCheckBox">Include Settings</label>
<br>
<input type="checkbox" id="copyCurrentItemsFromItemListCheckBox">
<label for="copyCurrentItemsFromItemListCheckBox">Copy Current Items</label>
</div>
<hr>
<!-- <div style="height: 10px;"></div> -->
<h2>
Item Abbreviations
<br>
<small><small>(case-insensitive)</small></small>
</h2>
<div id="abbreviationMappingTableArea" style="max-height: 40vh;">
<table id="abbreviationMappingTable">
<tr>
<th>Abbreviation</th>
<th>Expand To</th>
</tr>
</table>
</div>
<hr>
<h2>Bottom Text</h2>
<textarea id="bottomTextSettingInput" rows="3" style="width: 90%;"></textarea>
<hr>
<h2>Text List Separator</h2>
<input type="radio" name="textListSeparatorGroup" id="textListSeparatorNewlineRadio" value="
">
<label for="textListSeparatorNewlineRadio">Newline</label>
<input type="radio" name="textListSeparatorGroup" id="textListSeparatorCommaRadio" value=", ">
<label for="textListSeparatorCommaRadio">Comma</label>
<input type="radio" name="textListSeparatorGroup" id="textListSeparatorCustomRadio">
<label for="textListSeparatorCustomRadio">Custom</label>
<input type="text" id="textListCustomSeparatorInput" style="width: 3em;" value="">
<hr>
<h2>
Text List Format
<br>
<small><small>variables: {{name}}, {{quantity}}, {{price}}</small></small>
</h2>
<textarea id="textListFormatInput" rows="3" style="width: 90%;"></textarea>
<hr>
<h2>Item for Price Calculation</h2>
<!-- this div needs to have position be relative in order for 100% width of the inner div to not cover the whole document ( https://stackoverflow.com/questions/6625116/css-position-absolute-and-full-width-problem ) -->
<div style="display: inline-block; position: relative;">
<!-- using em to be relative to the font size, since the font size is increased on iOS (to 16px) -->
<input type="text" id="priceCalculationItemInput" style="width: 12em;" autocomplete="off">
<div id="priceCalculationItemFuzzyMatchesHolder" class="fuzzyMatchesHolder"></div>
</div>
<!-- TODO -- finish implementing
<hr>
<h2>Selections</h2>
<div style="display: inline-block; text-align: left;">
<input type="checkbox" id="defaultItemsToSelectedCheckbox">
<label for="defaultItemsToSelectedCheckbox">Default new items to selected</label>
<br>
<input type="checkbox" id="alwaysShowSelectedPriceCheckbox">
<label for="alwaysShowSelectedPriceCheckbox">Always show selected price</label>
<br>
<input type="checkbox" id="persistSelectionCheckbox">
<label for="persistSelectionCheckbox">Save selection and custom values</label>
</div>
-->
<hr>
<h2>Generated Image</h2>
<div style="text-align: left; display: inline-block;">
<input type="checkbox" id="showPriceInScreenshotCheckBox">
<label for="showPriceInScreenshotCheckBox">Show Selected Price</label>
<br>
<input type="checkbox" id="showTotalInNormalModeCheckBox">
<!-- no clue how to improve the verbiage of this without making it too long (I want to make it clear that this will show the total price of everything instead of selected when outside of price calculation mode) -->
<!-- TODO -- this should be disabled when the checkbox above isn't checked -->
<!--<label for="tempCheckBox">Show Total Price<br>in Normal Mode</label>-->
<label for="showTotalInNormalModeCheckBox">Show Total in Normal Mode</label>
<!-- <label for="tempCheckBox">Show Total instead in Normal Mode</label> -->
<br>
<br>
<input type="checkbox" id="hidePriceOrMultiplierCheckBox">
<label for="hidePriceOrMultiplierCheckBox">Hide Price/Multiplier</label>
</div>
<hr>
<h2>Defaults</h2>
<div style="text-align: right; display: inline-block;">
<label for="defaultQuantityInput">Quantity</label>
<input type="text" id="defaultQuantityInput" style="width: 8em;">
<br>
<label for="defaultPriceOrMultiplierInput">Price/Multiplier</label>
<input type="text" id="defaultPriceOrMultiplierInput" style="width: 8em;">
</div>
<hr>
<h2>Misc.</h2>
<div style="text-align: left; display: inline-block;">
<input type="checkbox" id="refocusNameOnSubmitCheckBox">
<label for="refocusNameOnSubmitCheckBox">Refocus Name on Submit</label>
<br>
<input type="checkbox" id="focusQuantityOnAutocompleteCheckBox">
<label for="focusQuantityOnAutocompleteCheckBox">Focus Quantity on Autocomplete</label>
<br>
<input type="checkbox" id="ignoreLocaleCheckBox">
<label for="ignoreLocaleCheckBox">Ignore Locale</label>
<!-- TODO -- figure out how to disable animations and transitions via js; I don't see a good way currently -->
<!-- <br> -->
<!-- <input type="checkbox" id="reduceAnimationsCheckBox"> -->
<!-- <label for="reduceAnimationsCheckBox">Reduce Animations</label> -->
</div>
</div>
</div>
</div>
<div id="changelogOverlay" class="overlay" hidden>
<div class="overlayBackground"></div>
<div class="overlayBox">
<button class="overlayHideButton">X</button>
<div class="overlayInner"></div>
</div>
</div>
<div id="failedCopyOverlay" class="overlay" hidden>
<div class="overlayBackground"></div>
<div class="overlayBox">
<button class="overlayHideButton">X</button>
<div class="overlayInner">
<h2>Copy Failed</h2>
<!-- TODO -- need to make this look better... it's disgusting rn -->
<p>
It looks like there was an issue with copying the image to the clipboard.
<br>
This is usually caused by one of the reasons below.
<ol style="text-align: left; display: inline-block; margin: 0px;">
<li>clicking out of the site while the image is being copied</li>
<br>
<li>using certain mobile devices</li>
<br>
<li>
using firefox and not enabling (in <b>about:config</b>)
<br>
<b>dom.events.asyncClipboard.clipboardItem</b>
</li>
</ol>
</p>
<p>
Below is the image that was generated (right click/long-press the image to copy/save it)
</p>
<hr>
<img id="failedCopyOverlayImageHolder">
</div>
</div>
</div>
<div id="contactOverlay" class="overlay" hidden>
<div class="overlayBackground"></div>
<div class="overlayBox">
<button class="overlayHideButton">X</button>
<div class="overlayInner">
<h2>Discord</h2>
<!-- reason for rel portion: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#security_and_privacy and https://stackoverflow.com/questions/15551779/open-link-in-new-tab-or-window -->
<a href="https://discord.gg/8SEjuFYWnB" target="_blank" rel="noopener noreferrer">Server Invite</a>
<hr>
<h2>GitHub</h2>
<a href="https://github.com/JJCUBER/HayDayImageGeneratorSite/issues/new" target="_blank" rel="noopener noreferrer">Submit Issue</a>
</div>
</div>
</div>
</body>
</html>