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

Add Start Button ANd change Help Button Possition

pull/5/head
Dev 1 2023-10-17 19:41:18 +05:30
parent e6ede94cd2
commit ae14d20615
67 changed files with 1171 additions and 413 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/pages/capital-letter/A.astro
View File

@ -39,6 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let isDrawing = false; let isDrawing = false;
// let x = 100; // let x = 100;
// // Use x // // Use x
@ -58,6 +59,11 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 70; sunHeight = 70;
animatedAHeight = 35; animatedAHeight = 35;
animatedAScale = 0.65; animatedAScale = 0.65;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -72,6 +78,11 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 100; sunHeight = 100;
animatedAHeight = 20; animatedAHeight = 20;
animatedAScale = 0.73; animatedAScale = 0.73;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedA', '/assets/animated-letter/capital_a.mp4'); this.load.video('animatedA', '/assets/animated-letter/capital_a.mp4');
@ -107,23 +118,18 @@ import Layout from "../../layouts/Layout.astro";
}, },
delay: 16, // Adjust the delay for the desired scrolling speed delay: 16, // Adjust the delay for the desired scrolling speed
}); });
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9); const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics() const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale); 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(); const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -159,7 +165,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -204,10 +210,10 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
@ -319,6 +325,28 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

53
src/pages/capital-letter/B.astro
View File

@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedBHeight = 32; animatedBHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.70;
animatedBHeight = 20; animatedBHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -121,10 +133,9 @@ import Layout from "../../layouts/Layout.astro";
yoyo: true, // Makes the animation play in reverse yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely repeat: -1 // Repeat indefinitely
}); });
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterB').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedB').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedB').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -136,7 +147,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -159,7 +170,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -187,7 +198,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -203,17 +214,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -223,7 +234,7 @@ import Layout from "../../layouts/Layout.astro";
secondLayer.setInteractive({ draggable: true }); secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false); secondLayer.setVisible(false);
thirdLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale); thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const thirdTextLayer = this.add.text(textX, textY, '3. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'}); const thirdTextLayer = this.add.text(textX, textY, '3. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'});
const audioTHreeAudio = this.sound.add('audioTwo'); const audioTHreeAudio = this.sound.add('audioTwo');
@ -311,7 +322,6 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y)
}); });
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
@ -325,8 +335,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.strokePath(); graphics.strokePath();
}); });
// Start Position 626 317 let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

68
src/pages/capital-letter/C.astro
View File

@ -45,14 +45,24 @@ import Layout from "../../layouts/Layout.astro";
cloudHeight = 340; cloudHeight = 340;
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterHeight = 90; letterHeight = 60;
letterScale = 1; letterScale = 0.85;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedVideoScale = 0.59;
animatedAHeight = 32; animatedAHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +75,17 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedVideoScale = 0.70;
animatedAHeight = 20; animatedAHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -81,6 +101,7 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png'); this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png'); this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png'); this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png'); this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png'); this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png'); this.load.image('canvasStand', '/assets/stand2.png');
@ -103,6 +124,9 @@ import Layout from "../../layouts/Layout.astro";
}); });
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9); const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size) const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds const duration = 3000; // Duration of the animation in milliseconds
@ -115,6 +139,17 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear', ease: 'Linear',
yoyo: true, // Makes the animation play in reverse yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
}); });
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
@ -130,7 +165,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -153,7 +188,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -181,7 +216,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -199,10 +234,10 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
@ -253,6 +288,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }

53
src/pages/capital-letter/D.astro
View File

@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedDHeight = 32; animatedDHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.70;
animatedDHeight = 20; animatedDHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -121,8 +133,8 @@ import Layout from "../../layouts/Layout.astro";
repeat: -1 // Repeat indefinitely repeat: -1 // Repeat indefinitely
}); });
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterD').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'letterD').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterD').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'letterD').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedD').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedD').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -134,7 +146,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -157,7 +169,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -185,7 +197,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -201,17 +213,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -249,9 +261,6 @@ import Layout from "../../layouts/Layout.astro";
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
} }
}); });
``
// Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer // Add this code for secondLayer
secondLayer.on('dragstart', (pointer) => { secondLayer.on('dragstart', (pointer) => {
secondDragStartPoint.x = pointer.x; secondDragStartPoint.x = pointer.x;
@ -276,7 +285,6 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y)
}); });
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
@ -289,6 +297,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

