src/pages/guided-tracing/A.astro

@@ -39,10 +39,6 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let isDrawing = false;
-//   let x = 100;
-
-// // Use x
-// console.log(x);
 
     if(isMobile){
       cloudeSize = 200;
@@ -56,10 +52,10 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
+      parrotScale = 0.35;
-      beanieScalePlus = 0.365;
+      parrotScalePlus = 0.365;
-      beanieWidth = 135;
+      parrotWidth = 135;
-      beanieHeight = 170;
+      parrotHeight = 170;
       animatedAHeight = 35;
       animatedAScale = 0.65;
     } else{
@@ -74,15 +70,15 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
+      parrotScale = 0.4;
-      beanieScalePlus = 0.45;
+      parrotScalePlus = 0.45;
-      beanieWidth = 200;
+      parrotWidth = 200;
-      beanieHeight = 255;
+      parrotHeight = 255;
       animatedAHeight = 20;
       animatedAScale = 0.73;
     }
   function preload() {
-    this.load.video('animatedA', '/assets/animated-letter/capital_a.mp4');
+    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');
@@ -97,8 +93,8 @@ import Layout from "../../layouts/Layout.astro";
     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/beanie.png');
+    // this.load.image('parrot', '/assets/parrot.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+    this.load.image('parrot', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -107,6 +103,8 @@ import Layout from "../../layouts/Layout.astro";
   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 scrollSpeed = 0.5;
@@ -119,7 +117,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     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 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)
@@ -135,13 +133,13 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
+  const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
+  const parrotduration = 2500;
   this.tweens.add({
-    targets: beanie,
+    targets: parrot,
-    scaleX: beaniescaleFactor + 0.004,
+    scaleX: parrotscaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
+    scaleY: parrotscaleFactor,
-    duration: beanieduration,
+    duration: parrotduration,
     ease: 'Redial',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
@@ -330,7 +328,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)
+        console.log("Start Position", pointer.x, pointer.y)
       });
 
       this.input.on('pointerup', function () {
@@ -346,6 +344,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
 function update() {
+
 }
 
 </script>

src/pages/guided-tracing/B.astro

@@ -52,11 +52,11 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
+      parrotScale = 0.35;
-      beanieScalePlus = 0.38;
+      parrotScalePlus = 0.38;
-      beanieWidth = 135;
+      parrotWidth = 135;
-      beanieHeight = 170;
+      parrotHeight = 170;
-      animatedBHeight = 32;
+      animatedAHeight = 32;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -69,16 +69,16 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
+      parrotScale = 0.4;
-      beanieScalePlus = 0.44;
+      parrotScalePlus = 0.44;
-      beanieWidth = 200;
+      parrotWidth = 200;
-      beanieHeight = 245;
+      parrotHeight = 245;
-      animatedBHeight = 20;
+      animatedAHeight = 20;
     }
   // let hideButton;
 
   function preload() {
-    this.load.video('animatedB', '/assets/animated-letter/capital_b.mp4');
+    this.load.video('animatedA', '/assets/animated-letter/a.mp4');
     this.load.svg('letterB', '/assets/capital-letter/b.svg');
     this.load.svg('layer1', '/assets/capital-letter/b_l1.svg');
     this.load.svg('layer2', '/assets/capital-letter/b_l2.svg');
@@ -92,8 +92,7 @@ import Layout from "../../layouts/Layout.astro";
     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/beanie.png');
+    this.load.image('parrot', '/assets/parrot.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');
@@ -116,7 +115,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     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 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)
@@ -132,13 +131,13 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
+  const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
+  const parrotduration = 2500;
   this.tweens.add({
-    targets: beanie,
+    targets: parrot,
-    scaleX: beaniescaleFactor + 0.004,
+    scaleX: parrotscaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
+    scaleY: parrotscaleFactor,
-    duration: beanieduration,
+    duration: parrotduration,
     ease: 'Redial',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
@@ -146,7 +145,7 @@ import Layout from "../../layouts/Layout.astro";
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setDepth(2).setScale(letterScale);
-    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedB').setDepth(2); canvasStand
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').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);
@@ -208,7 +207,7 @@ import Layout from "../../layouts/Layout.astro";
     const baseFontSize = 20;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : B', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(0.73);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73);
 
     // Play the video
     animatedLetter.play();

src/pages/guided-tracing/C.astro

@@ -52,10 +52,10 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
+      parrotScale = 0.35;
-      beanieScalePlus = 0.38;
+      parrotScalePlus = 0.38;
-      beanieWidth = 135;
+      parrotWidth = 135;
-      beanieHeight = 170;
+      parrotHeight = 170;
       animatedAHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,16 +69,16 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
+      parrotScale = 0.4;
-      beanieScalePlus = 0.44;
+      parrotScalePlus = 0.44;
-      beanieWidth = 200;
+      parrotWidth = 200;
-      beanieHeight = 245;
+      parrotHeight = 245;
       animatedAHeight = 20;
     }
   // let hideButton;
 
   function preload() {
-    this.load.video('animatedA', '/assets/animated-letter/capital_c.mp4');
+    this.load.video('animatedA', '/assets/animated-letter/a.mp4');
     this.load.svg('letterC', '/assets/capital-letter/c.svg');
     this.load.svg('layer1', '/assets/capital-letter/c.svg');
     this.load.audio('audioOne', '/assets/audio/hook-around.mp3');
@@ -89,7 +89,7 @@ import Layout from "../../layouts/Layout.astro";
     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('parrot', '/assets/parrot.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -112,7 +112,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     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 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)
@@ -128,19 +128,19 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
+  const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
+  const parrotduration = 2500;
   this.tweens.add({
-    targets: beanie,
+    targets: parrot,
-    scaleX: beaniescaleFactor + 0.004,
+    scaleX: parrotscaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
+    scaleY: parrotscaleFactor,
-    duration: beanieduration,
+    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, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterC').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand
     firstScreen.setVisible(false);
@@ -220,7 +220,7 @@ import Layout from "../../layouts/Layout.astro";
 
     let textX, textY;
 
-      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      firstLayer = this.add.image(customWidth / 2 + 90, 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',{ font: '700 40px quicksand', fill: '#05b3a4'});

src/pages/guided-tracing/D.astro

@@ -52,10 +52,10 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
+      parrotScale = 0.35;
-      beanieScalePlus = 0.38;
+      parrotScalePlus = 0.38;
-      beanieWidth = 135;
+      parrotWidth = 135;
-      beanieHeight = 170;
+      parrotHeight = 170;
       animatedAHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +69,10 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
+      parrotScale = 0.4;
-      beanieScalePlus = 0.44;
+      parrotScalePlus = 0.44;
-      beanieWidth = 200;
+      parrotWidth = 200;
-      beanieHeight = 245;
+      parrotHeight = 245;
       animatedAHeight = 20;
     }
   // let hideButton;
@@ -91,7 +91,7 @@ import Layout from "../../layouts/Layout.astro";
     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('parrot', '/assets/parrot.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -114,7 +114,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     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 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)
@@ -130,13 +130,13 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
+  const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
+  const parrotduration = 2500;
   this.tweens.add({
-    targets: beanie,
+    targets: parrot,
-    scaleX: beaniescaleFactor + 0.004,
+    scaleX: parrotscaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
+    scaleY: parrotscaleFactor,
-    duration: beanieduration,
+    duration: parrotduration,
     ease: 'Redial',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely

src/pages/guided-tracing/E.astro

@@ -52,10 +52,10 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
+      parrotScale = 0.35;
-      beanieScalePlus = 0.38;
+      parrotScalePlus = 0.38;
-      beanieWidth = 135;
+      parrotWidth = 135;
-      beanieHeight = 170;
+      parrotHeight = 170;
       animatedAHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +69,10 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
+      parrotScale = 0.4;
-      beanieScalePlus = 0.44;
+      parrotScalePlus = 0.44;
-      beanieWidth = 200;
+      parrotWidth = 200;
-      beanieHeight = 245;
+      parrotHeight = 245;
       animatedAHeight = 20;
     }
   function preload() {
@@ -92,7 +92,7 @@ import Layout from "../../layouts/Layout.astro";
     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('parrot', '/assets/parrot.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -115,7 +115,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     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 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)
@@ -131,13 +131,13 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
+  const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
+  const parrotduration = 2500;
   this.tweens.add({
-    targets: beanie,
+    targets: parrot,
-    scaleX: beaniescaleFactor + 0.004,
+    scaleX: parrotscaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
+    scaleY: parrotscaleFactor,
-    duration: beanieduration,
+    duration: parrotduration,
     ease: 'Redial',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
@@ -226,7 +226,7 @@ import Layout from "../../layouts/Layout.astro";
       firstLayer = this.add.image(customWidth / 2 - 20, 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. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(textX, textY, '1. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
       audioOneAudio.play();
       firstLayer.setDepth(1);

src/pages/guided-tracing/F.astro

@@ -1,347 +0,0 @@
----
-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;
-//   let x = 100;
-
-// // Use x
-// console.log(x);
-
-    if(isMobile){
-      cloudeSize = 200;
-      cloudHeight = 340;
-      canvasScale = 0.14
-      canvasHeight = 35; 
-      letterHeight = 70;
-      letterScale = 1;
-      backgroundScale = 0.8;
-      sunScale = 0.1;
-      sunScalePlus = 0.15;
-      sunWidth = 70;
-      sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.365;
-      beanieWidth = 135;
-      beanieHeight = 170;
-      animatedFHeight = 35;
-      animatedFScale = 0.65;
-    } else{
-      cloudeSize = 500;
-      cloudHeight = 250;
-      canvasScale = 0.195;
-      canvasHeight = 20;
-      letterHeight = 50;
-      letterScale = 1;
-      backgroundScale = 1;
-      sunScale  = 0.2;
-      sunScalePlus = 0.25;
-      sunWidth = 200;
-      sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.45;
-      beanieWidth = 200;
-      beanieHeight = 255;
-      animatedFHeight = 20;
-      animatedFScale = 0.73;
-    }
-  function preload() {
-    this.load.video('animatedF', '/assets/animated-letter/capital_f.mp4');
-    this.load.svg('letterA', '/assets/capital-letter/f.svg');
-    this.load.svg('layer1', '/assets/capital-letter/f_l1.svg');
-    this.load.svg('layer2', '/assets/capital-letter/f_l2.svg');
-    this.load.svg('layer3', '/assets/capital-letter/f_l3.svg');
-    this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
-    this.load.audio('audioTwo', '/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/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    // this.load.image('beanie', '/assets/beanie.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 : F", { font: '700 40px quicksand', fill: '#05b3a4', });
-    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, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
-    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);
-    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedF').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 : F', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale);
-
-    // 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 () {
-        // add function after end video;
-    });
-
-    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. Tall 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, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ 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);
-
-      thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const audioThreeAudio = this.sound.add('audioTwo');
-      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);
-            audioTwoAudio.play();
-            secondLayer.setVisible(true);
-            firstLayer.setAlpha(1);
-            secondLayer.setAlpha(0.5);
-            thirdLayer.setAlpha(0.5);
-        } else {
-            firstLayer.setAlpha(0.5);
-        }
-        });
-        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);
-            audioThreeAudio.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.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>

src/pages/guided-tracing/G.astro

@@ -1,318 +0,0 @@
----
-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; 
-      letterHeight = 58;
-      letterScale = 0.85;
-      backgroundScale = 0.8;
-      sunScale = 0.1;
-      sunScalePlus = 0.15;
-      sunWidth = 70;
-      sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
-      animatedGHeight = 32;
-    } else{
-      cloudeSize = 500;
-      cloudHeight = 250;
-      canvasScale = 0.195;
-      canvasHeight = 20;
-      letterHeight = 50;
-      letterScale = 1;
-      backgroundScale = 1;
-      sunScale  = 0.2;
-      sunScalePlus = 0.25;
-      sunWidth = 200;
-      sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
-      animatedGHeight = 20;
-    }
-  // let hideButton;
-
-  function preload() {
-    this.load.video('animatedG', '/assets/animated-letter/capital_g.mp4');
-    this.load.svg('letterG', '/assets/capital-letter/g.svg');
-    this.load.svg('layer1', '/assets/capital-letter/g_l1.svg');
-    this.load.svg('layer2', '/assets/capital-letter/g_l2.svg');
-    this.load.audio('audioOne', '/assets/audio/hook-around.mp3');
-    this.load.audio('audioTwo', '/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/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 : D", { 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 - 30, customHeight / 2 + letterHeight, 'letterG').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
-    const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterG').setDepth(2).setScale(letterScale);
-    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedG').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 : G', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').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 - 30, 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',{ 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 - 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ 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>