From 5e517f6be154a84b00c00839c65953f0f6088e2d Mon Sep 17 00:00:00 2001
From: Dev 1 <dev@siliconpin.com>
Date: Sat, 14 Oct 2023 22:28:39 +0530
Subject: [PATCH] last worked on letter q

---
 public/assets/audio/down-hook.mp3             | Bin 0 -> 5687 bytes
 ...rround-close.mp3 => hook-around-close.mp3} | Bin
 src/pages/capital-letter/O.astro              |   4 +-
 src/pages/small-letter/n.astro                | 320 ++++++++++++++++++
 src/pages/small-letter/o.astro                | 286 ++++++++++++++++
 src/pages/small-letter/p.astro                | 320 ++++++++++++++++++
 src/pages/small-letter/q.astro                | 320 ++++++++++++++++++
 7 files changed, 1248 insertions(+), 2 deletions(-)
 create mode 100755 public/assets/audio/down-hook.mp3
 rename public/assets/audio/{hook-arround-close.mp3 => hook-around-close.mp3} (100%)
 create mode 100644 src/pages/small-letter/n.astro
 create mode 100644 src/pages/small-letter/o.astro
 create mode 100644 src/pages/small-letter/p.astro
 create mode 100644 src/pages/small-letter/q.astro

diff --git a/public/assets/audio/down-hook.mp3 b/public/assets/audio/down-hook.mp3
new file mode 100755
index 0000000000000000000000000000000000000000..954a7a0081826c39cf042c93163619b8b471fa8a
GIT binary patch
literal 5687
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
A#Q*>R

literal 0
HcmV?d00001

diff --git a/public/assets/audio/hook-arround-close.mp3 b/public/assets/audio/hook-around-close.mp3
similarity index 100%
rename from public/assets/audio/hook-arround-close.mp3
rename to public/assets/audio/hook-around-close.mp3
diff --git a/src/pages/capital-letter/O.astro b/src/pages/capital-letter/O.astro
index e8316db..72af4de 100644
--- a/src/pages/capital-letter/O.astro
+++ b/src/pages/capital-letter/O.astro
@@ -81,7 +81,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.video('animatedO', '/assets/animated-letter/capital_o.mp4');
     this.load.svg('letterO', '/assets/capital-letter/o.svg');
     this.load.svg('layer1', '/assets/capital-letter/o.svg');
-    this.load.audio('audioOne', '/assets/audio/hook-arround-close.mp3');
+    this.load.audio('audioOne', '/assets/audio/hook-around-close.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');
@@ -246,7 +246,7 @@ import Layout from "../../layouts/Layout.astro";
         firstLayer.on('drag', (pointer) => {
         const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
 
-        if (distance >= 50) {
+        if (distance >= 0) {
           
             firstTextLayer.setVisible(false);
             firstLayer.setAlpha(1);
diff --git a/src/pages/small-letter/n.astro b/src/pages/small-letter/n.astro
new file mode 100644
index 0000000..4885623
--- /dev/null
+++ b/src/pages/small-letter/n.astro
@@ -0,0 +1,320 @@
+---
+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;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterNeight = 50;
+      letterScale = 1.4;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+      beanieScale = 0.35;
+      beanieScalePlus = 0.38;
+      beanieWidth = 135;
+      beanieHeight = 170;
+      animatedVideoScale = 0.63;
+      animatedNHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterNeight = 30;
+      letterScale = 1.5;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+      beanieScale = 0.4;
+      beanieScalePlus = 0.44;
+      beanieWidth = 200;
+      beanieHeight = 245;
+      animatedVideoScale = 0.7;
+      animatedNHeight = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedN', '/assets/animated-letter/small_n.mp4');
+    this.load.svg('letterN', '/assets/small-letter/ns.svg');
+    this.load.svg('layer1', '/assets/small-letter/ns_l1.svg');
+    this.load.svg('layer2', '/assets/small-letter/ns_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/small-down.mp3');
+    this.load.audio('audioTwo', '/assets/audio/roll-down.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/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+    this.load.image('beanie', '/assets/beanieImage.png');
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : n", { 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 scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      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 beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
+
+  
+  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 beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
+  const beanieduration = 2500;
+  this.tweens.add({
+    targets: beanie,
+    scaleX: beaniescaleFactor + 0.004,
+    scaleY: beaniescaleFactor,
+    duration: beanieduration,
+    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 + 45, customHeight / 2 + letterNeight, 'letterN').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 + 45, customHeight / 2 + letterNeight, 'letterN').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterNeight, 'animatedN').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    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);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      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',
+        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
+      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 : n', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedVideoScale);
+
+    // 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 + 45, customHeight / 2 + letterNeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2 + 45, customHeight / 2 + letterNeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Roll Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { 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);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.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);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      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();
+      });
+  }
+
+function update() {
+
+}
+
+</script>
\ No newline at end of file
diff --git a/src/pages/small-letter/o.astro b/src/pages/small-letter/o.astro
new file mode 100644
index 0000000..fb16e65
--- /dev/null
+++ b/src/pages/small-letter/o.astro
@@ -0,0 +1,286 @@
+---
+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;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterHeight = 40;
+      letterScale = 1.3;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+      beanieScale = 0.35;
+      beanieScalePlus = 0.38;
+      beanieWidth = 135;
+      beanieHeight = 170;
+      animatedOHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 30;
+      letterScale = 1.5;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+      beanieScale = 0.4;
+      beanieScalePlus = 0.44;
+      beanieWidth = 200;
+      beanieHeight = 245;
+      animatedOHeight = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedO', '/assets/animated-letter/small_o.mp4');
+    this.load.svg('letterO', '/assets/small-letter/os.svg');
+    this.load.svg('layer1', '/assets/small-letter/os.svg');
+    this.load.audio('audioOne', '/assets/audio/hook-around-close.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/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+    this.load.image('beanie', '/assets/beanieImage.png');
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : o", { 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 scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      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 beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
+
+  
+  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 beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
+  const beanieduration = 2500;
+  this.tweens.add({
+    targets: beanie,
+    scaleX: beaniescaleFactor + 0.004,
+    scaleY: beaniescaleFactor,
+    duration: beanieduration,
+    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, 'letterO').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterO').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedO').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    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);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      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',
+        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
+      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 : o', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').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').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { 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 >= 0) {
+          
+            firstTextLayer.setVisible(false);
+            firstLayer.setAlpha(1);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+       
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      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);
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+
+
+  }
+
+function update() {
+
+}
+
+</script>
\ No newline at end of file
diff --git a/src/pages/small-letter/p.astro b/src/pages/small-letter/p.astro
new file mode 100644
index 0000000..07b7dc1
--- /dev/null
+++ b/src/pages/small-letter/p.astro
@@ -0,0 +1,320 @@
+---
+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;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterPeight = 20;
+      letterScale = 0.8;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+      beanieScale = 0.35;
+      beanieScalePlus = 0.38;
+      beanieWidth = 135;
+      beanieHeight = 170;
+      animatedVideoScale = 0.63;
+      animatedPHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterPeight = -10;
+      letterScale = 1;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+      beanieScale = 0.4;
+      beanieScalePlus = 0.44;
+      beanieWidth = 200;
+      beanieHeight = 245;
+      animatedVideoScale = 0.7;
+      animatedPHeight = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedP', '/assets/animated-letter/small_p.mp4');
+    this.load.svg('letterP', '/assets/small-letter/ps.svg');
+    this.load.svg('layer1', '/assets/small-letter/ps_l1.svg');
+    this.load.svg('layer2', '/assets/small-letter/ps_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/down-tail.mp3');
+    this.load.audio('audioTwo', '/assets/audio/roll-around.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/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+    this.load.image('beanie', '/assets/beanieImage.png');
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : p", { 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 scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      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 beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
+
+  
+  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 beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
+  const beanieduration = 2500;
+  this.tweens.add({
+    targets: beanie,
+    scaleX: beaniescaleFactor + 0.004,
+    scaleY: beaniescaleFactor,
+    duration: beanieduration,
+    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 + 20, customHeight / 2 + letterPeight, 'letterP').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterPeight, 'letterP').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterPeight, 'animatedP').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    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);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      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',
+        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
+      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 : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale);
+
+    // 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 + 20, customHeight / 2 + letterPeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Down Tail',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterPeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { 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);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.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);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      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();
+      });
+  }
+
+function update() {
+
+}
+
+</script>
\ No newline at end of file
diff --git a/src/pages/small-letter/q.astro b/src/pages/small-letter/q.astro
new file mode 100644
index 0000000..61a2277
--- /dev/null
+++ b/src/pages/small-letter/q.astro
@@ -0,0 +1,320 @@
+---
+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;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterQeight = 20;
+      letterScale = 0.8;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+      beanieScale = 0.35;
+      beanieScalePlus = 0.38;
+      beanieWidth = 135;
+      beanieHeight = 170;
+      animatedVideoScale = 0.63;
+      animatedQHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterQeight = -10;
+      letterScale = 1;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+      beanieScale = 0.4;
+      beanieScalePlus = 0.44;
+      beanieWidth = 200;
+      beanieHeight = 245;
+      animatedVideoScale = 0.7;
+      animatedQHeight = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedQ', '/assets/animated-letter/small_q.mp4');
+    this.load.svg('letterQ', '/assets/small-letter/qs.svg');
+    this.load.svg('layer1', '/assets/small-letter/qs_l1.svg');
+    this.load.svg('layer2', '/assets/small-letter/qs_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/hook-around.mp3');
+    this.load.audio('audioTwo', '/assets/audio/down-hook.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/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+    this.load.image('beanie', '/assets/beanieImage.png');
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : q", { 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 scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      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 beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
+
+  
+  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 beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
+  const beanieduration = 2500;
+  this.tweens.add({
+    targets: beanie,
+    scaleX: beaniescaleFactor + 0.004,
+    scaleY: beaniescaleFactor,
+    duration: beanieduration,
+    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 + letterQeight, 'letterQ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'letterQ').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'animatedQ').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    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);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      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',
+        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
+      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 : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale);
+
+    // 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 + letterQeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Down Hook',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { 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);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.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);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      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();
+      });
+  }
+
+function update() {
+
+}
+
+</script>
\ No newline at end of file