48
src/pages/capital-letter/E.astro
View File

@ -52,7 +52,12 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedAHeight = 32; animatedEHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,10 +70,15 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedAHeight = 20; animatedEHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedA', '/assets/animated-letter/a.mp4'); this.load.video('animatedE', '/assets/animated-letter/capital_e.mp4');
this.load.svg('letterE', '/assets/capital-letter/e.svg'); this.load.svg('letterE', '/assets/capital-letter/e.svg');
this.load.svg('layer1', '/assets/capital-letter/e_l1.svg'); this.load.svg('layer1', '/assets/capital-letter/e_l1.svg');
this.load.svg('layer2', '/assets/capital-letter/e_l2.svg'); this.load.svg('layer2', '/assets/capital-letter/e_l2.svg');
@ -124,7 +134,7 @@ import Layout from "../../layouts/Layout.astro";
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedE').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -135,7 +145,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -158,7 +168,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -186,7 +196,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -204,10 +214,10 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
@ -341,7 +351,6 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y)
}); });
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
@ -355,8 +364,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.strokePath(); graphics.strokePath();
}); });
// Start Position 626 317 let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

37
src/pages/capital-letter/F.astro
View File

@ -58,6 +58,11 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 70; sunHeight = 70;
animatedFHeight = 35; animatedFHeight = 35;
animatedFScale = 0.65; animatedFScale = 0.65;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -72,6 +77,11 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 100; sunHeight = 100;
animatedFHeight = 20; animatedFHeight = 20;
animatedFScale = 0.73; animatedFScale = 0.73;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedF', '/assets/animated-letter/capital_f.mp4'); this.load.video('animatedF', '/assets/animated-letter/capital_f.mp4');
@ -136,7 +146,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -159,7 +169,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -204,10 +214,10 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
@ -316,6 +326,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

52
src/pages/capital-letter/G.astro
View File

@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.60;
animatedGHeight = 32; animatedGHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.70;
animatedGHeight = 20; animatedGHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -90,7 +102,7 @@ import Layout from "../../layouts/Layout.astro";
function create() { function create() {
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : G", { font: '700 40px quicksand', fill: '#05b3a4', });
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
@ -121,8 +133,8 @@ import Layout from "../../layouts/Layout.astro";
repeat: -1 // Repeat indefinitely repeat: -1 // Repeat indefinitely
}); });
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterG').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterG').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterG').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterG').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedG').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedG').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -134,7 +146,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -157,7 +169,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -185,7 +197,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -201,9 +213,9 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -211,7 +223,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -261,7 +273,7 @@ import Layout from "../../layouts/Layout.astro";
secondLayer.on('drag', (pointer) => { secondLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y); const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
if (distance >=100) { if (distance >=50) {
secondTextLayer.setVisible(false); secondTextLayer.setVisible(false);
secondLayer.setAlpha(1); secondLayer.setAlpha(1);
} else { } else {
@ -275,7 +287,6 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y)
}); });
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
@ -288,6 +299,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

57
src/pages/capital-letter/H.astro
View File

