-
Notifications
You must be signed in to change notification settings - Fork 1
/
script.js
308 lines (258 loc) · 11.6 KB
/
script.js
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
// Get elements
const canvasContainer = document.getElementById('canvas-container');
const canvas = document.getElementById('canvas');
const overlayImage = document.getElementById('overlay-image');
const overlayOptions = document.getElementById('overlay-options');
const downloadBtn = document.getElementById('download-btn');
const uploadLabel = document.getElementById('upload-label');
const backgroundUpload = document.getElementById('background-upload');
const overlayFolderPath = 'overlays/';
const overlayContainer = document.getElementById('overlay-container');
const overlayImagesContainer = document.getElementById('overlay-images-container');
const ctx = canvas.getContext('2d');
let backgroundImage = null;
// Store overlay transformation data
let overlayData = {
x: 0,
y: 0,
width: 100,
height: 100,
rotation: 0,
};
// Initialize Moveable but initially hide it
const moveable = new Moveable(document.body, {
target: overlayContainer,
draggable: true,
resizable: true,
scalable: true,
rotatable: true,
pinchable: true,
keepRatio: true,
origin: true,
visible: false, // Initially invisible
});
// Hide Moveable initially
moveable.target = null;
moveable.visible = false;
// Handle Moveable events
moveable
.on('drag', ({ target, left, top }) => {
target.style.left = `${left}px`;
target.style.top = `${top}px`;
overlayData.x = left;
overlayData.y = top;
})
.on('resize', ({ target, width, height }) => {
target.style.width = `${width}px`;
target.style.height = `${height}px`;
overlayImage.style.width = `${width}px`;
overlayImage.style.height = `${height}px`;
overlayData.width = width;
overlayData.height = height;
})
.on('rotate', ({ target, beforeDelta }) => {
const rotate = overlayData.rotation + beforeDelta;
overlayData.rotation = rotate;
target.style.transform = `rotate(${rotate}deg)`;
});
// Function to load overlay images
function loadOverlayImages() {
const overlayImages = ['overlay1.png', 'overlay2.png']; // Update with your actual filenames
overlayImages.forEach((filename) => {
const img = new Image();
img.src = overlayFolderPath + filename;
img.alt = 'Overlay ' + filename;
img.setAttribute('data-src', overlayFolderPath + filename);
img.width = 100;
img.style.cursor = 'pointer';
img.style.margin = '0 10px';
img.addEventListener('click', function() {
overlayImage.src = this.getAttribute('data-src');
overlayImage.style.display = 'block';
overlayImage.style.top = '0px';
overlayImage.style.left = '0px';
overlayImage.style.width = '100px';
overlayImage.style.height = 'auto';
// Reset overlay data for the new image
overlayData = {
x: 0,
y: 0,
width: 100,
height: 100,
rotation: 0,
};
// Show Moveable only after an image is loaded
moveable.target = overlayContainer;
moveable.updateTarget();
moveable.visible = true; // Make Moveable visible
});
img.onerror = function() {
console.error('Error loading image:', filename);
return;
};
overlayImagesContainer.appendChild(img);
});
}
// Call the function to load images
loadOverlayImages();
// Ensure canvas dimensions match the container
canvas.width = canvasContainer.clientWidth;
canvas.height = canvasContainer.clientHeight;
// Handle drag and drop for background image
canvasContainer.addEventListener('dragover', function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
canvasContainer.addEventListener('drop', function(e) {
e.preventDefault();
handleBackgroundImage(e.dataTransfer.files[0]);
});
// Handle click to upload background image
backgroundUpload.addEventListener('change', function(e) {
handleBackgroundImage(e.target.files[0]);
});
function handleBackgroundImage(file) {
if (file && file.type.startsWith('image/')) {
const img = new Image();
const reader = new FileReader();
reader.onload = function(event) {
img.onload = function() {
// Max width for the canvas (90vw based on your CSS)
const maxCanvasWidth = canvasContainer.clientWidth;
// Calculate the image aspect ratio
const aspectRatio = img.width / img.height;
// Calculate the new canvas width and height based on the image aspect ratio
let newCanvasWidth = img.width;
let newCanvasHeight = img.height;
// If the image width exceeds the maximum canvas width, adjust the size proportionally
if (newCanvasWidth > maxCanvasWidth) {
newCanvasWidth = maxCanvasWidth;
newCanvasHeight = newCanvasWidth / aspectRatio;
}
// Update the canvas dimensions to match the adjusted image size
canvas.width = newCanvasWidth;
canvas.height = newCanvasHeight;
// Clear the canvas and draw the resized background image
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, newCanvasWidth, newCanvasHeight);
// Store the background image details
backgroundImage = { img: img, x: 0, y: 0, width: newCanvasWidth, height: newCanvasHeight };
// Hide the upload label after an image is successfully uploaded
uploadLabel.style.display = 'none';
// Adjust the canvas container size to match the new canvas dimensions
canvasContainer.style.width = `${newCanvasWidth}px`;
canvasContainer.style.height = `${newCanvasHeight}px`;
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
}
}
downloadBtn.addEventListener('click', function () {
if (!backgroundImage) {
alert("Please upload a background image first.");
return;
}
// Create a temporary canvas to render the full-resolution image
const tempCanvas = document.createElement('canvas');
tempCanvas.width = backgroundImage.img.width; // Original width
tempCanvas.height = backgroundImage.img.height; // Original height
const tempCtx = tempCanvas.getContext('2d');
// Draw the original-size background image onto the temp canvas
tempCtx.drawImage(backgroundImage.img, 0, 0, backgroundImage.img.width, backgroundImage.img.height);
console.log("Original background image size:", backgroundImage.img.width, backgroundImage.img.height);
// Draw the overlay image at the correct position and size relative to the original image
if (overlayImage.style.display !== 'none') {
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = overlayImage.src;
img.onload = function () {
// Calculate the scale factor between the displayed canvas and the original image
const scaleX = backgroundImage.img.width / canvas.width;
const scaleY = backgroundImage.img.height / canvas.height;
// Calculate the actual position and size for the overlay, relative to the original image size
const x = overlayData.x * scaleX;
const y = overlayData.y * scaleY;
const width = overlayData.width * scaleX;
const height = overlayData.height * scaleY;
console.log("Overlay position and size (scaled):", x, y, width, height);
console.log("Overlay rotation:", overlayData.rotation);
// Convert rotation to radians
const radianAngle = (overlayData.rotation * Math.PI) / 180;
// Save the current canvas state
tempCtx.save();
// Translate to the center of the overlay image for rotation
const centerX = x + width / 2;
const centerY = y + height / 2;
// Apply translation and rotation
tempCtx.translate(centerX, centerY);
tempCtx.rotate(radianAngle);
// Draw the overlay image within the rotated bounding box
tempCtx.drawImage(img, -width / 2, -height / 2, width, height);
// Restore the canvas state
tempCtx.restore();
// Convert the temp canvas to a Blob and trigger download
tempCanvas.toBlob(function (blob) {
const newImgUrl = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = newImgUrl;
link.download = 'my_gizmo.png'; // Set the download filename
document.body.appendChild(link); // Required for Firefox
link.click();
document.body.removeChild(link); // Clean up
URL.revokeObjectURL(newImgUrl); // Clean up
}, 'image/png');
};
} else {
// No overlay image, just download the background image
tempCanvas.toBlob(function (blob) {
const newImgUrl = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = newImgUrl;
link.download = 'my_gizmo.png'; // Set the download filename
document.body.appendChild(link); // Required for Firefox
link.click();
document.body.removeChild(link); // Clean up
URL.revokeObjectURL(newImgUrl); // Clean up
}, 'image/png');
}
});
document.addEventListener("DOMContentLoaded", function() {
// Automatically focus on the cheat code input field when the page loads
const cheatCodeInput = document.getElementById("cheat-code-input");
cheatCodeInput.focus();
// Function to handle the cheat code detection
cheatCodeInput.addEventListener("keypress", function(event) {
// Check if Enter key is pressed
if (event.key === "Enter") {
// If the entered value is "quantum", switch the overlay
if (cheatCodeInput.value.toLowerCase() === "quantum") {
// Find the second overlay (overlay2.png) and replace it with lil_el.png
const overlayImages = document.querySelectorAll('#overlay-images-container img');
if (overlayImages.length > 1) {
const overlay2 = overlayImages[1]; // Assuming the second overlay is at index 1
overlay2.src = 'overlays/lil_el.png'; // Replace overlay2 with lil_el.png
overlay2.setAttribute('data-src', 'overlays/lil_el.png'); // Update the data-src as well
}
cheatCodeInput.value = ''; // Clear the input field
}
}
});
// Function to handle clicks on overlay images
const overlayImagesContainer = document.getElementById('overlay-images-container');
overlayImagesContainer.addEventListener('click', function(event) {
const clickedImage = event.target;
// Ensure only images are clicked
if (clickedImage.tagName.toLowerCase() === 'img') {
const overlayImage = document.getElementById('overlay-image');
const overlaySrc = clickedImage.getAttribute('data-src');
// Load the clicked overlay image into the canvas overlay
overlayImage.src = overlaySrc;
overlayImage.style.display = 'block';
overlayImage.style.top = '0px';
overlayImage.style.left = '0px';
overlayImage.style.width = '100px';
overlayImage.style.height = 'auto';
}
});
});