good conditions tracing3

src/pages/tracing/temp.astro

@@ -1,29 +1,131 @@
-<main>
-    <div>
-        <button onclick="useDiv()">Use Div</button>
-        <div id="myDiv">
-          This is the div to hide.
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
         </div>
-    </div>
-</main>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
 <script is:inline>
-   let usageCount = 0;
-const maxUsage = 3;  // Change this to the desired limit
+  const isMobile = window.innerWidth <= 768;
+  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
+    }
+  };
+  const game = new Phaser.Game(config);
+  
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer;
+  let graphics;
 
-function useDiv() {
-  usageCount++;
 
-  if (usageCount >= maxUsage) {
-    hideDiv();
+  function preload() {
+    this.load.svg('letterA', '/assets/letter/a.svg');
+    this.load.svg('layer1', '/assets/letter/a_l1.svg');
+    this.load.svg('layer2', '/assets/letter/a_l2.svg');
+    this.load.svg('layer3', '/assets/letter/a_l3.svg');
+    this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
+    this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
+    this.load.audio('slide', '/assets/audio/slide.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png')
   }
-}
 
-function hideDiv() {
-  const divToHide = document.getElementById('myDiv');
-  if (divToHide) {
-    divToHide.style.display = 'none';
+  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', });
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
+    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 to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    this.time.delayedCall(2000, () => {
+      firstScreen.setVisible(false);
+      showLayers.call(this);
+    }, [], this);
+    
   }
-}
 
+  function showLayers() {
+    let textX, textY;
+
+    firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1').setInteractive({ draggable: true });
+    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'});
+    const slantLeftAudio = this.sound.add('slantLeft');
+    slantLeftAudio.play();
+    firstLayer.setDepth(1);
+    firstLayer.setAlpha(0.5);
+    firstLayer.setInteractive({ draggable: true });
+
+    secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2').setInteractive({ draggable: true });
+    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');
+    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, 'layer3').setInteractive({ draggable: true });
+    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');
+    thirdTextLayer.setVisible(false);
+    thirdLayer.setDepth(1.1);
+    thirdLayer.setAlpha(0.5);
+    thirdLayer.setInteractive({ draggable: true });
+    thirdLayer.setVisible(false);
+
+    graphics = this.add.graphics();
+    graphics.lineStyle(5, 0xFF0000).setDepth(2); // Set the line style to red
+
+    // Create a variable to track if drawing is in progress
+    let isDrawing = false;
+
+    // Event for starting to draw
+    firstLayer.on('pointerdown', (pointer) => {
+        isDrawing = true;
+        graphics.beginPath();
+        graphics.moveTo(pointer.x, pointer.y);
+    });
+
+    // Event for drawing while dragging
+    firstLayer.on('pointermove', (pointer) => {
+        if (isDrawing) {
+            graphics.lineTo(pointer.x, pointer.y);
+            graphics.strokePath();
+        }
+    });
+
+    // Event for stopping drawing
+    firstLayer.on('pointerup', () => {
+        isDrawing = false;
+    });
+    
+
+    
+    
+  }
+
+  function update() {
+    // Update any game logic if needed
+  }
 
 </script>

src/pages/tracing/temp2.astro

@@ -0,0 +1,196 @@
+---
+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,
+    };
+    let draggingAllowed = false;
+
+  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
+    }
+  };
+
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer;
+  let isDragging =  false;
+  let lineStartPosition =  {x:0 , y:0};
+  let draggingLine;
+
+  function preload() {
+    this.load.svg('letterA', '/assets/letter/a.svg');
+    this.load.svg('layer1', '/assets/letter/a_l1.svg');
+    this.load.svg('layer2', '/assets/letter/a_l2.svg');
+    this.load.svg('layer3', '/assets/letter/a_l3.svg');
+    this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
+    this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
+    this.load.audio('slide', '/assets/audio/slide.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('succesImage', '/assets/svg/tick.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', });
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
+    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 to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+
+    this.time.delayedCall(2000, () => {
+      firstScreen.setVisible(false);
+      showLayers.call(this);
+    }, [], this);
+    this.add.rectangle(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height, 0x000000, 0.2);
+    
+    draggingLine = this.add.graphics();
+    draggingLine.lineStyle(10, 0xff0000).setDepth(1.5);
+
+    // draggingLine = this.add.graphics();
+    // draggingLine.lineStyle(10, 0xff0000).setDepth(1.5);   //o\\ 5 is the line width, 0xff0000 is the color (red)
+  }
+
+  function showLayers() {
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2, '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'});
+      const slantLeftAudio = this.sound.add('slantLeft');
+      slantLeftAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2, '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');
+      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, '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');
+      thirdTextLayer.setVisible(false);
+      thirdLayer.setDepth(1.1);
+      // thirdLayer.setScale(1.15);
+      thirdLayer.setAlpha(0.5);
+      thirdLayer.setInteractive({ draggable: true });
+      thirdLayer.setVisible(false);
+
+      firstLayer.on('drag', (pointer) => {
+        if (pointer.isDown && isWithinDrawingZone(pointer)) {
+          firstTextLayer.setVisible(false);
+          secondTextLayer.setVisible(true);
+          slantRightAudio.play();
+          secondLayer.setVisible(true);
+          firstLayer.setAlpha(1);
+          secondLayer.setAlpha(0.5);
+          thirdLayer.setAlpha(0.5);
+          draggingAllowed = true;
+        } else {
+          firstLayer.setAlpha(0.5);
+          draggingAllowed = false;
+        }
+      });
+  
+      secondLayer.on('drag', (pointer) => {
+        if (pointer.isDown && isWithinDrawingZone(pointer)) {
+          secondTextLayer.setVisible(false);
+          thirdTextLayer.setVisible(true);
+          slideAudio.play();
+          thirdLayer.setVisible(true);
+          secondLayer.setAlpha(1);
+          thirdLayer.setAlpha(0.5);
+          draggingAllowed = true;
+        } else {
+          secondLayer.setAlpha(0.5);
+          draggingAllowed = false;
+        }
+      });
+  
+      thirdLayer.on('drag', (pointer) => {
+        if (pointer.isDown && isWithinDrawingZone(pointer)) {
+          thirdLayer.setAlpha(1);
+          thirdTextLayer.setVisible(false);
+          draggingAllowed = true;
+        } else {
+          thirdLayer.setAlpha(0.5);
+          draggingAllowed = false;
+        }
+      });
+  
+      this.input.on('pointerdown',  dragStart);
+      this.input.on('pointerup',    dragEnd);
+      this.input.on('pointermove',  drag);
+  }
+
+  function dragStart(pointer) {
+      if (pointer.isDown && isWithinDrawingZone(pointer) && draggingAllowed) {
+        isDragging = true;
+        lineStartPosition.x = pointer.x;
+        lineStartPosition.y = pointer.y;
+      }
+    }
+  
+    function drag(pointer) {
+      if (isDragging) {
+        // draggingLine.clear();
+        draggingLine.beginPath();
+        draggingLine.moveTo(lineStartPosition.x, lineStartPosition.y);
+        draggingLine.lineTo(pointer.x, pointer.y);
+        draggingLine.strokePath();
+      }
+    }
+  
+    function dragEnd() {
+      isDragging = false;
+    }
+  
+    function update() {
+      // Update any game logic if needed
+    }
+  
+    function isWithinDrawingZone(pointer) {
+      return (
+        pointer.x >= drawingZone.x &&
+        pointer.x <= drawingZone.x + drawingZone.width &&
+        pointer.y >= drawingZone.y &&
+        pointer.y <= drawingZone.y + drawingZone.height
+      );
+    }
+
+
+</script>

src/pages/tracing/temp4.astro

@@ -0,0 +1,158 @@
+---
+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
+    }
+  };
+
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer;
+  let isDragging =  false;
+  let lineStartPosition =  {x:0 , y:0};
+  let draggingLine;
+
+  function preload() {
+    this.load.svg('letterA', '/assets/letter/a.svg');
+    this.load.svg('layer1', '/assets/letter/a_l1.svg');
+    this.load.svg('layer2', '/assets/letter/a_l2.svg');
+    this.load.svg('layer3', '/assets/letter/a_l3.svg');
+    this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
+    this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
+    this.load.audio('slide', '/assets/audio/slide.mp3');
+    this.load.image('topLogo', '/assets/top_logo.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', });
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
+    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 to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+
+    this.time.delayedCall(2000, () => {
+      firstScreen.setVisible(false);
+      showLayers.call(this);
+    }, [], this);
+  }
+
+  function showLayers() {
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2, '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'});
+      const slantLeftAudio = this.sound.add('slantLeft');
+      slantLeftAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2, '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');
+      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, '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');
+      thirdTextLayer.setVisible(false);
+      thirdLayer.setDepth(1.1);
+      // thirdLayer.setScale(1.15);
+      thirdLayer.setAlpha(0.5);
+      thirdLayer.setInteractive({ draggable: true });
+      thirdLayer.setVisible(false);
+
+      let isDrawing = false;
+
+      firstLayer.on('drag', (pointer) => {
+        isDrawing = true;
+        graphics.beginPath();
+        graphics.moveTo(pointer.x, pointer.y);
+        if (pointer.isDown) {
+          firstTextLayer.setVisible(false);
+          secondTextLayer.setVisible(true);
+          slantRightAudio.play();
+          secondLayer.setVisible(true);
+          firstLayer.setAlpha(1);
+          secondLayer.setAlpha(0.5);
+          thirdLayer.setAlpha(0.5);
+        } else {
+          firstLayer.setAlpha(0.5);
+        }
+      });
+      firstLayer.on('pointermove', (pointer) => {
+        if (isDrawing) {
+            graphics.lineTo(pointer.x, pointer.y);
+            graphics.strokePath();
+        }
+    });
+
+      secondLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          secondTextLayer.setVisible(false);
+          thirdTextLayer.setVisible(true);
+          slideAudio.play();
+          thirdLayer.setVisible(true);
+          secondLayer.setAlpha(1);
+          thirdLayer.setAlpha(0.5);
+        } else {
+          secondLayer.setAlpha(0.5);
+        }
+      });
+
+      thirdLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          thirdLayer.setAlpha(1);
+          thirdTextLayer.setVisible(false);
+          this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
+        } else {
+          thirdLayer.setAlpha(0.5);
+        }
+      });
+  }
+
+  function update() {
+    // Update any game logic if needed
+  }
+
+
+</script>

src/pages/tracing/test.astro

@@ -0,0 +1,184 @@
+---
+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
+    }
+  };
+
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer;
+  let graphics;
+  let isDrawing = false;
+  
+
+  function preload() {
+    this.load.svg('letterA', '/assets/letter/a.svg');
+    this.load.svg('layer1', '/assets/letter/a_l1.svg');
+    this.load.svg('layer2', '/assets/letter/a_l2.svg');
+    this.load.svg('layer3', '/assets/letter/a_l3.svg');
+    this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
+    this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
+    this.load.audio('slide', '/assets/audio/slide.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.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', });
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
+    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 to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+
+    this.time.delayedCall(2000, () => {
+      this.tweens.add({
+        targets: firstScreen,
+        alpha: 0,
+        scaleX: 0.5,
+        scaleY: 0.5,
+        duration: 1000,
+        onComplete: () => {
+          firstScreen.setVisible(false);
+          firstScreen.setScale(1);
+          showLayersWithFadeIn.call(this);
+        }
+      });
+    }, [], this);
+  }
+  function showLayersWithFadeIn() {
+    this.tweens.add({
+      targets: [firstLayer, secondLayer, thirdLayer],
+      alpha: 1,
+      duration: 1000, // Duration of the tween in milliseconds
+      delay: 500, // Delay before the fade-in starts
+      ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
+    });
+    
+      let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2, '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'});
+      const slantLeftAudio = this.sound.add('slantLeft');
+      slantLeftAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2, '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');
+      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, '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');
+      thirdTextLayer.setVisible(false);
+      thirdLayer.setDepth(1.1);
+      // thirdLayer.setScale(1.15);
+      thirdLayer.setAlpha(0.5);
+      thirdLayer.setInteractive({ draggable: true });
+      thirdLayer.setVisible(false);
+
+      firstLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          firstTextLayer.setVisible(false);
+          secondTextLayer.setVisible(true);
+          slantRightAudio.play();
+          secondLayer.setVisible(true);
+          firstLayer.setAlpha(1);
+          secondLayer.setAlpha(0.5);
+          thirdLayer.setAlpha(0.5);
+        } else {
+          firstLayer.setAlpha(0.5);
+        }
+      });
+
+      secondLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          secondTextLayer.setVisible(false);
+          thirdTextLayer.setVisible(true);
+          slideAudio.play();
+          thirdLayer.setVisible(true);
+          secondLayer.setAlpha(1);
+          thirdLayer.setAlpha(0.5);
+        } else {
+          secondLayer.setAlpha(0.5);
+        }
+      });
+
+      thirdLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          thirdLayer.setAlpha(1);
+          thirdTextLayer.setVisible(false);
+          // const succesImage = this.add.image(customWidth / 2, customHeight / 2, 'succesImage').setDepth(2);
+          // succesImage.setAlpha(0.2);
+          // this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
+        } else {
+          thirdLayer.setAlpha(0.5);
+        }
+      });
+      graphics = this.add.graphics();
+      graphics.lineStyle(15, 0x05b3a4, 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() {
+    // Update any game logic if needed
+  }
+</script>

src/pages/tracing/tracing-importeat.astro

@@ -0,0 +1,49 @@
+<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+<script is:inline>
+const config = {
+  type: Phaser.AUTO,
+  width: 800,
+  height: 600,
+  scene: {
+    preload: preload,
+    create: create,
+    update: update
+  }
+};
+
+const game = new Phaser.Game(config);
+
+let graphics;
+let isDrawing = false;
+
+function preload() {
+  // Preload any assets if needed
+}
+
+function create() {
+  graphics = this.add.graphics();
+  graphics.lineStyle(20, 0x05b3a4, 1); // 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() {
+  // You can add any game logic or updates here
+}
+
+
+</script>

src/pages/tracing/tracing3.astro

@@ -38,101 +38,147 @@ import Layout from "../../layouts/Layout.astro";
   const customHeight = window.innerHeight;
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
+  let isDrawing = false;
+  
 
   function preload() {
     this.load.svg('letterA', '/assets/letter/a.svg');
     this.load.svg('layer1', '/assets/letter/a_l1.svg');
     this.load.svg('layer2', '/assets/letter/a_l2.svg');
     this.load.svg('layer3', '/assets/letter/a_l3.svg');
-    this.load.audio('letterAAudio1', '/assets/audio/hook-arround-snake.mp3');
     this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
     this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
     this.load.audio('slide', '/assets/audio/slide.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.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', });
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
+    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 to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
 
     this.time.delayedCall(2000, () => {
-      firstScreen.setVisible(false);
-      showLayers.call(this);
+      this.tweens.add({
+        targets: firstScreen,
+        alpha: 0,
+        scaleX: 0.5,
+        scaleY: 0.5,
+        duration: 1000,
+        onComplete: () => {
+          firstScreen.setVisible(false);
+          firstScreen.setScale(1);
+          showLayersWithFadeIn.call(this);
+        }
+      });
     }, [], this);
   }
