QR Puzzle is not clickable

[tech189]

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:

Uncaught TypeError: e.path is undefined
    <anonymous> https://ftde0.github.io/qr_puzzle/main.js:69
main.js:69:8
Uncaught TypeError: e.path is undefined
    <anonymous> https://ftde0.github.io/qr_puzzle/main.js:81
9 main.js:81:8
Uncaught TypeError: focusedImg is undefined
    <anonymous> https://ftde0.github.io/qr_puzzle/main.js:75
main.js:75:5
Uncaught TypeError: e.path is undefined
    <anonymous> https://ftde0.github.io/qr_puzzle/main.js:69
main.js:69:8
Uncaught TypeError: e.path is undefined
    <anonymous> https://ftde0.github.io/qr_puzzle/main.js:81
14 main.js:81:8
Uncaught TypeError: focusedImg is undefined
    <anonymous> https://ftde0.github.io/qr_puzzle/main.js:75
main.js:75:5
Uncaught TypeError: e.path is undefined
    <anonymous> https://ftde0.github.io/qr_puzzle/main.js:69
main.js:69:8
Uncaught TypeError: e.path is undefined
    <anonymous> https://ftde0.github.io/qr_puzzle/main.js:81
9 main.js:81:8
Uncaught TypeError: $(...).style is undefined
    <anonymous> https://ftde0.github.io/qr_puzzle/main.js:91
3 main.js:91:6

yep, same here

[kjart-alt]

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"
    })
})

[tech189]

Works for me! Please send a pull request!