add_image_name_&_bg_removed

src/pages/drag/font-size.js

@@ -0,0 +1,30 @@
+const config = {
+    type: Phaser.AUTO,
+    width: 800,
+    height: 600,
+    scene: {
+        create: create
+    }
+};
+
+const game = new Phaser.Game(config);
+
+function create() {
+    const text = this.add.text(0, 0, 'Responsive Font', {
+        fontSize: getResponsiveFontSize(game.scale.width, game.scale.height, 40),});
+
+    // Center the text
+    text.setPosition(game.scale.width / 2 - text.width / 2, game.scale.height / 2 - text.height / 2);
+}
+
+function getResponsiveFontSize(baseWidth, baseHeight, baseSize) {
+    // You can tweak these values as per your requirements
+    const minWidth = 400;
+    const maxWidth = 1200;
+    const minFontSize = 20;
+    const maxFontSize = 60;
+
+    // Calculate the font size based on the screen width
+    const ratio = Phaser.Math.Clamp(baseWidth, minWidth, maxWidth) / maxWidth;
+    return minFontSize + (maxFontSize - minFontSize) * ratio;
+}

src/pages/drag/index.astro

@@ -1,29 +1,36 @@
 ---
 import Layout from '../../layouts/Layout.astro';
-// const data = await fetch('https://management.beanstalkedu.com/items/game_drag');
+// 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')! || '';
+// const search = Astro.url.searchParams.get('id')! || '';
 // console.log("ID Search",search)
 ---
 <Layout title="Drag Game">
 	<main>
 		<div>
       <div>
+        
         <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
         <div class="flex justify-center">
+          <div class="container mx-auto px-4">
+            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
+              <img src="/assets/top_match.jpg" alt="" />
+              <img src="/assets/top_logo.jpg" alt="" />
+            </div> -->
+          </div>
           <!-- <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>
       <div id="overlap">
-        <div id="result"></div>
+        <!-- <div id="result"></div> -->
         <div id="win" class="displayNone "> 
           <p>Congratulations!</p>
           <p>You win the Game!</p>
-          <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" />
+          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
-          <div class="">
+          <div class="flex flex-row">
             <a href="" >
               <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
             </a>
@@ -51,25 +58,25 @@ import Layout from '../../layouts/Layout.astro';
 const targetZones = [
   {
     x: 0,
-    y: 160,
+    y: 150,
     name: "target1",
     block: null,
   },
   {
     x: 0,
-    y: 340,
+    y: 320,
     name: "target2",
     block: null,
   },
   {
     x: 0,
-    y: 540,
+    y: 490,
     name: "target3",
     block: null,
   },
   {
     x: 0,
-    y: 730,
+    y: 660,
     name: "target4",
     block: null,
   },
@@ -94,13 +101,14 @@ 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}) => {
-      // console.log(data)
+      const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = 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";
@@ -109,7 +117,6 @@ const params = new URLSearchParams(window.location.search);
       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,
@@ -121,10 +128,13 @@ const params = new URLSearchParams(window.location.search);
           },
         scene: MyGame,
       };
+      const name1 = data.left_image1_name
+      console.log(name1)
       const game = new Phaser.Game(config);    
       
     })
     .catch(error => {
+
       console.error('Error fetching initial data:', error);
     });
 class MyGame extends Phaser.Scene {
@@ -192,8 +202,10 @@ class MyGame extends Phaser.Scene {
             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/background.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');
@@ -235,19 +247,49 @@ 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)
+
+      //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);
+
+      // 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);
+      
+      //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);
+    });
 
       const displayW = window.innerWidth;
       const displayH = window.innerHeight;
-    
       this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
-      this.add.image(displayW * 0.9-32, 160, "target1"),
+      this.add.image(displayW /6, 30, "topMatch").setScale();
-      this.add.image(displayW * 0.9-32, 160, "border").setAlpha(0.4).setScale(0.7),
+     this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
-      this.add.image(displayW * 0.9-32, 340, "target2"),
+      this.add.image(displayW * 0.9-32, 150, "target1"),
-      this.add.image(displayW * 0.9-32, 340, "border").setAlpha(0.4).setScale(0.7),
+      this.add.image(displayW * 0.9-32, 150, "border").setAlpha(0.4).setScale(0.7),
-      this.add.image(displayW * 0.9-32, 540, "target3"),
+      this.add.image(displayW * 0.9-32, 320, "target2"),
-      this.add.image(displayW * 0.9-32, 540, "border").setAlpha(0.4).setScale(0.7),
+      this.add.image(displayW * 0.9-32, 320, "border").setAlpha(0.4).setScale(0.7),
-      this.add.image(displayW * 0.9-32, 730, "target4"),
+      this.add.image(displayW * 0.9-32, 490, "target3"),
-      this.add.image(displayW * 0.9-32, 730, "border").setAlpha(0.4).setScale(0.7);
+      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;
@@ -262,26 +304,26 @@ class MyGame extends Phaser.Scene {
     // this.add.image(1570, 730, "target4");
     const blocks = [
       {
-        x: displayW / 15,
+        x: displayW / 15 - 10,
-        y: 90,
+        y: 100,
         textureKey: "blocks1",
         id: "block1",
       },
       {
-        x: displayW / 15,
+        x: displayW / 15 - 10,
-        y: 270,
+        y: 260,
         textureKey: "blocks2",
         id: "block2",
       },
       {
-        x: displayW / 15,
+        x: displayW / 15 - 10,
-        y: 470,
+        y: 440,
         textureKey: "blocks3",
         id: "block3",
       },
       {
-        x: displayW / 15,
+        x: displayW / 15 - 10,
-        y: 660,
+        y: 620,
         textureKey: "blocks4",
         id: "block4",
       },
@@ -380,69 +422,41 @@ const displayResult = (droppedBlocks) => {
       }
     }
   });
-  // if (points >= droppedBlocks.length / 2) {
-  //   finalDom = document.getElementById("win");
-  //   finalDom.classList.add("win");
-  // } else {
-  //   finalDom = document.getElementById("lost");
-  //   finalDom.classList.add("lost");
-  // }
-  // document.getElementById("result").innerHTML = "Points: " + points;
-  // finalDom.classList.add("result");
 };
-let score = 0;
+score = 0;
 counter = 0;
 const isMatch = (blockName, targetName) => {
-// if(isMatch){
+if(isMatch){
-//   counter++;
+  counter++;
-//   if(counter === 4){
+  // console.log(counter)
-//           const overlap = document.getElementById("overlap");
+  if(counter === 4){
-//       overlap.style.display = "block";
+      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)
   if(match){
     score ++;
-    // console.log("Score:", score)
+    // console.count(score)
+    let totalPoints = score
+// let totalPoints = score.length;
+console.log(totalPoints)
+// let totalPoints = {};
+    if(score === 4){
+      finalDom = document.getElementById("win");
+      finalDom.classList.add("win");
+      // let img = document.createElement("img");
+      // img.src = "/assets/party-feestje.gif";
+      // img.width = 100;
+      // document.getElementById('win').appendChild(img);
+    } else {
+      finalDom = document.getElementById("lost");
+        finalDom.classList.add("lost");
+      // console.log("Loose")
+    }
   }
-  // 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;
 };
@@ -476,9 +490,6 @@ user-select: none;
 } */
   #overlap {       
     display: none;
-    /* width: 800px;
-    height: 600px; */
-    
     margin: 0;
     position: absolute;
     top: 50%;
@@ -511,8 +522,4 @@ user-select: none;
     font-size: 30px;
     font-weight: bold;
   }
-  /* .try{
-    font-size: 20px;
-    color: white;
-  } */
 </style>