{"id":2618,"date":"2024-08-01T11:42:32","date_gmt":"2024-08-01T09:42:32","guid":{"rendered":"https:\/\/moncarrebois.fr\/?page_id=2618"},"modified":"2024-09-03T18:08:50","modified_gmt":"2024-09-03T16:08:50","slug":"configurator","status":"publish","type":"page","link":"https:\/\/moncarrebois.fr\/en\/configurator\/","title":{"rendered":"Simulateur"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2618\" class=\"elementor elementor-2618\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-dd6d55c e-con-full e-flex e-con e-parent\" data-id=\"dd6d55c\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ec74797 elementor-widget__width-inherit elementor-widget elementor-widget-shortcode\" data-id=\"ec74797\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"big-sec\">\n    <div class=\"sec-one wrap2\">\n        <div class=\"one flex-1\">\n            <h2>Calculateur<\/h2>\n            <p>Un motif g\u00e9om\u00e9trique ultra-moderne pour amener une touche contemporaine \u00e0 votre int\u00e9rieur<\/p>\n            <form id=\"rectangle-form\" action=\"\">\n                <div class=\"largeur\">\n                    <label for=\"width\">Largeur (cm) :<\/label>\n                    <input type=\"number\" id=\"width\" name=\"width\" value=\"\" required>\n                <\/div>\n                <div class=\"longeur\">\n                    <label for=\"height\">Hauteur (cm) :<\/label>\n                    <input type=\"number\" id=\"height\" name=\"height\" value=\"\" required>\n                <\/div>\n                <button class=\"button-27\" type=\"submit\">Valider<\/button>\n            <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n            <div class=\"color_selector\">\n                <select name=\"Textures\" id=\"Textures\">\n                <option value=\"chevrons\">Chevrons<\/option>\n                <option value=\"vagues\">Vagues<\/option>\n                <option value=\"tasseaux\">Tasseaux<\/option>\n                <option value=\"carres\">Carr\u00e9s<\/option>\n<option value=\"zigzag\">Zigzag<\/option>\n                \n            <\/select>\n            <div id=\"texture-description\"><\/div>\n            <div id=\"thumbnail-container\">\n                <!-- Thumbnails will be dynamically added here -->\n            <\/div>\n            <\/div>\n            \n            <h6>Pour cette configuration, vous avez besoin de :<\/h6>\n            <div id=\"message\"><\/div>\n            <div class=\"split_result\"><\/div>\n            \n            <div class=\"flex-1\">\n                <button id=\"toggle-split\" class=\"split\">Maximum carr\u00e9s 50x50<\/button>\n            <\/div>\n        <\/div>\n        <div class=\"flex-1 display\" style=\"align-items: self-start;\">\n            <div id=\"image-container\" style=\"width: 100%; position: relative; height: 400px;\">\n                <div id=\"rectangle-container\" draggable=\"true\" ondragstart=\"drag(event)\">\n                    <!-- Affiche du taille de carreaux -->\n                <\/div>\n            <\/div>\n            <div>\n                <!-- Upload form \/ formulaire ins\u00e8re -->\n                <form id=\"uploadForm\" action=\"\">\n                    <label for=\"myFile\" class=\"btn\"> \n                        <img decoding=\"async\" src=\"https:\/\/moncarrebois.fr\/wp-content\/uploads\/2024\/08\/camera.svg\" alt=\"engrandir\" width=\"30px\">\n                        <p>Importez votre photo pour simuler votre projet<\/p>\n                    <\/label>\n                    <input type=\"file\" id=\"myFile\" name=\"filename\" accept=\"image\/*\" style=\"display: none;\">\n                <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n                \n                <div><\/div> <!-- Container to display the image -->\n                <div class=\"button\">\n                    <p style=\"margin-top: 10px;\">Double-cliquez pour faire pivoter un carr\u00e9.<\/p>\n                    <button id=\"add-scale\" onclick=\"handleScale()\" class=\"plus\"><img decoding=\"async\" src=\"https:\/\/moncarrebois.fr\/wp-content\/uploads\/2024\/08\/resize.svg\" alt=\"engrandir\" width=\"20px\"><\/button>\n                    <button id=\"remove-scale\" onclick=\"handleScale()\" class=\"hyphen\"><img decoding=\"async\" src=\"https:\/\/moncarrebois.fr\/wp-content\/uploads\/2024\/08\/arrow.svg\" alt=\"retressir\" width=\"20px\"><\/button>\n<button id=\"toggle-transparency\" class=\"show\"><image id=\"toggle-icon\" src=\"https:\/\/moncarrebois.fr\/wp-content\/uploads\/2024\/08\/eye-see-show-svgrepo-com.svg\" alt=\"Afficher les lignes et les nombres\" width=\"20\" ><\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n<script>\nlet isDragging = false;\nlet initialOffsetX, initialOffsetY;\nlet additionalSquares50 = 0;\nlet count50Inside = 0; \/\/ Track the count of 50x50 squares inside the rectangle\nlet selectedTexture = 'chevrons'; \/\/ Default texture\nlet selectedColor = 'https:\/\/moncarrebois.fr\/wp-content\/uploads\/2024\/08\/douglas-MOTIFS-SIMULATEUR_zigzag-100.jpg'; \/\/ Default background image\nlet initialState = null; \/\/ Variable to store the initial state\nlet initialMessage = ''; \/\/ Variable to store the initial message\nlet isTransparent = false; \/\/ Track transparency state\n\nconst rectangleContainer = document.getElementById('rectangle-container');\n\nconst textureDescriptions = {\n    zigzag: \"Chevrons: A modern geometric pattern for a contemporary touch to your interior.\",\n    vagues: \"Vagues: Wave patterns for a dynamic and fluid look.\",\n    tasseaux: \"Lignes: Clean lines for a sleek and minimalist appearance.\",\n    carres: \"Chenes: A classic chenes pattern for a timeless look.\",\n    chevrons: \"carr\u00e9s: A classic chenes pattern for a timeless look.\"\n};\n\n\/\/ Function to handle changing the square background image based on selected texture and color\nfunction changeSquareBackground(event) {\n    const selectedImageSrc = event.target.src;\n    selectedColor = selectedImageSrc;\n    updateSquaresBackground();\n}\n\n\/\/ Add event listeners to thumbnails\nfunction addThumbnailEventListeners() {\n    document.querySelectorAll('.thumbnail').forEach(thumbnail => {\n        thumbnail.addEventListener('click', changeSquareBackground);\n    });\n}\n\n\/\/ Update background of squares based on selected texture and color\nfunction updateSquaresBackground() {\n    const squares50 = document.querySelectorAll('.rectangle .square-50');\n    const squares100 = document.querySelectorAll('.rectangle .square-100');\n    const additionalSquares = document.querySelectorAll('.rectangle .uncovered');\n\n    squares50.forEach(square => {\n        if (selectedColor) {\n            square.style.backgroundImage = `url(${selectedColor.replace('-100', '-50')})`;\n        }\n    });\n\n    squares100.forEach(square => {\n        if (selectedColor) {\n            square.style.backgroundImage = `url(${selectedColor.replace('-50', '-100')})`;\n        }\n    });\n\n    additionalSquares.forEach(square => {\n        if (selectedColor) {\n            square.style.backgroundImage = `url(${selectedColor.replace('-100', '-50')})`;\n        }\n    });\n\n    \/\/ Apply transparency settings if enabled\n    if (isTransparent) {\n        updateStyles();\n    }\n}\n\n\/\/ Function to handle texture selection change\nfunction handleTextureChange(event) {\n    selectedTexture = event.target.value;\n    updateThumbnails();\n    updateTextureDescription();\n    updateSquaresBackground(); \/\/ Update squares with the new texture\n}\n\n\/\/ Update thumbnails based on selected texture\nfunction updateThumbnails() {\n    const thumbnailContainer = document.getElementById('thumbnail-container');\n    thumbnailContainer.innerHTML = ''; \/\/ Clear previous thumbnails\n\n    const images = [\n        `https:\/\/moncarrebois.fr\/wp-content\/uploads\/2024\/08\/mousse-MOTIFS-SIMULATEUR_${selectedTexture}-50.jpg`,\n        `https:\/\/moncarrebois.fr\/wp-content\/uploads\/2024\/08\/wenge-MOTIFS-SIMULATEUR_${selectedTexture}-50.jpg`,\n        `https:\/\/moncarrebois.fr\/wp-content\/uploads\/2024\/08\/douglas-MOTIFS-SIMULATEUR_${selectedTexture}-50.jpg`,\n        `https:\/\/moncarrebois.fr\/wp-content\/uploads\/2024\/08\/claire-MOTIFS-SIMULATEUR_${selectedTexture}-50.jpg`,\n `https:\/\/moncarrebois.fr\/wp-content\/uploads\/2024\/08\/beton-MOTIFS-SIMULATEUR_${selectedTexture}-50.jpg`\n    ];\n\n    images.forEach((src, index) => {\n        const img = document.createElement('img');\n        img.src = src;\n        img.alt = `image${index + 1}`;\n        img.className = 'thumbnail';\n        thumbnailContainer.appendChild(img);\n    });\n\n    addThumbnailEventListeners(); \/\/ Re-add event listeners to new thumbnails\n}\n\nfunction updateTextureDescription() {\n    const descriptionContainer = document.getElementById('texture-description');\n    descriptionContainer.textContent = textureDescriptions[selectedTexture] || '';\n}\n\n\/\/ Add event listener to texture selection\ndocument.getElementById('Textures').addEventListener('change', handleTextureChange);\n\n\/\/ Initial call to display thumbnails for the default selected texture\nupdateThumbnails();\nupdateTextureDescription();\n\n\/\/ Function to handle the start of dragging\nfunction startDrag(event) {\n    isDragging = true;\n    \n    \/\/ Determine whether the event is a touch event\n    const touchEvent = event.type === 'touchstart';\n    const clientX = touchEvent ? event.touches[0].pageX : event.pageX;\n    const clientY = touchEvent ? event.touches[0].pageY : event.pageY;\n\n    \/\/ Calculate the initial offset only once\n    initialOffsetX = clientX - rectangleContainer.offsetLeft;\n    initialOffsetY = clientY - rectangleContainer.offsetTop;\n    rectangleContainer.style.cursor = 'move';\n\n    \/\/ Prevent text selection or default touch actions during dragging\n    event.preventDefault();\n\n    \/\/ Add the appropriate move and end event listeners\n    if (touchEvent) {\n        document.addEventListener('touchmove', moveDrag);\n        document.addEventListener('touchend', endDrag);\n    } else {\n        document.addEventListener('mousemove', moveDrag);\n        document.addEventListener('mouseup', endDrag);\n    }\n}\n\n\/\/ Function to handle the dragging movement\nfunction moveDrag(event) {\n    if (!isDragging) return;\n\n    \/\/ Determine whether the event is a touch event\n    const touchEvent = event.type === 'touchmove';\n    const clientX = touchEvent ? event.touches[0].pageX : event.pageX;\n    const clientY = touchEvent ? event.touches[0].pageY : event.pageY;\n\n    \/\/ Calculate new positions\n    let newX = clientX - initialOffsetX;\n    let newY = clientY - initialOffsetY;\n\n    \/\/ Constrain the new positions to the boundaries of the viewport or container\n    const maxX = Math.min(document.body.clientWidth - rectangleContainer.offsetWidth, 1200);\n    const maxY = document.body.clientHeight - rectangleContainer.offsetHeight;\n    newX = Math.min(Math.max(0, newX), maxX);\n    newY = Math.min(Math.max(0, newY), maxY);\n\n    \/\/ Update the position of the element\n    rectangleContainer.style.left = newX + 'px';\n    rectangleContainer.style.top = newY + 'px';\n\n    \/\/ Prevent default to avoid scrolling on touch devices\n    event.preventDefault();\n}\n\n\/\/ Function to handle the end of dragging\nfunction endDrag(event) {\n    isDragging = false;\n    rectangleContainer.style.cursor = 'default';\n\n    \/\/ Remove the move and end event listeners\n    if (event.type === 'touchend' || event.type === 'touchcancel') {\n        document.removeEventListener('touchmove', moveDrag);\n        document.removeEventListener('touchend', endDrag);\n        document.removeEventListener('touchcancel', endDrag);\n    } else {\n        document.removeEventListener('mousemove', moveDrag);\n        document.removeEventListener('mouseup', endDrag);\n    }\n}\n\n\/\/ Event listeners for mouse events\nrectangleContainer.addEventListener('mousedown', startDrag);\n\n\/\/ Event listeners for touch events\nrectangleContainer.addEventListener('touchstart', startDrag);\n\n\/\/ Event listener for the input to upload an image\ndocument.getElementById('myFile').addEventListener('change', function(event) {\n    const fileInput = event.target;\n    const file = fileInput.files[0];\n    const container = document.getElementById('image-container');\n\n    if (file) {\n        const reader = new FileReader();\n\n        reader.onload = function(e) {\n            let img = container.querySelector('img');\n            if (!img) {\n                \/\/ Create a new img element if it doesn't exist\n                img = document.createElement('img');\n                container.appendChild(img);\n            }\n            \/\/ Set or replace the source of the img element\n            img.src = e.target.result;\n        };\n\n        reader.readAsDataURL(file);\n    } else {\n        alert('No file chosen');\n    }\n});\n\n\/\/ Initialize the image position and allow resizing\nconst drag1 = document.getElementById('rectangle-container');\ndrag1.style.width = '100px';  \/\/ Set initial size\ndrag1.style.height = '100px';\ndrag1.addEventListener('mousedown', function(e) {\n    drag1.style.cursor = 'move';\n    const offsetX = e.clientX - drag1.offsetLeft;\n    const offsetY = e.clientY - drag1.offsetTop;\n\n    function mouseMoveHandler(e) {\n        drag1.style.left = e.clientX - offsetX + 'px';\n        drag1.style.top = e.clientY - offsetY + 'px';\n    }\n\n    function mouseUpHandler() {\n        drag1.style.cursor = 'default';\n        document.removeEventListener('mousemove', mouseMoveHandler);\n        document.removeEventListener('mouseup', mouseUpHandler);\n    }\n\n    document.addEventListener('mousemove', mouseMoveHandler);\n    document.addEventListener('mouseup', mouseUpHandler);\n});\n\n\/\/ Event listener for the form submission to calculate the number of squares\ndocument.getElementById('rectangle-form').addEventListener('submit', function(event) {\n    event.preventDefault();\n    const button = document.querySelector('#rectangle-form button[type=\"submit\"]');\n    if (button.innerText === \"Valider\") {\n        showLoading(button);\n        setTimeout(() => {\n            calculateSquares();\n            hideLoading(button);\n            button.innerText = \"Re-initialiser\";\n        }, 1000); \/\/ Simulate some delay for loading animation\n    } else {\n        resetForm();\n        button.innerText = \"Valider\";\n    }\n});\n\nfunction showLoading(button) {\n    button.classList.add('loading');\n    button.disabled = true;\n    button.innerHTML = '<div class=\"spinner\"><\/div>Chargem...';\n}\n\nfunction hideLoading(button) {\n    button.classList.remove('loading');\n    button.disabled = false;\n    button.innerHTML = 'Re-initialiser';\n}\n\nfunction calculateSquares() {\n    let width = parseInt(document.getElementById('width').value);\n    let height = parseInt(document.getElementById('height').value);\n\n    if (width < 50 || width > 300 || height < 50 || height > 300) {\n        alert('La largeur et la hauteur doivent \u00eatre comprises entre 50 et 300 cm.');\n        return;\n    }\n\n    const container = document.getElementById('rectangle-container');\n    container.innerHTML = ''; \/\/ Clear previous content\n    container.style.width = width + 'px';\n    container.style.height = height + 'px';\n    container.className = 'rectangle';\n\n    let count100 = 0;\n    let count50 = 0;\n    count50Inside = 0; \/\/ Reset the count\n\n    \/\/ Fill using 100x100 squares first\n    for (let y = 0; y < height; y += 100) {\n        for (let x = 0; x < width; x += 100) {\n            if (x + 100 <= width && y + 100 <= height) {\n                createSquare(container, x, y, 100, 'square-100', '100');\n                count100++;\n            }\n        }\n    }\n\n    \/\/ Fill remaining gaps using 50x50 squares\n    for (let y = 0; y < height; y += 50) {\n        for (let x = 0; x + 50 <= width && y + 50 <= height; x += 50) {\n            if (!isCovered(x, y, 50, 50, container)) {\n                createSquare(container, x, y, 50, 'square-50', '50');\n                count50++;\n                count50Inside++;\n            }\n        }\n    }\n\n    let message = ``;\n\n    \/\/ Check for uncovered areas and fill them with the same background as 50x50\n    for (let y = 0; y < height; y += 50) {\n        for (let x = 0; x < width; x += 50) {\n            if (!isCovered(x, y, 50, 50, container)) {\n                createSquare(container, x, y, 50, 'uncovered', '', true);\n            }\n        }\n    }\n\n    \/\/ Calculate additional squares needed\n    const areaCovered = count100 * 100 * 100 + count50 * 50 * 50;\n    additionalSquares50 = 0; \/\/ Reset additional squares\n\n    if (areaCovered < width * height) {\n        const remainingArea = (width * height) - areaCovered;\n        if (remainingArea > 0) {\n            const rectCountWidth = Math.ceil(width \/ 50);\n            const rectCountHeight = Math.ceil(height \/ 50);\n            additionalSquares50 = rectCountWidth * rectCountHeight;\n        }\n\n        additionalSquares50 -= count100 * 4;\n        additionalSquares50 -= count50;\n\n        if (additionalSquares50 > 0) {\n            \/\/ Add the additional information in brackets next to the 50x50 square count\n            const total50 = count50 + additionalSquares50;\n            message += `Carr\u00e9s de 50x50 cm : <b id=\"hover-message\">${total50}<\/b> <span style=\"color: #94B5A3;\">( dont ${additionalSquares50} \u00e0 d\u00e9couper)<\/span><br>`;\n            message += `Carr\u00e9s de 100x100 cm: <b>${count100}<\/b>`;\n        }\n    } else if (areaCovered === width * height) {\n        \/\/ Exact fit\n        message = `La configuration est parfaite avec exactement ${count100} carr\u00e9s de 100x100 cm et ${count50} carr\u00e9s de 50x50 cm.`;\n    }\n\n    document.getElementById('message').innerHTML = message;\n\n    \/\/ Add hover message with details\n    const hoverMessageElement = document.getElementById('hover-message');\n    if (hoverMessageElement) {\n        hoverMessageElement.setAttribute('title', `${count50Inside} inside the rectangle and ${additionalSquares50} from cut`);\n    }\n\n    \/\/ Apply transparency settings if enabled\n    if (isTransparent) {\n        updateStyles();\n    }\n}\n\n\/\/ Function to create a square element\nfunction createSquare(container, x, y, size, className, text, isAdditional = false) {\n    const square = document.createElement('div');\n    square.style.left = x + 'px';\n    square.style.top = y + 'px';\n    square.style.width = size + 'px';\n    square.style.height = size + 'px';\n    square.className = className;\n    square.textContent = text;\n\n    if (!isAdditional && selectedColor) {\n        if (size === 50) {\n            square.style.backgroundImage = `url(${selectedColor.replace('-100', '-50')})`;\n        } else if (size === 100) {\n            square.style.backgroundImage = `url(${selectedColor.replace('-50', '-100')})`;\n        }\n    } else if (isAdditional) {\n        square.style.backgroundImage = `url(${selectedColor.replace('-100', '-50')})`;\n    }\n\n    \/\/ Initialize the last tap time for double-tap detection\n    let lastTapTime = 0;\n\n    \/\/ Function to handle rotation\n    function rotateSquare() {\n        \/\/ Get current rotation value or default to 0\n        let rotation = parseInt(square.dataset.rotation) || 0;\n        \/\/ Increment rotation by 90 degrees clockwise\n        rotation += 90;\n        \/\/ Apply rotation to square\n        square.style.transform = `rotate(${rotation}deg)`;\n        \/\/ Store updated rotation value in dataset\n        square.dataset.rotation = rotation;\n    }\n\n    \/\/ Add event listener for double-click to rotate the square on desktop\n    square.addEventListener('dblclick', rotateSquare);\n\n    \/\/ Add event listener for touchstart to detect double-tap on touch devices\n    square.addEventListener('touchstart', function(event) {\n        const currentTime = new Date().getTime();\n        const tapInterval = currentTime - lastTapTime;\n\n        if (tapInterval < 300 && tapInterval > 0) {\n            \/\/ If two taps are detected within 300ms, it's a double-tap\n            rotateSquare();\n        }\n\n        \/\/ Update the lastTapTime\n        lastTapTime = currentTime;\n\n        \/\/ Prevent default to avoid triggering other events\n        event.preventDefault();\n    });\n\n    container.appendChild(square);\n\n    \/\/ Apply transparency settings if enabled\n    if (isTransparent) {\n        square.style.backgroundColor = 'transparent';\n        square.style.color = 'transparent';\n        square.style.border = 'none';\n    }\n}\n\n\/\/ Event listener for toggling split\/unsplit of squares with a single button\ndocument.getElementById('toggle-split').addEventListener('click', function() {\n    const button = document.getElementById('toggle-split');\n    const container = document.getElementById('rectangle-container');\n    \n    if (button.innerText === 'Maximum carr\u00e9s 50x50') {\n        \/\/ Save the initial state\n        initialState = container.innerHTML;\n        initialMessage = document.getElementById('message').innerHTML;\n\n        \/\/ Perform the split action to 50x50\n        container.innerHTML = ''; \/\/ Clear previous content\n\n        const width = parseInt(document.getElementById('width').value);\n        const height = parseInt(document.getElementById('height').value);\n        container.style.width = width + 'px';\n        container.style.height = height + 'px';\n        container.className = 'rectangle';\n\n        let count50 = 0;\n        count50Inside = 0; \/\/ Reset the count\n\n        \/\/ Fill entire area with 50x50 squares\n        for (let y = 0; y < height; y += 50) {\n            for (let x = 0; x < width; x += 50) {\n                if (x + 50 <= width && y + 50 <= height) {\n                    createSquare(container, x, y, 50, 'square-50', '50');\n                    count50++;\n                    count50Inside++;\n                }\n            }\n        }\n\n        \/\/ Check for uncovered areas and fill them with the same background as 50x50\n        for (let y = 0; y < height; y += 50) {\n            for (let x = 0; x < width; x += 50) {\n                if (!isCovered(x, y, 50, 50, container)) {\n                    createSquare(container, x, y, 50, 'uncovered', '', true);\n                }\n            }\n        }\n\n        const total50 = count50;\n        let additionalMessage = '';\n\n        \/\/ Check if additionalSquares50 should be displayed\n        if (additionalSquares50 > 0) {\n            additionalMessage = ` <span style=\"color: #94B5A3;\">( dont ${additionalSquares50} \u00e0 d\u00e9couper)<\/span>`;\n        }\n\n        const message = `Carr\u00e9s de 50x50 cm : <b id=\"hover-message\">${total50 + additionalSquares50}<\/b>${additionalMessage} <br> Carr\u00e9s de 100x100 cm: <b>0<\/b>`;\n        document.getElementById('message').innerHTML = message;\n\n        \/\/ Update button text\n        button.innerText = 'Maximum carr\u00e9s 100x100';\n\n    } else if (button.innerText === 'Maximum carr\u00e9s 100x100') {\n        \/\/ Restore the initial state\n        if (initialState) {\n            container.innerHTML = initialState;\n            document.getElementById('message').innerHTML = initialMessage;\n            initialState = null; \n            initialMessage = '';\n        }\n\n        \/\/ Update button text\n        button.innerText = 'Maximum carr\u00e9s 50x50';\n    }\n});\n\nfunction resetForm() {\n    const container = document.getElementById('rectangle-container');\n    container.innerHTML = ''; \/\/ Clear previous content\n    container.style.width = '100px'; \/\/ Reset to initial size\n    container.style.height = '100px';\n    container.className = '';\n\n    const imageContainer = document.getElementById('image-container');\n    const img = imageContainer.querySelector('img');\n    if (img) {\n        imageContainer.removeChild(img);\n    }\n\n    document.getElementById('message').innerHTML = '';\n    document.querySelector('.split_result').innerHTML = '';\n\n    additionalSquares50 = 0; \/\/ Reset additional squares\n    count50Inside = 0; \/\/ Reset count inside\n}\n\nfunction isCovered(x, y, width, height, container) {\n    const squares = container.children;\n    for (let square of squares) {\n        const sqX = parseInt(square.style.left);\n        const sqY = parseInt(square.style.top);\n        const sqSize = parseInt(square.style.width);\n\n        if (x >= sqX && x + width <= sqX + sqSize && y >= sqY && y + height <= sqY + sqSize) {\n            return true;\n        }\n    }\n}\n\n\/\/ Increase size of dragged rectangle\nfunction handleScale(action) {\n    return (e) => {\n        e.preventDefault();\n        const container = document.getElementById('rectangle-container');\n        const currentScale = parseFloat(container.style.transform.replace('scale(', '').replace(')', '')) || 1;\n        const scaleFactor = action === 'add' ? 1.09 : 1 \/ 1.2;\n        const newScale = currentScale * scaleFactor;\n        container.style.transform = `scale(${newScale})`;\n    };\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n    const toggleButton = document.getElementById('toggle-transparency');\n    const toggleIcon = document.getElementById('toggle-icon');\n\n    \/\/ Function to update styles\n    function updateStyles() {\n        const squares50 = document.querySelectorAll('.square-50');\n        const squares100 = document.querySelectorAll('.square-100');\n        const uncovered = document.querySelectorAll('.uncovered');\n\n        squares50.forEach(square => {\n            square.style.backgroundColor = isTransparent ? 'transparent' : 'white';\n            square.style.color = isTransparent ? 'transparent' : 'white';\n            square.style.border = isTransparent ? 'none' : 'solid 1px rgba(255, 251, 251, 0.473)';\n        });\n\n        squares100.forEach(square => {\n            square.style.backgroundColor = isTransparent ? 'transparent' : 'white';\n            square.style.color = isTransparent ? 'transparent' : 'white';\n            square.style.border = isTransparent ? 'none' : 'solid 1px rgba(255, 251, 251, 0.473)';\n        });\n        uncovered.forEach(square => {\n            square.style.border = isTransparent ? 'none' : 'solid 1px rgba(255, 251, 251, 0.473)';\n        });\n    }\n\n    \/\/ Toggle transparency and icon on button click\n    toggleButton.addEventListener('click', () => {\n        isTransparent = !isTransparent;\n        updateStyles();\n        toggleIcon.src = isTransparent \n            ? 'https:\/\/moncarrebois.fr\/wp-content\/uploads\/2024\/08\/hide-close-eye-eye-svgrepo-com.svg' \n            : 'https:\/\/moncarrebois.fr\/wp-content\/uploads\/2024\/08\/eye-see-show-svgrepo-com.svg';\n    });\n\n    \/\/ Initial styles\n    updateStyles();\n});\n\ndocument.getElementById('add-scale').addEventListener('click', handleScale('add'));\n\ndocument.getElementById('remove-scale').addEventListener('click', handleScale('remove'));\n\n\/\/ Event listener for the reset button to clear the split result\ndocument.querySelector('[type=\"reset\"]').addEventListener('click', function() {\n    document.querySelector('.split_result').innerHTML = '';\n    document.getElementById('message').innerHTML = '';\n    additionalSquares50 = 0; \/\/ Reset additional squares when the form is reset\n});\n\n\/\/ Initial creation of squares to display the default background\ncalculateSquares();\n\n<\/script><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Calculateur Un motif g\u00e9om\u00e9trique ultra-moderne pour amener une touche contemporaine \u00e0 votre int\u00e9rieur Largeur (cm) : Hauteur (cm) : Valider ChevronsVaguesTasseauxCarr\u00e9sZigzag Pour cette configuration, vous avez besoin de : Maximum carr\u00e9s 50&#215;50 Importez votre photo pour simuler votre projet Double-cliquez pour faire pivoter un carr\u00e9.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2618","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/moncarrebois.fr\/en\/wp-json\/wp\/v2\/pages\/2618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/moncarrebois.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/moncarrebois.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/moncarrebois.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/moncarrebois.fr\/en\/wp-json\/wp\/v2\/comments?post=2618"}],"version-history":[{"count":237,"href":"https:\/\/moncarrebois.fr\/en\/wp-json\/wp\/v2\/pages\/2618\/revisions"}],"predecessor-version":[{"id":3794,"href":"https:\/\/moncarrebois.fr\/en\/wp-json\/wp\/v2\/pages\/2618\/revisions\/3794"}],"wp:attachment":[{"href":"https:\/\/moncarrebois.fr\/en\/wp-json\/wp\/v2\/media?parent=2618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}