Next_Work_on_Responsevness

src/pages/drag/index.astro

@@ -1,14 +1,19 @@
 ---
 import Layout from '../../layouts/Layout.astro';
-// const planResp = await fetch('https://api8.siliconpin.com/items/hosting?filter[status][_eq]=published');
+const data = await fetch('https://management.beanstalkedu.com/items/game_drag');
-//     const planRespJson = await planResp.json();
+const dataJson = await data.json();
-//     const planRespData = planRespJson.data;
+const description = dataJson.data[2].description;
+console.log(description)
 ---
 <Layout title="Drag Game">
 	<main>
 		<div>
       <div>
-        <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt="">
+        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
+        <div class="flex justify-center">
+          <!-- <h2>{description}</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>
@@ -41,7 +46,7 @@ import Layout from '../../layouts/Layout.astro';
 	</main>
 </Layout>
 <script is:inline>
-   const targetZones = [
+const targetZones = [
   {
     x: 1430,
     y: 160,
@@ -85,14 +90,40 @@ const blockMatches = [
     targetName: "target4",
   },
 ];
-
-//let counter = 0; // Counter variable
 class MyGame extends Phaser.Scene {
   constructor() {
     super();
   }
   preload() {
-    // this.load.image("wrong", "https://management.beanstalkedu.com/assets/1320eec6-3029-41e5-8aad-904e590cb420");
+    fetch(`https://management.beanstalkedu.com/items/game_drag`)
+    .then(response => response.json())
+    .then(data => { 
+      console.log(data.data);
+      const params = new URLSearchParams(window.location.search);
+      const paramsID = params.get('id');
+      console.log(paramsID);
+      fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
+        .then(response => response.json())
+        .then(dataWithParamsID => {
+          const description = dataWithParamsID.data.description;
+          console.log(description);
+          const text = this.add.text(900, 20, description, {
+      fontSize: '32px',
+      color: '#ffffff',
+    });
+
+    text.setOrigin(0.5);
+          // let description_txt = this.add.text(0, 0, description, {font: '40px Ariel', fill: '#7c4c23' });
+          Phaser.Display.Align.In.Center(description_txt);
+        })
+        .catch(error => {
+          console.error('Error fetching data using paramsID:', error);
+        });
+    })
+    .catch(error => {
+      console.error('Error fetching initial data:', error);
+    });
+    
     this.load.image("tick", '/assets/tick.png');
     this.load.image("bg", '/assets/background.jpg');
     this.load.image("target1", '/assets/yam.png');
@@ -100,7 +131,7 @@ 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("blocks1", '/assets/chat.png', {
+    this.load.spritesheet("blocks1", '/assets/chat.png',{
       frameWidth: 100,
       frameHeight: 100,
     });
@@ -118,10 +149,27 @@ class MyGame extends Phaser.Scene {
     });
   }
   create() {
-
+    fetch(`https://management.beanstalkedu.com/items/game_drag`)
-
+    .then(response => response.json())
-
+    .then(data => { 
-  //   fetch(`https://management.beanstalkedu.com/items/game_drag`)
+      // console.log(data.data);
+      const params = new URLSearchParams(window.location.search);
+      const paramsID = params.get('id');
+      console.log(paramsID);
+      fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
+        .then(response => response.json())
+        .then(dataWithParamsID => {
+          const leftImage1 = dataWithParamsID.data.left_image1
+          console.log(leftImage1);
+        })
+        .catch(error => {
+          console.error('Error fetching data using paramsID:', error);
+        });
+    })
+    .catch(error => {
+      console.error('Error fetching initial data:', error);
+    });
+  //    fetch(`https://management.beanstalkedu.com/items/game_drag`)
   // .then(response => response.json())
   // .then(data => { 
   //   // console.log(data)
@@ -273,51 +321,25 @@ const isMatch = (blockName, targetName) => {
     console.log("Win")
   } else {
         finalDom = document.getElementById("lost");
-    finalDom.classList.add("lost");
+        finalDom.classList.add("lost");
-    console.log("Loose")
+        console.log("Loose")
   }
   }
 
   // console.log("Result", result)
   return match !== undefined;
 };
-
-// Example usage
-
-
-// Calculate the sum total points
-// for (const match of blockMatches) {
-//   isMatch(match.blockName, match.targetName);
-// }
-
-// console.log("Sum Total Points:", counter);
-
-
-// let counter = 0;
-
-// const isMatch = (blockName, targetName) => {
-//   const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-
-//   if (match) {
-//     counter++;
-//   }
-//   if (counter <= 4) {
-//     console.log("Points:", counter);
-//   } else {
-//     console.log("Matchggg:", counter);
-//   }
-//   return match !== undefined;
-// };
-
 const config = {
   type: Phaser.AUTO,
   width: window.innerWidth,
   height: window.innerHeight,
+  
   parent: "phaser-example",
   scale: {
     mode: Phaser.Scale.FIT,
-    autoCenter: Phaser.Scale.CENTER_BOTH,
+    autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
   },
+  
   scene: MyGame,
 };