@ -50,13 +50,19 @@ import Layout from "../../layouts/Layout.astro";
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterHeight = 70; letterHeight = 70;
letterScale = 1; letterScale = 0.9;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedHScale = 0.65; animatedHHeight = 45;
animatedHScale = 0.6;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -70,10 +76,15 @@ import Layout from "../../layouts/Layout.astro";
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedHHeight = 20; animatedHHeight = 20;
animatedHScale = 0.73; animatedHScale = 0.70;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedH', '/assets/animated-letter/capital_H.mp4'); this.load.video('animatedH', '/assets/animated-letter/capital_h.mp4');
this.load.svg('letterH', '/assets/capital-letter/h.svg'); this.load.svg('letterH', '/assets/capital-letter/h.svg');
this.load.svg('layer1', '/assets/capital-letter/h_l1.svg'); this.load.svg('layer1', '/assets/capital-letter/h_l1.svg');
this.load.svg('layer2', '/assets/capital-letter/h_l2.svg'); this.load.svg('layer2', '/assets/capital-letter/h_l2.svg');
@ -123,8 +134,8 @@ import Layout from "../../layouts/Layout.astro";
repeat: -1 // Repeat indefinitely repeat: -1 // Repeat indefinitely
}); });
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterH').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'letterH').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterH').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'letterH').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedH').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedH').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -136,7 +147,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -159,7 +170,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -202,17 +213,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioOne'); const audioTwoAudio = this.sound.add('audioOne');
@ -222,7 +233,7 @@ import Layout from "../../layouts/Layout.astro";
secondLayer.setInteractive({ draggable: true }); secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false); secondLayer.setVisible(false);
thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale); thirdLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'}); const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
const audioThreeAudio = this.sound.add('audioTwo'); const audioThreeAudio = this.sound.add('audioTwo');
@ -319,6 +330,26 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

49
src/pages/capital-letter/I.astro
View File

@ -58,6 +58,11 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 70; sunHeight = 70;
animatedIHeight = 35; animatedIHeight = 35;
animatedIScale = 0.65; animatedIScale = 0.65;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -70,7 +75,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedIHeight = 20;
animatedIScale = 0.73; animatedIScale = 0.73;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedI', '/assets/animated-letter/capital_i.mp4'); this.load.video('animatedI', '/assets/animated-letter/capital_i.mp4');
@ -123,8 +134,8 @@ import Layout from "../../layouts/Layout.astro";
repeat: -1 // Repeat indefinitely repeat: -1 // Repeat indefinitely
}); });
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterI').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'letterI').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterI').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'letterI').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedI').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedI').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -136,7 +147,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -159,7 +170,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -202,17 +213,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -222,7 +233,7 @@ import Layout from "../../layouts/Layout.astro";
secondLayer.setInteractive({ draggable: true }); secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false); secondLayer.setVisible(false);
thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale); thirdLayer = this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'}); const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
const audioThreeAudio = this.sound.add('audioTwo'); const audioThreeAudio = this.sound.add('audioTwo');
@ -306,7 +317,6 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
// console.log("Start Position", pointer.x, pointer.y)
}); });
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
@ -319,6 +329,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

45
src/pages/capital-letter/J.astro
View File

@ -45,14 +45,20 @@ import Layout from "../../layouts/Layout.astro";
cloudHeight = 340; cloudHeight = 340;
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterHeight = 90; letterHeight = 65;
letterScale = 1; letterScale = 0.9;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedJHeight = 32; animatedJHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedJHeight = 20; animatedJHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -132,7 +144,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -155,7 +167,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -183,7 +195,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -201,10 +213,10 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Hook',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Hook',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
@ -254,6 +266,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }

38
src/pages/capital-letter/K.astro
View File

@ -58,6 +58,11 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 70; sunHeight = 70;
animatedKHeight = 35; animatedKHeight = 35;
animatedKScale = 0.65; animatedKScale = 0.65;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -72,6 +77,11 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 100; sunHeight = 100;
animatedKHeight = 20; animatedKHeight = 20;
animatedKScale = 0.73; animatedKScale = 0.73;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedK', '/assets/animated-letter/capital_k.mp4'); this.load.video('animatedK', '/assets/animated-letter/capital_k.mp4');
@ -137,7 +147,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -160,7 +170,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -205,10 +215,10 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
@ -307,7 +317,6 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
// console.log("Start Position", pointer.x, pointer.y)
}); });
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
@ -320,6 +329,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

50
src/pages/capital-letter/L.astro
View File

@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedLHeight = 32; animatedLHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedLHeight = 20; animatedLHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -121,8 +133,8 @@ import Layout from "../../layouts/Layout.astro";
repeat: -1 // Repeat indefinitely repeat: -1 // Repeat indefinitely
}); });
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterL').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterL').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterL').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterL').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedL').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedL').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -133,7 +145,7 @@ import Layout from "../../layouts/Layout.astro";
const mask = maskGraphics.createGeometryMask(); const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -156,7 +168,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -184,7 +196,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -200,17 +212,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -275,7 +287,6 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y)
}); });
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
@ -288,6 +299,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

57
src/pages/capital-letter/M.astro
View File

@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedMHeight = 32; animatedMHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedMHeight = 20; animatedMHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedM', '/assets/animated-letter/capital_m.mp4'); this.load.video('animatedM', '/assets/animated-letter/capital_m.mp4');
@ -121,8 +133,8 @@ import Layout from "../../layouts/Layout.astro";
repeat: -1 // Repeat indefinitely repeat: -1 // Repeat indefinitely
}); });
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterM').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterM').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterM').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterM').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedM').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedM').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -134,7 +146,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -157,7 +169,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -185,7 +197,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -201,17 +213,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioOne'); const audioTwoAudio = this.sound.add('audioOne');
@ -221,7 +233,7 @@ import Layout from "../../layouts/Layout.astro";
secondLayer.setInteractive({ draggable: true }); secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false); secondLayer.setVisible(false);
thirdLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale); thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'}); const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
const audioThreeAudio = this.sound.add('audioTwo'); const audioThreeAudio = this.sound.add('audioTwo');
@ -232,7 +244,7 @@ import Layout from "../../layouts/Layout.astro";
thirdLayer.setInteractive({ draggable: true }); thirdLayer.setInteractive({ draggable: true });
thirdLayer.setVisible(false); thirdLayer.setVisible(false);
fourthLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer4').setScale(letterScale); fourthLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer4').setScale(letterScale);
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const fourthTextLayer = this.add.text(textX, textY, '4. Slant', { font: '700 40px quicksand', fill: '#05b3a4'}); const fourthTextLayer = this.add.text(textX, textY, '4. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
const audioFourthAudio = this.sound.add('audioTwo'); const audioFourthAudio = this.sound.add('audioTwo');
@ -340,8 +352,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;
@ -353,9 +364,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
// Start Position 626 317 })
} }
function update() { function update() {

39
src/pages/capital-letter/N.astro
View File

@ -50,7 +50,7 @@ import Layout from "../../layouts/Layout.astro";
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterHeight = 70; letterHeight = 70;
letterScale = 1; letterScale = 0.95;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
@ -58,6 +58,11 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 70; sunHeight = 70;
animatedNHeight = 35; animatedNHeight = 35;
animatedNScale = 0.65; animatedNScale = 0.65;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -72,6 +77,11 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 100; sunHeight = 100;
animatedNHeight = 20; animatedNHeight = 20;
animatedNScale = 0.73; animatedNScale = 0.73;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedN', '/assets/animated-letter/capital_n.mp4'); this.load.video('animatedN', '/assets/animated-letter/capital_n.mp4');
@ -138,7 +148,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -161,7 +171,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -206,10 +216,10 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
@ -321,6 +331,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

49
src/pages/capital-letter/O.astro
View File

@ -45,14 +45,20 @@ import Layout from "../../layouts/Layout.astro";
cloudHeight = 340; cloudHeight = 340;
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterHeight = 90; letterHeight = 65;
letterScale = 1; letterScale = 0.92;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedOHeight = 32; animatedOHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedOHeight = 20; animatedOHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -132,7 +144,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -155,7 +167,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -183,7 +195,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -200,11 +212,11 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 12 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 35px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
@ -254,6 +266,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }

45
src/pages/capital-letter/P.astro
View File

@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedPHeight = 32; animatedPHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedPHeight = 20; animatedPHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -134,7 +146,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -157,7 +169,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -185,7 +197,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -203,10 +215,10 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
@ -249,7 +261,6 @@ import Layout from "../../layouts/Layout.astro";
firstLayer.setAlpha(0.5); 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 // Add this code for secondLayer
@ -276,8 +287,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;
@ -289,6 +299,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

50
src/pages/capital-letter/Q.astro
View File

@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedQHeight = 32; animatedQHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedQHeight = 20; animatedQHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -121,7 +133,7 @@ import Layout from "../../layouts/Layout.astro";
repeat: -1 // Repeat indefinitely repeat: -1 // Repeat indefinitely
}); });
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterQ').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterQ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterQ').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterQ').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedQ').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedQ').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
@ -134,7 +146,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -157,7 +169,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -185,7 +197,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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 + 40 , customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(0.73); const animatedLetter = this.add.video(customWidth / 2, customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -201,17 +213,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -276,8 +288,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;
@ -289,6 +300,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

53
src/pages/capital-letter/R.astro
View File

@ -50,14 +50,20 @@ import Layout from "../../layouts/Layout.astro";
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterHeight = 70; letterHeight = 70;
letterScale = 1; letterScale = 0.9;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedRHeight = 35; animatedRHeight = 35;
animatedRScale = 0.65; animatedRScale = 0.65;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -70,8 +76,14 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedRHeight = 20; animatedRHeight = 20;
animatedRScale = 0.73; animatedRScale = 0.73;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedR', '/assets/animated-letter/capital_r.mp4'); this.load.video('animatedR', '/assets/animated-letter/capital_r.mp4');
@ -125,8 +137,8 @@ import Layout from "../../layouts/Layout.astro";
repeat: -1 // Repeat indefinitely repeat: -1 // Repeat indefinitely
}); });
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2 + 10, customHeight / 2 + letterHeight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterR').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2 + 10, customHeight / 2 + letterHeight, 'letterR').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedR').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedR').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -138,7 +150,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -161,7 +173,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -189,7 +201,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(animatedRScale); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -204,17 +216,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2 + 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -224,7 +236,7 @@ import Layout from "../../layouts/Layout.astro";
secondLayer.setInteractive({ draggable: true }); secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false); secondLayer.setVisible(false);
thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale); thirdLayer = this.add.image(customWidth / 2 + 10, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'}); const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
const audioThreeAudio = this.sound.add('audioThree'); const audioThreeAudio = this.sound.add('audioThree');
@ -321,6 +333,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

49
src/pages/capital-letter/S.astro
View File

@ -45,14 +45,20 @@ import Layout from "../../layouts/Layout.astro";
cloudHeight = 340; cloudHeight = 340;
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterHeight = 90; letterHeight = 65;
letterScale = 1; letterScale = 0.85;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedSHeight = 32; animatedSHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedSHeight = 20; animatedSHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -132,7 +144,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -155,7 +167,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -183,7 +195,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -200,11 +212,11 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 12 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Snake',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Snake',{ font: '700 35px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
@ -254,6 +266,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }

55
src/pages/capital-letter/T.astro
View File

@ -45,14 +45,20 @@ import Layout from "../../layouts/Layout.astro";
cloudHeight = 340; cloudHeight = 340;
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterHeight = 58; letterHeight = 65;
letterScale = 0.85; letterScale = 0.85;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedTHeight = 32; animatedTHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedTHeight = 20; animatedTHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -120,8 +132,8 @@ import Layout from "../../layouts/Layout.astro";
repeat: -1 // Repeat indefinitely repeat: -1 // Repeat indefinitely
}); });
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterT').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterT').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterT').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterT').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedT').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedT').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -132,8 +144,7 @@ import Layout from "../../layouts/Layout.astro";
const mask = maskGraphics.createGeometryMask(); const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -156,7 +167,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -184,7 +195,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -200,17 +211,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -275,8 +286,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;
@ -288,6 +298,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

49
src/pages/capital-letter/U.astro
View File

@ -45,14 +45,20 @@ import Layout from "../../layouts/Layout.astro";
cloudHeight = 340; cloudHeight = 340;
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterHeight = 90; letterHeight = 65;
letterScale = 1; letterScale = 0.9;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.635;
animatedUHeight = 32; animatedUHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedUHeight = 20; animatedUHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -131,7 +143,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -154,7 +166,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -182,7 +194,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -199,11 +211,11 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 12 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down Curve Up',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down Curve Up',{ font: '700 35px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
@ -253,6 +265,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }

52
src/pages/capital-letter/V.astro
View File

@ -45,14 +45,20 @@ import Layout from "../../layouts/Layout.astro";
cloudHeight = 340; cloudHeight = 340;
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterHeight = 58; letterHeight = 70;
letterScale = 0.85; letterScale = 0.9;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedVHeight = 32; animatedVHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedVHeight = 20; animatedVHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -120,7 +132,7 @@ import Layout from "../../layouts/Layout.astro";
repeat: -1 // Repeat indefinitely repeat: -1 // Repeat indefinitely
}); });
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterV').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterV').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterV').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterV').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedV').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedV').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
@ -133,7 +145,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -156,7 +168,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -184,7 +196,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -200,9 +212,9 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -210,7 +222,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioOne'); const audioTwoAudio = this.sound.add('audioOne');
@ -275,8 +287,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;
@ -288,6 +299,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

57
src/pages/capital-letter/W.astro
View File

@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedWHeight = 32; animatedWHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedWHeight = 20; animatedWHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedW', '/assets/animated-letter/capital_w.mp4'); this.load.video('animatedW', '/assets/animated-letter/capital_w.mp4');
@ -120,8 +132,8 @@ import Layout from "../../layouts/Layout.astro";
repeat: -1 // Repeat indefinitely repeat: -1 // Repeat indefinitely
}); });
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterW').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterW').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterW').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterW').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedW').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedW').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -133,7 +145,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -156,7 +168,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -184,7 +196,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -200,17 +212,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioOne'); const audioTwoAudio = this.sound.add('audioOne');
@ -220,7 +232,7 @@ import Layout from "../../layouts/Layout.astro";
secondLayer.setInteractive({ draggable: true }); secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false); secondLayer.setVisible(false);
thirdLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale); thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'}); const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
const audioThreeAudio = this.sound.add('audioOne'); const audioThreeAudio = this.sound.add('audioOne');
@ -231,7 +243,7 @@ import Layout from "../../layouts/Layout.astro";
thirdLayer.setInteractive({ draggable: true }); thirdLayer.setInteractive({ draggable: true });
thirdLayer.setVisible(false); thirdLayer.setVisible(false);
fourthLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer4').setScale(letterScale); fourthLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer4').setScale(letterScale);
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const fourthTextLayer = this.add.text(textX, textY, '4. Slant', { font: '700 40px quicksand', fill: '#05b3a4'}); const fourthTextLayer = this.add.text(textX, textY, '4. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
const audioFourthAudio = this.sound.add('audioOne'); const audioFourthAudio = this.sound.add('audioOne');
@ -339,8 +351,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;
@ -352,8 +363,26 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
// Start Position 626 317
} }

50
src/pages/capital-letter/X.astro
View File

