work on animation

src/pages/tracing/animate-pointer.astro

@@ -31,7 +31,7 @@ import Layout from "../../layouts/Layout.astro";
 function preload() {
   // Preload your assets here
   this.load.image('letterA', '/assets/capital-letter/a.svg');
-  this.load.svg('handPointer', '/assets/svg/hand.svg')
+  this.load.svg('handPointer', '/assets/svg/hand.svg');
   // Load other assets as needed
 }
 

src/pages/tracing/half-round.astro

@@ -0,0 +1,46 @@
+<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+<!-- this.load.image('handPointer', '/assets/svg/hand.svg'); -->
+<script is:inline>
+ const config = {
+  type: Phaser.AUTO,
+  width: 800,
+  height: 600,
+  scene: {
+    create: create
+  }
+};
+
+const game = new Phaser.Game(config);
+
+let svgPath = "M100,200 C100,100 400,100 400,200";
+let points = parseSvgPath(svgPath);
+
+function create() {
+  // Visualize the SVG path using Phaser graphics (optional)
+  const graphics = this.add.graphics();
+  graphics.lineStyle(2, 0xffffff);
+  for (let i = 0; i < points.length - 1; i++) {
+    graphics.lineBetween(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
+  }
+}
+
+function parseSvgPath(path) {
+  // Parse SVG path data to extract points
+  // This is a simple example and may not cover all SVG path commands
+  const commands = path.match(/[a-df-z]|[\-+]?\d+(\.\d+)?/ig);
+  const points = [];
+  let currentPoint = { x: 0, y: 0 };
+
+  commands.forEach((command, index) => {
+    if (!isNaN(command)) {
+      const isX = (index % 2 === 0);
+      currentPoint[isX ? 'x' : 'y'] = parseFloat(command);
+      points.push({ ...currentPoint });
+    }
+  });
+
+  return points;
+}
+
+
+</script>

src/pages/tracing/round.astro

@@ -0,0 +1,56 @@
+<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+<!-- this.load.image('handPointer', '/assets/svg/hand.svg'); -->
+<script is:inline>
+ const config = {
+  type: Phaser.AUTO,
+  width: window.innerWidth,
+  height: window.innerHeight,
+  scene: {
+    preload: preload,
+    create: create,
+    update: update
+  }
+};
+
+const game = new Phaser.Game(config);
+const customWidth = window.innerWidth;
+const customHeight = window.innerHeight;
+let ellipseCenter;
+let ellipseRadiusX = 74;
+let ellipseRadiusY = 100;
+let angle = 0;
+let rotationSpeed = 0.02; // Adjust rotation speed as needed
+let rotatingObject;
+
+function preload(){
+    this.load.image('handPointer', '/assets/svg/hand.svg');
+    this.load.image('letterO', '/assets/capital-letter/o.svg')
+}
+function create() {
+    this.add.image(customWidth / 2, customHeight / 2, 'letterO');
+    // Create an ellipse (in this case, a visual representation)
+    // const graphics = this.add.graphics();
+    // graphics.lineStyle(2, 0xffffff);
+    // graphics.strokeEllipse(customWidth / 2, customHeight / 2, ellipseRadiusX * 2, ellipseRadiusY * 2);
+
+    ellipseCenter = new Phaser.Math.Vector2(customWidth / 2, customHeight / 2); // Center of the ellipse
+    rotatingObject = this.add.sprite(ellipseCenter.x + ellipseRadiusX, ellipseCenter.y, 'handPointer');
+    rotatingObject.setScale(0.5).setDepth(2); // Adjust scale as needed 
+}
+
+function update() {
+    // Update the angle for rotation
+  angle -= rotationSpeed;
+
+// Calculate new position based on the angle and radii
+const x = ellipseCenter.x + ellipseRadiusX * Math.cos(angle);
+const y = ellipseCenter.y + ellipseRadiusY * Math.sin(angle);
+
+rotatingObject.x = x;
+rotatingObject.y = y;
+
+// Rotate the object based on the angle (optional)
+rotatingObject.rotation = angle;
+}
+
+</script>

src/pages/tracing/test.astro

@@ -32,7 +32,6 @@ import Layout from "../../layouts/Layout.astro";
       update: update
     }
   };
-
   const game = new Phaser.Game(config);
   const customWidth = window.innerWidth;
   const customHeight = window.innerHeight;
@@ -51,9 +50,9 @@ import Layout from "../../layouts/Layout.astro";
     this.load.audio('slide', '/assets/audio/slide.mp3');
     this.load.image('topLogo', '/assets/top_logo.png');
     this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
   }
 
