-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
401 lines (333 loc) · 15.2 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/json5@2.2.0/dist/index.js"></script>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 100vh;
}
#container {
max-width: 800px;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: flex-start;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input,
select,
button {
margin-bottom: 15px;
padding: 8px;
box-sizing: border-box;
}
select {
cursor: pointer;
}
#imageContainer {
width: 100%;
position: relative;
overflow: hidden;
flex: 1;
}
#pinpointImage {
display: block;
max-width: 100%;
height: auto;
}
.pinpoint {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
cursor: pointer;
transform: translate(-50%, -50%);
}
.editableField {
width: 80px;
}
#iconDetails, #positionDetails {
display: flex;
flex-direction: column;
}
</style>
<title>Yunyun's Friends Pinpoint</title>
</head>
<body>
<div id="container">
<label for="imageUpload">Upload Image:</label>
<input type="file" accept="image/*" id="imageUpload" onchange="handleImageUpload(event)">
<div id="imageDimensions">
<label for="imageWidth">Image Width:</label>
<input type="number" id="imageWidth" placeholder="Image width" readonly>
<label for="imageHeight">Image Height:</label>
<input type="number" id="imageHeight" placeholder="Image height" readonly>
</div>
<label for="jsonUpload">Upload JSON File:</label>
<input type="file" accept=".json" id="jsonUpload" onchange="handleJsonUpload(event)">
<label for="texDropdown">Select a texure:</label>
<select id="texDropdown" onchange="selectTex()">
<option value="">Select</option>
</select>
<label for="iconDropdown">Select an icon:</label>
<select id="iconDropdown" onchange="selectIcon()">
<option value="">Select</option>
</select>
<div id="coordinates">
<label for="xCoordinate">X Coordinate (left):</label>
<input type="number" id="xCoordinate" placeholder="X coordinate" readonly>
<label for="yCoordinate">Y Coordinate (top):</label>
<input type="number" id="yCoordinate" placeholder="Y coordinate" readonly>
<div id="colorChangeForm">
<label for="backgroundColorInput">Background Color:</label>
<input type="color" id="backgroundColorInput" value="#f4f4f4">
<button type="button" onclick="changeBackgroundColor()">Apply</button>
</div>
</div>
<div id="iconDetails">
<label for="iconMetadata">Metadata:</label>
<textarea id="iconMetadata" placeholder="Metadata"></textarea>
<label for="iconWidth">Width:</label>
<input type="number" id="iconWidth" class="editableField" placeholder="Width">
<label for="iconHeight">Height:</label>
<input type="number" id="iconHeight" class="editableField" placeholder="Height">
<label for="iconOriginX">Origin X:</label>
<input type="number" id="iconOriginX" class="editableField" placeholder="Origin X">
<label for="iconOriginY">Origin Y:</label>
<input type="number" id="iconOriginY" class="editableField" placeholder="Origin Y">
</div>
<div id="positionDetails">
<label for="iconLeft">Left:</label>
<input type="number" id="iconLeft" class="editableField" placeholder="Left">
<label for="iconTop">Top:</label>
<input type="number" id="iconTop" class="editableField" placeholder="Top">
</div>
<button type="button" onclick="saveIconDetails()">Save Icon Details</button>
<button type="button" onclick="saveUpdatedJson()">Save Updated JSON</button>
<label for="itemName">Icon Name:</label>
<input type="text" id="itemName" placeholder="Item name">
</div>
<div id="imageContainer">
<img id="pinpointImage" alt="Image not selected">
<div id="jsonPinpoints"></div>
</div>
<script>
var jsonData; // Declare jsonData variable outside functions to make it accessible globally
function handleImageUpload(event) {
// Get the selected file from the input
var file = event.target.files[0];
// Check if a file was selected
if (file) {
// Create a FileReader to read the image
var reader = new FileReader();
// Set up the onload event for the reader
reader.onload = function(e) {
// Set the source of the image to the uploaded file
document.getElementById('pinpointImage').src = e.target.result;
// Get image dimensions and populate width and height inputs
var image = new Image();
image.src = e.target.result;
image.onload = function() {
document.getElementById('imageWidth').value = image.width;
document.getElementById('imageHeight').value = image.height;
};
};
// Read the image as a data URL
reader.readAsDataURL(file);
}
}
function handleJsonUpload(event) {
// Get the selected JSON file
var file = event.target.files[0];
// Check if a file was selected
if (file) {
// Create a FileReader to read the JSON file
var reader = new FileReader();
// Set up the onload event for the reader
reader.onload = function(e) {
// Parse the JSON data using JSON5 library
jsonData = JSON5.parse(e.target.result);
// Get the "source" object
var sources = jsonData.source;
// Populate the dropdown list with "tex" fields
var texDropdown = document.getElementById('texDropdown');
texDropdown.innerHTML = '<option value="">Select</option>';
for (var key in sources) {
if (sources.hasOwnProperty(key)) {
var option = document.createElement('option');
option.value = key;
option.text = key;
texDropdown.add(option);
}
}
};
// Read the JSON file as text
reader.readAsText(file);
}
}
function selectTex() {
// Get the selected "tex" from the dropdown
var selectedTex = document.getElementById('texDropdown').value;
// Get the "icon" object based on the selected "tex"
var icons = jsonData.source[selectedTex].icon;
// Populate the "Icon" dropdown with items under the selected "tex"
var iconDropdown = document.getElementById('iconDropdown');
iconDropdown.innerHTML = '<option value="">Select</option>';
for (var key in icons) {
if (icons.hasOwnProperty(key)) {
var option = document.createElement('option');
option.value = key;
// Display name if available, otherwise display key
option.text = icons[key].itemName || key;
iconDropdown.add(option);
}
}
}
function selectIcon() {
// Get the selected "tex" and item from the dropdowns
var selectedTex = document.getElementById('texDropdown').value;
var selectedKey = document.getElementById('iconDropdown').value;
// Get the coordinates and name based on the selected "tex" and item
var x = jsonData.source[selectedTex].icon[selectedKey].left;
var y = jsonData.source[selectedTex].icon[selectedKey].top;
var name = jsonData.source[selectedTex].icon[selectedKey].itemName || '';
// Set the values of the input fields
document.getElementById('itemName').value = name;
document.getElementById('xCoordinate').value = x;
document.getElementById('yCoordinate').value = y;
// Set the values for the editable fields
document.getElementById('iconWidth').value = jsonData.source[selectedTex].icon[selectedKey].width;
document.getElementById('iconHeight').value = jsonData.source[selectedTex].icon[selectedKey].height;
document.getElementById('iconOriginX').value = jsonData.source[selectedTex].icon[selectedKey].originX;
document.getElementById('iconOriginY').value = jsonData.source[selectedTex].icon[selectedKey].originY;
document.getElementById('iconMetadata').value = jsonData.source[selectedTex].icon[selectedKey].metadata;
document.getElementById('iconLeft').value = jsonData.source[selectedTex].icon[selectedKey].left;
document.getElementById('iconTop').value = jsonData.source[selectedTex].icon[selectedKey].top;
// Remove previous pinpoints
clearPinpoints();
// Set the position of the new pinpoint
createAndAppendPinpoint(x, y);
}
function saveIconDetails() {
// Get the entered values for the editable fields
var width = document.getElementById('iconWidth').value;
var height = document.getElementById('iconHeight').value;
var originX = document.getElementById('iconOriginX').value;
var originY = document.getElementById('iconOriginY').value;
var metadata = document.getElementById('iconMetadata').value;
var left = document.getElementById('iconLeft').value;
var top = document.getElementById('iconTop').value;
// Get the selected "tex" and item from the dropdowns
var selectedTex = document.getElementById('texDropdown').value;
var selectedKey = document.getElementById('iconDropdown').value;
// Update the values in the JSON
jsonData.source[selectedTex].icon[selectedKey].width = width;
jsonData.source[selectedTex].icon[selectedKey].height = height;
jsonData.source[selectedTex].icon[selectedKey].originX = originX;
jsonData.source[selectedTex].icon[selectedKey].originY = originY;
jsonData.source[selectedTex].icon[selectedKey].metadata = metadata;
jsonData.source[selectedTex].icon[selectedKey].left = left;
jsonData.source[selectedTex].icon[selectedKey].top = top;
// Update the name in the "Icon" dropdown
updateDropdownName(selectedKey, jsonData.source[selectedTex].icon[selectedKey].itemName);
}
function saveUpdatedJson() {
// Get the original filename
var originalFilename = document.getElementById('jsonUpload').files[0]?.name || 'updated_data.json';
// Convert the updated JSON object to a string with quotes for all keys
var updatedJsonString = JSON.stringify(jsonData, (key, value) => {
// Exclude quotes for numeric values of specific keys
if (["height", "left", "originX", "originY", "top", "width"].includes(key)) {
return Number(value);
}
return value;
}, 2);
// Create a Blob containing the updated JSON data
var blob = new Blob([updatedJsonString], { type: 'application/json' });
// Create a download link and trigger the download
var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = originalFilename;
link.click();
}
function pinpointCoordinates() {
// Get the entered coordinates and name from the input fields
var x = document.getElementById('xCoordinate').value;
var y = document.getElementById('yCoordinate').value;
var name = document.getElementById('itemName').value;
// Remove previous pinpoints
clearPinpoints();
// Set the position of the new pinpoint
createAndAppendPinpoint(x, y);
// Update the name in the dropdown
updateDropdownName(x, name);
}
function updateDropdownName(key, name) {
// Update the "Icon" dropdown to display the name if available
var iconDropdown = document.getElementById('iconDropdown');
iconDropdown.options[iconDropdown.selectedIndex].text = name || key;
}
function clearPinpoints() {
// Remove all previous pinpoints
var previousPinpoints = document.getElementsByClassName('pinpoint');
while (previousPinpoints.length > 0) {
previousPinpoints[0].parentNode.removeChild(previousPinpoints[0]);
}
}
function createAndAppendPinpoint(x, y) {
// Create a new pinpoint element
var newPinpoint = document.createElement('div');
newPinpoint.className = 'pinpoint';
newPinpoint.style.left = x + 'px';
newPinpoint.style.top = y + 'px';
document.getElementById('imageContainer').appendChild(newPinpoint);
}
function saveItemName() {
// Get the entered coordinates, "tex," and name from the input fields
var x = document.getElementById('xCoordinate').value;
var selectedTex = document.getElementById('texDropdown').value;
var name = document.getElementById('itemName').value;
// Update the name in the JSON
jsonData.source[selectedTex].icon[x].itemName = name;
// Update the name in the "Icon" dropdown
updateDropdownName(x, name);
}
function changeBackgroundColor() {
// Get the selected color from the input
var newColor = document.getElementById('backgroundColorInput').value;
// Change the background color of the body
document.body.style.backgroundColor = newColor;
}
// Add a click event listener to the image
document.getElementById('pinpointImage').addEventListener('click', function(event) {
// Get the coordinates of the click relative to the image
var x = event.offsetX;
var y = event.offsetY;
// Set the values of the input fields
document.getElementById('itemName').value = '';
document.getElementById('xCoordinate').value = x;
document.getElementById('yCoordinate').value = y;
// Remove previous pinpoints
clearPinpoints();
// Set the position of the new pinpoint
createAndAppendPinpoint(x, y);
});
</script>
</body>
</html>