<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Puzzle</title
     <link rel="icon" type="image/png" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPmEUzMrGwpyQ9mVdpNG2hlfuWu5FzvPDkRw&s">
                          
    <style>
                @font-face {
            font-family: 'AngryBirds';
            src: url('./angrybirds-regular.ttf') format('truetype');
        }

        body {
            font-family: 'AngryBirds', Arial, sans-serif;
            display: flex;
            background-image: url('https://preview.redd.it/how-would-you-describe-this-angry-birds-background-v0-9rpwenf2y3nd1.png?width=1800&format=png&auto=webp&s=2c5a79cd76dfff6f2477bd0f2e4cf050201e1780');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
           display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px;
        }

        #puzzle-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, 1fr);
            gap: 2px;
            width: 400px;
            height: 400px;
        }

        .puzzle-piece {
            width: 100%;
            height: 100%;
            cursor: pointer;
            background-size: 400px 400px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        #message {
            display: none;
            font-size: 20px;
            font-weight: bold;
            color: green;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>Solve Me</h1>
    </header>
    <main>
        <div id="puzzle-container"></div>
        <div id="message">Congratulations! You solved the puzzle!</div>
    </main>
    <footer>
        <p>Rearrange the tiles to solve the QR puzzle!</p>
    </footer>
    <script>
        const puzzleContainer = document.getElementById('puzzle-container');
        const message = document.getElementById('message');

        const qrImageUrl = 'https://firebasestorage.googleapis.com/v0/b/projak-2024.appspot.com/o/qr-code%20(9).png?alt=media&token=bdf0b4d6-04d8-4091-a38c-c26b35535616'; // Replace with your QR code URL

        let correctOrder = [];
        let currentOrder = [];
        let selectedTiles = [];

        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }

        function initPuzzle() {
            puzzleContainer.innerHTML = '';
            correctOrder = [];
            currentOrder = [];

            const size = 4;
            const pieceWidth = 400 / size;
            const pieceHeight = 400 / size;

            for (let row = 0; row < size; row++) {
                for (let col = 0; col < size; col++) {
                    const index = row * size + col;
                    correctOrder.push(index);
                    currentOrder.push(index);

                    const piece = document.createElement('div');
                    piece.classList.add('puzzle-piece');
                    piece.style.backgroundImage = `url('${qrImageUrl}')`;
                    piece.style.backgroundPosition = `${-col * pieceWidth}px ${-row * pieceHeight}px`;
                    piece.dataset.index = index;

                    puzzleContainer.appendChild(piece);

                    piece.addEventListener('click', () => selectTile(piece));
                }
            }

            shuffleArray(currentOrder);
            applyCurrentOrder();
        }

        function applyCurrentOrder() {
            const pieces = Array.from(puzzleContainer.children);
            currentOrder.forEach((orderIndex, i) => {
                pieces[orderIndex].style.order = i;
            });
        }

        function selectTile(tile) {
            if (selectedTiles.length === 0) {
                selectedTiles.push(tile);
                tile.style.border = '3px solid #ff5722';
            } else if (selectedTiles.length === 1 && tile !== selectedTiles[0]) {
                selectedTiles.push(tile);
                swapTilePositions();
            }
        }

        function swapTilePositions() {
            const [firstTile, secondTile] = selectedTiles;
            const firstIndex = currentOrder.indexOf(parseInt(firstTile.dataset.index));
            const secondIndex = currentOrder.indexOf(parseInt(secondTile.dataset.index));

            // Swap in the array
            [currentOrder[firstIndex], currentOrder[secondIndex]] = [currentOrder[secondIndex], currentOrder[firstIndex]];

            // Apply changes only to the swapped tiles
            const tempStyle = firstTile.style.order;
            firstTile.style.order = secondTile.style.order;
            secondTile.style.order = tempStyle;

            // Reset styles
            firstTile.style.border = '';
            secondTile.style.border = '';
            selectedTiles = [];

            // Check if solved
            if (JSON.stringify(correctOrder) === JSON.stringify(currentOrder)) {
                message.style.display = 'block';
            }
        }

        // Initialize the puzzle
        initPuzzle();
    </script>
</body>
</html>
