---
import Layout from '../../layouts/Layout.astro';
---
<Layout title='Drawing Game'>
    <main>
        <div>
        </div>
        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    </main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
    const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
    const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
    // const drawingZone = {
    //     x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
    //     y: window.innerHeight / 1,
    //     width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
    //     height: window.innerHeight / 2,
    // };
    let topLogoWidth;
    let muteIconWidth;
    let resetIconWidth;
    let tickIconWidth;
    let cancelIconWidth;
    var assetsList = {}
    var snapshotButton;
    let submitButton;
    let formattedDateTime;
    let shortUniqueID;
    let defaultColor;

    if(isMobile){
        topLogoWidth = 5;
        muteIconWidth = 2;
        resetIconWidth = 1.6;
        tickIconWidth = 1.34;
        cancelIconWidth = 1.16;
        submitWidth = 250;
        submitHeight = 110;
        noticeWidth = 100;
        noticeHeight = 0;
        downloadWidth = 67;
        downloadHeight = 200;
        learningWidth = 200;
        learningHeight = 365
        image1Width = 3.7;
        image1Height = 2.5;
        image2Width = 2;
        image2Right = 65;
        image2Height = 2;
        image2Bottom = 110;
    } else {
        topLogoWidth = 6;
        muteIconWidth = 1.3;
        resetIconWidth = 1.26;
        tickIconWidth = 1.222;
        cancelIconWidth = 1.185;
        submitWidth = 380;
        submitHeight = 95;
        noticeWidth = 0;
        noticeHeight = 0;
        downloadWidth = 180;
        downloadHeight = 70;
        learningWidth = 450;
        learningHeight = 350;
        image1Width = 3;
        image1Height = 1.8;
        image2Width = 2;
        image2Right = 250;
        image2Height = 1.8;
        image2Bottom = 0;
    }
    
    gameResult = [];
    window.onload = function() {
        currentDate = new Date();
        formattedDateTime = currentDate.toLocaleString();
        // console.log("Page loaded on: " + formattedDateTime);
    };
    function generateShortUniqueID(length) {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let result = '';
        for (let i = 0; i < length; i++) {
            const randomIndex = Math.floor(Math.random() * characters.length);
            result += characters.charAt(randomIndex);
        }
        return result;
    }

    const params = new URLSearchParams(window.location.search);
    const paramsID = params.get('id');
    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
    .then(response => response.json())
    .then(({data}) => {
        colorList = data.colors;
        defaultColor = colorList[0];
    const {image1, image2} = data;
    assetsList.image1 = "https://game-du.teachertrainingkolkata.in/assets/" + image1; // + "?width=450";
    assetsList.image2 = "https://game-du.teachertrainingkolkata.in/assets/" + image2; // + "?width=450";
    // console.log('Here is image -1', "https://game-du.teachertrainingkolkata.in/assets/" + image1)
    const config = {
        type: Phaser.AUTO,
        width: window.innerWidth,
        height: window.innerHeight,
        backgroundColor: '#ffffff',
        scale: {
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
        },
        scene: {
            preload: preload,
            create: create,
            update: update,
        },
    };
      const game = new Phaser.Game(config);    
    })
    .catch(error => {
      console.error('Error fetching initial data:', error);
    });
    const customWidth = window.innerWidth;
    const customHeight = window.innerHeight;
    let graphics;
    let isDrawing = false;
    let selectedColor = '#FF0000'; // Default 
    // console.log(colorList)
    let brushSize = 10; // Default brush size
    let customCursor;
    const cursorSizeMultiplier = 1;
    let isErasing = false;
    let snapNotice;
    let colorList;

    function preload() {
        this.load.image('image1', assetsList.image1);
        this.load.image('image2', assetsList.image2);
        this.load.image('topLogo', '/assets/top_logo.png');
        this.load.image("tickIcon", '/assets/svg/tick2.svg');
        this.load.image("muteIcon", '/assets/svg/mute.svg');
        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
        this.load.image("resetIcon", '/assets/svg/reset.svg');
        this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
        this.load.svg('cursorImage', '/assets/svg/pencil.svg');
        this.load.image('waxTexture', '/assets/texture.png');
    }

    function create() {
        const params = new URLSearchParams(window.location.search);
        const paramsID = params.get('id');
        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
            .then(response => response.json())
            .then(({ data }) => {
                // console.log(data.colors)
                const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
                const baseFontSize = 20;
                const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                let wrapWidth;
                if(isMobile){
                    wrapWidth = 10;
                } else{
                    wrapWidth = 200;
                }
                const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
                // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
                // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
            })
            .catch(error => {
                console.error('Error fetching initial data:', error);
            });
 
            // console.log(gameType[0]);
            // let userData = {
            //     'user': 'drawing@beanstalkedu.com',
            //     'game_name': gameName[3],
            //     'starts': formattedDateTime,
            //     // 'game_start' : gameStartTime,
            // };
            // function submitUserData() {
            //     fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
            //         method: 'POST',
            //         headers: {
            //         'Content-Type' : 'application/json'
            //         },
            //         body: JSON.stringify(userData)
            //     })
            //     .then(response => {
            //         if(response.ok){
            //         // console.log('Data Saved', response)
            //         } else{
            //         // console.log('Something Wrong', response)
            //         }
            //     })
            //     .catch(error => {
            //         console.error('An error occured', error)
            //     }); 
            // };
            // window.load
            const borderBottom = this.add.graphics();
            const x = 0; const y = 54;
            const lineWidth = window.innerWidth;
            borderBottom.lineStyle(1, 0x0348A8);
            borderBottom.setAlpha(0.2);
            borderBottom.beginPath();
            borderBottom.moveTo(x, y);
            borderBottom.lineTo(x + lineWidth, y);
            borderBottom.strokePath();

            const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
            const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');

            this.add.image(customWidth / topLogoWidth, 30, "topLogo");
            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
            submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
            retryButton.setInteractive().on('pointerdown', ()=>{
                window.location.reload();
            })
            const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
                font: '600 20px Quicksand',
                fill: 'blue'
            }).setDepth(1);
            submitNotic.setVisible(false);
            // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
            // font: '600 30px Quicksand',
            // fill: '#fff',
            // backgroundColor: 'blue',
            // padding: { x: 20, y: 10 },
            // });
            submitButton.setInteractive().on('pointerdown', () => {
            // console.log('Clicked');
            submitNotic.setVisible(true);
            // windowLoad();
            // submitUserData();
            submitUserData(this);
            })
            const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
            if(!isMobile){
                // this.add.text(customWidth / 10, 20, "Drawing", textStyle);
                // this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
            } else {
                // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
                // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
            }
            
            if(isMobile){
                outlineImage1.setDepth(1).setScale(0.28);
                outlineImage2.setDepth(1).setScale(0.28);
            }else if(isTab){
                outlineImage1.setDepth(1).setScale(0.34);
                outlineImage2.setDepth(1).setScale(0.34);
            } else{
                outlineImage1.setDepth(1).setScale(0.60);
                outlineImage2.setDepth(1).setScale(0.60);   
            }
            graphics = this.add.graphics();
            const colorContainer = document.createElement('div');
            colorContainer.style.position = 'absolute';
            colorContainer.style.top = '13%';
            colorContainer.style.left = '10px';
            colorContainer.style.display = 'flex';
            colorContainer.style.marginBottom = '15px';
            if(!isMobile){
                colorContainer.style.top = '25%';
                colorContainer.style.flexDirection = 'column'; 
            }
                var colors = colorList;
            const buttonSize = 60;
            const buttonSpacing = 15;
            const colorButtonsContainer = document.createElement('div');
            colorButtonsContainer.style.display = 'flex';
            if(!isMobile){
                colorButtonsContainer.style.flexDirection = 'column'; 
            }
            const buttonX = 300;
            // const colorPaletteY = drawingZone.y - 20;
            let selectedButton = null;

            colors.forEach((color, index) => {
                const x = buttonX + index * (buttonSize + buttonSpacing);
                const button = document.createElement('button');

                button.style.backgroundColor = 'transparent';

                button.style.border = 'none';
                button.style.outline = 'none';
                if (!isMobile) {
                    pencilSize = '40px';
                    button.style.width = `${buttonSize}px`; 
                    button.style.height = `${buttonSize}px`;
                } else {
                    pencilSize = '40px';
                    button.style.width = `45px`;
                    button.style.height = `45px`;
                }
                if(isMobile){
                    button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
                    button.style.boxShadow = '5px 10px 30px #7c4c2390';
                    button.style.borderRadius = '20%';
                } else{
                    button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
                }
                button.style.marginRight = `${buttonSpacing}px`;   
                button.addEventListener('click', () => {
                    if (selectedButton) {
                        selectedButton.style.border = 'none';
                        selectedButton.style.scale = '1';
                        selectedButton.style.transform = 'translateX(0px)';
                        selectedButton.style.marginTop = '0px';
                        selectedButton.style.marginBottom = '0px';
                    }
                    if(isMobile){
                        button.style.border = "2px solid";
                        button.style.borderColor = color;
                    }
                    defaultColor = color;
                    button.style.scale = '1.1';
                    if(!isMobile){
                        button.style.transform = 'translateX(0.75rem)'; 
                        button.style.transition = 'transform 0.6s ease';
                        // button.style.marginTop = '5px';
                        // button.style.marginBottom = '5px';
                    }
                    selectedButton = button;
                });
                colorButtonsContainer.appendChild(button);
            });
            const colorPreview = document.createElement('div');
            colorPreview.style.width = '40px';
            colorPreview.style.height = '40px';
            colorPreview.style.backgroundColor = 'blue';
            // Append the color buttons container to the color container
            colorContainer.appendChild(colorButtonsContainer);
            // Append the color container to the document body
            document.body.appendChild(colorContainer);
            // Create a container div for both buttons
            const buttonsContainer = document.createElement('div');
            buttonsContainer.style.position = 'absolute';
            buttonsContainer.style.display = 'flex'; 
            buttonsContainer.style.flexDirection = 'row';
            buttonsContainer.style.top = '0%'; 
            buttonsContainer.style.marginTop = '30px';
            if(!isMobile){
                // buttonsContainer.style.position = 'fixed';
                buttonsContainer.style.top = '13%';
                buttonsContainer.style.flexDirection = 'column';
                buttonsContainer.style.marginLeft = '-20px';
                buttonsContainer.style.marginTop = '0%';
            } else{
                buttonsContainer.style.left = '-20px';
            }
            
            document.body.appendChild(buttonsContainer);
            // Create the Clear button
            const clearButton = document.createElement('button');
            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
            // // clearButton.style.border = '3px solid blue';
            // clearButton.style.color = 'blue';
            // clearButton.style.width = 'fit-content';
            clearButton.style.marginLeft = '30px';
            if(isMobile){
                clearButton.style.padding = '2px 8px';
                buttonsContainer.style.top = '17%';
            } else {
                clearButton.style.padding = '5px 10px';
            }        
            // clearButton.style.fontWeight = 'bold';
            // clearButton.style.borderRadius = '20%';
            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
            clearButton.addEventListener('click', () => {
                clearDrawing();
            }); 
            // Create the Eraser button
            const eraserButton = document.createElement('button');
            // eraserButton.textContent = 'Eraser';
            eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
            eraserButton.style.color = 'blue';
            eraserButton.style.width = 'fit-content';
            eraserButton.style.marginRight = '15px';
            // eraserButton.style.marginTop = '0px';
            eraserButton.style.marginBottom = '0px';
            if(isMobile){
                eraserButton.style.padding = '4px 4px';
            } else {
                eraserButton.style.padding = '5px 5px';
                eraserButton.style.marginTop = '15px';
                eraserButton.style.marginBottom = '15px';
                eraserButton.style.marginLeft = '30px';
            }
            eraserButton.style.fontWeight = 'bold';
            eraserButton.style.borderRadius = '20%';
            eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
            eraserButton.addEventListener('click', () => {
            isErasing = !isErasing;
                if (isErasing) {
                    // eraserButton.style.backgroundColor = 'red';
                    eraserButton.style.color = 'red';
                    eraserButton.style.border = '3px solid red';
                } else {
                    // Return to drawing mode
                    // eraserButton.style.backgroundColor = 'green';
                    eraserButton.style.color = 'blue';
                    eraserButton.style.border = 'none';
                }
            });
            // Add the Clear and Eraser buttons to the container
            buttonsContainer.appendChild(clearButton);
            buttonsContainer.appendChild(eraserButton);
            
            const sliderContainer = document.createElement('div');
            sliderContainer.className = 'slider-container';
            // sliderContainer.style.position = 'absolute';
            if(isMobile){
                sliderContainer.style.marginTop = '10px';
            } else{
                sliderContainer.style.marginLeft = '20px';
            }
            sliderContainer.style.left = '100%';

            // Create the slider
            const slider = document.createElement('input');
            slider.type = 'range';
            slider.min = '2';
            slider.max = '80';
            slider.value = brushSize.toString();
            slider.className = 'slider';
            // slider.style.width = `${window.innerWidth / 2}px`;
            slider.addEventListener('input', (event) => {
                brushSize = parseInt(event.target.value);
                slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
                slider.style.backgroundColor = '#05b3a4';
            });

            sliderContainer.appendChild(slider);
            buttonsContainer.appendChild(sliderContainer);
            
            this.input.on('pointerdown', () => {
                isDrawing = true;
                startDrawing(this.input.x, this.input.y);
            });

            this.input.on('pointermove', () => {
                if (isDrawing) {
                    continueDrawing(this.input.x, this.input.y);
                }
            });
            this.input.on('pointerup', () => {
                if (isDrawing) {
                    finishDrawing();
                }
                isDrawing = false;
            });
            customCursor = this.add.graphics();
            customCursor.setDepth(2)
            this.input.setDefaultCursor('none');
            const borderThickness = 0;
            const borderColor = 0xffffff; // White color (you can customize this)
            const borderGraphics = this.add.graphics();
            borderGraphics.lineStyle(borderThickness, borderColor);
            if(isMobile){
                snapWidth = 70;
                snapHeight = 70;
            } else {
                snapWidth = 200;
                snapHeight = 70;
            }
            // snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
            snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
            snapshotButton.setInteractive();
            snapshotButton.on('pointerdown', () => {
                captureSnapshot(this);
            });
            snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloaded', {font :'700 30px Quicksand', fill: '#05b3a4'});
            snapNotice.setVisible(false);
    }
    function captureSnapshot(drawingZone) {
        // snapNotice.setVisible(true);
        submitButton.setVisible(false);
        snapshotButton.setVisible(false);
        customCursor.setVisible(false);
        drawingZone.renderer.snapshot((image) => {
            submitButton.setVisible(true);
            snapshotButton.setVisible(true);
            customCursor.setVisible(true);
            image.style.width = '160px';
            image.style.height = '120px';
            image.style.paddingLeft = '2px';
            document.body.appendChild(image);
            // Download the snapshot as an image
            const link = document.createElement('a');
            link.href = image.src;
            link.download = 'my_drawing.png';
            link.click();
            document.body.removeChild(image);
            // Clear the drawing
            // graphics.clear();
        });
    }

    function startDrawing(x, y, t) {
        if (!isErasing) {
            graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(defaultColor).color);
        } else {
            graphics.lineStyle(brushSize * 2, 0xffffff, 1); // Set a white color to clear lines (full opacity)
        }
        graphics.beginPath();
        graphics.moveTo(x, y);
    }

    function continueDrawing(x, y) {
        if (!isErasing) {
            graphics.lineTo(x, y); // Drawing
        } else {
            graphics.lineTo(x, y); // Erasing by drawing with a white line
        }
        graphics.strokePath();
    }

    function finishDrawing() {
        // No need for additional actions here
    }

    function clearDrawing() {
        graphics.clear();
    }
    function update() {
        const slider = document.querySelector('input[type="range"]');
        if (slider && !isDrawing) {
            const sliderValue = parseInt(slider.value);
            const max = parseInt(slider.max);
            const width = slider.offsetWidth;
            const offsetX = (sliderValue - 2) / (max - 2) * width;
            slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
        };
        const cursorSize = brushSize * cursorSizeMultiplier;
        customCursor.clear(); // Clear the previous frame
        customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
        customCursor.strokeCircle(0, 0, cursorSize);
        // Position the cursor at the current mouse pointer coordinates
        customCursor.x = this.input.x;
        customCursor.y = this.input.y;
    }
</script>
<style>
    .clear-button {
        background-color: blue;
    }
</style>