@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedXHeight = 32; animatedXHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedXHeight = 20; animatedXHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -120,7 +132,7 @@ import Layout from "../../layouts/Layout.astro";
repeat: -1 // Repeat indefinitely repeat: -1 // Repeat indefinitely
}); });
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterX').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterX').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterX').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterX').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedX').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedX').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
@ -133,7 +145,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -156,7 +168,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -184,7 +196,7 @@ import Layout from "../../layouts/Layout.astro";
const baseFontSize = 20; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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 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(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -200,17 +212,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Cross',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Cross',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -275,8 +287,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;
@ -288,6 +299,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

47
src/pages/capital-letter/Y.astro
View File

@ -58,6 +58,11 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 70; sunHeight = 70;
animatedYHeight = 35; animatedYHeight = 35;
animatedYScale = 0.65; animatedYScale = 0.65;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -72,6 +77,11 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 100; sunHeight = 100;
animatedYHeight = 20; animatedYHeight = 20;
animatedYScale = 0.73; animatedYScale = 0.73;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedY', '/assets/animated-letter/capital_y.mp4'); this.load.video('animatedY', '/assets/animated-letter/capital_y.mp4');
@ -124,8 +134,8 @@ import Layout from "../../layouts/Layout.astro";
repeat: -1 // Repeat indefinitely repeat: -1 // Repeat indefinitely
}); });
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterY').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'letterY').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterY').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'letterY').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedY').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedY').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -137,7 +147,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -160,7 +170,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -203,17 +213,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -223,7 +233,7 @@ import Layout from "../../layouts/Layout.astro";
secondLayer.setInteractive({ draggable: true }); secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false); secondLayer.setVisible(false);
thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale); thirdLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const thirdTextLayer = this.add.text(textX, textY, '3. Down', { font: '700 40px quicksand', fill: '#05b3a4'}); const thirdTextLayer = this.add.text(textX, textY, '3. Down', { font: '700 40px quicksand', fill: '#05b3a4'});
const audioThreeAudio = this.sound.add('audioThree'); const audioThreeAudio = this.sound.add('audioThree');
@ -320,6 +330,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

40
src/pages/capital-letter/Z.astro
View File

@ -50,7 +50,7 @@ import Layout from "../../layouts/Layout.astro";
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterHeight = 70; letterHeight = 70;
letterScale = 1; letterScale = 0.92;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
@ -58,6 +58,11 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 70; sunHeight = 70;
animatedZHeight = 35; animatedZHeight = 35;
animatedZScale = 0.65; animatedZScale = 0.65;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -72,6 +77,11 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 100; sunHeight = 100;
animatedZHeight = 20; animatedZHeight = 20;
animatedZScale = 0.73; animatedZScale = 0.73;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedZ', '/assets/animated-letter/capital_z.mp4'); this.load.video('animatedZ', '/assets/animated-letter/capital_z.mp4');
@ -136,7 +146,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -159,7 +169,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -204,10 +214,10 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true }); firstLayer.setInteractive({ draggable: true });
@ -318,7 +328,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

4
src/pages/numeric/0.astro
View File

@ -135,7 +135,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -158,7 +158,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',

4
src/pages/numeric/1.astro
View File

@ -138,7 +138,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -161,7 +161,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',

9
src/pages/numeric/2.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Roll Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Roll Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -282,8 +282,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/numeric/3.astro
View File

@ -139,7 +139,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -162,7 +162,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -208,7 +208,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

6
src/pages/numeric/4.astro
View File

@ -142,7 +142,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -165,7 +165,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -210,7 +210,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();

6
src/pages/numeric/5.astro
View File

@ -143,7 +143,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -166,7 +166,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -211,7 +211,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();

9
src/pages/numeric/6.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Curve Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Curve Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -282,8 +282,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/numeric/7.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -282,8 +282,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/numeric/8.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Snake',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Hook Snake',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -282,8 +282,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/numeric/9.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Curve Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Curve Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -282,8 +282,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/small-letter/a.astro
View File

@ -138,7 +138,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -161,7 +161,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -207,7 +207,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -279,8 +279,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/small-letter/b.astro
View File

@ -138,7 +138,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -161,7 +161,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -207,7 +207,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -279,8 +279,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

6
src/pages/small-letter/c.astro
View File

@ -136,7 +136,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -159,7 +159,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -205,7 +205,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();

9
src/pages/small-letter/d.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/small-letter/e.astro
View File

@ -138,7 +138,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -161,7 +161,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -207,7 +207,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -279,8 +279,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/small-letter/f.astro
View File

