demo reset

src/pages/guided-tracing/G.astro

@@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro";
   const game = new Phaser.Game(config);
   const customWidth = window.innerWidth;
   const customHeight = window.innerHeight;
-  let firstLayer, secondLayer;
+  let firstLayer, secondLayer, thirdLayer;
   let graphics;
+  let animatedLetter;
   let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
@@ -231,6 +232,7 @@ import Layout from "../../layouts/Layout.astro";
         }
       });
     hideButton.setInteractive().on('pointerdown', () => {
+      animatedLetter.stop();
       isDemoButtonClicked = false;
       firstScreen.setVisible(false);
       hideButton.setVisible(false);  // Hide the "Hide" button
@@ -255,6 +257,8 @@ import Layout from "../../layouts/Layout.astro";
       });
 
     demoButton.setInteractive().on('pointerdown', () => {
+      animatedLetter.setCurrentTime(0);
+      animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
       demoButton.setVisible(false);  // Hide the "Demo" button
@@ -267,16 +271,16 @@ 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 : 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(animatedVideoScale);
+          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale);
 
     // Play the video
-    animatedLetter.play();
+    // 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 () {
+    animatedLetter.on('complete', function () {
       // Video playback is complete
       // You can add your code here for what to do when the video finishes.
     });
@@ -308,12 +312,10 @@ import Layout from "../../layouts/Layout.astro";
         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;
+          firstDragStartPoint.x = pointer.x;
+          firstDragStartPoint.y = pointer.y;
         });
 
         firstLayer.on('drag', (pointer) => {
@@ -331,7 +333,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer