Add pencile as cursor

src/pages/guided-tracing/A.astro

@@ -39,6 +39,10 @@ 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;
@@ -52,10 +56,10 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      parrotScale = 0.35;
+      beanieScale = 0.35;
-      parrotScalePlus = 0.365;
+      beanieScalePlus = 0.365;
-      parrotWidth = 135;
+      beanieWidth = 135;
-      parrotHeight = 170;
+      beanieHeight = 170;
       animatedAHeight = 35;
       animatedAScale = 0.65;
     } else{
@@ -70,15 +74,15 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      parrotScale = 0.4;
+      beanieScale = 0.4;
-      parrotScalePlus = 0.45;
+      beanieScalePlus = 0.45;
-      parrotWidth = 200;
+      beanieWidth = 200;
-      parrotHeight = 255;
+      beanieHeight = 255;
       animatedAHeight = 20;
       animatedAScale = 0.73;
     }
   function preload() {
-    this.load.video('animatedA', '/assets/animated-letter/a.mp4');
+    this.load.video('animatedA', '/assets/animated-letter/capital_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');
@@ -93,18 +97,46 @@ 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('parrot', '/assets/parrot.png');
+    // this.load.image('beanie', '/assets/beanie.png');
-    this.load.image('parrot', '/assets/beanieImage.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');
+    // this.load.image('customCursor', '/assets/pencile.png');
+    // this.load.image('eye', '/assets/pencile.png');
+    this.load.image('customCursor', '/assets/pencile.png');
+
+
   }
 
   function create() {
+    this.input.setDefaultCursor('none');
+
+    // Set the initial position of the custom cursor
+    const initialCursorX = customWidth / 2 - 8;
+    const initialCursorY = customHeight / 2 - 100;
+
+    // Create a sprite for the custom cursor at the initial position
+    customCursor = this.add.sprite(initialCursorX, initialCursorY, 'customCursor');
+    // customCursor.setOrigin(0.5, 0.5);
+    customCursor.setOrigin(0.0, 0.98).setDepth(2.1).setScale(0.18);
+
+    // Set the custom cursor to follow the pointer
+    this.input.on('pointermove', (pointer) => {
+      customCursor.x = pointer.x;
+      customCursor.y = pointer.y;
+    });
+
+    // Hide cursor on click
+    this.input.on('pointerdown', () => {
+      customCursor.setVisible(true);
+    });
+
+    this.input.on('pointerup', () => {
+      customCursor.setVisible(true);
+    });
     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;
@@ -117,7 +149,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).setDepth(1.9);
+    const 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)
@@ -133,13 +165,13 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
+  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const parrotduration = 2500;
+  const beanieduration = 2500;
   this.tweens.add({
-    targets: parrot,
+    targets: beanie,
-    scaleX: parrotscaleFactor + 0.004,
+    scaleX: beaniescaleFactor + 0.004,
-    scaleY: parrotscaleFactor,
+    scaleY: beaniescaleFactor,
-    duration: parrotduration,
+    duration: beanieduration,
     ease: 'Redial',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
@@ -328,7 +360,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 () {
@@ -344,6 +376,8 @@ import Layout from "../../layouts/Layout.astro";
   }
 
 function update() {
+  this.input.x = 100;  // X coordinate
+  this.input.y = 200; 
 
 }
 

src/pages/guided-tracing/B.astro

@@ -52,11 +52,11 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      parrotScale = 0.35;
+      beanieScale = 0.35;
-      parrotScalePlus = 0.38;
+      beanieScalePlus = 0.38;
-      parrotWidth = 135;
+      beanieWidth = 135;
-      parrotHeight = 170;
+      beanieHeight = 170;
-      animatedAHeight = 32;
+      animatedBHeight = 32;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -69,16 +69,16 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      parrotScale = 0.4;
+      beanieScale = 0.4;
-      parrotScalePlus = 0.44;
+      beanieScalePlus = 0.44;
-      parrotWidth = 200;
+      beanieWidth = 200;
-      parrotHeight = 245;
+      beanieHeight = 245;
-      animatedAHeight = 20;
+      animatedBHeight = 20;
     }
   // let hideButton;
 
   function preload() {
-    this.load.video('animatedA', '/assets/animated-letter/a.mp4');
+    this.load.video('animatedB', '/assets/animated-letter/capital_b.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,7 +92,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('parrot', '/assets/parrot.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');
@@ -115,7 +116,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).setDepth(1.9);
+    const 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)
@@ -131,13 +132,13 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
+  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const parrotduration = 2500;
+  const beanieduration = 2500;
   this.tweens.add({
-    targets: parrot,
+    targets: beanie,
-    scaleX: parrotscaleFactor + 0.004,
+    scaleX: beaniescaleFactor + 0.004,
-    scaleY: parrotscaleFactor,
+    scaleY: beaniescaleFactor,
-    duration: parrotduration,
+    duration: beanieduration,
     ease: 'Redial',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
@@ -145,7 +146,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, 'animatedA').setDepth(2); canvasStand
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedB').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);
@@ -207,7 +208,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 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(0.73);
 
     // Play the video
     animatedLetter.play();

src/pages/guided-tracing/C.astro

@@ -78,7 +78,7 @@ import Layout from "../../layouts/Layout.astro";
   // let hideButton;
 
   function preload() {
-    this.load.video('animatedA', '/assets/animated-letter/a.mp4');
+    this.load.video('animatedA', '/assets/animated-letter/capital_c.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');