From 9edeb97f6757c4a569b20450e7a2495cd0b28e3d Mon Sep 17 00:00:00 2001 From: dev sp Date: Tue, 19 Dec 2023 12:59:24 +0000 Subject: [PATCH] demo reset --- src/pages/drawing/index.astro | 2 +- src/pages/guided-tracing/0.astro | 12 +++++++----- src/pages/guided-tracing/1.astro | 10 ++++++---- src/pages/guided-tracing/2.astro | 6 +++++- src/pages/guided-tracing/3.astro | 8 ++++++-- src/pages/guided-tracing/4.astro | 8 ++++++-- src/pages/guided-tracing/5.astro | 8 ++++++-- src/pages/guided-tracing/6.astro | 8 ++++++-- src/pages/guided-tracing/7.astro | 8 ++++++-- src/pages/guided-tracing/8.astro | 8 ++++++-- src/pages/guided-tracing/9.astro | 8 ++++++-- src/pages/guided-tracing/A.astro | 8 ++++++-- src/pages/guided-tracing/B.astro | 8 ++++++-- src/pages/guided-tracing/C.astro | 10 ++++++---- src/pages/guided-tracing/D.astro | 10 +++++++--- src/pages/guided-tracing/E.astro | 8 ++++++-- src/pages/guided-tracing/F.astro | 8 ++++++-- src/pages/guided-tracing/G.astro | 19 ++++++++++--------- src/pages/guided-tracing/H.astro | 8 ++++++-- src/pages/guided-tracing/I.astro | 8 ++++++-- src/pages/guided-tracing/J.astro | 10 ++++++---- src/pages/guided-tracing/K.astro | 9 ++++++--- src/pages/guided-tracing/L.astro | 10 +++++++--- src/pages/guided-tracing/M.astro | 8 ++++++-- src/pages/guided-tracing/N.astro | 8 ++++++-- src/pages/guided-tracing/O.astro | 9 ++++++--- src/pages/guided-tracing/P.astro | 10 +++++++--- src/pages/guided-tracing/Q.astro | 10 +++++++--- src/pages/guided-tracing/R.astro | 8 ++++++-- src/pages/guided-tracing/S.astro | 8 ++++++-- src/pages/guided-tracing/T.astro | 14 ++++++++------ src/pages/guided-tracing/U.astro | 8 ++++++-- src/pages/guided-tracing/V.astro | 10 +++++++--- src/pages/guided-tracing/W.astro | 8 ++++++-- src/pages/guided-tracing/X.astro | 10 +++++++--- src/pages/guided-tracing/Y.astro | 8 ++++++-- src/pages/guided-tracing/Z.astro | 8 ++++++-- src/pages/guided-tracing/a.astro | 7 +++++-- src/pages/guided-tracing/b.astro | 11 +++++++---- src/pages/guided-tracing/c.astro | 8 ++++++-- src/pages/guided-tracing/d.astro | 11 ++++++----- src/pages/guided-tracing/e.astro | 10 +++++++--- src/pages/guided-tracing/f.astro | 10 +++++++--- src/pages/guided-tracing/g.astro | 14 ++++++++------ src/pages/guided-tracing/h.astro | 10 +++++++--- src/pages/guided-tracing/i.astro | 10 +++++++--- src/pages/guided-tracing/j.astro | 10 +++++++--- src/pages/guided-tracing/k.astro | 8 ++++++-- src/pages/guided-tracing/l.astro | 8 ++++++-- src/pages/guided-tracing/m.astro | 8 ++++++-- src/pages/guided-tracing/n.astro | 10 +++++++--- src/pages/guided-tracing/o.astro | 8 ++++++-- src/pages/guided-tracing/p.astro | 10 +++++++--- src/pages/guided-tracing/q.astro | 6 +++++- src/pages/guided-tracing/r.astro | 10 +++++++--- src/pages/guided-tracing/s.astro | 8 ++++++-- src/pages/guided-tracing/t.astro | 11 +++++++---- src/pages/guided-tracing/u.astro | 12 +++++++----- src/pages/guided-tracing/v.astro | 10 +++++++--- src/pages/guided-tracing/w.astro | 8 ++++++-- src/pages/guided-tracing/x.astro | 10 +++++++--- src/pages/guided-tracing/y.astro | 10 +++++++--- src/pages/guided-tracing/z.astro | 8 ++++++-- 63 files changed, 399 insertions(+), 176 deletions(-) diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index c622b46..37f5d46 100644 --- a/src/pages/drawing/index.astro +++ b/src/pages/drawing/index.astro @@ -408,7 +408,7 @@ import Layout from '../../layouts/Layout.astro'; // Disable the default cursor this.input.setDefaultCursor('none'); const borderThickness = 0; - const borderColor = 0xffffff; // Black color (you can customize this) + const borderColor = 0xffffff; // White color (you can customize this) const borderGraphics = this.add.graphics(); borderGraphics.lineStyle(borderThickness, borderColor); borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height); diff --git a/src/pages/guided-tracing/0.astro b/src/pages/guided-tracing/0.astro index f635681..ff75cc0 100644 --- a/src/pages/guided-tracing/0.astro +++ b/src/pages/guided-tracing/0.astro @@ -40,6 +40,7 @@ import Layout from "../../layouts/Layout.astro"; let graphics; let isDrawing = false; let formattedDateTime; + let animatedLetter; let gameStartTime = "stat timr here"; if(isMobile){ @@ -234,6 +235,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 @@ -258,6 +260,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 @@ -270,10 +274,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 number : 0', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale); - + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale); + animatedLetter.setLoop(true); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: @@ -301,8 +305,6 @@ import Layout from "../../layouts/Layout.astro"; // Add these variables to keep track of start points let firstDragStartPoint = { x: 0, y: 0 }; - // ... - // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { firstDragStartPoint.x = pointer.x; diff --git a/src/pages/guided-tracing/1.astro b/src/pages/guided-tracing/1.astro index 42a8876..be9a3d8 100644 --- a/src/pages/guided-tracing/1.astro +++ b/src/pages/guided-tracing/1.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 = "stat timr here"; @@ -234,6 +235,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 @@ -258,6 +260,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 @@ -270,10 +274,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 number : 1', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: @@ -301,8 +305,6 @@ import Layout from "../../layouts/Layout.astro"; // Add these variables to keep track of start points let firstDragStartPoint = { x: 0, y: 0 }; - // ... - // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { firstDragStartPoint.x = pointer.x; diff --git a/src/pages/guided-tracing/2.astro b/src/pages/guided-tracing/2.astro index ba41ed4..056864d 100644 --- a/src/pages/guided-tracing/2.astro +++ b/src/pages/guided-tracing/2.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -235,6 +236,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 @@ -259,6 +261,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 @@ -274,7 +278,7 @@ import Layout from "../../layouts/Layout.astro"; const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/3.astro b/src/pages/guided-tracing/3.astro index fe6d649..f553616 100644 --- a/src/pages/guided-tracing/3.astro +++ b/src/pages/guided-tracing/3.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -235,6 +236,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 @@ -259,6 +261,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 @@ -271,10 +275,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 number : 3', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/4.astro b/src/pages/guided-tracing/4.astro index 57cbe4e..7e3c838 100644 --- a/src/pages/guided-tracing/4.astro +++ b/src/pages/guided-tracing/4.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"; @@ -238,6 +239,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 @@ -262,6 +264,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 @@ -274,10 +278,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 number : 4', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/5.astro b/src/pages/guided-tracing/5.astro index 1f1cd90..5524403 100644 --- a/src/pages/guided-tracing/5.astro +++ b/src/pages/guided-tracing/5.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"; @@ -239,6 +240,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 @@ -263,6 +265,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 @@ -275,10 +279,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 number : 5', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/6.astro b/src/pages/guided-tracing/6.astro index d22f719..26305d0 100644 --- a/src/pages/guided-tracing/6.astro +++ b/src/pages/guided-tracing/6.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -236,6 +237,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 @@ -260,6 +262,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 @@ -272,10 +276,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 number : 6', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/7.astro b/src/pages/guided-tracing/7.astro index c37d842..eea3b6d 100644 --- a/src/pages/guided-tracing/7.astro +++ b/src/pages/guided-tracing/7.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -236,6 +237,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 @@ -260,6 +262,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 @@ -271,10 +275,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 number : 7', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/8.astro b/src/pages/guided-tracing/8.astro index 0002a71..6b20f07 100644 --- a/src/pages/guided-tracing/8.astro +++ b/src/pages/guided-tracing/8.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -235,6 +236,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 @@ -259,6 +261,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 @@ -271,10 +275,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 number : 8', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/9.astro b/src/pages/guided-tracing/9.astro index 2ecf9fb..5e0da95 100644 --- a/src/pages/guided-tracing/9.astro +++ b/src/pages/guided-tracing/9.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -236,6 +237,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 @@ -261,6 +263,8 @@ import Layout from "../../layouts/Layout.astro"; demoButton.setInteractive().on('pointerdown', () => { graphics.setVisible(false); + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button hideButton.setVisible(true); // Show the "Hide" button @@ -272,10 +276,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 number : 9', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/A.astro b/src/pages/guided-tracing/A.astro index 195c202..438ae4a 100644 --- a/src/pages/guided-tracing/A.astro +++ b/src/pages/guided-tracing/A.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"; @@ -228,6 +229,7 @@ import Layout from "../../layouts/Layout.astro"; repeat: -1 // Repeat indefinitely }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -252,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 @@ -264,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 : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/B.astro b/src/pages/guided-tracing/B.astro index c8ac040..446eb5e 100644 --- a/src/pages/guided-tracing/B.astro +++ b/src/pages/guided-tracing/B.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"; @@ -233,6 +234,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 @@ -257,6 +259,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 @@ -269,10 +273,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 : B', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').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: diff --git a/src/pages/guided-tracing/C.astro b/src/pages/guided-tracing/C.astro index 36f9f7f..d8f8490 100644 --- a/src/pages/guided-tracing/C.astro +++ b/src/pages/guided-tracing/C.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -229,6 +230,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 @@ -253,6 +255,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 @@ -265,10 +269,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 : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').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: @@ -296,8 +300,6 @@ import Layout from "../../layouts/Layout.astro"; // Add these variables to keep track of start points let firstDragStartPoint = { x: 0, y: 0 }; - // ... - // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { firstDragStartPoint.x = pointer.x; diff --git a/src/pages/guided-tracing/D.astro b/src/pages/guided-tracing/D.astro index 311bde9..42aca3c 100644 --- a/src/pages/guided-tracing/D.astro +++ b/src/pages/guided-tracing/D.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"; @@ -232,6 +233,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 @@ -256,6 +258,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 @@ -268,10 +272,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 : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').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: diff --git a/src/pages/guided-tracing/E.astro b/src/pages/guided-tracing/E.astro index a2dbbc5..8b253d5 100644 --- a/src/pages/guided-tracing/E.astro +++ b/src/pages/guided-tracing/E.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer, fourthLayer; 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,10 +271,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 : E', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/F.astro b/src/pages/guided-tracing/F.astro index a93d76d..c7225df 100644 --- a/src/pages/guided-tracing/F.astro +++ b/src/pages/guided-tracing/F.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"; @@ -232,6 +233,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 @@ -256,6 +258,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 @@ -268,10 +272,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 : F', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/G.astro b/src/pages/guided-tracing/G.astro index 47481fe..1a749d1 100644 --- a/src/pages/guided-tracing/G.astro +++ b/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 diff --git a/src/pages/guided-tracing/H.astro b/src/pages/guided-tracing/H.astro index 985e779..27b6f9d 100644 --- a/src/pages/guided-tracing/H.astro +++ b/src/pages/guided-tracing/H.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"; @@ -233,6 +234,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 @@ -257,6 +259,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 @@ -269,10 +273,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 : H', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedHScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedHScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/I.astro b/src/pages/guided-tracing/I.astro index ec088a8..be49a67 100644 --- a/src/pages/guided-tracing/I.astro +++ b/src/pages/guided-tracing/I.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"; @@ -233,6 +234,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 @@ -257,6 +259,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 @@ -269,10 +273,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 : I', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedIScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedIScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/J.astro b/src/pages/guided-tracing/J.astro index 113032b..8aec6be 100644 --- a/src/pages/guided-tracing/J.astro +++ b/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: diff --git a/src/pages/guided-tracing/K.astro b/src/pages/guided-tracing/K.astro index ee937ee..ad3a6f6 100644 --- a/src/pages/guided-tracing/K.astro +++ b/src/pages/guided-tracing/K.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"; @@ -233,6 +234,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 @@ -257,6 +259,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 @@ -269,10 +273,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 : K', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: @@ -320,7 +324,6 @@ import Layout from "../../layouts/Layout.astro"; let secondDragStartPoint = { x: 0, y: 0 }; let thirdDragStartPoint = { x: 0, y: 0 }; - // ... // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { diff --git a/src/pages/guided-tracing/L.astro b/src/pages/guided-tracing/L.astro index e1d32b6..b234911 100644 --- a/src/pages/guided-tracing/L.astro +++ b/src/pages/guided-tracing/L.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"; @@ -230,6 +231,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 +256,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 +270,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 : L', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').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: diff --git a/src/pages/guided-tracing/M.astro b/src/pages/guided-tracing/M.astro index 0d7f059..9a0833d 100644 --- a/src/pages/guided-tracing/M.astro +++ b/src/pages/guided-tracing/M.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer, fourthLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -232,6 +233,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 @@ -256,6 +258,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 @@ -268,10 +272,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 : M', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').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: diff --git a/src/pages/guided-tracing/N.astro b/src/pages/guided-tracing/N.astro index e9f1ace..081e290 100644 --- a/src/pages/guided-tracing/N.astro +++ b/src/pages/guided-tracing/N.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"; @@ -234,6 +235,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 @@ -258,6 +260,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 @@ -270,10 +274,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 : N', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedNScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedNScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/O.astro b/src/pages/guided-tracing/O.astro index b54d331..f0a4025 100644 --- a/src/pages/guided-tracing/O.astro +++ b/src/pages/guided-tracing/O.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"; @@ -230,6 +231,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 +256,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 +270,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 : O', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').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: @@ -297,7 +301,6 @@ import Layout from "../../layouts/Layout.astro"; // Add these variables to keep track of start points let firstDragStartPoint = { x: 0, y: 0 }; - // ... // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { diff --git a/src/pages/guided-tracing/P.astro b/src/pages/guided-tracing/P.astro index 1721f5e..90f438e 100644 --- a/src/pages/guided-tracing/P.astro +++ b/src/pages/guided-tracing/P.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"; @@ -232,6 +233,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 @@ -256,6 +258,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 @@ -268,10 +272,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 : P', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').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: diff --git a/src/pages/guided-tracing/Q.astro b/src/pages/guided-tracing/Q.astro index b307a53..26b031f 100644 --- a/src/pages/guided-tracing/Q.astro +++ b/src/pages/guided-tracing/Q.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"; @@ -232,6 +233,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 @@ -256,6 +258,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 @@ -268,10 +272,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 : Q', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2, customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2, customHeight / 2 + animatedQHeight, 'animatedQ').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: diff --git a/src/pages/guided-tracing/R.astro b/src/pages/guided-tracing/R.astro index d3bf78c..962ce93 100644 --- a/src/pages/guided-tracing/R.astro +++ b/src/pages/guided-tracing/R.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"; @@ -236,6 +237,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 @@ -260,6 +262,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 @@ -272,10 +276,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 : R', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').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: diff --git a/src/pages/guided-tracing/S.astro b/src/pages/guided-tracing/S.astro index 724cdcc..f1daee6 100644 --- a/src/pages/guided-tracing/S.astro +++ b/src/pages/guided-tracing/S.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"; @@ -230,6 +231,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 +256,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 +270,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 : S', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').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: diff --git a/src/pages/guided-tracing/T.astro b/src/pages/guided-tracing/T.astro index 322d5c4..3de831a 100644 --- a/src/pages/guided-tracing/T.astro +++ b/src/pages/guided-tracing/T.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"; @@ -228,8 +229,9 @@ import Layout from "../../layouts/Layout.astro"; blur: 5, // Shadow blur fill: true // Apply shadow to fill (background color) } - }); + }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -254,6 +256,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 +270,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 : T', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').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: @@ -307,8 +311,6 @@ 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; diff --git a/src/pages/guided-tracing/U.astro b/src/pages/guided-tracing/U.astro index 1d577c0..fe3c670 100644 --- a/src/pages/guided-tracing/U.astro +++ b/src/pages/guided-tracing/U.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"; @@ -229,6 +230,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 @@ -253,6 +255,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 @@ -265,10 +269,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 : U', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').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: diff --git a/src/pages/guided-tracing/V.astro b/src/pages/guided-tracing/V.astro index bdc2287..e778f19 100644 --- a/src/pages/guided-tracing/V.astro +++ b/src/pages/guided-tracing/V.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,10 +271,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 : V', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').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: diff --git a/src/pages/guided-tracing/W.astro b/src/pages/guided-tracing/W.astro index e89c18c..dfc07ca 100644 --- a/src/pages/guided-tracing/W.astro +++ b/src/pages/guided-tracing/W.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer, fourthLayer; 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,10 +271,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 : W', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').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: diff --git a/src/pages/guided-tracing/X.astro b/src/pages/guided-tracing/X.astro index 9acde65..788dc4e 100644 --- a/src/pages/guided-tracing/X.astro +++ b/src/pages/guided-tracing/X.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,10 +271,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 : X', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').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: diff --git a/src/pages/guided-tracing/Y.astro b/src/pages/guided-tracing/Y.astro index 98cef52..c230547 100644 --- a/src/pages/guided-tracing/Y.astro +++ b/src/pages/guided-tracing/Y.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"; @@ -233,6 +234,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 @@ -257,6 +259,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 @@ -269,10 +273,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 : Y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/Z.astro b/src/pages/guided-tracing/Z.astro index 609bde1..584313e 100644 --- a/src/pages/guided-tracing/Z.astro +++ b/src/pages/guided-tracing/Z.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"; @@ -232,6 +233,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 @@ -256,6 +258,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 @@ -268,10 +272,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 : Z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/a.astro b/src/pages/guided-tracing/a.astro index ecdd881..2ebe7ea 100644 --- a/src/pages/guided-tracing/a.astro +++ b/src/pages/guided-tracing/a.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -259,6 +260,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 @@ -271,10 +274,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 : a', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').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: diff --git a/src/pages/guided-tracing/b.astro b/src/pages/guided-tracing/b.astro index db8081b..03aff49 100644 --- a/src/pages/guided-tracing/b.astro +++ b/src/pages/guided-tracing/b.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"; @@ -234,6 +235,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 @@ -258,6 +260,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 @@ -270,10 +274,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 : b', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').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: @@ -310,7 +314,6 @@ 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) => { diff --git a/src/pages/guided-tracing/c.astro b/src/pages/guided-tracing/c.astro index 23ccb9d..e718fa7 100644 --- a/src/pages/guided-tracing/c.astro +++ b/src/pages/guided-tracing/c.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"; @@ -234,6 +235,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 @@ -258,6 +260,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 @@ -270,10 +274,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 : c', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').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: diff --git a/src/pages/guided-tracing/d.astro b/src/pages/guided-tracing/d.astro index 4a80928..b07f97e 100644 --- a/src/pages/guided-tracing/d.astro +++ b/src/pages/guided-tracing/d.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -236,6 +237,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 @@ -260,6 +262,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 @@ -272,10 +276,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 : d', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: @@ -312,8 +316,6 @@ 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; @@ -335,7 +337,6 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); -`` // Repeat the above code for secondLayer and thirdLayer // Add this code for secondLayer diff --git a/src/pages/guided-tracing/e.astro b/src/pages/guided-tracing/e.astro index bf7636a..946aa02 100644 --- a/src/pages/guided-tracing/e.astro +++ b/src/pages/guided-tracing/e.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"; @@ -236,6 +237,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 @@ -260,6 +262,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 @@ -272,10 +276,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 : e', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').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: diff --git a/src/pages/guided-tracing/f.astro b/src/pages/guided-tracing/f.astro index 3fe917a..4ac0a1a 100644 --- a/src/pages/guided-tracing/f.astro +++ b/src/pages/guided-tracing/f.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"; @@ -234,6 +235,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 @@ -258,6 +260,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 @@ -270,10 +274,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 : f', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').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: diff --git a/src/pages/guided-tracing/g.astro b/src/pages/guided-tracing/g.astro index d9f6df0..faf62f5 100644 --- a/src/pages/guided-tracing/g.astro +++ b/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"; @@ -236,6 +237,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 @@ -260,6 +262,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 @@ -272,10 +276,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 : 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: @@ -312,7 +316,6 @@ 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) => { @@ -335,8 +338,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); -`` - // Repeat the above code for secondLayer and thirdLayer + // Repeat the above code for secondLayer and thirdLayer // Add this code for secondLayer secondLayer.on('dragstart', (pointer) => { diff --git a/src/pages/guided-tracing/h.astro b/src/pages/guided-tracing/h.astro index 9ef1a02..4ee899c 100644 --- a/src/pages/guided-tracing/h.astro +++ b/src/pages/guided-tracing/h.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"; @@ -235,6 +236,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 @@ -259,6 +261,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 @@ -271,10 +275,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 : h', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').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: diff --git a/src/pages/guided-tracing/i.astro b/src/pages/guided-tracing/i.astro index be51687..b0aee7e 100644 --- a/src/pages/guided-tracing/i.astro +++ b/src/pages/guided-tracing/i.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"; @@ -236,6 +237,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 @@ -260,6 +262,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 @@ -272,10 +276,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 : i', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').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: diff --git a/src/pages/guided-tracing/j.astro b/src/pages/guided-tracing/j.astro index e89e672..961295b 100644 --- a/src/pages/guided-tracing/j.astro +++ b/src/pages/guided-tracing/j.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"; @@ -235,6 +236,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 @@ -259,6 +261,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 @@ -271,10 +275,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: diff --git a/src/pages/guided-tracing/k.astro b/src/pages/guided-tracing/k.astro index ed28881..ff1a604 100644 --- a/src/pages/guided-tracing/k.astro +++ b/src/pages/guided-tracing/k.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"; @@ -236,6 +237,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 @@ -260,6 +262,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 @@ -271,10 +275,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 : k', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/l.astro b/src/pages/guided-tracing/l.astro index 117dd9c..47838f4 100644 --- a/src/pages/guided-tracing/l.astro +++ b/src/pages/guided-tracing/l.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"; @@ -233,6 +234,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 @@ -257,6 +259,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 @@ -269,10 +273,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 : l', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').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: diff --git a/src/pages/guided-tracing/m.astro b/src/pages/guided-tracing/m.astro index 3606399..6b88f1d 100644 --- a/src/pages/guided-tracing/m.astro +++ b/src/pages/guided-tracing/m.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"; @@ -234,6 +235,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 @@ -258,6 +260,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 @@ -269,10 +273,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 : m', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedMScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedMScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/n.astro b/src/pages/guided-tracing/n.astro index 4ca4a89..0459351 100644 --- a/src/pages/guided-tracing/n.astro +++ b/src/pages/guided-tracing/n.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"; @@ -235,6 +236,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 @@ -259,6 +261,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 @@ -271,10 +275,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 : n', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').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: diff --git a/src/pages/guided-tracing/o.astro b/src/pages/guided-tracing/o.astro index d7657e5..85278fd 100644 --- a/src/pages/guided-tracing/o.astro +++ b/src/pages/guided-tracing/o.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -232,6 +233,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 @@ -256,6 +258,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 @@ -268,10 +272,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 : o', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').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: diff --git a/src/pages/guided-tracing/p.astro b/src/pages/guided-tracing/p.astro index dfa3d3b..757bf36 100644 --- a/src/pages/guided-tracing/p.astro +++ b/src/pages/guided-tracing/p.astro @@ -35,8 +35,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"; @@ -232,6 +233,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 @@ -256,6 +258,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 @@ -268,10 +272,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 : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').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: diff --git a/src/pages/guided-tracing/q.astro b/src/pages/guided-tracing/q.astro index 964f602..cd22992 100644 --- a/src/pages/guided-tracing/q.astro +++ b/src/pages/guided-tracing/q.astro @@ -35,8 +35,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"; @@ -234,6 +235,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 @@ -258,6 +260,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 diff --git a/src/pages/guided-tracing/r.astro b/src/pages/guided-tracing/r.astro index 053f5e3..d462f72 100644 --- a/src/pages/guided-tracing/r.astro +++ b/src/pages/guided-tracing/r.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"; @@ -236,6 +237,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 @@ -260,6 +262,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 @@ -272,10 +276,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 : r', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').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: diff --git a/src/pages/guided-tracing/s.astro b/src/pages/guided-tracing/s.astro index c543906..b0ff418 100644 --- a/src/pages/guided-tracing/s.astro +++ b/src/pages/guided-tracing/s.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"; @@ -232,6 +233,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 @@ -256,6 +258,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 @@ -268,10 +272,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 : s', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').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: diff --git a/src/pages/guided-tracing/t.astro b/src/pages/guided-tracing/t.astro index 40bd658..7e37bd0 100644 --- a/src/pages/guided-tracing/t.astro +++ b/src/pages/guided-tracing/t.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"; @@ -236,6 +237,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 @@ -260,6 +262,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 @@ -272,10 +276,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 : t', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').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: @@ -312,7 +316,6 @@ 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) => { diff --git a/src/pages/guided-tracing/u.astro b/src/pages/guided-tracing/u.astro index e10499e..8a44b22 100644 --- a/src/pages/guided-tracing/u.astro +++ b/src/pages/guided-tracing/u.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"; @@ -112,7 +113,6 @@ import Layout from "../../layouts/Layout.astro"; this.load.image('backgroundImage', '/assets/bg6.png'); this.load.image('cloud', '/assets/cloud.png'); this.load.image('canvas', '/assets/canvas4.png'); - this.load.image('sun', '/assets/sun.png'); this.load.image('bgMobile', '/assets/bgMobile.png'); this.load.image('canvasStand', '/assets/stand2.png'); @@ -219,7 +219,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', @@ -236,6 +235,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 @@ -260,6 +260,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 @@ -272,10 +274,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 : u', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').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: diff --git a/src/pages/guided-tracing/v.astro b/src/pages/guided-tracing/v.astro index ef1d490..efad6e1 100644 --- a/src/pages/guided-tracing/v.astro +++ b/src/pages/guided-tracing/v.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"; @@ -235,6 +236,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 @@ -259,6 +261,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 @@ -271,10 +275,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 : v', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').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: diff --git a/src/pages/guided-tracing/w.astro b/src/pages/guided-tracing/w.astro index 37de804..ccc216f 100644 --- a/src/pages/guided-tracing/w.astro +++ b/src/pages/guided-tracing/w.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer, fourthLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -235,6 +236,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 @@ -259,6 +261,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 @@ -271,10 +275,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 : w', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').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: diff --git a/src/pages/guided-tracing/x.astro b/src/pages/guided-tracing/x.astro index 150764a..3eed3bd 100644 --- a/src/pages/guided-tracing/x.astro +++ b/src/pages/guided-tracing/x.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"; @@ -236,6 +237,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 @@ -260,6 +262,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 @@ -272,10 +276,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 : x', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedXideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedXideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/y.astro b/src/pages/guided-tracing/y.astro index bb99f0a..c778d56 100644 --- a/src/pages/guided-tracing/y.astro +++ b/src/pages/guided-tracing/y.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"; @@ -235,6 +236,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 @@ -259,6 +261,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 @@ -271,10 +275,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 : y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/z.astro b/src/pages/guided-tracing/z.astro index ba6fa85..b5f26a3 100644 --- a/src/pages/guided-tracing/z.astro +++ b/src/pages/guided-tracing/z.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"; @@ -238,6 +239,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 @@ -262,6 +264,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 @@ -273,10 +277,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 : z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: