kar
/
phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

demo reset

pull/2/head
dev sp 2023-12-19 12:59:24 +00:00
parent 23237ac9b0
commit 9edeb97f67
63 changed files with 399 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/drawing/index.astro
View File

@ -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);

12
src/pages/guided-tracing/0.astro
View File

@ -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;

10
src/pages/guided-tracing/1.astro
View File

@ -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;

6
src/pages/guided-tracing/2.astro
View File

@ -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:

8
src/pages/guided-tracing/3.astro
View File

@ -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:

8
src/pages/guided-tracing/4.astro
View File

@ -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:

8
src/pages/guided-tracing/5.astro
View File

@ -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:

8
src/pages/guided-tracing/6.astro
View File

@ -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:

8
src/pages/guided-tracing/7.astro
View File

@ -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:

8
src/pages/guided-tracing/8.astro
View File

@ -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:

8
src/pages/guided-tracing/9.astro
View File

@ -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:

8
src/pages/guided-tracing/A.astro
View File

@ -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:

8
src/pages/guided-tracing/B.astro
View File

@ -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:

10
src/pages/guided-tracing/C.astro
View File

@ -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;

10
src/pages/guided-tracing/D.astro
View File

@ -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:

8
src/pages/guided-tracing/E.astro
View File

@ -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:

8
src/pages/guided-tracing/F.astro
View File

@ -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:

19
src/pages/guided-tracing/G.astro
View File

@ -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

8
src/pages/guided-tracing/H.astro
View File

@ -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:

8
src/pages/guided-tracing/I.astro
View File

@ -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:

10
src/pages/guided-tracing/J.astro
View File

@ -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:

9
src/pages/guided-tracing/K.astro
View File

@ -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) => {

10
src/pages/guided-tracing/L.astro
View File

@ -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:

8
src/pages/guided-tracing/M.astro
View File

@ -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:

8
src/pages/guided-tracing/N.astro
View File

@ -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:

9
src/pages/guided-tracing/O.astro
View File

@ -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) => {

10
src/pages/guided-tracing/P.astro
View File

@ -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:

10
src/pages/guided-tracing/Q.astro
View File

@ -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:

8
src/pages/guided-tracing/R.astro
View File

@ -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:

8
src/pages/guided-tracing/S.astro
View File

@ -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:

14
src/pages/guided-tracing/T.astro
View File

@ -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;

8
src/pages/guided-tracing/U.astro
View File

@ -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:

10
src/pages/guided-tracing/V.astro
View File

@ -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:

8
src/pages/guided-tracing/W.astro
View File

@ -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:

10
src/pages/guided-tracing/X.astro
View File

@ -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:

8
src/pages/guided-tracing/Y.astro
View File

@ -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:

8
src/pages/guided-tracing/Z.astro
View File

@ -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:

7
src/pages/guided-tracing/a.astro
View File

@ -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:

11
src/pages/guided-tracing/b.astro
View File

@ -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) => {

8
src/pages/guided-tracing/c.astro
View File

@ -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:

11
src/pages/guided-tracing/d.astro
View File

@ -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

10
src/pages/guided-tracing/e.astro
View File

@ -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:

10
src/pages/guided-tracing/f.astro
View File

@ -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:

14
src/pages/guided-tracing/g.astro
View File

@ -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) => {

10
src/pages/guided-tracing/h.astro
View File

@ -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:

10
src/pages/guided-tracing/i.astro
View File

@ -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:

10
src/pages/guided-tracing/j.astro
View File

@ -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:

8
src/pages/guided-tracing/k.astro
View File

@ -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:

8
src/pages/guided-tracing/l.astro
View File

@ -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:

8
src/pages/guided-tracing/m.astro
View File

@ -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:

10
src/pages/guided-tracing/n.astro
View File

@ -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:

8
src/pages/guided-tracing/o.astro
View File

@ -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:

10
src/pages/guided-tracing/p.astro
View File

@ -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:

6
src/pages/guided-tracing/q.astro
View File

@ -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

10
src/pages/guided-tracing/r.astro
View File

@ -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:

8
src/pages/guided-tracing/s.astro
View File

@ -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:

11
src/pages/guided-tracing/t.astro
View File

@ -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) => {

12
src/pages/guided-tracing/u.astro
View File

@ -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:

10
src/pages/guided-tracing/v.astro
View File

@ -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:

8
src/pages/guided-tracing/w.astro
View File

@ -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:

10
src/pages/guided-tracing/x.astro
View File

@ -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:

10
src/pages/guided-tracing/y.astro
View File

@ -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:

8
src/pages/guided-tracing/z.astro
View File

@ -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: