change code server

src/pages/guided-tracing/a.astro

@@ -32,12 +32,29 @@ import Layout from "../../layouts/Layout.astro";
       update: update
     }
   };
+  // backgroundImage.png
   const game = new Phaser.Game(config);
   const customWidth = window.innerWidth;
   const customHeight = window.innerHeight;
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.23
+      canvasHeight = 154; 
+      letterHeight = 70;
+      backgroundScale = 0.8;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.3;
+      canvasHeight = 100;
+      letterHeight = 0;
+      backgroundScale = 1;
+    }
   // let hideButton;
 
   function preload() {
@@ -51,13 +68,33 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('topLogo', '/assets/top_logo.png');
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
+    // this.load.image('backgroundImage', '/assets/backgroundImage2.png');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas2.png');
   }
 
   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 firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
+    
+    
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud');
+    cloud.setDepth(-1.9);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+    loop: true,
+    callback: () => {
+      cloud.tilePositionX += scrollSpeed;
+    },
+    delay: 16, // Adjust the delay for the desired scrolling speed
+  });
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2);
+    this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
     firstScreen.setVisible(false);
 
     let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Let`s Do", { font: '24px quicksand', fill: '#05b3a4' });
@@ -73,7 +110,10 @@ import Layout from "../../layouts/Layout.astro";
     });
     hideButton.setVisible(false);
     
-    let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help", { font: '24px quicksand', fill: '#05b3a4' });
+    let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help!", { font: '900 24px quicksand', fill: '#05b3a4', backgroundColor: '#7c4c23'}).setPadding(20, 10);
+    // demoButton.style.borderRadius = "25px";
+    // demoButton.style.set('borderRadius', '15px');
+
     demoButton.setInteractive().on('pointerdown', () => {
       graphics.setVisible(false);
       firstScreen.setVisible(true);
@@ -90,9 +130,9 @@ import Layout from "../../layouts/Layout.astro";
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
 
-    let textX, textY;
+    let textX = window.innerWidth / 2, textY;
 
-      firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1');
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
       textY = isMobile ? customHeight / 5 : customHeight / 2;
       const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
@@ -102,7 +142,7 @@ import Layout from "../../layouts/Layout.astro";
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
 
-      secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2');
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
       const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
       const slantRightAudio = this.sound.add('slantRight');
@@ -112,7 +152,7 @@ import Layout from "../../layouts/Layout.astro";
       secondLayer.setInteractive({ draggable: true });
       secondLayer.setVisible(false);
 
-      thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
+      thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3');
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
       const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
       const slideAudio = this.sound.add('slide');
@@ -162,7 +202,7 @@ import Layout from "../../layouts/Layout.astro";
         }
       });
       graphics = this.add.graphics();
-      graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
 
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -257,11 +297,8 @@ import Layout from "../../layouts/Layout.astro";
       // Start Position 626 317
 
   }
-  // function showLayersWithFadeIn() {    
-      
-  // }
 
 function update() {
-    // Update any game logic if needed
+
 }
 </script>

src/pages/tracing/half-round.astro

@@ -3,44 +3,55 @@
 <script is:inline>
  const config = {
   type: Phaser.AUTO,
-  width: 800,
+  width: window.innerWidth,
-  height: 600,
+  height: window.innerHeight,
   scene: {
-    create: create
+    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;
 
-let svgPath = "M100,200 C100,100 400,100 400,200";
+function preload(){
-let points = parseSvgPath(svgPath);
+    this.load.image('handPointer', '/assets/svg/hand.svg');
-
+    this.load.image('letterO', '/assets/capital-letter/o.svg')
+}
 function create() {
-  // Visualize the SVG path using Phaser graphics (optional)
+    this.add.image(customWidth / 2, customHeight / 2, 'letterO');
-  const graphics = this.add.graphics();
+    // Create an ellipse (in this case, a visual representation)
-  graphics.lineStyle(2, 0xffffff);
+    // const graphics = this.add.graphics();
-  for (let i = 0; i < points.length - 1; i++) {
+    // graphics.lineStyle(2, 0xffffff);
-    graphics.lineBetween(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
+    // 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 parseSvgPath(path) {
+function update() {
-  // Parse SVG path data to extract points
+    // Update the angle for rotation
-  // This is a simple example and may not cover all SVG path commands
+    angle -= rotationSpeed;
-  const commands = path.match(/[a-df-z]|[\-+]?\d+(\.\d+)?/ig);
-  const points = [];
-  let currentPoint = { x: 0, y: 0 };
 
-  commands.forEach((command, index) => {
+    // Calculate new position based on the angle and radii
-    if (!isNaN(command)) {
+    const radius = Math.max(ellipseRadiusX, ellipseRadiusY);
-      const isX = (index % 2 === 0);
+    const x = ellipseCenter.x + radius * Math.cos(angle);
-      currentPoint[isX ? 'x' : 'y'] = parseFloat(command);
+    const y = ellipseCenter.y + radius * Math.sin(angle);
-      points.push({ ...currentPoint });
+
+    rotatingObject.x = x;
+    rotatingObject.y = y;
+
+    // Rotate the object based on the angle (optional)
+    rotatingObject.rotation = angle;
 }
-  });
-
-  return points;
-}
-
 
 </script>