change code server

src/pages/guided-tracing/a.astro

@@ -32,12 +32,29 @@ import Layout from "../../layouts/Layout.astro";
       update: update
     }
   };
+  // backgroundImage.png
   const game = new Phaser.Game(config);
   const customWidth = window.innerWidth;
   const customHeight = window.innerHeight;
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.23
+      canvasHeight = 154; 
+      letterHeight = 70;
+      backgroundScale = 0.8;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.3;
+      canvasHeight = 100;
+      letterHeight = 0;
+      backgroundScale = 1;
+    }
   // let hideButton;
 
   function preload() {
@@ -51,13 +68,33 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('topLogo', '/assets/top_logo.png');
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
+    // this.load.image('backgroundImage', '/assets/backgroundImage2.png');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas2.png');
   }
 
   function create() {
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
-
-    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+    
+    
+    
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud');
+    cloud.setDepth(-1.9);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+    loop: true,
+    callback: () => {
+      cloud.tilePositionX += scrollSpeed;
+    },
+    delay: 16, // Adjust the delay for the desired scrolling speed
+  });
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2);
+    this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
     firstScreen.setVisible(false);
 
     let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Let`s Do", { font: '24px quicksand', fill: '#05b3a4' });
@@ -73,7 +110,10 @@ import Layout from "../../layouts/Layout.astro";
     });
     hideButton.setVisible(false);
     
-    let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help", { font: '24px quicksand', fill: '#05b3a4' });
+    let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help!", { font: '900 24px quicksand', fill: '#05b3a4', backgroundColor: '#7c4c23'}).setPadding(20, 10);
+    // demoButton.style.borderRadius = "25px";
+    // demoButton.style.set('borderRadius', '15px');
+
     demoButton.setInteractive().on('pointerdown', () => {
       graphics.setVisible(false);
       firstScreen.setVisible(true);
@@ -90,9 +130,9 @@ import Layout from "../../layouts/Layout.astro";
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
 
-    let textX, textY;
+    let textX = window.innerWidth / 2, textY;
 
-      firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1');
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
       textY = isMobile ? customHeight / 5 : customHeight / 2;
       const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
@@ -102,7 +142,7 @@ import Layout from "../../layouts/Layout.astro";
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
 
-      secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2');
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
       const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
       const slantRightAudio = this.sound.add('slantRight');
@@ -112,7 +152,7 @@ import Layout from "../../layouts/Layout.astro";
       secondLayer.setInteractive({ draggable: true });
       secondLayer.setVisible(false);
 
-      thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
+      thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3');
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
       const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
       const slideAudio = this.sound.add('slide');
@@ -162,7 +202,7 @@ import Layout from "../../layouts/Layout.astro";
         }
       });
       graphics = this.add.graphics();
-      graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
 
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -257,11 +297,8 @@ import Layout from "../../layouts/Layout.astro";
       // Start Position 626 317
 
   }
-  // function showLayersWithFadeIn() {    
-      
-  // }
 
-  function update() {
-    // Update any game logic if needed
-  }
+function update() {
+
+}
 </script>