add submit options

package.json

@@ -4,8 +4,8 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "astro dev --host --port 2008",
+    "dev": "astro dev --host --port 2022",
-    "start": "astro dev --host --port 2008",
+    "start": "astro dev --host --port 2022",
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro"

src/pages/drag/MyGame.mjs

@@ -0,0 +1,272 @@
+import { assetsList, submitButton, targetZones, isMatch, displayResult } from "./index.astro.inline.mjs";
+
+export class MyGame extends Phaser.Scene {
+constructor() {
+super();
+}
+preload() {
+var progressBar = this.add.graphics();
+var progressBox = this.add.graphics();
+progressBox.fillStyle(2236962, 0.8);
+progressBox.fillRect(240, 270, 320, 50);
+
+var width = this.cameras.main.width;
+var height = this.cameras.main.height;
+var loadingText = this.make.text({
+x: width / 2,
+y: height / 2 - 50,
+text: 'Loading...',
+style: {
+font: '20px monospace',
+fill: '#ffffff'
+}
+});
+loadingText.setOrigin(0.5, 0.5);
+var percentText = this.make.text({
+x: width / 2,
+y: height / 2 - 5,
+text: '0%',
+style: {
+font: '18px monospace',
+fill: '#ffffff'
+}
+});
+percentText.setOrigin(0.5, 0.5);
+var assetText = this.make.text({
+x: width / 2,
+y: height / 2 + 50,
+text: '',
+style: {
+font: '18px monospace',
+fill: '#ffffff'
+}
+});
+assetText.setOrigin(0.5, 0.5);
+this.load.on('progress', function (value) {
+percentText.setText(parseInt(value * 100) + '%');
+progressBar.clear();
+progressBar.fillStyle(16777215, 1);
+progressBar.fillRect(250, 280, 300 * value, 30);
+});
+this.load.on('fileprogress', function (file) {
+assetText.setText('Loading asset: ' + file.key);
+});
+this.load.on('complete', function () {
+progressBar.destroy();
+progressBox.destroy();
+loadingText.destroy();
+percentText.destroy();
+assetText.destroy();
+});
+// this.load.image('logo', 'zenvalogo.png');
+for (var i = 0; i < 5; i++) {
+this.load.image('logo' + i, '/assets/background.jpg');
+}
+this.load.image("topMatch", "/assets/top_match.jpg");
+this.load.image("topLogo", "/assets/top_logo.jpg");
+this.load.image("tick", '/assets/tick.png');
+// this.load.image("bg", '/assets/bgwhite.jpg');
+// this.load.image("target1", assetsList.right_image1);
+// this.load.image("target2", '/assets/hay.png');
+// this.load.image("target3", '/assets/mat.png');
+// this.load.image("target4", '/assets/star.png');
+this.load.image("border", '/assets/squar.png');
+this.load.spritesheet("target1", assetsList.right_image1, {
+frameWidth: 100,
+frameHeight: 100,
+});
+this.load.spritesheet("target2", assetsList.right_image2, {
+frameWidth: 100,
+frameHeight: 100,
+});
+this.load.spritesheet("target3", assetsList.right_image3, {
+frameWidth: 100,
+frameHeight: 100,
+});
+this.load.spritesheet("target4", assetsList.right_image4, {
+frameWidth: 100,
+frameHeight: 100,
+});
+
+this.load.spritesheet("blocks1", assetsList.left_image1, {
+frameWidth: 100,
+frameHeight: 100,
+});
+this.load.spritesheet("blocks2", assetsList.left_image2, {
+frameWidth: 100,
+frameHeight: 100,
+});
+this.load.spritesheet("blocks3", assetsList.left_image3, {
+frameWidth: 100,
+frameHeight: 100,
+});
+this.load.spritesheet("blocks4", assetsList.left_image4, {
+frameWidth: 100,
+frameHeight: 100,
+});
+}
+create() {
+const params = new URLSearchParams(window.location.search);
+const paramsID = params.get('id');
+fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
+.then(response => response.json())
+.then(({ data }) => {
+const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+// Base font size for your text
+const baseFontSize = 20;
+// Calculate responsive font size based on screen width
+const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
+const descrptText = this.add.text(screenCenterX, 70, data.description, {
+font: `600 ${responsiveFontSize}px Quicksand`,
+fill: '#7c4c23',
+}).setOrigin(0.5);
+// Left Image Name
+this.add.text(displayW / 14, 240, data.left_image1_name).setTint(8145955);
+this.add.text(displayW / 14, 409, data.left_image2_name).setTint(8145955);
+this.add.text(displayW / 14, 579, data.left_image3_name).setTint(8145955);
+this.add.text(displayW / 14, 750, data.left_image4_name).setTint(8145955);
+
+//Right Image Name
+this.add.text(displayW * 0.9 - 50, 240, data.right_image1_name).setTint(8145955);
+this.add.text(displayW * 0.9 - 50, 409, data.right_image2_name).setTint(8145955);
+this.add.text(displayW * 0.9 - 50, 579, data.right_image3_name).setTint(8145955);
+this.add.text(displayW * 0.9 - 50, 750, data.right_image4_name).setTint(8145955);
+})
+.catch(error => {
+console.error('Error fetching initial data:', error);
+});
+const displayW = window.innerWidth;
+async; submitUserData(); {
+try {
+const response = await fetch(`https://management.beanstalkedu.com/items/game_result`, {
+method: 'POST',
+headers: {
+'Content-Type': 'application/json'
+},
+body: JSON.stringify('Test submission')
+});
+
+if (response.ok) {
+console.log('Data Saved', response);
+} else {
+console.log('Something Wrong', response);
+}
+} catch (error) {
+console.error('An error occurred', error);
+}
+}
+submitButton = this.add.text(window.innerWidth / 2, window.innerHeight / 2, "Submit", {
+font: '600 40px Quicksand',
+fill: '#fff',
+backgroundColor: '#05b3a4',
+});
+submitButton.setVisible(true);
+submitButton.setInteractive().on('pointerdown', () => {
+console.log('Clicked');
+});
+// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
+this.add.image(displayW / 6, 30, "topMatch").setScale();
+this.add.image(displayW * 0.8 - 5, 30, "topLogo").setScale();
+this.add.image(displayW * 0.9 - 32, 170, "target1"),
+this.add.image(displayW * 0.9 - 32, 170, "border").setAlpha(0.4).setScale(0.7),
+this.add.image(displayW * 0.9 - 32, 340, "target2"),
+this.add.image(displayW * 0.9 - 32, 340, "border").setAlpha(0.4).setScale(0.7),
+this.add.image(displayW * 0.9 - 32, 510, "target3"),
+this.add.image(displayW * 0.9 - 32, 510, "border").setAlpha(0.4).setScale(0.7),
+this.add.image(displayW * 0.9 - 32, 680, "target4"),
+this.add.image(displayW * 0.9 - 32, 680, "border").setAlpha(0.4).setScale(0.7);
+const blocks = [
+{
+x: displayW / 15 - 10,
+y: 120,
+textureKey: "blocks1",
+id: "block1",
+},
+{
+x: displayW / 15 - 10,
+y: 280,
+textureKey: "blocks2",
+id: "block2",
+},
+{
+x: displayW / 15 - 10,
+y: 460,
+textureKey: "blocks3",
+id: "block3",
+},
+{
+x: displayW / 15 - 10,
+y: 640,
+textureKey: "blocks4",
+id: "block4",
+},
+];
+const droppedBlocks = [];
+const targetZoneBorders = [];
+targetZones.forEach((targetZone) => {
+const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
+const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.7);
+targetZoneBorders.push(targetBorder);
+targetZone.block = null;
+}),
+
+blocks.forEach((block, index) => {
+const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
+this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
+newBlock.on("drag", (pointer, dragX, dragY) => {
+newBlock.setScale(1.3);
+newBlock.x = dragX;
+newBlock.y = dragY;
+});
+newBlock.on("dragend", () => {
+newBlock.setScale(1);
+let droppedOnTargetZone = false;
+targetZones.forEach((targetZone, targetIndex) => {
+if (Phaser.Geom.Intersects.RectangleToRectangle(
+newBlock.getBounds(),
+new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
+)) {
+if (targetZone.block === null) {
+newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
+newBlock.disableInteractive();
+targetZone.block = newBlock;
+droppedBlocks.push(newBlock);
+if (isMatch(newBlock.texture.key, targetZone.name)) {
+// console.log(isMatch(newBlock.texture.key, targetZone.name))
+// if(isMatch(newBlock.texture.key, targetZone.name)){
+//   score++;
+//   // console.log(score);
+//   if(score === 4){
+//       const overlap = document.getElementById("overlap");
+//       overlap.style.display = "block";
+//       let finalDom;
+//   }
+//   console.log(score)
+//   if(score >= 2){
+//     console.log("Win")
+//   } else{
+//     console.log("Loose")
+//   }
+// }
+//counter++; // Increment the counter when a match is found
+}
+} else {
+newBlock.setPosition(block.x, block.y);
+}
+droppedOnTargetZone = true;
+targetZoneBorders[targetIndex].setVisible(true);
+targetZoneBorders[targetIndex].setAlpha(1);
+return;
+}
+});
+
+if (!droppedOnTargetZone) {
+newBlock.setPosition(block.x, block.y);
+}
+if (droppedBlocks.length === targetZones.length) {
+displayResult(droppedBlocks);
+}
+});
+});
+}
+}

src/pages/drag/index.astro

@@ -57,6 +57,31 @@ 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,
   };
+  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);
+  };
+  if(isMobile){
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 67;
+      buttonHeight = 0;
+  } else {
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 100;
+      buttonHeight = 0;
+  }
+
   const targetZones = [
     {
       x: 0,
@@ -250,13 +275,10 @@ class MyGame extends Phaser.Scene {
     create() {
       const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-  
         fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
           .then(response => response.json())
           .then(({ data }) => {
-
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-
             // Base font size for your text
             const baseFontSize = 20;
             // Calculate responsive font size based on screen width
@@ -265,7 +287,6 @@ class MyGame extends Phaser.Scene {
               font: `600 ${responsiveFontSize}px Quicksand`,
               fill: '#7c4c23',
             }).setOrigin(0.5);
-      
             // Left Image Name
             this.add.text(displayW / 14, 240, data.left_image1_name).setTint(0x7c4c23);
             this.add.text(displayW / 14, 409, data.left_image2_name).setTint(0x7c4c23);      
@@ -282,6 +303,53 @@ class MyGame extends Phaser.Scene {
             console.error('Error fetching initial data:', error);
           });
         const displayW = window.innerWidth;
+        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 / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
+            font: '600 20px Quicksand',
+            fill: 'blue'
+          }).setDepth(1);
+          submitNotic.setVisible(false);
+        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+          font: '600 30px Quicksand',
+          fill: '#fff',
+          backgroundColor: 'blue',
+          padding: { x: 20, y: 10 },
+        }).setDepth(1);
+        submitButton.setVisible(false);
+        submitButton.setInteractive().on('pointerdown', () => {
+          // console.log('Clicked');
+          submitButton.setVisible(false);
+          submitNotic.setVisible(true);
+          // window.location.reload();
+          // windowLoad();
+          submitUserData();
+        })
         // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
         this.add.image(displayW / 6, 30, "topMatch").setScale();
         this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
@@ -389,9 +457,23 @@ class MyGame extends Phaser.Scene {
               displayResult(droppedBlocks);
             }
           });
-    })   
+        });  
     }
   }
+// let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
+//         font: '900 24px quicksand',
+//         fill: '#05b3a4',
+//         backgroundColor: '#7c4c23',
+//         padding: { x: 20, y: 10 },
+//         borderRadius: '15px', // Border radius
+//         shadow: {
+//             offsetX: 2, // X offset for the shadow
+//             offsetY: 2, // Y offset for the shadow
+//             color: '#000', // Shadow color
+//             blur: 5, // Shadow blur
+//             fill: true // Apply shadow to fill (background color)
+//         }
+//       });
   const displayResult = (droppedBlocks) => {
     // const overlap = document.getElementById("overlap");
     // overlap.style.display = "block";
@@ -408,75 +490,74 @@ if(isMatch){
     counter++;
     // console.log(counter)
 
-
     if(counter === 4){
-    
         const overlap = document.getElementById("overlap");
         overlap.style.display = "block";
-      // console.log("Done")
+        console.log(counter)
+        submitButton.setVisible(true);
     }
   }
   const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-
   let scoreTotal=0;
   if(match){
     scoreTotal++;
     // console.log(scoreTotal)
   }
-  console.log(scoreTotal)
+  //   console.log(scoreTotal)
-  // console.log(match)
+  //   // console.log(match)
-  if(match){
+  //   if(match){
-    score++;
+  //     score++;
-    console.log(score)
+  //     console.log(score)
-    let day;
+  //     let day;
-    switch (score) {
+  //     switch (score) {
-      case 0:
+  //       case 0:
-        day = "Points - 1";
+  //         day = "Points - 1";
-        break;
+  //         break;
-      case 2:
+  //       case 2:
-        day = "Points - 2";
+  //         day = "Points - 2";
-        break;
+  //         break;
-      case 4:
+  //       case 4:
-        day = "Points - 4";
+  //         day = "Points - 4";
 
-    }
+  //     }
-    console.log(day)
+  //     console.log(day)
-      finalDom = document.getElementById("good");
-      finalDom.classList.add("good");
-      document.getElementById("good").innerHTML = day;
-      document.getElementById("good").style.color = '#7c4c23'
-// console.log(totalScore)
-    // if(score === 2){
   //       finalDom = document.getElementById("good");
   //       finalDom.classList.add("good");
-    //   document.getElementById("good").innerHTML = " Good";
+  //       document.getElementById("good").innerHTML = day;
   //       document.getElementById("good").style.color = '#7c4c23'
+  // // console.log(totalScore)
+  //     // if(score === 2){
+  //     //   finalDom = document.getElementById("good");
+  //     //   finalDom.classList.add("good");
+  //     //   document.getElementById("good").innerHTML = " Good";
+  //     //   document.getElementById("good").style.color = '#7c4c23'
 
 
-    //   // let img = document.createElement("img");
+  //     //   // let img = document.createElement("img");
-    //   // img.src = "/assets/party-feestje.gif";
+  //     //   // img.src = "/assets/party-feestje.gif";
-    //   // img.width = 100;
+  //     //   // img.width = 100;
-    //   // document.getElementById('win').appendChild(img);
+  //     //   // document.getElementById('win').appendChild(img);
-    // }
+  //     // }
-    // else if(score === 4) {
+  //     // else if(score === 4) {
-    //   finalDom = document.getElementById("verryGood");
+  //     //   finalDom = document.getElementById("verryGood");
-    //   finalDom.classList.add("verryGood");
+  //     //   finalDom.classList.add("verryGood");
-    //   document.getElementById("verryGood").innerHTML = "Verry Good";
+  //     //   document.getElementById("verryGood").innerHTML = "Verry Good";
-    //   document.getElementById("verryGood").style.color = '#7c4c23'
+  //     //   document.getElementById("verryGood").style.color = '#7c4c23'
-    // }
+  //     // }
-    // else {
+  //     // else {
-    //   // finalDom = document.getElementById("lost");
+  //     //   // finalDom = document.getElementById("lost");
-    //   // finalDom.classList.add("lost");
+  //     //   // finalDom.classList.add("lost");
-    //   // document.getElementById("lost").innerHTML = " Lost";
+  //     //   // document.getElementById("lost").innerHTML = " Lost";
-    //   // document.getElementById("lost").style.color = '#7c4c23'
+  //     //   // document.getElementById("lost").style.color = '#7c4c23'
-    //   // console.log("Losttttt")
+  //     //   // console.log("Losttttt")
-    // }
+  //     // }
 
-  } else{
+  //   } else{
-    score = score
+  //     score = score
-  }
+  //   }
-  return match !== undefined;
+  //   return match !== undefined;
   };
+
 </script>
 <style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
   * {

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) => {