demo reset

src/pages/guided-tracing/J.astro

@@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro";
   const customHeight = window.innerHeight;
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
+  let animatedLetter;
   let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
@@ -213,8 +214,6 @@ import Layout from "../../layouts/Layout.astro";
     maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
     const mask = maskGraphics.createGeometryMask();
 
- 
-
     let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
         font: '900 24px quicksand',
         fill: '#05b3a4',
@@ -230,6 +229,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
@@ -254,6 +254,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
@@ -266,10 +268,10 @@ 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 : J', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-      const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);
+            animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').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: