Responsive Done

src/pages/drag/index.astro

@@ -1,9 +1,11 @@
 ---
 import Layout from '../../layouts/Layout.astro';
-const data = await fetch('https://management.beanstalkedu.com/items/game_drag');
-const dataJson = await data.json();
-const description = dataJson.data[2].description;
-console.log(description)
+// const data = await fetch('https://management.beanstalkedu.com/items/game_drag');
+// const dataJson = await data.json();
+// const description = dataJson.data[2].description;
+// console.log(description)
+// const search = Astro.url.searchParams.get('search')! || '';
+// console.log("ID Search",search)
 ---
 <Layout title="Drag Game">
 	<main>
@@ -11,7 +13,7 @@ console.log(description)
       <div>
         <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
         <div class="flex justify-center">
-          <!-- <h2>{description}</h2> -->
+          <!-- <h2>{data.name}</h2> -->
           <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
         </div>
       </div>
@@ -92,15 +94,13 @@ const blockMatches = [
 ];
 // 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}) => {
-      // console.log("finding:: data",data)
+      // console.log(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";
@@ -114,13 +114,11 @@ const params = new URLSearchParams(window.location.search);
         type: Phaser.AUTO,
         width: window.innerWidth,
         height: window.innerHeight,
-        
         parent: "phaser-example",
         scale: {
           mode: Phaser.Scale.FIT,
           autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
-        },
-        
+          },
         scene: MyGame,
       };
       const game = new Phaser.Game(config);    
@@ -242,21 +240,21 @@ class MyGame extends Phaser.Scene {
     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(displayW * 0.9-32, 160, "target1"),
+      this.add.image(displayW * 0.9-32, 160, "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, 540, "target3"),
+      this.add.image(displayW * 0.9-32, 540, "border").setAlpha(0.4).setScale(0.7),
+      this.add.image(displayW * 0.9-32, 730, "target4"),
+      this.add.image(displayW * 0.9-32, 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);
+// }
 
       
 
@@ -294,7 +292,7 @@ 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 = displayW * 1-210, targetZone.y, "border").setAlpha(0.2).setScale(0.7);
+      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;
     }),
@@ -302,9 +300,9 @@ class MyGame extends Phaser.Scene {
     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.1);
+        newBlock.setScale(1.3);
         newBlock.x = dragX;
         newBlock.y = dragY;
       });
@@ -393,12 +391,23 @@ const displayResult = (droppedBlocks) => {
   // finalDom.classList.add("result");
 };
 let score = 0;
+counter = 0;
 const isMatch = (blockName, targetName) => {
+// if(isMatch){
+//   counter++;
+//   if(counter === 4){
+//           const overlap = document.getElementById("overlap");
+//       overlap.style.display = "block";
+//     console.log("Done")
+//   }
+  
+// }
+  
   const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-  console.log(match)
+  // console.log(match)
   if(match){
     score++;
-    console.log("Score:", score)
+    // console.log("Score:", score)
   }
   // if(match){
   //   score++;