From e5c2a41be54b8bd7d79d6a8d1b6baeae169d759c Mon Sep 17 00:00:00 2001
From: Dev 1 <dev@siliconpin.com>
Date: Mon, 24 Jul 2023 22:33:38 +0530
Subject: [PATCH] work_on_responseveness

---
 src/pages/drag/index.astro | 164 ++++++++++++++++++++++++-------------
 src/pages/index.astro      |   2 +-
 2 files changed, 106 insertions(+), 60 deletions(-)

diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro
index 8c001a5..48d8bf0 100644
--- a/src/pages/drag/index.astro
+++ b/src/pages/drag/index.astro
@@ -48,25 +48,25 @@ console.log(description)
 <script is:inline>
 const targetZones = [
   {
-    x: 1430,
+    x: 0,
     y: 160,
     name: "target1",
     block: null,
   },
   {
-    x: 1430,
+    x: 0,
     y: 340,
     name: "target2",
     block: null,
   },
   {
-    x: 1430,
+    x: 0,
     y: 540,
     name: "target3",
     block: null,
   },
   {
-    x: 1430,
+    x: 0,
     y: 730,
     name: "target4",
     block: null,
@@ -90,6 +90,7 @@ const blockMatches = [
     targetName: "target4",
   },
 ];
+// console.log(blockMatches.blockName, blockMatches.targetName)
 var assetsList = {}
 
 const params = new URLSearchParams(window.location.search);
@@ -100,14 +101,14 @@ const params = new URLSearchParams(window.location.search);
       // console.log("finding:: data",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
-      assetsList.left_image2 = "https://management.beanstalkedu.com/assets/" + left_image2
-      assetsList.left_image3 = "https://management.beanstalkedu.com/assets/" + left_image3
-      assetsList.left_image4 = "https://management.beanstalkedu.com/assets/" + left_image4
-      assetsList.right_image1 = "https://management.beanstalkedu.com/assets/" + right_image1
-      assetsList.right_image2 = "https://management.beanstalkedu.com/assets/" + right_image2
-      assetsList.right_image3 = "https://management.beanstalkedu.com/assets/" + right_image3
-      assetsList.right_image4 = "https://management.beanstalkedu.com/assets/" + right_image4
+      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,
@@ -173,14 +174,12 @@ class MyGame extends Phaser.Scene {
                 }
             });
             assetText.setOrigin(0.5, 0.5);
-            
             this.load.on('progress', function (value) {
                 percentText.setText(parseInt(value * 100) + '%');
                 progressBar.clear();
                 progressBar.fillStyle(0xffffff, 1);
                 progressBar.fillRect(250, 280, 300 * value, 30);
             });
-            
             this.load.on('fileprogress', function (file) {
                 assetText.setText('Loading asset: ' + file.key);
             });
@@ -191,12 +190,10 @@ class MyGame extends Phaser.Scene {
                 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("tick", '/assets/tick.png');
     this.load.image("bg", '/assets/background.jpg');
     // this.load.image("target1", assetsList.right_image1);
@@ -240,38 +237,52 @@ class MyGame extends Phaser.Scene {
     });
   }
   create() {
-    const bgWidthX = window.innerWidth / 2;
-    const bgWidthY = window.innerHeight / 2;
-    this.add.image(bgWidthX, bgWidthY, "bg").setScale(2.4);
-    this.add.image(1570, 140, "target1");
-    this.add.image(1569, 160, "border").setAlpha(0.4).setScale(0.7);
-    this.add.image(1570, 320, "target2");
-    this.add.image(1569, 340, "border").setAlpha(0.4).setScale(0.7);
-    this.add.image(1570, 530, "target3");
-    this.add.image(1569, 540, "border").setAlpha(0.4).setScale(0.7);
-    this.add.image(1570, 720, "target4");
-    this.add.image(1569, 730, "border").setAlpha(0.4).setScale(0.7);
+
+    const displayW = window.innerWidth;
+    const displayH = window.innerHeight;
+    
+      this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
+      this.add.image(displayW * 0.82, 160, "target1"),
+      this.add.image(displayW * 0.82, 160, "border").setAlpha(0.4).setScale(0.7),
+      this.add.image(displayW * 0.82, 340, "target2"),
+      this.add.image(displayW * 0.82, 340, "border").setAlpha(0.4).setScale(0.7),
+      this.add.image(displayW * 0.82, 540, "target3"),
+      this.add.image(displayW * 0.82, 540, "border").setAlpha(0.4).setScale(0.7),
+      this.add.image(displayW * 0.82, 730, "target4"),
+      this.add.image(displayW * 0.82, 730, "border").setAlpha(0.4).setScale(0.7);
+{
+  this.group = this.add.group();
+  Phaser.Math.Distance.Squared;
+  this.group.createMultiple({ key: 'target4'});
+  this.group.createMultiple({ key: 'target4',});
+  Phaser.Actions.SetXY(this.group.getChildren(), displayW * 0.82, 100, 100);
+}
+
+      
+
+    // this.add.image(0, 0, "target4").setPosition(100, 200);
+    // this.add.image(1570, 730, "target4");
     const blocks = [
       {
-        x: 300,
+        x: displayW / 15,
         y: 90,
         textureKey: "blocks1",
         id: "block1",
       },
       {
-        x: 300,
+        x: displayW / 15,
         y: 270,
         textureKey: "blocks2",
         id: "block2",
       },
       {
-        x: 300,
+        x: displayW / 15,
         y: 470,
         textureKey: "blocks3",
         id: "block3",
       },
       {
-        x: 300,
+        x: displayW / 15,
         y: 660,
         textureKey: "blocks4",
         id: "block4",
@@ -283,11 +294,11 @@ class MyGame extends Phaser.Scene {
 
     targetZones.forEach((targetZone) => {
       const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
-      const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(0.7);
+      const targetBorder = this.add.image(targetZone.x = displayW * 1-210, 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);
@@ -297,7 +308,6 @@ class MyGame extends Phaser.Scene {
         newBlock.x = dragX;
         newBlock.y = dragY;
       });
-
       newBlock.on("dragend", () => {
         newBlock.setScale(1.0);
         let droppedOnTargetZone = false;
@@ -316,6 +326,23 @@ class MyGame extends Phaser.Scene {
               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 {
@@ -332,25 +359,26 @@ class MyGame extends Phaser.Scene {
         if (!droppedOnTargetZone) {
           newBlock.setPosition(block.x, block.y);
         }
-
-        if (droppedBlocks.length === targetZones.length) {
+        if (droppedBlocks.length === targetZones.length) 
+        {
+          
           displayResult(droppedBlocks);
         }
       });
-    });
+    })   
   }
 }
-
 const displayResult = (droppedBlocks) => {
   // const overlap = document.getElementById("overlap");
   // overlap.style.display = "block";
-  let finalDom;
+  // let finalDom;
   let points = 0;
   droppedBlocks.forEach((block) => {
-    const targetZone = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+    const targetZone =  targetZones.find((zone) => zone.name === block.texture.key);
     if (targetZone) {
       if (targetZone.block === block) {
         points++;
+        console.log(points)
       }
     }
   });
@@ -367,26 +395,44 @@ const displayResult = (droppedBlocks) => {
 let score = 0;
 const isMatch = (blockName, targetName) => {
   const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+  console.log(match)
   if(match){
-    score++
-    console.log(score)
-  }
-  if(score === 4){
-    
-    const overlap = document.getElementById("overlap");
-  overlap.style.display = "block";
-  let  resultt;
-  if (resultt >= 2){
-    // result
-    finalDom = document.getElementById("win");
-    finalDom.classList.add("win");
-    console.log("Win")
-  } else {
-        finalDom = document.getElementById("lost");
-        finalDom.classList.add("lost");
-        console.log("Loose")
-  }
+    score++;
+    console.log("Score:", score)
   }
+  // if(match){
+  //   score++;
+  //   // if(score === 4){
+  //   //   const overlap = document.getElementById("overlap");
+  //   //   overlap.style.display = "block";
+  //   // }
+  //   console.log(score.length)
+  //   if(score >= 4){
+  //     console.log("win")
+  //   } else{
+  //     console.log("Loose")
+  //   }
+  // }
+  // if(match){
+  //   score++
+  //   console.log(score)
+  //   if(score.length >= 4){
+  //   const overlap = document.getElementById("overlap");
+  //     overlap.style.display = "block";
+  //     let  resultt;
+  // if (resultt >= 2){
+  //   // result
+  //   finalDom = document.getElementById("win");
+  //   finalDom.classList.add("win");
+  //   console.log("Win")
+  // } else {
+  //       finalDom = document.getElementById("lost");
+  //       finalDom.classList.add("lost");
+  //       console.log("Loose")
+  // }
+  // }
+  // }
+  
 
   // console.log("Result", result)
   return match !== undefined;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d5de0df..1ac0c84 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,7 +11,7 @@ import Footer from '../components/Footer.astro';
 		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
 		<p class="instructions">
 			To get started, open the directory <code>src/pages</code> in your project.<br />
-			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
+			<strong>Code Challenge: Tweak the "Welcome to Astro" message above.</strong> 
 		</p>
 		<ul role="list" class="link-card-grid">
 			<Card