Open tech189 opened 1 year ago
yep, same here
Try using this as Main.js:
function $(element) {
if(document.querySelectorAll(element).length !== 1) {
return document.querySelectorAll(element);
} else {
return document.querySelector(element)
}
}
let puzzleElement = $(".puzzle");
let bnds = puzzleElement ? puzzleElement.getBoundingClientRect() : null;
const qr_images = ["01-01", "02-01", "03-01", "04-01",
"01-02", "02-02", "03-02", "04-02",
"01-03", "02-03", "03-03", "04-03",
"01-04", "02-04", "03-04", "04-04"];
// shuffle
function array_shuffle(inp) {
let tmp = [...inp]
let out = [];
while(out.length !== inp.length) {
let el = tmp[Math.floor(Math.random() * tmp.length)];
out.push(el)
tmp = tmp.filter((s => s !== el))
}
return out;
}
// generate qr puzzle in random order
array_shuffle(qr_images).forEach(image => {
let img = document.createElement("img");
img.src = `./tiles/${image}.png`
img.draggable = false;
$(".puzzle").appendChild(img)
})
// unflex puzzles
setTimeout(function() {
$(".puzzle img").forEach(img => {
let img_bnds = img.getBoundingClientRect();
img.style.left = img_bnds.left - bnds.left + "px"
img.style.top = img_bnds.top - bnds.top + "px"
})
$(".puzzle img").forEach(img => {
img.style.position = "absolute"
})
}, 10)
// custom round
const round_table = [0, 64, 128, 192]
function custom_round(num) {
let working = [];
round_table.forEach(round => {
if(num - 30 <= round) {
working.push(round)
}
})
return working[0];
}
// puzzle focus
let focusedImg;
document.querySelector(".puzzle").addEventListener("mousedown", (e) => {
if (e.target.tagName.toLowerCase() !== "img") return;
focusedImg = e.target;
focusedImg.style.zIndex = 9;
});
document.querySelector(".puzzle").addEventListener("mouseup", (e) => {
if (focusedImg) {
focusedImg.style.zIndex = "";
focusedImg = null;
}
});
// drag puzzles
document.querySelector(".puzzle").addEventListener("mousemove", (e) => {
if (!focusedImg || e.buttons !== 1 || e.target.tagName.toLowerCase() !== "img" || focusedImg !== e.target) return;
let img = e.target;
if (img.style) {
img.style.left = e.pageX - bnds.left - 30 + "px";
img.style.top = e.pageY - bnds.top - 30 + "px";
}
});
// reset bounds when resized + gray overlay positioning
window.addEventListener("resize", () => {
puzzleElement = $(".puzzle");
bnds = puzzleElement ? puzzleElement.getBoundingClientRect() : null;
// Check if puzzleElement is truthy before accessing its properties
if (puzzleElement) {
$(".puzzle-gray-overlay").style.left = bnds.left + "px";
$(".puzzle-gray-overlay").style.top = bnds.top + "px";
}
});
// snap to grid
$(".snap").addEventListener("click", () => {
$(".puzzle img").forEach(img => {
img.style.left = custom_round(parseInt(img.style.left)) + "px"
img.style.top = custom_round(parseInt(img.style.top)) + "px"
})
})
Works for me! Please send a pull request!
The puzzle loads but the tiles don't move when you click and drag them
Tested on Firefox 116.0.3 and Edge 116.0.1938.54
Console errors: