From 8c88aea0a90fd026bd6be4999643bf5477be5c54 Mon Sep 17 00:00:00 2001
From: Dev 1 <dev@siliconpin.com>
Date: Sat, 16 Sep 2023 20:51:26 +0530
Subject: [PATCH] full updated

---
 src/pages/drag/index.astro    | 172 ++++++++++++++++++----------------
 src/pages/drawing/index.astro |  12 +--
 src/pages/tick/varient1.astro |  26 ++---
 3 files changed, 110 insertions(+), 100 deletions(-)

diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro
index 8479ce4..c7562a6 100644
--- a/src/pages/drag/index.astro
+++ b/src/pages/drag/index.astro
@@ -50,85 +50,98 @@ import Layout from '../../layouts/Layout.astro';
 	</main>
 </Layout>
 <script is:inline>
-const targetZones = [
-  {
-    x: 0,
-    y: 170,
-    name: "target1",
-    block: null,
-  },
-  {
-    x: 0,
-    y: 340,
-    name: "target2",
-    block: null,
-  },
-  {
-    x: 0,
-    y: 510,
-    name: "target3",
-    block: null,
-  },
-  {
-    x: 0,
-    y: 680,
-    name: "target4",
-    block: null,
-  },
-];
-const blockMatches = [
-  {
-    blockName: "blocks1",
-    targetName: "target1",
-  },
-  {
-    blockName: "blocks2",
-    targetName: "target2",
-  },
-  {
-    blockName: "blocks3",
-    targetName: "target3",
-  },
-  {
-    blockName: "blocks4",
-    targetName: "target4",
-  },
-];
-// console.log(blockMatches.blockName, blockMatches.targetName)
-var assetsList = {}
-const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
-    const data =       fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
-    .then(response => response.json())
-    .then(({data}) => {
-      const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
-      assetsList.left_image1 = "https://management.beanstalkedu.com/assets/" + left_image1    + "?width=100";
-      assetsList.left_image2 = "https://management.beanstalkedu.com/assets/" + left_image2    + "?width=100";
-      assetsList.left_image3 = "https://management.beanstalkedu.com/assets/" + left_image3    + "?width=100";
-      assetsList.left_image4 = "https://management.beanstalkedu.com/assets/" + left_image4    + "?width=100";
-      assetsList.right_image1 = "https://management.beanstalkedu.com/assets/" + right_image1  + "?width=100";
-      assetsList.right_image2 = "https://management.beanstalkedu.com/assets/" + right_image2  + "?width=100";
-      assetsList.right_image3 = "https://management.beanstalkedu.com/assets/" + right_image3  + "?width=100";
-      assetsList.right_image4 = "https://management.beanstalkedu.com/assets/" + right_image4  + "?width=100";
-      const config = {
-        type: Phaser.AUTO,
-        width: window.innerWidth,
-        height: window.innerHeight,
-        backgroundColor: '#ffffff',
-        parent: "phaser-example",
-        scale: {
-          mode: Phaser.Scale.FIT,
-          autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
-          },
-        scene: MyGame,
-      };
-      const game = new Phaser.Game(config);    
-      
-    })
-    .catch(error => {
+  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const drawingZone = {
+      x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
+      y: window.innerHeight / 4,
+      width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
+      height: window.innerHeight / 2,
+  };
+  const targetZones = [
+    {
+      x: 0,
+      y: 170,
+      name: "target1",
+      block: null,
+    },
+    {
+      x: 0,
+      y: 340,
+      name: "target2",
+      block: null,
+    },
+    {
+      x: 0,
+      y: 510,
+      name: "target3",
+      block: null,
+    },
+    {
+      x: 0,
+      y: 680,
+      name: "target4",
+      block: null,
+    },
+  ];
+  const blockMatches = [
+    {
+      blockName: "blocks1",
+      targetName: "target1",
+    },
+    {
+      blockName: "blocks2",
+      targetName: "target2",
+    },
+    {
+      blockName: "blocks3",
+      targetName: "target3",
+    },
+    {
+      blockName: "blocks4",
+      targetName: "target4",
+    },
+  ];
+  // console.log(blockMatches.blockName, blockMatches.targetName)
+  var assetsList = {}
+  const params = new URLSearchParams(window.location.search);
+  const paramsID = params.get('id');
+  const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
+      .then(response => response.json())
+      .then(({data}) => {
+        const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
+        if(isMobile){
+          imageCustomWidth = "?width=100";
+        } else{
+          imageCustomWidth = "?width=100";
+        }
+        const assetsURL = "https://management.beanstalkedu.com/assets/"
+        assetsList.left_image1  = assetsURL + left_image1   + imageCustomWidth;
+        assetsList.left_image2  = assetsURL + left_image2   + imageCustomWidth;
+        assetsList.left_image3  = assetsURL + left_image3   + imageCustomWidth;
+        assetsList.left_image4  = assetsURL + left_image4   + imageCustomWidth;
+        assetsList.right_image1 = assetsURL + right_image1  + imageCustomWidth;
+        assetsList.right_image2 = assetsURL + right_image2  + imageCustomWidth;
+        assetsList.right_image3 = assetsURL + right_image3  + imageCustomWidth;
+        assetsList.right_image4 = assetsURL + right_image4  + imageCustomWidth;
+        const config = {
+          type: Phaser.AUTO,
+          width: window.innerWidth,
+          height: window.innerHeight,
+          backgroundColor: '#ffffff',
+          parent: "phaser-example",
+          scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+            },
+          scene: MyGame,
+        };
+        const game = new Phaser.Game(config);    
+        
+      })
+      .catch(error => {
 
-      console.error('Error fetching initial data:', error);
-    });
+        console.error('Error fetching initial data:', error);
+      });
 class MyGame extends Phaser.Scene {
   constructor() {
     super();
@@ -200,7 +213,6 @@ class MyGame extends Phaser.Scene {
     // 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,
@@ -270,7 +282,6 @@ class MyGame extends Phaser.Scene {
           console.error('Error fetching initial data:', error);
         });
       const displayW = window.innerWidth;
-      const displayH = window.innerHeight;
       // 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();
@@ -316,6 +327,7 @@ class MyGame extends Phaser.Scene {
       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);
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index d225dbf..958f510 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -291,9 +291,7 @@ import Layout from '../../layouts/Layout.astro';
             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%`;
@@ -323,8 +321,8 @@ import Layout from '../../layouts/Layout.astro';
             
             // Disable the default cursor
             this.input.setDefaultCursor('none');
-            const borderThickness = 2;
-            const borderColor = 0x000000; // Black color (you can customize this)
+            const borderThickness = 0;
+            const borderColor = 0xffffff; // Black color (you can customize this)
             const borderGraphics = this.add.graphics();
             borderGraphics.lineStyle(borderThickness, borderColor);
             borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
@@ -349,8 +347,8 @@ import Layout from '../../layouts/Layout.astro';
                 //     captureSnapshot(this);
                 // });
     }
-    function captureSnapshot(game) {
-        game.renderer.snapshot((image) => {
+    function captureSnapshot(drawingZone) {
+        drawingZone.renderer.snapshot((image) => {
             image.style.width = '160px';
             image.style.height = '120px';
             image.style.paddingLeft = '2px';
@@ -435,7 +433,7 @@ import Layout from '../../layouts/Layout.astro';
 //     },
 // };
 
-// const game = new Phaser.Game(config);
+// const drawingZone = new Phaser.Game(config);
 // const displayW = window.innerWidth;
 // const displayH = window.innerHeight;
 
diff --git a/src/pages/tick/varient1.astro b/src/pages/tick/varient1.astro
index 7b6e6d0..544cfcd 100644
--- a/src/pages/tick/varient1.astro
+++ b/src/pages/tick/varient1.astro
@@ -82,72 +82,72 @@
     //     // console.log('Checked Values:', checkedValues);
     // });
     function checkResult(id){
-        console.log(gameData.a1)
+        // console.log(gameData.a1)
         // alert("Matched")
         if(id == 'image1'){
             if(gameData.a1 == true){
             var element = document.getElementById(id);
             element.classList.add("greenBorder");
-            console.log('Value True')
+            // console.log('Value True')
             } else{
                 var element = document.getElementById(id);
                 element.classList.add("redBorder");
-                console.log('Value False')
+                // console.log('Value False')
             }
         };
         if(id == 'image2'){
             if(gameData.a2 == true){
             var element = document.getElementById(id);
             element.classList.add("greenBorder");
-            console.log('Value True')
+            // console.log('Value True')
             } else{
                 var element = document.getElementById(id);
                 element.classList.add("redBorder");
-                console.log('Value False')
+                // console.log('Value False')
             }
         };
         if(id == 'image3'){
             if(gameData.a3 == true){
             var element = document.getElementById(id);
             element.classList.add("greenBorder");
-            console.log('Value True')
+            // console.log('Value True')
             } else{
                 var element = document.getElementById(id);
                 element.classList.add("redBorder");
-                console.log('Value False')
+                // console.log('Value False')
             }
         };
         if(id == 'image4'){
             if(gameData.a4 == true){
             var element = document.getElementById(id);
             element.classList.add("greenBorder");
-            console.log('Value True')
+            // console.log('Value True')
             } else{
                 var element = document.getElementById(id);
                 element.classList.add("redBorder");
-                console.log('Value False')
+                // console.log('Value False')
             }
         };
         if(id == 'image5'){
             if(gameData.a5 == true){
             var element = document.getElementById(id);
             element.classList.add("greenBorder");
-            console.log('Value True')
+            // console.log('Value True')
             } else{
                 var element = document.getElementById(id);
                 element.classList.add("redBorder");
-                console.log('Value False')
+                // console.log('Value False')
             }
         };
         if(id == 'image6'){
             if(gameData.a6 == true){
             var element = document.getElementById(id);
             element.classList.add("greenBorder");
-            console.log('Value True')
+            // console.log('Value True')
             } else{
                 var element = document.getElementById(id);
                 element.classList.add("redBorder");
-                console.log('Value False')
+                // console.log('Value False')
             }
         }