work on animation

src/pages/guided-tracing/a.astro

@@ -32,14 +32,13 @@ import Layout from "../../layouts/Layout.astro";
       update: update
     }
   };
-
   const game = new Phaser.Game(config);
   const customWidth = window.innerWidth;
   const customHeight = window.innerHeight;
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let isDrawing = false;
-  
+  // let hideButton;
 
   function preload() {
     this.load.svg('letterA', '/assets/capital-letter/a.svg');
@@ -51,43 +50,47 @@ import Layout from "../../layouts/Layout.astro";
     this.load.audio('slide', '/assets/audio/slide.mp3');
     this.load.image('topLogo', '/assets/top_logo.png');
     this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
   }
 
-
   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');
+    firstScreen.setVisible(false);
+
+    let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Let`s Do", { font: '24px quicksand', fill: '#05b3a4' });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      handPointerLeft.setVisible(false);
+      handPointerRight.setVisible(false);
+      handPointeSlide.setVisible(false);
+    });
+    hideButton.setVisible(false);
+    
+    let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help", { font: '24px quicksand', fill: '#05b3a4' });
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      handPointerLeft.setVisible(true);
+      handPointerRight.setVisible(true);
+      handPointeSlide.setVisible(true);
+    });
+
+
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
     const baseFontSize = 20;
     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);
 
-    this.time.delayedCall(2000, () => {
-      this.tweens.add({
-        targets: firstScreen,
-        alpha: 0,
-        scaleX: 0.5,
-        scaleY: 0.5,
-        duration: 1000,
-        onComplete: () => {
-          firstScreen.setVisible(false);
-          firstScreen.setScale(1);
-          showLayersWithFadeIn.call(this);
-        }
-      });
-    }, [], this);
-  }
-  function showLayersWithFadeIn() {
-    this.tweens.add({
-      targets: [firstLayer, secondLayer, thirdLayer],
-      alpha: 1,
-      duration: 1000, // Duration of the tween in milliseconds
-      delay: 500,     // Delay before the fade-in starts
-      ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
-    });
-    
-      let textX, textY;
+    let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
@@ -164,6 +167,7 @@ import Layout from "../../layouts/Layout.astro";
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
         graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", pointer.x, pointer.y)
       });
 
       this.input.on('pointerup', function () {
@@ -176,7 +180,86 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+        const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
+        const startHeightLeft = customHeight /2 - 140; // Starting y position
+        const endHeightLeft = 567;   // Ending y position
+        const startWidthLeft = customWidth / 2 + 20;
+        const endWidthLeft = customWidth / 2 - 65;
+        //   handPointer.setOrigin(0.5, 0.5);
+        handPointerLeft.setScale(0.5).setDepth(2); // Adjust scale as needed
+        // Define the bounce animation
+        this.tweens.add({
+          targets: handPointerLeft,
+          x: {
+              getStart: () => startWidthLeft,
+              getEnd: () => endWidthLeft,
+          }, // End x position
+          y: {
+            getStart: () => startHeightLeft,
+            getEnd: () => endHeightLeft,
+          },
+          duration: 3000, // Duration of each bounce
+          ease: 'Sine.easeInOut',
+          yoyo: false,
+          repeat: -1 // -1 means it will repeat indefinitely
+        });
+        const handPointerRight = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
+        const startHeightRight = customHeight /2 - 140; // Starting y position
+        const endHeightRight = 567;   // Ending y position
+        const startWidthRight = customWidth / 2 + 20;
+        const endWidthRight = customWidth / 2 + 100;
+        //   handPointer.setOrigin(0.5, 0.5);
+        handPointerRight.setScale(0.5).setDepth(2).setAngle(360); // Adjust scale as needed
+        // Define the bounce animation
+        this.tweens.add({
+          targets: handPointerRight,
+          x: {
+              getStart: () => startWidthRight,
+              getEnd: () => endWidthRight,
+          }, // End x position
+          y: {
+            getStart: () => startHeightRight,
+            getEnd: () => endHeightRight,
+          },
+          duration: 3000, // Duration of each bounce
+          ease: 'Sine.easeInOut',
+          yoyo: false,
+          repeat: -1 // -1 means it will repeat indefinitely
+        });
+        const handPointeSlide = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
+        const startHeightSlide = customHeight / 2 + 17; // Starting y position
+        const endHeightSlide = customHeight / 2 + 17;   // Ending y position
+
+        const startWidthSlide = customWidth / 2 - 60;
+        const endWidthSlide = customWidth / 2 + 55;
+        //   handPointer.setOrigin(0.5, 0.5);
+        handPointeSlide.setScale(0.5).setDepth(2).setAngle(45); // Adjust scale as needed
+        // Define the bounce animation
+        this.tweens.add({
+          targets: handPointeSlide,
+          x: {
+              getStart: () => startWidthSlide,
+              getEnd: () => endWidthSlide,
+          }, // End x position
+          y: {
+            getStart: () => startHeightSlide,
+            getEnd: () => endHeightSlide,
+          },
+          duration: 3000, // Duration of each bounce
+          ease: 'Sine.easeInOut',
+          yoyo: false,
+          repeat: -1 // -1 means it will repeat indefinitely
+        });
+        handPointerLeft.setVisible(false);
+        handPointerRight.setVisible(false);
+        handPointeSlide.setVisible(false);
+
+      // Start Position 626 317
+
   }
+  // function showLayersWithFadeIn() {    
+      
+  // }
 
   function update() {
     // Update any game logic if needed