new desgine and some little changes others game previous desgine

src/pages/drag/v3.astro

@@ -70,19 +70,21 @@ import Layout from '../../layouts/Layout.astro';
   let cancelIconWidth;
   let retryButton;
   let blockMatches;
+  let retryButtonWidth;
+  let leftTargetZoneW;
   if(isMobile){
-      topLogoWidth = 5;
-      muteIconWidth = 2;
-      resetIconWidth = 1.6;
-      tickIconWidth = 1.34;
-      cancelIconWidth = 1.16;
+     topLogoWidth = 4.5;
+      muteIconWidth = 1.8;
+      resetIconWidth = 1.5;
+      tickIconWidth = 1.28;
+      cancelIconWidth = 1.12;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
       buttonHeight = 0;
       retryButtonWidth = window.innerWidth / 2 - 140;
       retryButtonHeight = window.innerHeight - 50;
-      leftTargetZoneW = window.innerWidth * 0.9 - 40;
+      leftTargetZoneW = window.innerWidth * 0.9 - 30;
       rightTargetZoneW = window.innerWidth / 6;
     } else {
       topLogoWidth = 6;
@@ -131,19 +133,19 @@ import Layout from '../../layouts/Layout.astro';
     },
     {
       x: rightTargetZoneW,
-      y: 340,
+      y: 330,
       name: "target2",
       block: null,
     },
     {
       x: rightTargetZoneW,
-      y: 510,
+      y: 480,
       name: "target3",
       block: null,
     },
     {
       x: rightTargetZoneW,
-      y: 680,
+      y: 650,
       name: "target4",
       block: null,
     },
@@ -155,19 +157,19 @@ import Layout from '../../layouts/Layout.astro';
     },
     {
       x: leftTargetZoneW,
-      y: 340,
+      y: 330,
       name: "target6",
       block: null,
     },
     {
       x: leftTargetZoneW,
-      y: 510,
+      y: 480,
       name: "target7",
       block: null,
     },
     {
       x: leftTargetZoneW,
-      y: 680,
+      y: 650,
       name: "target8",
       block: null,
     },
@@ -360,12 +362,21 @@ import Layout from '../../layouts/Layout.astro';
               }
             ];
             // console.log(data)
+
+
+            let wrapWidth;
+            let textSizeScale;
+            if(isMobile){
+              wrapWidth = 10;
+              textSizeScale = 540;
+            } else{
+              wrapWidth = 200;
+              textSizeScale = 940
+            }
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
             const baseFontSize = 24;
-            const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
-            let wrapWidth;
-            if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
-            const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
+            const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
+            const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
           })
           .catch(error => {
             console.error('Error fetching initial data:', error);