add submit options

src/pages/drawing/index.astro

@@ -17,8 +17,32 @@ import Layout from '../../layouts/Layout.astro';
         width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
         height: window.innerHeight / 2,
     };
+    if(isMobile){
+        submitWidth = 230;
+        submitHeight = 95;
+        noticeWidth = 100;
+        noticeHeight = 0;
+    } else {
+        submitWidth = 380;
+        submitHeight = 95;
+        noticeWidth = 0;
+        noticeHeight = 0;
+    }
     var assetsList = {}
     var snapshotButton;
+    let submitButton;
+    let formattedDateTime;
+    gameResult = [];
+    window.onload = function() {
+        // Get the current date and time
+        currentDate = new Date();
+        
+        // Format the date and time as a string
+    formattedDateTime = currentDate.toLocaleString();
+        
+        // Log the formatted date and time to the console
+        console.log("Page loaded on: " + formattedDateTime);
+    };
 
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
@@ -78,6 +102,50 @@ import Layout from '../../layouts/Layout.astro';
             .catch(error => {
                 console.error('Error fetching initial data:', error);
             });
+            const URL = window.location.href;
+            const gameName = URL.split('/');
+            var gameResult = {
+            'f1' : gameName[3],
+            'f2' : formattedDateTime,
+            }
+            function submitUserData() {
+            fetch(`https://management.beanstalkedu.com/items/game_result`, {
+                method: 'POST',
+                headers: {
+                'Content-Type' : 'application/json'
+                },
+                body: JSON.stringify(gameResult)
+            })
+            .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',
+                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.setVisible(true);
+            submitButton.setInteractive().on('pointerdown', () => {
+            console.log('Clicked');
+            submitNotic.setVisible(true);
+            // windowLoad();
+            submitUserData();
+            })
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             if(!isMobile){
                 this.add.text(customWidth / 10, 20, "Drawing", textStyle);
@@ -361,7 +429,7 @@ import Layout from '../../layouts/Layout.astro';
             snapNotice.setVisible(false);
     }
     function captureSnapshot(drawingZone) {
-        snapNotice.setVisible(true);
+        // snapNotice.setVisible(true);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
         drawingZone.renderer.snapshot((image) => {