Puzzle J\u00e1t\u00e9k<\/title>\n <link rel=\"stylesheet\" href=\"\/egyseges-stilus.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Baloo+2&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Puzzle specifikus st\u00edlusok *\/\n body {\n font-family: 'Baloo 2', cursive, Arial, sans-serif;\n overflow-x: hidden; \/* V\u00edzszintes g\u00f6rget\u00e9s megakad\u00e1lyoz\u00e1sa *\/\n }\n\n .container {\n width: 100%;\n max-width: 1000px;\n margin: 10px auto;\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);\n padding: 15px;\n border-radius: 12px;\n box-sizing: border-box;\n }\n\n #puzzle-container, #fullscreen-puzzle-container {\n position: relative;\n margin: 15px auto;\n border: 3px solid var(--accent-color);\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);\n background-color: var(--secondary-bg);\n width: min(85vw, 85vh, 500px); \/* Dinamikus m\u00e9retez\u00e9s *\/\n height: min(85vw, 85vh, 500px);\n max-width: 500px;\n max-height: 500px;\n }\n\n .fullscreen #puzzle-container, .fullscreen #fullscreen-puzzle-container {\n width: min(90vw, 90vh);\n height: min(90vw, 90vh);\n }\n\n .puzzle-piece {\n position: absolute;\n box-sizing: border-box;\n cursor: pointer;\n background-size: cover;\n transition: all 0.2s ease;\n border: 2px solid #fff;\n border-radius: 6px;\n box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);\n }\n\n .puzzle-piece:hover {\n transform: scale(1.03); \/* Kisebb hover effekt mobilon *\/\n z-index: 10;\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);\n border-color: var(--highlight-color);\n }\n\n .puzzle-piece.selected {\n border: 3px solid var(--highlight-color);\n box-shadow: 0 0 12px var(--highlight-color);\n z-index: 20;\n }\n\n .controls {\n margin: 15px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n }\n\n .difficulty-container {\n display: flex;\n gap: 8px;\n margin-bottom: 8px;\n justify-content: center;\n flex-wrap: wrap;\n width: 100%;\n }\n\n .button-container {\n display: flex;\n gap: 8px;\n margin-bottom: 8px;\n justify-content: center;\n flex-wrap: wrap;\n width: 100%;\n }\n\n .difficulty-btn {\n background: var(--secondary-bg);\n color: var(--text-color);\n border: 2px solid var(--accent-color);\n border-radius: 25px;\n padding: 8px 16px;\n font-size: 0.9em;\n cursor: pointer;\n transition: all 0.3s;\n font-weight: bold;\n box-shadow: 0 2px 4px rgba(0,0,0,0.15);\n min-width: 80px; \/* Minimum sz\u00e9less\u00e9g *\/\n text-align: center;\n }\n\n .difficulty-btn:hover {\n background: var(--accent-color);\n color: #fff;\n transform: scale(1.02);\n border-color: var(--accent-color);\n }\n\n .difficulty-btn.active {\n background: var(--highlight-color);\n color: #fff;\n border-color: var(--highlight-color);\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);\n }\n\n .timer {\n font-size: 1.2em;\n margin: 10px 0;\n color: var(--text-color);\n font-weight: bold;\n text-align: center;\n }\n\n #completion-message {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 100;\n align-items: center;\n justify-content: center;\n padding: 20px;\n box-sizing: border-box;\n }\n\n .message-content {\n background-color: var(--secondary-bg);\n color: var(--text-color);\n padding: 25px;\n border-radius: 12px;\n text-align: center;\n width: 90%;\n max-width: 400px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\n animation: pop-in 0.5s;\n }\n\n .completion-buttons {\n display: flex;\n gap: 12px;\n justify-content: center;\n margin-top: 15px;\n flex-wrap: wrap;\n }\n\n @keyframes pop-in {\n 0% { transform: scale(0.5); opacity: 0; }\n 100% { transform: scale(1); opacity: 1; }\n }\n\n .message-content h2 {\n margin-top: 0;\n font-size: 1.5em;\n }\n\n .confetti {\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: var(--accent-color);\n animation: confetti-fall 4s linear infinite;\n }\n \n .confetti.alt-color {\n background-color: var(--highlight-color);\n }\n\n @keyframes confetti-fall {\n 0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }\n 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }\n }\n\n .progress-container {\n width: 100%;\n max-width: 300px;\n background-color: var(--primary-bg);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n margin: 12px auto;\n overflow: hidden;\n }\n\n .progress-bar {\n height: 18px;\n background-color: var(--accent-color);\n width: 0%;\n transition: width 0.3s;\n border-radius: 6px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .progress-text {\n color: #fff;\n font-weight: bold;\n font-size: 0.8em;\n text-shadow: 1px 1px 2px rgba(0,0,0,0.5);\n }\n\n .back-button, .home-button-container {\n margin-top: 15px;\n text-align: center;\n }\n\n .btn svg {\n width: 18px;\n height: 18px;\n }\n\n .fullscreen-container {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--primary-bg);\n z-index: 50;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 15px;\n box-sizing: border-box;\n }\n\n .fullscreen-controls {\n margin-bottom: 15px;\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n justify-content: center;\n width: 100%;\n }\n\n .exit-fullscreen {\n background-color: var(--highlight-color);\n color: white;\n border: none;\n border-radius: 50%;\n width: 35px;\n height: 35px;\n font-size: 18px;\n line-height: 35px;\n text-align: center;\n cursor: pointer;\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n z-index: 60;\n position: absolute;\n top: 15px;\n right: 15px;\n }\n\n .exit-fullscreen:hover {\n background-color: color-mix(in srgb, var(--highlight-color) 80%, black);\n }\n\n \/* Mobil optimaliz\u00e1ci\u00f3k *\/\n @media (max-width: 768px) {\n .container {\n padding: 8px;\n margin: 5px auto;\n }\n\n #puzzle-container, #fullscreen-puzzle-container {\n width: min(90vw, 90vh, 400px);\n height: min(90vw, 90vh, 400px);\n border-width: 2px;\n }\n\n .difficulty-container, .button-container {\n gap: 6px;\n }\n\n .difficulty-btn {\n font-size: 0.8em;\n padding: 6px 12px;\n min-width: 70px;\n }\n\n .btn {\n font-size: 0.9em;\n padding: 8px 16px;\n }\n\n .timer {\n font-size: 1.1em;\n margin: 8px 0;\n }\n\n .message-content {\n padding: 20px;\n width: 95%;\n }\n\n .message-content h2 {\n font-size: 1.3em;\n }\n\n .completion-buttons {\n gap: 8px;\n }\n\n .progress-container {\n max-width: 250px;\n }\n\n .progress-bar {\n height: 16px;\n }\n\n .progress-text {\n font-size: 0.75em;\n }\n\n .exit-fullscreen {\n width: 30px;\n height: 30px;\n font-size: 16px;\n line-height: 30px;\n top: 10px;\n right: 10px;\n }\n\n .fullscreen-controls {\n margin-bottom: 10px;\n }\n }\n\n \/* Extra kis k\u00e9perny\u0151k (< 480px) *\/\n @media (max-width: 480px) {\n .container {\n padding: 5px;\n }\n\n #puzzle-container, #fullscreen-puzzle-container {\n width: min(95vw, 85vh, 350px);\n height: min(95vw, 85vh, 350px);\n }\n\n .difficulty-btn {\n font-size: 0.75em;\n padding: 5px 10px;\n min-width: 60px;\n }\n\n .btn {\n font-size: 0.8em;\n padding: 6px 12px;\n }\n\n .timer {\n font-size: 1em;\n }\n\n .message-content h2 {\n font-size: 1.2em;\n }\n\n .progress-container {\n max-width: 200px;\n }\n\n .difficulty-container, .button-container {\n flex-direction: column;\n align-items: center;\n gap: 4px;\n }\n\n .completion-buttons {\n flex-direction: column;\n align-items: center;\n }\n }\n\n \/* Landscape orient\u00e1ci\u00f3 mobilon *\/\n @media (max-height: 600px) and (orientation: landscape) {\n .container {\n padding: 5px;\n }\n\n #puzzle-container, #fullscreen-puzzle-container {\n width: min(60vh, 60vw, 300px);\n height: min(60vh, 60vw, 300px);\n }\n\n .controls {\n margin: 8px 0;\n gap: 8px;\n }\n\n .timer {\n font-size: 1em;\n margin: 5px 0;\n }\n\n .difficulty-btn {\n padding: 4px 8px;\n font-size: 0.7em;\n }\n\n .btn {\n padding: 5px 10px;\n font-size: 0.8em;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\" id=\"main-container\">\n <div class=\"controls\">\n <div class=\"difficulty-container\">\n <button class=\"difficulty-btn active\" data-size=\"2\">K\u00f6nny\u0171 (2\u00d72)<\/button>\n <button class=\"difficulty-btn\" data-size=\"3\">K\u00f6zepes (3\u00d73)<\/button>\n <button class=\"difficulty-btn\" data-size=\"4\">Neh\u00e9z (4\u00d74)<\/button>\n <\/div>\n\n <div class=\"button-container\">\n <button id=\"start-button\" class=\"btn\">\u00daj J\u00e1t\u00e9k<\/button>\n <button id=\"fullscreen-button\" class=\"btn\">Teljes K\u00e9perny\u0151<\/button>\n <\/div>\n <\/div>\n\n <div class=\"progress-container\">\n <div class=\"progress-bar\">\n <div class=\"progress-text\">0%<\/div>\n <\/div>\n <\/div>\n\n <div class=\"timer\">Id\u0151: 0 m\u00e1sodperc<\/div>\n\n <div id=\"puzzle-container\"><\/div>\n\n <div class=\"home-button-container\">\n <a href=\"https:\/\/book.filemondr.hu\/index.php\/\" class=\"btn\" id=\"back-to-home-main\" aria-label=\"F\u0151oldal\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M0 0h24v24H0z\" fill=\"none\"\/>\n <path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <div id=\"fullscreen-view\" style=\"display: none;\">\n <div class=\"fullscreen-container\">\n <button class=\"exit-fullscreen\" id=\"exit-fullscreen\" aria-label=\"Kil\u00e9p\u00e9s a teljes k\u00e9perny\u0151b\u0151l\">×<\/button>\n\n <div class=\"fullscreen-controls\">\n <div class=\"difficulty-container\">\n <button class=\"difficulty-btn active\" data-size=\"2\">K\u00f6nny\u0171 (2\u00d72)<\/button>\n <button class=\"difficulty-btn\" data-size=\"3\">K\u00f6zepes (3\u00d73)<\/button>\n <button class=\"difficulty-btn\" data-size=\"4\">Neh\u00e9z (4\u00d74)<\/button>\n <\/div>\n <button id=\"fullscreen-start-button\" class=\"btn\">\u00daj J\u00e1t\u00e9k<\/button>\n <\/div>\n\n <div class=\"progress-container\">\n <div class=\"progress-bar\">\n <div class=\"progress-text\">0%<\/div>\n <\/div>\n <\/div>\n <div class=\"timer\">Id\u0151: 0 m\u00e1sodperc<\/div>\n <div id=\"fullscreen-puzzle-container\"><\/div>\n <\/div>\n <\/div>\n\n <div id=\"completion-message\">\n <div class=\"message-content\">\n <h2>Gratul\u00e1lunk!<\/h2>\n <p>Sikeresen kiraktad a puzzle-t!<\/p>\n <div id=\"completion-time\"><\/div>\n <div class=\"completion-buttons\">\n <button id=\"play-again\" class=\"btn\">\u00daj J\u00e1t\u00e9k<\/button>\n <a href=\"https:\/\/book.filemondr.hu\/index.php\/\" class=\"btn\" id=\"go-to-home-completed\" aria-label=\"F\u0151oldal\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M0 0h24v24H0z\" fill=\"none\"\/>\n <path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <audio id=\"swap-sound\" src=\"https:\/\/book.filemondr.hu\/hangok\/swap-sound.mp3\" preload=\"auto\"><\/audio>\n <audio id=\"completion-sound\" src=\"https:\/\/book.filemondr.hu\/hangok\/completion-sound.mp3\" preload=\"auto\"><\/audio>\n\n <script>\n window.onload = function() {\n const puzzleContainer = document.getElementById('puzzle-container');\n const fullscreenPuzzleContainer = document.getElementById('fullscreen-puzzle-container');\n const startButton = document.getElementById('start-button');\n const fullscreenStartButton = document.getElementById('fullscreen-start-button');\n const difficultyButtons = document.querySelectorAll('.difficulty-btn');\n const timerElements = document.querySelectorAll('.timer');\n const completionMessage = document.getElementById('completion-message');\n const playAgainButton = document.getElementById('play-again');\n const progressBars = document.querySelectorAll('.progress-bar');\n const progressTexts = document.querySelectorAll('.progress-text');\n const completionTimeElement = document.getElementById('completion-time');\n const fullscreenButton = document.getElementById('fullscreen-button');\n const fullscreenView = document.getElementById('fullscreen-view');\n const exitFullscreenButton = document.getElementById('exit-fullscreen');\n const mainContainer = document.getElementById('main-container');\n\n const swapSound = document.getElementById('swap-sound');\n const completionSound = document.getElementById('completion-sound');\n const KEP_MAX = 60;\n\n let pieces = [];\n let puzzleWidth = 400;\n let puzzleHeight = 400;\n let gridSize = 2;\n let pieceWidth, pieceHeight;\n let timerInterval;\n let seconds = 0;\n let isPlaying = false;\n let selectedPiece = null;\n let correctPieces = 0;\n let totalPieces = 0;\n let isFullscreen = false;\n let currentContainer = puzzleContainer;\n let currentImageUrl = '';\n\n const imageDirectory = 'https:\/\/book.filemondr.hu\/kepek\/';\n const imageFiles = Array.from({ length: KEP_MAX }, (_, i) => `${(i + 1).toString().padStart(2, '0')}.png`);\n\n function getRandomImage() {\n const randomIndex = Math.floor(Math.random() * imageFiles.length);\n return imageDirectory + imageFiles[randomIndex];\n }\n\n fullscreenButton.addEventListener('click', function() {\n isFullscreen = true;\n fullscreenView.style.display = 'flex';\n mainContainer.style.display = 'none';\n currentContainer = fullscreenPuzzleContainer;\n if (isPlaying) {\n clearInterval(timerInterval);\n initializePuzzle();\n } else {\n setPuzzleDimensions();\n if (currentImageUrl) createPieces();\n }\n });\n\n exitFullscreenButton.addEventListener('click', function() {\n isFullscreen = false;\n fullscreenView.style.display = 'none';\n mainContainer.style.display = 'block';\n currentContainer = puzzleContainer;\n if (isPlaying) {\n clearInterval(timerInterval);\n initializePuzzle();\n } else {\n setPuzzleDimensions();\n if (currentImageUrl) createPieces();\n }\n });\n\n difficultyButtons.forEach(button => {\n button.addEventListener('click', function() {\n const newSize = parseInt(this.dataset.size);\n if (gridSize !== newSize) {\n gridSize = newSize;\n document.querySelectorAll('.difficulty-btn').forEach(btn => {\n btn.classList.remove('active');\n if (parseInt(btn.dataset.size) === gridSize) {\n btn.classList.add('active');\n }\n });\n if (isPlaying || currentImageUrl) {\n initializePuzzle();\n }\n }\n });\n });\n \n function setPuzzleDimensions() {\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n \n \/\/ Dinamikus m\u00e9retez\u00e9s a viewport alapj\u00e1n\n if (isFullscreen) {\n puzzleWidth = Math.min(viewportWidth * 0.9, viewportHeight * 0.7, 600);\n } else {\n puzzleWidth = Math.min(viewportWidth * 0.85, viewportHeight * 0.6, 500);\n }\n \n puzzleHeight = puzzleWidth;\n currentContainer.style.width = puzzleWidth + 'px';\n currentContainer.style.height = puzzleHeight + 'px';\n pieceWidth = puzzleWidth \/ gridSize;\n pieceHeight = puzzleHeight \/ gridSize;\n }\n\n function createPieces() {\n currentContainer.innerHTML = '';\n pieces = [];\n totalPieces = gridSize * gridSize;\n\n for (let i = 0; i < totalPieces; i++) {\n const piece = document.createElement('div');\n piece.className = 'puzzle-piece';\n piece.style.width = pieceWidth + 'px';\n piece.style.height = pieceHeight + 'px';\n const row = Math.floor(i \/ gridSize);\n const col = i % gridSize;\n piece.style.backgroundImage = `url(${currentImageUrl})`;\n piece.style.backgroundSize = `${puzzleWidth}px ${puzzleHeight}px`;\n piece.style.backgroundPosition = `-${col * pieceWidth}px -${row * pieceHeight}px`;\n piece.dataset.correctRow = row;\n piece.dataset.correctCol = col;\n pieces.push(piece);\n currentContainer.appendChild(piece);\n }\n shufflePieces();\n }\n\n function initializePuzzle() {\n if (isPlaying) {\n clearInterval(timerInterval);\n }\n currentImageUrl = getRandomImage();\n const preloadImage = new Image();\n preloadImage.src = currentImageUrl;\n\n preloadImage.onload = function() {\n currentContainer.innerHTML = '';\n pieces = [];\n seconds = 0;\n timerElements.forEach(el => el.textContent = 'Id\u0151: 0 m\u00e1sodperc');\n completionMessage.style.display = 'none';\n selectedPiece = null;\n correctPieces = 0;\n \n setPuzzleDimensions();\n createPieces();\n\n isPlaying = true;\n timerInterval = setInterval(() => {\n seconds++;\n timerElements.forEach(el => el.textContent = `Id\u0151: ${seconds} m\u00e1sodperc`);\n }, 1000);\n updateProgressBar(0);\n };\n preloadImage.onerror = function() {\n alert('A k\u00e9p bet\u00f6lt\u00e9se sikertelen. Pr\u00f3b\u00e1lj meg egy m\u00e1sikat!');\n initializePuzzle();\n };\n }\n\n function shufflePieces() {\n for (let i = pieces.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [pieces[i], pieces[j]] = [pieces[j], pieces[i]];\n }\n pieces.forEach((piece, index) => {\n const row = Math.floor(index \/ gridSize);\n const col = index % gridSize;\n piece.style.top = (row * pieceHeight) + 'px';\n piece.style.left = (col * pieceWidth) + 'px';\n piece.dataset.currentRow = row;\n piece.dataset.currentCol = col;\n piece.addEventListener('click', () => handlePieceClick(piece));\n });\n }\n\n function handlePieceClick(piece) {\n if (!isPlaying) return;\n if (!selectedPiece) {\n selectedPiece = piece;\n piece.classList.add('selected');\n } else if (selectedPiece === piece) {\n selectedPiece.classList.remove('selected');\n selectedPiece = null;\n } else {\n const tempTop = selectedPiece.style.top;\n const tempLeft = selectedPiece.style.left;\n const tempRow = selectedPiece.dataset.currentRow;\n const tempCol = selectedPiece.dataset.currentCol;\n\n selectedPiece.style.top = piece.style.top;\n selectedPiece.style.left = piece.style.left;\n selectedPiece.dataset.currentRow = piece.dataset.currentRow;\n selectedPiece.dataset.currentCol = piece.dataset.currentCol;\n\n piece.style.top = tempTop;\n piece.style.left = tempLeft;\n piece.dataset.currentRow = tempRow;\n piece.dataset.currentCol = tempCol;\n\n selectedPiece.classList.remove('selected');\n selectedPiece = null;\n playSwapSound();\n checkCompletion();\n }\n }\n\n function playSwapSound() {\n swapSound.currentTime = 0;\n swapSound.play().catch(e => console.warn(\"Swap sound error:\", e));\n }\n\n function playCompletionSound() {\n completionSound.currentTime = 0;\n completionSound.play().catch(e => console.warn(\"Completion sound error:\", e));\n }\n\n function updateProgressBar(percentage) {\n progressBars.forEach(bar => bar.style.width = percentage + '%');\n progressTexts.forEach(text => text.textContent = percentage + '%');\n }\n\n function checkCompletion() {\n correctPieces = 0;\n pieces.forEach(piece => {\n if (piece.dataset.currentRow === piece.dataset.correctRow &&\n piece.dataset.currentCol === piece.dataset.correctCol) {\n correctPieces++;\n }\n });\n const percentage = Math.floor((correctPieces \/ totalPieces) * 100);\n updateProgressBar(percentage);\n\n if (correctPieces === totalPieces && totalPieces > 0) {\n clearInterval(timerInterval);\n isPlaying = false;\n playCompletionSound();\n createConfetti();\n completionTimeElement.textContent = `Id\u0151: ${seconds} m\u00e1sodperc`;\n setTimeout(() => {\n completionMessage.style.display = 'flex';\n }, 500);\n }\n }\n\n function createConfetti() {\n const confettiContainer = document.body;\n for (let i = 0; i < 50; i++) { \/\/ Kevesebb konfetti mobilon\n const confetti = document.createElement('div');\n confetti.className = 'confetti';\n if (Math.random() > 0.5) confetti.classList.add('alt-color');\n confetti.style.left = Math.random() * 100 + 'vw';\n confetti.style.animationDelay = Math.random() * 4 + 's';\n if (Math.random() > 0.5) confetti.style.borderRadius = '50%';\n else if (Math.random() > 0.5) {\n confetti.style.width = '4px';\n confetti.style.height = '12px';\n }\n confettiContainer.appendChild(confetti);\n setTimeout(() => confetti.remove(), 4000);\n }\n }\n\n startButton.addEventListener('click', initializePuzzle);\n fullscreenStartButton.addEventListener('click', initializePuzzle);\n playAgainButton.addEventListener('click', () => {\n completionMessage.style.display = 'none';\n initializePuzzle();\n });\n\n \/\/ Orient\u00e1ci\u00f3 v\u00e1ltoz\u00e1s \u00e9s ablak \u00e1tm\u00e9retez\u00e9s kezel\u00e9se\n function handleResize() {\n if (currentImageUrl) {\n setPuzzleDimensions();\n if (pieces.length > 0) {\n pieces.forEach(piece => {\n piece.style.width = pieceWidth + 'px';\n piece.style.height = pieceHeight + 'px';\n piece.style.backgroundSize = `${puzzleWidth}px ${puzzleHeight}px`;\n piece.style.backgroundPosition = `-${piece.dataset.correctCol * pieceWidth}px -${piece.dataset.correctRow * pieceHeight}px`;\n piece.style.top = (piece.dataset.currentRow * pieceHeight) + 'px';\n piece.style.left = (piece.dataset.currentCol * pieceWidth) + 'px';\n });\n }\n }\n }\n\n window.addEventListener('resize', handleResize);\n window.addEventListener('orientationchange', () => {\n setTimeout(handleResize, 100); \/\/ Kis k\u00e9sleltet\u00e9s az orient\u00e1ci\u00f3 v\u00e1ltoz\u00e1s ut\u00e1n\n });\n \n \/\/ Kezdeti k\u00e9p bet\u00f6lt\u00e9se\n currentImageUrl = getRandomImage();\n const initialPreloadImage = new Image();\n initialPreloadImage.src = currentImageUrl;\n initialPreloadImage.onload = () => {\n setPuzzleDimensions();\n createPieces();\n updateProgressBar(0);\n };\n initialPreloadImage.onerror = () => {\n alert('A kezdeti k\u00e9p bet\u00f6lt\u00e9se sikertelen.');\n };\n\n swapSound.load();\n completionSound.load();\n };\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Puzzle J\u00e1t\u00e9k K\u00f6nny\u0171 (2\u00d72) K\u00f6zepes (3\u00d73) Neh\u00e9z (4\u00d74) \u00daj J\u00e1t\u00e9k Teljes K\u00e9perny\u0151 0% Id\u0151: 0 m\u00e1sodperc × K\u00f6nny\u0171 (2\u00d72) K\u00f6zepes (3\u00d73) Neh\u00e9z (4\u00d74) \u00daj J\u00e1t\u00e9k 0% Id\u0151: 0 m\u00e1sodperc Gratul\u00e1lunk! Sikeresen kiraktad a puzzle-t! \u00daj J\u00e1t\u00e9k<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-179","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages\/179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/comments?post=179"}],"version-history":[{"count":31,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages\/179\/revisions"}],"predecessor-version":[{"id":501,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages\/179\/revisions\/501"}],"wp:attachment":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/media?parent=179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":179,"date":"2025-05-07T19:19:08","date_gmt":"2025-05-07T19:19:08","guid":{"rendered":"https:\/\/book.filemondr.hu\/?page_id=179"},"modified":"2025-06-06T16:29:46","modified_gmt":"2025-06-06T16:29:46","slug":"puzzle","status":"publish","type":"page","link":"https:\/\/book.filemondr.hu\/index.php\/puzzle\/","title":{"rendered":"Puzzle"},"content":{"rendered":"\n\n\n\n \n \n Puzzle J\u00e1t\u00e9k<\/title>\n <link rel=\"stylesheet\" href=\"\/egyseges-stilus.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Baloo+2&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Puzzle specifikus st\u00edlusok *\/\n body {\n font-family: 'Baloo 2', cursive, Arial, sans-serif;\n overflow-x: hidden; \/* V\u00edzszintes g\u00f6rget\u00e9s megakad\u00e1lyoz\u00e1sa *\/\n }\n\n .container {\n width: 100%;\n max-width: 1000px;\n margin: 10px auto;\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);\n padding: 15px;\n border-radius: 12px;\n box-sizing: border-box;\n }\n\n #puzzle-container, #fullscreen-puzzle-container {\n position: relative;\n margin: 15px auto;\n border: 3px solid var(--accent-color);\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);\n background-color: var(--secondary-bg);\n width: min(85vw, 85vh, 500px); \/* Dinamikus m\u00e9retez\u00e9s *\/\n height: min(85vw, 85vh, 500px);\n max-width: 500px;\n max-height: 500px;\n }\n\n .fullscreen #puzzle-container, .fullscreen #fullscreen-puzzle-container {\n width: min(90vw, 90vh);\n height: min(90vw, 90vh);\n }\n\n .puzzle-piece {\n position: absolute;\n box-sizing: border-box;\n cursor: pointer;\n background-size: cover;\n transition: all 0.2s ease;\n border: 2px solid #fff;\n border-radius: 6px;\n box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);\n }\n\n .puzzle-piece:hover {\n transform: scale(1.03); \/* Kisebb hover effekt mobilon *\/\n z-index: 10;\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);\n border-color: var(--highlight-color);\n }\n\n .puzzle-piece.selected {\n border: 3px solid var(--highlight-color);\n box-shadow: 0 0 12px var(--highlight-color);\n z-index: 20;\n }\n\n .controls {\n margin: 15px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n }\n\n .difficulty-container {\n display: flex;\n gap: 8px;\n margin-bottom: 8px;\n justify-content: center;\n flex-wrap: wrap;\n width: 100%;\n }\n\n .button-container {\n display: flex;\n gap: 8px;\n margin-bottom: 8px;\n justify-content: center;\n flex-wrap: wrap;\n width: 100%;\n }\n\n .difficulty-btn {\n background: var(--secondary-bg);\n color: var(--text-color);\n border: 2px solid var(--accent-color);\n border-radius: 25px;\n padding: 8px 16px;\n font-size: 0.9em;\n cursor: pointer;\n transition: all 0.3s;\n font-weight: bold;\n box-shadow: 0 2px 4px rgba(0,0,0,0.15);\n min-width: 80px; \/* Minimum sz\u00e9less\u00e9g *\/\n text-align: center;\n }\n\n .difficulty-btn:hover {\n background: var(--accent-color);\n color: #fff;\n transform: scale(1.02);\n border-color: var(--accent-color);\n }\n\n .difficulty-btn.active {\n background: var(--highlight-color);\n color: #fff;\n border-color: var(--highlight-color);\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);\n }\n\n .timer {\n font-size: 1.2em;\n margin: 10px 0;\n color: var(--text-color);\n font-weight: bold;\n text-align: center;\n }\n\n #completion-message {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 100;\n align-items: center;\n justify-content: center;\n padding: 20px;\n box-sizing: border-box;\n }\n\n .message-content {\n background-color: var(--secondary-bg);\n color: var(--text-color);\n padding: 25px;\n border-radius: 12px;\n text-align: center;\n width: 90%;\n max-width: 400px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\n animation: pop-in 0.5s;\n }\n\n .completion-buttons {\n display: flex;\n gap: 12px;\n justify-content: center;\n margin-top: 15px;\n flex-wrap: wrap;\n }\n\n @keyframes pop-in {\n 0% { transform: scale(0.5); opacity: 0; }\n 100% { transform: scale(1); opacity: 1; }\n }\n\n .message-content h2 {\n margin-top: 0;\n font-size: 1.5em;\n }\n\n .confetti {\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: var(--accent-color);\n animation: confetti-fall 4s linear infinite;\n }\n \n .confetti.alt-color {\n background-color: var(--highlight-color);\n }\n\n @keyframes confetti-fall {\n 0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }\n 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }\n }\n\n .progress-container {\n width: 100%;\n max-width: 300px;\n background-color: var(--primary-bg);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n margin: 12px auto;\n overflow: hidden;\n }\n\n .progress-bar {\n height: 18px;\n background-color: var(--accent-color);\n width: 0%;\n transition: width 0.3s;\n border-radius: 6px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .progress-text {\n color: #fff;\n font-weight: bold;\n font-size: 0.8em;\n text-shadow: 1px 1px 2px rgba(0,0,0,0.5);\n }\n\n .back-button, .home-button-container {\n margin-top: 15px;\n text-align: center;\n }\n\n .btn svg {\n width: 18px;\n height: 18px;\n }\n\n .fullscreen-container {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--primary-bg);\n z-index: 50;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 15px;\n box-sizing: border-box;\n }\n\n .fullscreen-controls {\n margin-bottom: 15px;\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n justify-content: center;\n width: 100%;\n }\n\n .exit-fullscreen {\n background-color: var(--highlight-color);\n color: white;\n border: none;\n border-radius: 50%;\n width: 35px;\n height: 35px;\n font-size: 18px;\n line-height: 35px;\n text-align: center;\n cursor: pointer;\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n z-index: 60;\n position: absolute;\n top: 15px;\n right: 15px;\n }\n\n .exit-fullscreen:hover {\n background-color: color-mix(in srgb, var(--highlight-color) 80%, black);\n }\n\n \/* Mobil optimaliz\u00e1ci\u00f3k *\/\n @media (max-width: 768px) {\n .container {\n padding: 8px;\n margin: 5px auto;\n }\n\n #puzzle-container, #fullscreen-puzzle-container {\n width: min(90vw, 90vh, 400px);\n height: min(90vw, 90vh, 400px);\n border-width: 2px;\n }\n\n .difficulty-container, .button-container {\n gap: 6px;\n }\n\n .difficulty-btn {\n font-size: 0.8em;\n padding: 6px 12px;\n min-width: 70px;\n }\n\n .btn {\n font-size: 0.9em;\n padding: 8px 16px;\n }\n\n .timer {\n font-size: 1.1em;\n margin: 8px 0;\n }\n\n .message-content {\n padding: 20px;\n width: 95%;\n }\n\n .message-content h2 {\n font-size: 1.3em;\n }\n\n .completion-buttons {\n gap: 8px;\n }\n\n .progress-container {\n max-width: 250px;\n }\n\n .progress-bar {\n height: 16px;\n }\n\n .progress-text {\n font-size: 0.75em;\n }\n\n .exit-fullscreen {\n width: 30px;\n height: 30px;\n font-size: 16px;\n line-height: 30px;\n top: 10px;\n right: 10px;\n }\n\n .fullscreen-controls {\n margin-bottom: 10px;\n }\n }\n\n \/* Extra kis k\u00e9perny\u0151k (< 480px) *\/\n @media (max-width: 480px) {\n .container {\n padding: 5px;\n }\n\n #puzzle-container, #fullscreen-puzzle-container {\n width: min(95vw, 85vh, 350px);\n height: min(95vw, 85vh, 350px);\n }\n\n .difficulty-btn {\n font-size: 0.75em;\n padding: 5px 10px;\n min-width: 60px;\n }\n\n .btn {\n font-size: 0.8em;\n padding: 6px 12px;\n }\n\n .timer {\n font-size: 1em;\n }\n\n .message-content h2 {\n font-size: 1.2em;\n }\n\n .progress-container {\n max-width: 200px;\n }\n\n .difficulty-container, .button-container {\n flex-direction: column;\n align-items: center;\n gap: 4px;\n }\n\n .completion-buttons {\n flex-direction: column;\n align-items: center;\n }\n }\n\n \/* Landscape orient\u00e1ci\u00f3 mobilon *\/\n @media (max-height: 600px) and (orientation: landscape) {\n .container {\n padding: 5px;\n }\n\n #puzzle-container, #fullscreen-puzzle-container {\n width: min(60vh, 60vw, 300px);\n height: min(60vh, 60vw, 300px);\n }\n\n .controls {\n margin: 8px 0;\n gap: 8px;\n }\n\n .timer {\n font-size: 1em;\n margin: 5px 0;\n }\n\n .difficulty-btn {\n padding: 4px 8px;\n font-size: 0.7em;\n }\n\n .btn {\n padding: 5px 10px;\n font-size: 0.8em;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\" id=\"main-container\">\n <div class=\"controls\">\n <div class=\"difficulty-container\">\n <button class=\"difficulty-btn active\" data-size=\"2\">K\u00f6nny\u0171 (2\u00d72)<\/button>\n <button class=\"difficulty-btn\" data-size=\"3\">K\u00f6zepes (3\u00d73)<\/button>\n <button class=\"difficulty-btn\" data-size=\"4\">Neh\u00e9z (4\u00d74)<\/button>\n <\/div>\n\n <div class=\"button-container\">\n <button id=\"start-button\" class=\"btn\">\u00daj J\u00e1t\u00e9k<\/button>\n <button id=\"fullscreen-button\" class=\"btn\">Teljes K\u00e9perny\u0151<\/button>\n <\/div>\n <\/div>\n\n <div class=\"progress-container\">\n <div class=\"progress-bar\">\n <div class=\"progress-text\">0%<\/div>\n <\/div>\n <\/div>\n\n <div class=\"timer\">Id\u0151: 0 m\u00e1sodperc<\/div>\n\n <div id=\"puzzle-container\"><\/div>\n\n <div class=\"home-button-container\">\n <a href=\"https:\/\/book.filemondr.hu\/index.php\/\" class=\"btn\" id=\"back-to-home-main\" aria-label=\"F\u0151oldal\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M0 0h24v24H0z\" fill=\"none\"\/>\n <path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <div id=\"fullscreen-view\" style=\"display: none;\">\n <div class=\"fullscreen-container\">\n <button class=\"exit-fullscreen\" id=\"exit-fullscreen\" aria-label=\"Kil\u00e9p\u00e9s a teljes k\u00e9perny\u0151b\u0151l\">×<\/button>\n\n <div class=\"fullscreen-controls\">\n <div class=\"difficulty-container\">\n <button class=\"difficulty-btn active\" data-size=\"2\">K\u00f6nny\u0171 (2\u00d72)<\/button>\n <button class=\"difficulty-btn\" data-size=\"3\">K\u00f6zepes (3\u00d73)<\/button>\n <button class=\"difficulty-btn\" data-size=\"4\">Neh\u00e9z (4\u00d74)<\/button>\n <\/div>\n <button id=\"fullscreen-start-button\" class=\"btn\">\u00daj J\u00e1t\u00e9k<\/button>\n <\/div>\n\n <div class=\"progress-container\">\n <div class=\"progress-bar\">\n <div class=\"progress-text\">0%<\/div>\n <\/div>\n <\/div>\n <div class=\"timer\">Id\u0151: 0 m\u00e1sodperc<\/div>\n <div id=\"fullscreen-puzzle-container\"><\/div>\n <\/div>\n <\/div>\n\n <div id=\"completion-message\">\n <div class=\"message-content\">\n <h2>Gratul\u00e1lunk!<\/h2>\n <p>Sikeresen kiraktad a puzzle-t!<\/p>\n <div id=\"completion-time\"><\/div>\n <div class=\"completion-buttons\">\n <button id=\"play-again\" class=\"btn\">\u00daj J\u00e1t\u00e9k<\/button>\n <a href=\"https:\/\/book.filemondr.hu\/index.php\/\" class=\"btn\" id=\"go-to-home-completed\" aria-label=\"F\u0151oldal\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M0 0h24v24H0z\" fill=\"none\"\/>\n <path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <audio id=\"swap-sound\" src=\"https:\/\/book.filemondr.hu\/hangok\/swap-sound.mp3\" preload=\"auto\"><\/audio>\n <audio id=\"completion-sound\" src=\"https:\/\/book.filemondr.hu\/hangok\/completion-sound.mp3\" preload=\"auto\"><\/audio>\n\n <script>\n window.onload = function() {\n const puzzleContainer = document.getElementById('puzzle-container');\n const fullscreenPuzzleContainer = document.getElementById('fullscreen-puzzle-container');\n const startButton = document.getElementById('start-button');\n const fullscreenStartButton = document.getElementById('fullscreen-start-button');\n const difficultyButtons = document.querySelectorAll('.difficulty-btn');\n const timerElements = document.querySelectorAll('.timer');\n const completionMessage = document.getElementById('completion-message');\n const playAgainButton = document.getElementById('play-again');\n const progressBars = document.querySelectorAll('.progress-bar');\n const progressTexts = document.querySelectorAll('.progress-text');\n const completionTimeElement = document.getElementById('completion-time');\n const fullscreenButton = document.getElementById('fullscreen-button');\n const fullscreenView = document.getElementById('fullscreen-view');\n const exitFullscreenButton = document.getElementById('exit-fullscreen');\n const mainContainer = document.getElementById('main-container');\n\n const swapSound = document.getElementById('swap-sound');\n const completionSound = document.getElementById('completion-sound');\n const KEP_MAX = 60;\n\n let pieces = [];\n let puzzleWidth = 400;\n let puzzleHeight = 400;\n let gridSize = 2;\n let pieceWidth, pieceHeight;\n let timerInterval;\n let seconds = 0;\n let isPlaying = false;\n let selectedPiece = null;\n let correctPieces = 0;\n let totalPieces = 0;\n let isFullscreen = false;\n let currentContainer = puzzleContainer;\n let currentImageUrl = '';\n\n const imageDirectory = 'https:\/\/book.filemondr.hu\/kepek\/';\n const imageFiles = Array.from({ length: KEP_MAX }, (_, i) => `${(i + 1).toString().padStart(2, '0')}.png`);\n\n function getRandomImage() {\n const randomIndex = Math.floor(Math.random() * imageFiles.length);\n return imageDirectory + imageFiles[randomIndex];\n }\n\n fullscreenButton.addEventListener('click', function() {\n isFullscreen = true;\n fullscreenView.style.display = 'flex';\n mainContainer.style.display = 'none';\n currentContainer = fullscreenPuzzleContainer;\n if (isPlaying) {\n clearInterval(timerInterval);\n initializePuzzle();\n } else {\n setPuzzleDimensions();\n if (currentImageUrl) createPieces();\n }\n });\n\n exitFullscreenButton.addEventListener('click', function() {\n isFullscreen = false;\n fullscreenView.style.display = 'none';\n mainContainer.style.display = 'block';\n currentContainer = puzzleContainer;\n if (isPlaying) {\n clearInterval(timerInterval);\n initializePuzzle();\n } else {\n setPuzzleDimensions();\n if (currentImageUrl) createPieces();\n }\n });\n\n difficultyButtons.forEach(button => {\n button.addEventListener('click', function() {\n const newSize = parseInt(this.dataset.size);\n if (gridSize !== newSize) {\n gridSize = newSize;\n document.querySelectorAll('.difficulty-btn').forEach(btn => {\n btn.classList.remove('active');\n if (parseInt(btn.dataset.size) === gridSize) {\n btn.classList.add('active');\n }\n });\n if (isPlaying || currentImageUrl) {\n initializePuzzle();\n }\n }\n });\n });\n \n function setPuzzleDimensions() {\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n \n \/\/ Dinamikus m\u00e9retez\u00e9s a viewport alapj\u00e1n\n if (isFullscreen) {\n puzzleWidth = Math.min(viewportWidth * 0.9, viewportHeight * 0.7, 600);\n } else {\n puzzleWidth = Math.min(viewportWidth * 0.85, viewportHeight * 0.6, 500);\n }\n \n puzzleHeight = puzzleWidth;\n currentContainer.style.width = puzzleWidth + 'px';\n currentContainer.style.height = puzzleHeight + 'px';\n pieceWidth = puzzleWidth \/ gridSize;\n pieceHeight = puzzleHeight \/ gridSize;\n }\n\n function createPieces() {\n currentContainer.innerHTML = '';\n pieces = [];\n totalPieces = gridSize * gridSize;\n\n for (let i = 0; i < totalPieces; i++) {\n const piece = document.createElement('div');\n piece.className = 'puzzle-piece';\n piece.style.width = pieceWidth + 'px';\n piece.style.height = pieceHeight + 'px';\n const row = Math.floor(i \/ gridSize);\n const col = i % gridSize;\n piece.style.backgroundImage = `url(${currentImageUrl})`;\n piece.style.backgroundSize = `${puzzleWidth}px ${puzzleHeight}px`;\n piece.style.backgroundPosition = `-${col * pieceWidth}px -${row * pieceHeight}px`;\n piece.dataset.correctRow = row;\n piece.dataset.correctCol = col;\n pieces.push(piece);\n currentContainer.appendChild(piece);\n }\n shufflePieces();\n }\n\n function initializePuzzle() {\n if (isPlaying) {\n clearInterval(timerInterval);\n }\n currentImageUrl = getRandomImage();\n const preloadImage = new Image();\n preloadImage.src = currentImageUrl;\n\n preloadImage.onload = function() {\n currentContainer.innerHTML = '';\n pieces = [];\n seconds = 0;\n timerElements.forEach(el => el.textContent = 'Id\u0151: 0 m\u00e1sodperc');\n completionMessage.style.display = 'none';\n selectedPiece = null;\n correctPieces = 0;\n \n setPuzzleDimensions();\n createPieces();\n\n isPlaying = true;\n timerInterval = setInterval(() => {\n seconds++;\n timerElements.forEach(el => el.textContent = `Id\u0151: ${seconds} m\u00e1sodperc`);\n }, 1000);\n updateProgressBar(0);\n };\n preloadImage.onerror = function() {\n alert('A k\u00e9p bet\u00f6lt\u00e9se sikertelen. Pr\u00f3b\u00e1lj meg egy m\u00e1sikat!');\n initializePuzzle();\n };\n }\n\n function shufflePieces() {\n for (let i = pieces.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [pieces[i], pieces[j]] = [pieces[j], pieces[i]];\n }\n pieces.forEach((piece, index) => {\n const row = Math.floor(index \/ gridSize);\n const col = index % gridSize;\n piece.style.top = (row * pieceHeight) + 'px';\n piece.style.left = (col * pieceWidth) + 'px';\n piece.dataset.currentRow = row;\n piece.dataset.currentCol = col;\n piece.addEventListener('click', () => handlePieceClick(piece));\n });\n }\n\n function handlePieceClick(piece) {\n if (!isPlaying) return;\n if (!selectedPiece) {\n selectedPiece = piece;\n piece.classList.add('selected');\n } else if (selectedPiece === piece) {\n selectedPiece.classList.remove('selected');\n selectedPiece = null;\n } else {\n const tempTop = selectedPiece.style.top;\n const tempLeft = selectedPiece.style.left;\n const tempRow = selectedPiece.dataset.currentRow;\n const tempCol = selectedPiece.dataset.currentCol;\n\n selectedPiece.style.top = piece.style.top;\n selectedPiece.style.left = piece.style.left;\n selectedPiece.dataset.currentRow = piece.dataset.currentRow;\n selectedPiece.dataset.currentCol = piece.dataset.currentCol;\n\n piece.style.top = tempTop;\n piece.style.left = tempLeft;\n piece.dataset.currentRow = tempRow;\n piece.dataset.currentCol = tempCol;\n\n selectedPiece.classList.remove('selected');\n selectedPiece = null;\n playSwapSound();\n checkCompletion();\n }\n }\n\n function playSwapSound() {\n swapSound.currentTime = 0;\n swapSound.play().catch(e => console.warn(\"Swap sound error:\", e));\n }\n\n function playCompletionSound() {\n completionSound.currentTime = 0;\n completionSound.play().catch(e => console.warn(\"Completion sound error:\", e));\n }\n\n function updateProgressBar(percentage) {\n progressBars.forEach(bar => bar.style.width = percentage + '%');\n progressTexts.forEach(text => text.textContent = percentage + '%');\n }\n\n function checkCompletion() {\n correctPieces = 0;\n pieces.forEach(piece => {\n if (piece.dataset.currentRow === piece.dataset.correctRow &&\n piece.dataset.currentCol === piece.dataset.correctCol) {\n correctPieces++;\n }\n });\n const percentage = Math.floor((correctPieces \/ totalPieces) * 100);\n updateProgressBar(percentage);\n\n if (correctPieces === totalPieces && totalPieces > 0) {\n clearInterval(timerInterval);\n isPlaying = false;\n playCompletionSound();\n createConfetti();\n completionTimeElement.textContent = `Id\u0151: ${seconds} m\u00e1sodperc`;\n setTimeout(() => {\n completionMessage.style.display = 'flex';\n }, 500);\n }\n }\n\n function createConfetti() {\n const confettiContainer = document.body;\n for (let i = 0; i < 50; i++) { \/\/ Kevesebb konfetti mobilon\n const confetti = document.createElement('div');\n confetti.className = 'confetti';\n if (Math.random() > 0.5) confetti.classList.add('alt-color');\n confetti.style.left = Math.random() * 100 + 'vw';\n confetti.style.animationDelay = Math.random() * 4 + 's';\n if (Math.random() > 0.5) confetti.style.borderRadius = '50%';\n else if (Math.random() > 0.5) {\n confetti.style.width = '4px';\n confetti.style.height = '12px';\n }\n confettiContainer.appendChild(confetti);\n setTimeout(() => confetti.remove(), 4000);\n }\n }\n\n startButton.addEventListener('click', initializePuzzle);\n fullscreenStartButton.addEventListener('click', initializePuzzle);\n playAgainButton.addEventListener('click', () => {\n completionMessage.style.display = 'none';\n initializePuzzle();\n });\n\n \/\/ Orient\u00e1ci\u00f3 v\u00e1ltoz\u00e1s \u00e9s ablak \u00e1tm\u00e9retez\u00e9s kezel\u00e9se\n function handleResize() {\n if (currentImageUrl) {\n setPuzzleDimensions();\n if (pieces.length > 0) {\n pieces.forEach(piece => {\n piece.style.width = pieceWidth + 'px';\n piece.style.height = pieceHeight + 'px';\n piece.style.backgroundSize = `${puzzleWidth}px ${puzzleHeight}px`;\n piece.style.backgroundPosition = `-${piece.dataset.correctCol * pieceWidth}px -${piece.dataset.correctRow * pieceHeight}px`;\n piece.style.top = (piece.dataset.currentRow * pieceHeight) + 'px';\n piece.style.left = (piece.dataset.currentCol * pieceWidth) + 'px';\n });\n }\n }\n }\n\n window.addEventListener('resize', handleResize);\n window.addEventListener('orientationchange', () => {\n setTimeout(handleResize, 100); \/\/ Kis k\u00e9sleltet\u00e9s az orient\u00e1ci\u00f3 v\u00e1ltoz\u00e1s ut\u00e1n\n });\n \n \/\/ Kezdeti k\u00e9p bet\u00f6lt\u00e9se\n currentImageUrl = getRandomImage();\n const initialPreloadImage = new Image();\n initialPreloadImage.src = currentImageUrl;\n initialPreloadImage.onload = () => {\n setPuzzleDimensions();\n createPieces();\n updateProgressBar(0);\n };\n initialPreloadImage.onerror = () => {\n alert('A kezdeti k\u00e9p bet\u00f6lt\u00e9se sikertelen.');\n };\n\n swapSound.load();\n completionSound.load();\n };\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Puzzle J\u00e1t\u00e9k K\u00f6nny\u0171 (2\u00d72) K\u00f6zepes (3\u00d73) Neh\u00e9z (4\u00d74) \u00daj J\u00e1t\u00e9k Teljes K\u00e9perny\u0151 0% Id\u0151: 0 m\u00e1sodperc × K\u00f6nny\u0171 (2\u00d72) K\u00f6zepes (3\u00d73) Neh\u00e9z (4\u00d74) \u00daj J\u00e1t\u00e9k 0% Id\u0151: 0 m\u00e1sodperc Gratul\u00e1lunk! Sikeresen kiraktad a puzzle-t! \u00daj J\u00e1t\u00e9k<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-179","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages\/179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/comments?post=179"}],"version-history":[{"count":31,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages\/179\/revisions"}],"predecessor-version":[{"id":501,"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/pages\/179\/revisions\/501"}],"wp:attachment":[{"href":"https:\/\/book.filemondr.hu\/index.php\/wp-json\/wp\/v2\/media?parent=179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}