-
-  function showLayers() {
-    let textX, textY;
-
-    firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
-    textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-    textY = isMobile ? customHeight / 5 : customHeight / 2;
-    const firstTextLayer = this.add.text(textX, textY, '1. Slant Left').setTint(0x05b3a4);
-    const slantLeftAudio = this.sound.add('slantLeft');
-    slantLeftAudio.play();
-    firstLayer.setDepth(1);
-    firstLayer.setAlpha(0.5);
-    firstLayer.setInteractive({ draggable: true });
-
-    secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
-    textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-    const secondTextLayer = this.add.text(textX, textY, '2. Slant Right').setTint(0x05b3a4);
-    const slantRightAudio = this.sound.add('slantRight');
-    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, 'layer3');
-    textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-    const thirdTextLayer = this.add.text(textX, textY, '3. Slide').setTint(0x05b3a4);
-    const slideAudio = this.sound.add('slide');
-    thirdTextLayer.setVisible(false);
-    thirdLayer.setDepth(1.1);
-    thirdLayer.setScale(1.15);
-    thirdLayer.setAlpha(0.5);
-    thirdLayer.setInteractive({ draggable: true });
-    thirdLayer.setVisible(false);
-
-    firstLayer.on('drag', (pointer) => {
-      if (pointer.isDown) {
-        firstTextLayer.setVisible(false);
-        secondTextLayer.setVisible(true);
-        slantRightAudio.play();
-        secondLayer.setVisible(true);
-        firstLayer.setAlpha(1);
-        secondLayer.setAlpha(0.5);
-        thirdLayer.setAlpha(0.5);
-      } else {
-        firstLayer.setAlpha(0.5);
-      }
+  function showLayersWithFadeIn() {
+    this.tweens.add({
+      targets: [firstLayer, secondLayer, thirdLayer],
+      alpha: 1,
+      duration: 1000, // Duration of the tween in milliseconds
+      delay: 500, // Delay before the fade-in starts
+      ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
     });
+    
+      let textX, textY;
 
-    secondLayer.on('drag', (pointer) => {
-      if (pointer.isDown) {
-        graphics = this.add.graphics();
-        graphics.lineStyle(50, 0x5e17eb);
-        secondTextLayer.setVisible(false);
-        thirdTextLayer.setVisible(true);
-        slideAudio.play();
-        thirdLayer.setVisible(true);
-        secondLayer.setAlpha(1);
-        thirdLayer.setAlpha(0.5);
-      } else {
-        secondLayer.setAlpha(0.5);
-      }
-    });
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2, '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'});
+      const slantLeftAudio = this.sound.add('slantLeft');
+      slantLeftAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
 
-    thirdLayer.on('drag', (pointer) => {
-      if (pointer.isDown) {
-        thirdLayer.setAlpha(1);
-      } else {
-        thirdLayer.setAlpha(0.5);
-      }
-    });
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2, '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');
+      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, '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');
+      thirdTextLayer.setVisible(false);
+      thirdLayer.setDepth(1.1);
+      // thirdLayer.setScale(1.15);
+      thirdLayer.setAlpha(0.5);
+      thirdLayer.setInteractive({ draggable: true });
+      thirdLayer.setVisible(false);
+
+      firstLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          firstTextLayer.setVisible(false);
+          secondTextLayer.setVisible(true);
+          slantRightAudio.play();
+          secondLayer.setVisible(true);
+          firstLayer.setAlpha(1);
+          secondLayer.setAlpha(0.5);
+          thirdLayer.setAlpha(0.5);
+        } else {
+          firstLayer.setAlpha(0.5);
+        }
+      });
+
+      secondLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          secondTextLayer.setVisible(false);
+          thirdTextLayer.setVisible(true);
+          slideAudio.play();
+          thirdLayer.setVisible(true);
+          secondLayer.setAlpha(1);
+          thirdLayer.setAlpha(0.5);
+        } else {
+          secondLayer.setAlpha(0.5);
+        }
+      });
+
+      thirdLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          thirdLayer.setAlpha(1);
+          thirdTextLayer.setVisible(false);
+          // const succesImage = this.add.image(customWidth / 2, customHeight / 2, 'succesImage').setDepth(2);
+          // succesImage.setAlpha(0.2);
+          // this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
+        } else {
+          thirdLayer.setAlpha(0.5);
+        }
+      });
+      graphics = this.add.graphics();
+      graphics.lineStyle(15, 0x05b3a4, 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() {
     // Update any game logic if needed
   }
-
 </script>