-
   function create() {
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -61,19 +60,28 @@ import Layout from "../../layouts/Layout.astro";
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
     firstScreen.setVisible(false);
 
-    let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Hide", { font: '24px quicksand', fill: '#05b3a4' });
+    let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Let`s Do", { font: '24px quicksand', fill: '#05b3a4' });
     hideButton.setInteractive().on('pointerdown', () => {
       isDemoButtonClicked = false;
       firstScreen.setVisible(false);
       hideButton.setVisible(false);  // Hide the "Hide" button
       demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      handPointerLeft.setVisible(false);
+      handPointerRight.setVisible(false);
+      handPointeSlide.setVisible(false);
     });
     hideButton.setVisible(false);
-    let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Demo", { font: '24px quicksand', fill: '#05b3a4' });
+    
+    let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help", { font: '24px quicksand', fill: '#05b3a4' });
     demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
       firstScreen.setVisible(true);
       demoButton.setVisible(false);  // Hide the "Demo" button
       hideButton.setVisible(true);   // Show the "Hide" button
+      handPointerLeft.setVisible(true);
+      handPointerRight.setVisible(true);
+      handPointeSlide.setVisible(true);
     });
 
 
@@ -159,6 +167,7 @@ import Layout from "../../layouts/Layout.astro";
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
         graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", pointer.x, pointer.y)
       });
 
       this.input.on('pointerup', function () {
@@ -171,6 +180,81 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+        const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
+        const startHeightLeft = customHeight /2 - 140; // Starting y position
+        const endHeightLeft = 567;   // Ending y position
+        const startWidthLeft = customWidth / 2 + 20;
+        const endWidthLeft = customWidth / 2 - 65;
+        //   handPointer.setOrigin(0.5, 0.5);
+        handPointerLeft.setScale(0.5).setDepth(2); // Adjust scale as needed
+        // Define the bounce animation
+        this.tweens.add({
+          targets: handPointerLeft,
+          x: {
+              getStart: () => startWidthLeft,
+              getEnd: () => endWidthLeft,
+          }, // End x position
+          y: {
+            getStart: () => startHeightLeft,
+            getEnd: () => endHeightLeft,
+          },
+          duration: 3000, // Duration of each bounce
+          ease: 'Sine.easeInOut',
+          yoyo: false,
+          repeat: -1 // -1 means it will repeat indefinitely
+        });
+        const handPointerRight = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
+        const startHeightRight = customHeight /2 - 140; // Starting y position
+        const endHeightRight = 567;   // Ending y position
+        const startWidthRight = customWidth / 2 + 20;
+        const endWidthRight = customWidth - 530;
+        //   handPointer.setOrigin(0.5, 0.5);
+        handPointerRight.setScale(0.5).setDepth(2).setAngle(360); // Adjust scale as needed
+        // Define the bounce animation
+        this.tweens.add({
+          targets: handPointerRight,
+          x: {
+              getStart: () => startWidthRight,
+              getEnd: () => endWidthRight,
+          }, // End x position
+          y: {
+            getStart: () => startHeightRight,
+            getEnd: () => endHeightRight,
+          },
+          duration: 3000, // Duration of each bounce
+          ease: 'Sine.easeInOut',
+          yoyo: false,
+          repeat: -1 // -1 means it will repeat indefinitely
+        });
+        const handPointeSlide = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
+        const startHeightSlide = customHeight / 2 + 17; // Starting y position
+        const endHeightSlide = customHeight / 2 + 17;   // Ending y position
+
+        const startWidthSlide = customWidth / 2 - 60;
+        const endWidthSlide = customWidth / 2 + 55;
+        //   handPointer.setOrigin(0.5, 0.5);
+        handPointeSlide.setScale(0.5).setDepth(2).setAngle(45); // Adjust scale as needed
+        // Define the bounce animation
+        this.tweens.add({
+          targets: handPointeSlide,
+          x: {
+              getStart: () => startWidthSlide,
+              getEnd: () => endWidthSlide,
+          }, // End x position
+          y: {
+            getStart: () => startHeightSlide,
+            getEnd: () => endHeightSlide,
+          },
+          duration: 3000, // Duration of each bounce
+          ease: 'Sine.easeInOut',
+          yoyo: false,
+          repeat: -1 // -1 means it will repeat indefinitely
+        });
+        handPointerLeft.setVisible(false);
+        handPointerRight.setVisible(false);
+        handPointeSlide.setVisible(false);
+
+      // Start Position 626 317
 
   }
   // function showLayersWithFadeIn() {    

src/pages/tracing/test3.astro

@@ -0,0 +1,23 @@
+<script is:inline>
+ function create() {
+  const startX = 100;  // X coordinate for the start point
+  const startY = 300;  // Y coordinate for the start point
+  const endY = 500;    // Y coordinate for the end point
+
+  const ball = this.add.sprite(startX, startY, 'ball');
+  ball.setScale(0.5); // Adjust scale as needed
+  ball.setOrigin(0.5, 0.5);
+
+  // Define the bounce animation
+  this.tweens.add({
+    targets: ball,
+    y: endY,         // End point Y coordinate
+    duration: 1000,  // Duration of each bounce
+    ease: 'Sine.easeInOut',
+    yoyo: true,
+    repeat: -1       // -1 means it will repeat indefinitely
+  });
+}
+
+
+</script>