@ -138,7 +138,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -161,7 +161,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -207,7 +207,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Hook Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -279,8 +279,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/small-letter/g.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/small-letter/h.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 + 25, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 25, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/small-letter/i.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterIeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterIeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/small-letter/j.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterJeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterJeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Down Tail',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Down Tail',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

6
src/pages/small-letter/k.astro
View File

@ -143,7 +143,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -166,7 +166,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -210,7 +210,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();

6
src/pages/small-letter/m.astro
View File

@ -142,7 +142,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -165,7 +165,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();

9
src/pages/small-letter/n.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 + 45, customHeight / 2 + letterNeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 45, customHeight / 2 + letterNeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

6
src/pages/small-letter/o.astro
View File

@ -136,7 +136,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -159,7 +159,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -205,7 +205,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();

9
src/pages/small-letter/p.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterPeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterPeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Down Tail',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Down Tail',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/small-letter/q.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/small-letter/r.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterReight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterReight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

4
src/pages/small-letter/s.astro
View File

@ -137,7 +137,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -160,7 +160,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',

9
src/pages/small-letter/t.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterReight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterReight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

7
src/pages/small-letter/u.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/small-letter/v.astro
View File

@ -139,7 +139,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -162,7 +162,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -208,7 +208,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterVHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterVHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -280,8 +280,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/small-letter/w.astro
View File

@ -139,7 +139,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -162,7 +162,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -208,7 +208,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -345,8 +345,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/small-letter/x.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterXHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterXHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

9
src/pages/small-letter/y.astro
View File

@ -140,7 +140,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterYHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterYHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

6
src/pages/small-letter/z.astro
View File

@ -142,7 +142,7 @@ import Layout from "../../layouts/Layout.astro";
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -165,7 +165,7 @@ import Layout from "../../layouts/Layout.astro";
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
}); });
hideButton.setVisible(false); hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand', font: '900 24px quicksand',
fill: '#05b3a4', fill: '#05b3a4',
backgroundColor: '#7c4c23', backgroundColor: '#7c4c23',
@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();

2
src/pages/tracing/temp.astro
View File

@ -65,7 +65,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1').setInteractive({ draggable: true }); firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1').setInteractive({ draggable: true });
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
const slantLeftAudio = this.sound.add('slantLeft'); const slantLeftAudio = this.sound.add('slantLeft');
slantLeftAudio.play(); slantLeftAudio.play();

2
src/pages/tracing/temp2.astro
View File

@ -81,7 +81,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1'); firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
const slantLeftAudio = this.sound.add('slantLeft'); const slantLeftAudio = this.sound.add('slantLeft');
slantLeftAudio.play(); slantLeftAudio.play();

2
src/pages/tracing/temp4.astro
View File

@ -72,7 +72,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1'); firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
const slantLeftAudio = this.sound.add('slantLeft'); const slantLeftAudio = this.sound.add('slantLeft');
slantLeftAudio.play(); slantLeftAudio.play();

5
src/pages/tracing/test.astro
View File

@ -94,7 +94,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1'); firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
const slantLeftAudio = this.sound.add('slantLeft'); const slantLeftAudio = this.sound.add('slantLeft');
slantLeftAudio.play(); slantLeftAudio.play();
@ -167,8 +167,7 @@ import Layout from "../../layouts/Layout.astro";
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
graphics.moveTo(pointer.x, pointer.y); graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y) });
});
this.input.on('pointerup', function () { this.input.on('pointerup', function () {
isDrawing = false; isDrawing = false;

2
src/pages/tracing/tracing-importeat.astro
View File

@ -93,7 +93,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1'); firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
const slantLeftAudio = this.sound.add('slantLeft'); const slantLeftAudio = this.sound.add('slantLeft');
slantLeftAudio.play(); slantLeftAudio.play();

2
src/pages/tracing/tracing3.astro
View File

@ -93,7 +93,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1'); firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
const slantLeftAudio = this.sound.add('slantLeft'); const slantLeftAudio = this.sound.add('slantLeft');
slantLeftAudio.play(); slantLeftAudio.play();