worked on ui desgine

src/pages/guided-tracing/a.astro

@@ -43,30 +43,40 @@ import Layout from "../../layouts/Layout.astro";
     if(isMobile){
       cloudeSize = 200;
       cloudHeight = 340;
-      canvasScale = 0.23
+      canvasScale = 0.14
-      canvasHeight = 154; 
+      canvasHeight = - 28; 
       letterHeight = 70;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
+      parrotScale = 0.35;
+      parrotScalePlus = 0.38;
+      parrotWidth = 135;
+      parrotHeight = 170;
+      animatedAHeight = 32;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
-      canvasScale = 0.3;
+      canvasScale = 0.195;
-      canvasHeight = 180;
+      canvasHeight = - 60;
       letterHeight = 50;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
+      parrotScale = 0.4;
+      parrotScalePlus = 0.44;
+      parrotWidth = 200;
+      parrotHeight = 245;
+      animatedAHeight = 20;
     }
   // let hideButton;
 
   function preload() {
-    this.load.image('animatedA', '/assets/animated-letter/a.gif');
+    this.load.video('animatedA', '/assets/animated-letter/a.mp4');
     this.load.svg('letterA', '/assets/capital-letter/a.svg');
     this.load.svg('layer1', '/assets/capital-letter/a_l1.svg');
     this.load.svg('layer2', '/assets/capital-letter/a_l2.svg');
@@ -76,58 +86,38 @@ 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('hintImage', '/assets/svg/hint.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');
+    this.load.image('canvas', '/assets/canvas4.png');
+    this.load.image('parrot', '/assets/parrot.png');
     this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
   }
 
-
+// bgMobile.png
   function create() {
-    const gifImage = new Image();
-
-// Set the source (URL) of the GIF
-gifImage.src = '/assets/animated-letter/a.gif';
-
-// Append the image element to the document
-document.body.appendChild(gifImage);
-
-// Function to play the GIF
-function playGif() {
-    gifImage.style.display = 'block'; // Show the image
-}
-
-// Function to pause the GIF
-function pauseGif() {
-    gifImage.style.display = 'none'; // Hide the image
-}
-
-// Function to stop and reset the GIF
-function stopGif() {
-    gifImage.src = gifImage.src; // Reset the image source
-    gifImage.style.display = 'none'; // Hide the image
-}
-
-// Example usage:
-playGif();
     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', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
   
     const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
     cloud.setDepth(-1.8);
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
     const scrollSpeed = 0.5;
     this.time.addEvent({
-    loop: true,
+      loop: true,
-    callback: () => {
+      callback: () => {
-      cloud.tilePositionX += scrollSpeed;
+        cloud.tilePositionX += scrollSpeed;
-    },
+      },
-    delay: 16, // Adjust the delay for the desired scrolling speed
+      delay: 16, // Adjust the delay for the desired scrolling speed
-  });
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+    const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).setDepth(1.9);
+
+  
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
 
@@ -140,6 +130,17 @@ playGif();
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
+  });
+  const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
+  const parrotduration = 2500;
+  this.tweens.add({
+    targets: parrot,
+    scaleX: parrotscaleFactor + 0.004,
+    scaleY: parrotscaleFactor,
+    duration: parrotduration,
+    ease: 'Redial',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
   });
     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);
@@ -149,7 +150,20 @@ playGif();
     firstScreen.setVisible(false);
     
 
-    let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Let`s Do", { font: '24px quicksand', fill: '#05b3a4' });
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
     hideButton.setInteractive().on('pointerdown', () => {
       isDemoButtonClicked = false;
       firstScreen.setVisible(false);
@@ -159,21 +173,33 @@ playGif();
       handPointerLeft.setVisible(false);
       handPointerRight.setVisible(false);
       handPointeSlide.setVisible(false);
+      animatedLetter.setVisible(false);
     });
-    hideButton.setVisible(false);
+      hideButton.setVisible(false);
-    
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
-    let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help!", { font: '900 24px quicksand', fill: '#05b3a4', backgroundColor: '#7c4c23'}).setPadding(20, 10);
+        font: '900 24px quicksand',
-    // demoButton.style.borderRadius = "25px";
+        fill: '#05b3a4',
-    // demoButton.style.set('borderRadius', '15px');
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
 
     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);
+      handPointerLeft.setVisible(false);
-      handPointerRight.setVisible(true);
+      handPointerRight.setVisible(false);
-      handPointeSlide.setVisible(true);
+      handPointeSlide.setVisible(false);
+      animatedLetter.setVisible(true);
     });
 
 
@@ -181,13 +207,26 @@ playGif();
     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);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
 
     let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1');
       textX = isMobile ? customWidth / 4 : 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'});
+      const firstTextLayer = this.add.text(textX, textY, '1. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const slantLeftAudio = this.sound.add('slantLeft');
       slantLeftAudio.play();
       firstLayer.setDepth(1);
@@ -196,7 +235,7 @@ playGif();
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2');
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(textX, textY, '2. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const slantRightAudio = this.sound.add('slantRight');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -215,44 +254,76 @@ playGif();
       thirdLayer.setInteractive({ draggable: true });
       thirdLayer.setVisible(false);
 
-      firstLayer.on('drag', (pointer) => {
+        // Add these variables to keep track of start points
-        if (pointer.isDown) {
+        let firstDragStartPoint = { x: 0, y: 0 };
-          firstTextLayer.setVisible(false);
+        let secondDragStartPoint = { x: 0, y: 0 };
-          secondTextLayer.setVisible(true);
+        let thirdDragStartPoint = { x: 0, y: 0 };
-          slantRightAudio.play();
-          secondLayer.setVisible(true);
-          firstLayer.setAlpha(1);
-          secondLayer.setAlpha(0.5);
-          thirdLayer.setAlpha(0.5);
-        } else {
-          firstLayer.setAlpha(0.5);
-        }
-      });
 
-      secondLayer.on('drag', (pointer) => {
+        // ...
-        if (pointer.isDown) {
-          secondTextLayer.setVisible(false);
-          thirdTextLayer.setVisible(true);
-          slideAudio.play();
-          thirdLayer.setVisible(true);
-          secondLayer.setAlpha(1);
-          thirdLayer.setAlpha(0.5);
-        } else {
-          secondLayer.setAlpha(0.5);
-        }
-      });
 
-      thirdLayer.on('drag', (pointer) => {
+        // Add this code for firstLayer
-        if (pointer.isDown) {
+        firstLayer.on('dragstart', (pointer) => {
-          thirdLayer.setAlpha(1);
+        firstDragStartPoint.x = pointer.x;
-          thirdTextLayer.setVisible(false);
+        firstDragStartPoint.y = pointer.y;
-          // const succesImage = this.add.image(customWidth / 2, customHeight / 2, 'succesImage').setDepth(2);
+        });
-          // succesImage.setAlpha(0.2);
+
-          // this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            slantRightAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+            thirdLayer.setAlpha(0.5);
         } else {
-          thirdLayer.setAlpha(0.5);
+            firstLayer.setAlpha(0.5);
         }
-      });
+        });
+
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+        secondDragStartPoint.x = pointer.x;
+        secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            secondTextLayer.setVisible(false);
+            thirdTextLayer.setVisible(true);
+            slideAudio.play();
+            thirdLayer.setVisible(true);
+            secondLayer.setAlpha(1);
+            thirdLayer.setAlpha(0.5);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+        // Add this code for thirdLayer
+        thirdLayer.on('dragstart', (pointer) => {
+        thirdDragStartPoint.x = pointer.x;
+        thirdDragStartPoint.y = pointer.y;
+        });
+
+        thirdLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            thirdLayer.setAlpha(1);
+            thirdTextLayer.setVisible(false);
+        } else {
+            thirdLayer.setAlpha(0.5);
+        }
+        });
+
+
       graphics = this.add.graphics();
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
 
@@ -272,11 +343,12 @@ playGif();
         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 startHeightLeft = customHeight /2 - 100; // Starting y position
-        const endHeightLeft = 567;   // Ending y position
+        const endHeightLeft = customHeight / 2 + 170;   // Ending y position
-        const startWidthLeft = customWidth / 2 + 20;
+        const startWidthLeft = customWidth / 2 + 22;
-        const endWidthLeft = customWidth / 2 - 65;
+        const endWidthLeft = customWidth / 2 - 70;
         //   handPointer.setOrigin(0.5, 0.5);
         handPointerLeft.setScale(0.5).setDepth(2); // Adjust scale as needed
         // Define the bounce animation
@@ -296,10 +368,10 @@ playGif();
           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 startHeightRight = customHeight /2 - 100; // Starting y position
-        const endHeightRight = 567;   // Ending y position
+        const endHeightRight = customHeight / 2 + 170;   // Ending y position
         const startWidthRight = customWidth / 2 + 20;
-        const endWidthRight = customWidth / 2 + 100;
+        const endWidthRight = customWidth / 2 + 107;
         //   handPointer.setOrigin(0.5, 0.5);
         handPointerRight.setScale(0.5).setDepth(2).setAngle(360); // Adjust scale as needed
         // Define the bounce animation
@@ -319,8 +391,8 @@ playGif();
           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 startHeightSlide = customHeight / 2 + 70; // Starting y position
-        const endHeightSlide = customHeight / 2 + 17;   // Ending y position
+        const endHeightSlide = customHeight / 2 + 70;   // Ending y position
 
         const startWidthSlide = customWidth / 2 - 60;
         const endWidthSlide = customWidth / 2 + 55;

src/pages/guided-tracing/tt.astro

@@ -0,0 +1,380 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      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;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.27;
+      canvasHeight = 160;
+      letterHeight = 50;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedA', '/assets/animated-letter/a.mp4');
+    this.load.svg('letterA', '/assets/capital-letter/a.svg');
+    this.load.svg('layer1', '/assets/capital-letter/a_l1.svg');
+    this.load.svg('layer2', '/assets/capital-letter/a_l2.svg');
+    this.load.svg('layer3', '/assets/capital-letter/a_l3.svg');
+    this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
+    this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
+    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');
+    // 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');
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+  }
+
+// bgMobile.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', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).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 scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+    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);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2);
+    this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    firstScreen.setVisible(false);
+    
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { font: '900 24px quicksand', fill: '#05b3a4', backgroundColor: '#7c4c23'}).setPadding(20, 10);
+    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);
+      animatedLetter.setVisible(false);
+    });
+    hideButton.setVisible(false);
+    
+    let demoButton = this.add.text(customWidth / 2 - 50, 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);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      handPointerLeft.setVisible(false);
+      handPointerRight.setVisible(false);
+      handPointeSlide.setVisible(false);
+      animatedLetter.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);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + 20, 'animatedA').setDepth(2).setScale(0.82);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1');
+      textX = isMobile ? customWidth / 4 : 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'});
+      const slantLeftAudio = this.sound.add('slantLeft');
+      slantLeftAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2');
+      textX = isMobile ? customWidth / 4 : 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');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+      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');
+      thirdTextLayer.setVisible(false);
+      thirdLayer.setDepth(1.1);
+      // thirdLayer.setScale(1.15);
+      thirdLayer.setAlpha(0.5);
+      thirdLayer.setInteractive({ draggable: true });
+      thirdLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+        let thirdDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            slantRightAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+            thirdLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+        secondDragStartPoint.x = pointer.x;
+        secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            secondTextLayer.setVisible(false);
+            thirdTextLayer.setVisible(true);
+            slideAudio.play();
+            thirdLayer.setVisible(true);
+            secondLayer.setAlpha(1);
+            thirdLayer.setAlpha(0.5);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+        // Add this code for thirdLayer
+        thirdLayer.on('dragstart', (pointer) => {
+        thirdDragStartPoint.x = pointer.x;
+        thirdDragStartPoint.y = pointer.y;
+        });
+
+        thirdLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            thirdLayer.setAlpha(1);
+            thirdTextLayer.setVisible(false);
+        } else {
+            thirdLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+
+      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 () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+      
+        const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
+        const startHeightLeft = customHeight /2 - 100; // Starting y position
+        const endHeightLeft = customHeight / 2 + 170;   // Ending y position
+        const startWidthLeft = customWidth / 2 + 22;
+        const endWidthLeft = customWidth / 2 - 70;
+        //   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 - 100; // Starting y position
+        const endHeightRight = customHeight / 2 + 170;   // Ending y position
+        const startWidthRight = customWidth / 2 + 20;
+        const endWidthRight = customWidth / 2 + 107;
+        //   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 + 70; // Starting y position
+        const endHeightSlide = customHeight / 2 + 70;   // 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 update() {
+
+}
+
+</script>