diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro
index a827d59..01529dd 100644
--- a/src/pages/drag/index.astro
+++ b/src/pages/drag/index.astro
@@ -90,39 +90,143 @@ const blockMatches = [
     targetName: "target4",
   },
 ];
+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.data);
+      // let ttt="ttt";
+      data
+    })
+    .catch(error => {
+      console.error('Error fetching initial data:', error);
+    });
 class MyGame extends Phaser.Scene {
   constructor() {
     super();
   }
   preload() {
-    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');
+    // fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
+    // .then(response => response.json())
+    // .then(data => { 
+    //   console.log(data.data);
+    //   // let ttt="ttt";
+      
+    // })
+    // .catch(error => {
+    //   console.error('Error fetching initial data:', error);
+    // });
+
+    async function getAssetDetails(){
       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);
+      try {
+        const response = await fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`, {
+          // method: "POST", // or 'PUT'
+          // headers: {
+          //   "Content-Type": "application/json",
+          // },
+          body: JSON.stringify(data),
         });
-    })
-    .catch(error => {
-      console.error('Error fetching initial data:', error);
-    });
+
+        const result = await response.json();
+        console.log("Success:", result);
+        // this.load.image("bg", '/assets/background.jpg');
+      } catch (error) {
+        console.error("Error:", error);
+      }
+    }
+// console.log(getAssetDetails());
+// getAssetDetails();
+
+// async function postJSON(data) {
+//   try {
+//     const response = await fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`, {
+//       method: "POST", // or 'PUT'
+//       headers: {
+//         "Content-Type": "application/json",
+//       },
+//       body: JSON.stringify(data),
+//     });
+
+//     const result = await response.json();
+//     console.log("Success:", result);
+//   } catch (error) {
+//     console.error("Error:", error);
+//   }
+// }
+
+// const data = { username: "example" };
+// postJSON(data);
+
+
+
+    var progressBar = this.add.graphics();
+            var progressBox = this.add.graphics();
+            progressBox.fillStyle(0x222222, 0.8);
+            progressBox.fillRect(240, 270, 320, 50);
+            
+            var width = this.cameras.main.width;
+            var height = this.cameras.main.height;
+            var loadingText = this.make.text({
+                x: width / 2,
+                y: height / 2 - 50,
+                text: 'Loading...',
+                style: {
+                    font: '20px monospace',
+                    fill: '#ffffff'
+                }
+            });
+            loadingText.setOrigin(0.5, 0.5);
+            
+            var percentText = this.make.text({
+                x: width / 2,
+                y: height / 2 - 5,
+                text: '0%',
+                style: {
+                    font: '18px monospace',
+                    fill: '#ffffff'
+                }
+            });
+            percentText.setOrigin(0.5, 0.5);
+            
+            var assetText = this.make.text({
+                x: width / 2,
+                y: height / 2 + 50,
+                text: '',
+                style: {
+                    font: '18px monospace',
+                    fill: '#ffffff'
+                }
+            });
+            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);
+            });
+            this.load.on('complete', function () {
+                progressBar.destroy();
+                progressBox.destroy();
+                loadingText.destroy();
+                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');
@@ -149,35 +253,7 @@ class MyGame extends Phaser.Scene {
     });
   }
   create() {
-    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 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)
-  //   const queryString = window.location.search;
-  //   console.log(queryString)
-  // })
-  // .catch(error => {
-  // });
+  console.log(data)
     const bgWidthX = window.innerWidth / 2;
     const bgWidthY = window.innerHeight / 2;
     this.add.image(bgWidthX, bgWidthY, "bg").setScale(2.4);