From 9146a4575aa8ebe99ec5c42d74bbbd1dacb68d2d Mon Sep 17 00:00:00 2001
From: Dev 1 <dev@siliconpin.com>
Date: Wed, 26 Jul 2023 17:33:03 +0530
Subject: [PATCH] little changes

---
 src/layouts/Layout.astro   |   1 +
 src/pages/drag/index.astro | 139 +++++++++++++++----------------------
 2 files changed, 56 insertions(+), 84 deletions(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 3bdcb2f..a49e278 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -20,6 +20,7 @@ const { title } = Astro.props;
 	</body>
 </html>
 <style is:global>
+	@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
 	/* :root {
 		--accent: 124, 58, 237;
 		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro
index 132c281..598682a 100644
--- a/src/pages/drag/index.astro
+++ b/src/pages/drag/index.astro
@@ -1,11 +1,5 @@
 ---
 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 search = Astro.url.searchParams.get('id')! || '';
-// console.log("ID Search",search)
 ---
 <Layout title="Drag Game">
 	<main>
@@ -58,25 +52,25 @@ import Layout from '../../layouts/Layout.astro';
 const targetZones = [
   {
     x: 0,
-    y: 150,
+    y: 170,
     name: "target1",
     block: null,
   },
   {
     x: 0,
-    y: 320,
+    y: 340,
     name: "target2",
     block: null,
   },
   {
     x: 0,
-    y: 490,
+    y: 510,
     name: "target3",
     block: null,
   },
   {
     x: 0,
-    y: 660,
+    y: 680,
     name: "target4",
     block: null,
   },
@@ -101,14 +95,12 @@ const blockMatches = [
 ];
 // console.log(blockMatches.blockName, blockMatches.targetName)
 var assetsList = {}
-var assetsName = {}
 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;
-      // const {left_image1_name, left_image2_name, left_image3_name, left_image4_name, right_image1_name, right_image2_name, right_image3_name, right_image4_name} = 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";
@@ -121,6 +113,7 @@ const params = new URLSearchParams(window.location.search);
         type: Phaser.AUTO,
         width: window.innerWidth,
         height: window.innerHeight,
+        backgroundColor: '#ffffff',
         parent: "phaser-example",
         scale: {
           mode: Phaser.Scale.FIT,
@@ -128,8 +121,6 @@ const params = new URLSearchParams(window.location.search);
           },
         scene: MyGame,
       };
-      const name1 = data.left_image1_name
-      console.log(name1)
       const game = new Phaser.Game(config);    
       
     })
@@ -171,7 +162,6 @@ class MyGame extends Phaser.Scene {
                 }
             });
             percentText.setOrigin(0.5, 0.5);
-            
             var assetText = this.make.text({
                 x: width / 2,
                 y: height / 2 + 50,
@@ -205,7 +195,7 @@ class MyGame extends Phaser.Scene {
     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("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');
@@ -248,82 +238,73 @@ class MyGame extends Phaser.Scene {
   }
   create() {
     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 name1 = data.left_image1_name
-      // console.log(name1)
+      const paramsID = params.get('id');
+  
+      fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
+        .then(response => response.json())
+        .then(({ data }) => {
 
-      //Description Text
-      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const loadingText = this.add.text(screenCenterX, 60, data.description).setTint(0x7c4c23).setOrigin(0.5);
-      // this.add.text(0, 0, data.description).setFontSize(20).setTint(0x7c4c23);
+          const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
 
-      // Left Image Name
-      this.add.text(displayW / 18 + 10, 220, data.left_image1_name).setTint(0x7c4c23);
-      this.add.text(displayW / 18 + 10, 389, data.left_image2_name).setTint(0x7c4c23);      
-      this.add.text(displayW / 18 + 10, 559, data.left_image3_name).setTint(0x7c4c23); 
-      this.add.text(displayW / 18 + 10, 730, data.left_image4_name).setTint(0x7c4c23);
+          // 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: `${responsiveFontSize}px quicksand`,
+            fill: '#7c4c23',
+          }).setOrigin(0.5);
       
-      //Right Image Name
-      this.add.text(displayW * 0.832-32, 220, data.right_image1_name).setTint(0x7c4c23);
-      this.add.text(displayW * 0.832-32, 389, data.right_image2_name).setTint(0x7c4c23);
-      this.add.text(displayW * 0.832-32, 559, data.right_image3_name).setTint(0x7c4c23);
-      this.add.text(displayW * 0.832-32, 730, data.right_image4_name).setTint(0x7c4c23);
-    })
-    .catch(error => {
-
-      console.error('Error fetching initial data:', error);
-    });
-
+          // 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);      
+          this.add.text(displayW / 14, 579, data.left_image3_name).setTint(0x7c4c23); 
+          this.add.text(displayW / 14, 750, data.left_image4_name).setTint(0x7c4c23);
+          
+          //Right Image Name
+          this.add.text(displayW * 0.9-50, 240, data.right_image1_name).setTint(0x7c4c23);
+          this.add.text(displayW * 0.9-50, 409, data.right_image2_name).setTint(0x7c4c23);
+          this.add.text(displayW * 0.9-50, 579, data.right_image3_name).setTint(0x7c4c23);
+          this.add.text(displayW * 0.9-50, 750, data.right_image4_name).setTint(0x7c4c23);
+        })
+        .catch(error => {
+          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();
-      this.add.image(displayW * 0.9-32, 150, "target1"),
-      this.add.image(displayW * 0.9-32, 150, "border").setAlpha(0.4).setScale(0.7),
-      this.add.image(displayW * 0.9-32, 320, "target2"),
-      this.add.image(displayW * 0.9-32, 320, "border").setAlpha(0.4).setScale(0.7),
-      this.add.image(displayW * 0.9-32, 490, "target3"),
-      this.add.image(displayW * 0.9-32, 490, "border").setAlpha(0.4).setScale(0.7),
-      this.add.image(displayW * 0.9-32, 660, "target4"),
-      this.add.image(displayW * 0.9-32, 660, "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");
+      // 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();
+      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: 100,
+        y: 120,
         textureKey: "blocks1",
         id: "block1",
       },
       {
         x: displayW / 15 - 10,
-        y: 260,
+        y: 280,
         textureKey: "blocks2",
         id: "block2",
       },
       {
         x: displayW / 15 - 10,
-        y: 440,
+        y: 460,
         textureKey: "blocks3",
         id: "block3",
       },
       {
         x: displayW / 15 - 10,
-        y: 620,
+        y: 640,
         textureKey: "blocks4",
         id: "block4",
       },
@@ -364,7 +345,6 @@ class MyGame extends Phaser.Scene {
               newBlock.disableInteractive();
               targetZone.block = newBlock;
               droppedBlocks.push(newBlock);
-
               if (isMatch(newBlock.texture.key, targetZone.name)) {
                 // console.log(isMatch(newBlock.texture.key, targetZone.name))
                 
@@ -388,7 +368,6 @@ class MyGame extends Phaser.Scene {
             } else {
               newBlock.setPosition(block.x, block.y);
             }
-
             droppedOnTargetZone = true;
             targetZoneBorders[targetIndex].setVisible(true);
             targetZoneBorders[targetIndex].setAlpha(1);
@@ -412,15 +391,8 @@ const displayResult = (droppedBlocks) => {
   // const overlap = document.getElementById("overlap");
   // overlap.style.display = "block";
   // let finalDom;
-  let points = 0;
   droppedBlocks.forEach((block) => {
     const targetZone =  targetZones.find((zone) => zone.name === block.texture.key);
-    if (targetZone) {
-      if (targetZone.block === block) {
-        points++;
-        console.log(points)
-      }
-    }
   });
 };
 score = 0;
@@ -438,13 +410,13 @@ if(isMatch){
 const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
   // console.log(match)
   if(match){
-    score ++;
+    score++;
     // console.count(score)
     let totalPoints = score
 // let totalPoints = score.length;
 console.log(totalPoints)
 // let totalPoints = {};
-    if(score === 4){
+    if(score == 4){
       finalDom = document.getElementById("win");
       finalDom.classList.add("win");
       // let img = document.createElement("img");
@@ -452,6 +424,7 @@ console.log(totalPoints)
       // img.width = 100;
       // document.getElementById('win').appendChild(img);
     } else {
+      // console.log("2")
       finalDom = document.getElementById("lost");
         finalDom.classList.add("lost");
       // console.log("Loose")
@@ -461,14 +434,12 @@ console.log(totalPoints)
   return match !== undefined;
 };
 </script>
-<style>
+<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
   * {
 margin: 0;
 padding: 0;
 cursor: -webkit-grab; cursor: grab;
-/* background-color: #7c4c23; */
-/* border: 2px solid #7c4c23;
-width: fit-content; */
+font-family: quicksand;
 }
 /* body {
 margin: 0;