post base 64 with submitUserData function

src/pages/drawing/index.astro

@@ -126,33 +126,6 @@ import Layout from '../../layouts/Layout.astro';
             .catch(error => {
                 console.error('Error fetching initial data:', error);
             });
-            const URL = window.location.href;
-            const gameName = URL.split('/');
-            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 submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
                 font: '600 20px Quicksand',
@@ -167,11 +140,10 @@ import Layout from '../../layouts/Layout.astro';
             });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-            // console.log('Clicked');
+                submitButton.setVisible(false);
-            submitButton.setVisible(false);
+                submitNotic.setVisible(true);
-            submitNotic.setVisible(true);
+                // windowLoad();
-            // windowLoad();
+                submitUserData(this);
-            submitUserData();
             })
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             if(!isMobile){
@@ -463,16 +435,17 @@ import Layout from '../../layouts/Layout.astro';
             // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
             snapshotButton.setInteractive();
             snapshotButton.on('pointerdown', () => {
-                captureSnapshot(this);
+                // submitUserData(this);
             });
             snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloaded', {font :'700 30px Quicksand', fill: '#05b3a4'});
             snapNotice.setVisible(false);
     }
-    function captureSnapshot(drawingZone) {
+    const url = window.location.href;
-        submitButton.setVisible(false);
+    const gameName = url.split('/');
-        // snapNotice.setVisible(true);
+    const gameType = gameName[3].split('?id=');        
-        snapshotButton.setVisible(false);
+    function submitUserData(drawingZone) {
-        customCursor.setVisible(false);
+        let imageCode;
+        console.log(drawingZone);
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
@@ -487,11 +460,64 @@ import Layout from '../../layouts/Layout.astro';
             link.download = 'my_drawing.png';
             link.click();
             document.body.removeChild(image);
+            imageCode = image.src;
+            
+
+            let userData = {
+            'userID': 'drawing@beanstalkedu.com',
+            'gameType': gameType[0],
+            'gameID': gameType[1],
+            'screenShot': imageCode
+            // 'starts': formattedDateTime,
+            // 'game_start' : gameStartTime,
+            };
+            console.log(userData);
+        fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, {
+            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)
+        }); 
             
             // Clear the drawing
             // graphics.clear();
-        });
+        });        
-    }
+    };
+    // function captureSnapshot(drawingZone) {
+    //     submitButton.setVisible(false);
+    //     // snapNotice.setVisible(true);
+    //     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) {
         if (!isErasing) {
             graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);