add User Data save function

src/pages/guided-tracing/q.astro

@@ -16,7 +16,6 @@ import Layout from "../../layouts/Layout.astro";
     width: isMobile ? window.innerWidth : window.innerWidth / 2,
     height: window.innerHeight / 2,
   };
-
   const config = {
     type: Phaser.AUTO,
     width: window.innerWidth,
@@ -39,6 +38,8 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let isDrawing = false;
+  let formattedDateTime;
+  let gameStartTime = "start time here";
 
     if(isMobile){
       cloudeSize = 200;
@@ -62,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
-      noticeHeight = 0;
+      noticeWidth = window.innerWidth * 0.5 - 100;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +83,18 @@ import Layout from "../../layouts/Layout.astro";
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
 
-            startButtonHeight = customHeight / 2 - 20;
+      startButtonHeight = customHeight / 2 - 20;
       startButtonWidth = customWidth / 1.32;
       submitWidth = customWidth / 1.32;
       submitHeight = customHeight / 2 - 20;
       noticeWidth = 0;
       noticeHeight = 0;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -111,6 +117,62 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
+    const URL = window.location.href;
+      const urlSplit = URL.split('/');
+      const gameName = urlSplit[3] + '-' + urlSplit[4]
+      let userData = {
+        'status' : 'published',
+        'user_id': 'guided-tracing@beanstalkedu.com',
+        'game_name': gameName,
+        'game_open': formattedDateTime,
+        'game_start' : gameStartTime,
+      };
+      function submitUserData() {
+        console.log(userData)
+        fetch(`https://management.beanstalkedu.com/items/game_result`, {
+            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)
+        }); 
+      };
+        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(submitWidth, submitHeight, "Submit", {
+          font: '900 24px Quicksand',
+          fill: '#05b3a4',
+          backgroundColor : '#7c4c23',
+          padding: {x: 10, y: 10},
+          shadow: {
+            offsetX : 2, 
+            offsetY : 2, 
+            color: '#000',
+            blur: 5,
+            fill: true
+          }
+        });
+        submitButton.setVisible(false);
+        submitButton.setInteractive().on('pointerdown', () => {
+          console.log('Clicked');
+          submitButton.setVisible(false);
+          submitNotic.setVisible(true);
+          // windowLoad();
+          submitUserData();
+        })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : q", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -289,8 +351,7 @@ import Layout from "../../layouts/Layout.astro";
             secondLayer.setAlpha(0.5);
         }
         });
-
-
+        
       graphics = this.add.graphics();
       graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
@@ -325,8 +386,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
+      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
       graphics.setVisible(true);
       hideButton.setVisible(false);
       demoButton.setVisible(true);