From ae14d20615c07216a02f458d3ab0721d92218ca6 Mon Sep 17 00:00:00 2001 From: Dev 1 Date: Tue, 17 Oct 2023 19:41:18 +0530 Subject: [PATCH] Add Start Button ANd change Help Button Possition --- src/pages/capital-letter/A.astro | 48 ++++++++++++---- src/pages/capital-letter/B.astro | 55 +++++++++++++----- src/pages/capital-letter/C.astro | 68 ++++++++++++++++++++--- src/pages/capital-letter/D.astro | 53 +++++++++++++----- src/pages/capital-letter/E.astro | 48 ++++++++++++---- src/pages/capital-letter/F.astro | 37 ++++++++++-- src/pages/capital-letter/G.astro | 52 +++++++++++++---- src/pages/capital-letter/H.astro | 57 ++++++++++++++----- src/pages/capital-letter/I.astro | 49 ++++++++++++---- src/pages/capital-letter/J.astro | 45 ++++++++++++--- src/pages/capital-letter/K.astro | 38 +++++++++++-- src/pages/capital-letter/L.astro | 50 +++++++++++++---- src/pages/capital-letter/M.astro | 57 ++++++++++++++----- src/pages/capital-letter/N.astro | 39 +++++++++++-- src/pages/capital-letter/O.astro | 49 +++++++++++++--- src/pages/capital-letter/P.astro | 45 ++++++++++++--- src/pages/capital-letter/Q.astro | 50 +++++++++++++---- src/pages/capital-letter/R.astro | 53 ++++++++++++++---- src/pages/capital-letter/S.astro | 49 +++++++++++++--- src/pages/capital-letter/T.astro | 55 +++++++++++++----- src/pages/capital-letter/U.astro | 49 +++++++++++++--- src/pages/capital-letter/V.astro | 52 +++++++++++++---- src/pages/capital-letter/W.astro | 57 ++++++++++++++----- src/pages/capital-letter/X.astro | 50 +++++++++++++---- src/pages/capital-letter/Y.astro | 47 +++++++++++++--- src/pages/capital-letter/Z.astro | 40 +++++++++++-- src/pages/numeric/0.astro | 4 +- src/pages/numeric/1.astro | 4 +- src/pages/numeric/2.astro | 9 ++- src/pages/numeric/3.astro | 9 ++- src/pages/numeric/4.astro | 6 +- src/pages/numeric/5.astro | 6 +- src/pages/numeric/6.astro | 9 ++- src/pages/numeric/7.astro | 9 ++- src/pages/numeric/8.astro | 9 ++- src/pages/numeric/9.astro | 9 ++- src/pages/small-letter/a.astro | 9 ++- src/pages/small-letter/b.astro | 9 ++- src/pages/small-letter/c.astro | 6 +- src/pages/small-letter/d.astro | 9 ++- src/pages/small-letter/e.astro | 9 ++- src/pages/small-letter/f.astro | 9 ++- src/pages/small-letter/g.astro | 9 ++- src/pages/small-letter/h.astro | 9 ++- src/pages/small-letter/i.astro | 9 ++- src/pages/small-letter/j.astro | 9 ++- src/pages/small-letter/k.astro | 6 +- src/pages/small-letter/m.astro | 6 +- src/pages/small-letter/n.astro | 9 ++- src/pages/small-letter/o.astro | 6 +- src/pages/small-letter/p.astro | 9 ++- src/pages/small-letter/q.astro | 9 ++- src/pages/small-letter/r.astro | 9 ++- src/pages/small-letter/s.astro | 4 +- src/pages/small-letter/t.astro | 9 ++- src/pages/small-letter/u.astro | 7 +-- src/pages/small-letter/v.astro | 9 ++- src/pages/small-letter/w.astro | 9 ++- src/pages/small-letter/x.astro | 9 ++- src/pages/small-letter/y.astro | 9 ++- src/pages/small-letter/z.astro | 6 +- src/pages/tracing/temp.astro | 2 +- src/pages/tracing/temp2.astro | 2 +- src/pages/tracing/temp4.astro | 2 +- src/pages/tracing/test.astro | 5 +- src/pages/tracing/tracing-importeat.astro | 2 +- src/pages/tracing/tracing3.astro | 2 +- 67 files changed, 1171 insertions(+), 413 deletions(-) diff --git a/src/pages/capital-letter/A.astro b/src/pages/capital-letter/A.astro index efee170..063b84c 100644 --- a/src/pages/capital-letter/A.astro +++ b/src/pages/capital-letter/A.astro @@ -39,6 +39,7 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + // let x = 100; // // Use x @@ -58,6 +59,11 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 70; animatedAHeight = 35; animatedAScale = 0.65; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -72,6 +78,11 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 100; animatedAHeight = 20; animatedAScale = 0.73; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } function preload() { 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 }); - 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); 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, 'animatedA').setDepth(2); canvasStand 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); - // Set up a mask for the drawing area based on the canvas dimensions 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); 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -158,8 +164,8 @@ import Layout from "../../layouts/Layout.astro"; graphics.setVisible(true); animatedLetter.setVisible(false); }); - hideButton.setVisible(false); - let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { + hideButton.setVisible(false); + let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", { font: '900 24px quicksand', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -204,10 +210,10 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -319,6 +325,28 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/B.astro b/src/pages/capital-letter/B.astro index 7e2b839..7e30ce2 100644 --- a/src/pages/capital-letter/B.astro +++ b/src/pages/capital-letter/B.astro @@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.6; animatedBHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.70; animatedBHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -106,7 +118,7 @@ import Layout from "../../layouts/Layout.astro"; }); const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9); - + const scaleFactor = sunScalePlus; // Scale factor (2 means double the size) const duration = 3000; // Duration of the animation in milliseconds @@ -121,10 +133,9 @@ import Layout from "../../layouts/Layout.astro"; 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); - this.add.image(customWidth / 2 - 30, 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); + this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).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 firstScreen.setVisible(false); // 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -159,7 +170,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -187,7 +198,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : B', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale); // Play the video animatedLetter.play(); @@ -203,17 +214,17 @@ import Layout from "../../layouts/Layout.astro"; 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; - 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); 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; const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioTwoAudio = this.sound.add('audioTwo'); @@ -223,7 +234,7 @@ import Layout from "../../layouts/Layout.astro"; secondLayer.setInteractive({ draggable: true }); 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; const thirdTextLayer = this.add.text(textX, textY, '3. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'}); const audioTHreeAudio = this.sound.add('audioTwo'); @@ -311,7 +322,6 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) }); this.input.on('pointerup', function () { @@ -325,8 +335,25 @@ import Layout from "../../layouts/Layout.astro"; 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() { diff --git a/src/pages/capital-letter/C.astro b/src/pages/capital-letter/C.astro index 114baa6..45450f0 100644 --- a/src/pages/capital-letter/C.astro +++ b/src/pages/capital-letter/C.astro @@ -45,14 +45,24 @@ import Layout from "../../layouts/Layout.astro"; cloudHeight = 340; canvasScale = 0.14 canvasHeight = 35; - letterHeight = 90; - letterScale = 1; + letterHeight = 60; + letterScale = 0.85; backgroundScale = 0.8; sunScale = 0.1; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + beanieScale = 0.35; + beanieScalePlus = 0.38; + beanieWidth = 135; + beanieHeight = 170; + animatedVideoScale = 0.59; animatedAHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +75,17 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + beanieScale = 0.4; + beanieScalePlus = 0.44; + beanieWidth = 200; + beanieHeight = 245; + animatedVideoScale = 0.70; animatedAHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -81,6 +101,7 @@ import Layout from "../../layouts/Layout.astro"; this.load.image('backgroundImage', '/assets/bg6.png'); this.load.image('cloud', '/assets/cloud.png'); this.load.image('canvas', '/assets/canvas4.png'); + this.load.image('beanie', '/assets/beanieImage.png'); this.load.image('sun', '/assets/sun.png'); this.load.image('bgMobile', '/assets/bgMobile.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 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 duration = 3000; // Duration of the animation in milliseconds @@ -115,6 +139,17 @@ import Layout from "../../layouts/Layout.astro"; ease: 'Linear', yoyo: true, // Makes the animation play in reverse 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); 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -153,7 +188,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -181,7 +216,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale); // Play the video animatedLetter.play(); @@ -199,10 +234,10 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -253,6 +288,25 @@ import Layout from "../../layouts/Layout.astro"; 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); + + }) } diff --git a/src/pages/capital-letter/D.astro b/src/pages/capital-letter/D.astro index bc81a92..dd87191 100644 --- a/src/pages/capital-letter/D.astro +++ b/src/pages/capital-letter/D.astro @@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.6; animatedDHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.70; animatedDHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -121,8 +133,8 @@ import Layout from "../../layouts/Layout.astro"; repeat: -1 // Repeat indefinitely }); 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); - const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterD').setDepth(2).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 + 15, customHeight / 2 + letterHeight, 'letterD').setDepth(2).setScale(letterScale); // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedD').setDepth(2); canvasStand firstScreen.setVisible(false); // 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -157,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -185,7 +197,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale); // Play the video animatedLetter.play(); @@ -201,17 +213,17 @@ import Layout from "../../layouts/Layout.astro"; 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; - 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); 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; const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioTwoAudio = this.sound.add('audioTwo'); @@ -249,9 +261,6 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); -`` - // Repeat the above code for secondLayer and thirdLayer - // Add this code for secondLayer secondLayer.on('dragstart', (pointer) => { secondDragStartPoint.x = pointer.x; @@ -276,7 +285,6 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) }); this.input.on('pointerup', function () { @@ -289,6 +297,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/E.astro b/src/pages/capital-letter/E.astro index 465972f..140941e 100644 --- a/src/pages/capital-letter/E.astro +++ b/src/pages/capital-letter/E.astro @@ -52,7 +52,12 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; - animatedAHeight = 32; + animatedEHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,10 +70,15 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; - animatedAHeight = 20; + animatedEHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } 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('layer1', '/assets/capital-letter/e_l1.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); 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, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand + // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedE').setDepth(2); canvasStand 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); @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -158,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -186,7 +196,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : E', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + 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 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); 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -341,7 +351,6 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) }); this.input.on('pointerup', function () { @@ -355,8 +364,25 @@ import Layout from "../../layouts/Layout.astro"; 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() { diff --git a/src/pages/capital-letter/F.astro b/src/pages/capital-letter/F.astro index 83a0d7e..9d9ba3f 100644 --- a/src/pages/capital-letter/F.astro +++ b/src/pages/capital-letter/F.astro @@ -58,6 +58,11 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 70; animatedFHeight = 35; animatedFScale = 0.65; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -72,6 +77,11 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 100; animatedFHeight = 20; animatedFScale = 0.73; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } function preload() { 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -159,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -204,10 +214,10 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -316,6 +326,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/G.astro b/src/pages/capital-letter/G.astro index cb08e7f..a118b6e 100644 --- a/src/pages/capital-letter/G.astro +++ b/src/pages/capital-letter/G.astro @@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.60; animatedGHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.70; animatedGHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -90,7 +102,7 @@ import Layout from "../../layouts/Layout.astro"; function create() { 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); 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 }); 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); - const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterG').setDepth(2).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, customHeight / 2 + letterHeight, 'letterG').setDepth(2).setScale(letterScale); // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedG').setDepth(2); canvasStand firstScreen.setVisible(false); // 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -157,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -185,7 +197,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : G', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale); // Play the video animatedLetter.play(); @@ -201,9 +213,9 @@ import Layout from "../../layouts/Layout.astro"; 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; - 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -211,7 +223,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); 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; const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioTwoAudio = this.sound.add('audioTwo'); @@ -261,7 +273,7 @@ import Layout from "../../layouts/Layout.astro"; secondLayer.on('drag', (pointer) => { const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y); - if (distance >=100) { + if (distance >=50) { secondTextLayer.setVisible(false); secondLayer.setAlpha(1); } else { @@ -275,7 +287,6 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) }); this.input.on('pointerup', function () { @@ -288,6 +299,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/H.astro b/src/pages/capital-letter/H.astro index a551b1c..5984f20 100644 --- a/src/pages/capital-letter/H.astro +++ b/src/pages/capital-letter/H.astro @@ -50,13 +50,19 @@ import Layout from "../../layouts/Layout.astro"; canvasScale = 0.14 canvasHeight = 35; letterHeight = 70; - letterScale = 1; + letterScale = 0.9; backgroundScale = 0.8; sunScale = 0.1; sunScalePlus = 0.15; sunWidth = 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{ cloudeSize = 500; cloudHeight = 250; @@ -70,10 +76,15 @@ import Layout from "../../layouts/Layout.astro"; sunWidth = 200; sunHeight = 100; 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() { - 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('layer1', '/assets/capital-letter/h_l1.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 }); 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); - const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterH').setDepth(2).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 + 20, customHeight / 2 + letterHeight, 'letterH').setDepth(2).setScale(letterScale); // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedH').setDepth(2); canvasStand firstScreen.setVisible(false); // 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -159,7 +170,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -202,17 +213,17 @@ import Layout from "../../layouts/Layout.astro"; 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; - 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); 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; const secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioTwoAudio = this.sound.add('audioOne'); @@ -222,7 +233,7 @@ import Layout from "../../layouts/Layout.astro"; secondLayer.setInteractive({ draggable: true }); 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; const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'}); const audioThreeAudio = this.sound.add('audioTwo'); @@ -319,6 +330,26 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/I.astro b/src/pages/capital-letter/I.astro index 675c138..1000363 100644 --- a/src/pages/capital-letter/I.astro +++ b/src/pages/capital-letter/I.astro @@ -58,6 +58,11 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 70; animatedIHeight = 35; animatedIScale = 0.65; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -70,7 +75,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedIHeight = 20; animatedIScale = 0.73; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } function preload() { this.load.video('animatedI', '/assets/animated-letter/capital_i.mp4'); @@ -123,8 +134,8 @@ import Layout from "../../layouts/Layout.astro"; repeat: -1 // Repeat indefinitely }); 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); - const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterI').setDepth(2).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 + 40, customHeight / 2 + letterHeight, 'letterI').setDepth(2).setScale(letterScale); // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedI').setDepth(2); canvasStand firstScreen.setVisible(false); // 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -159,7 +170,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -202,17 +213,17 @@ import Layout from "../../layouts/Layout.astro"; 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; - 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); 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; const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioTwoAudio = this.sound.add('audioTwo'); @@ -222,7 +233,7 @@ import Layout from "../../layouts/Layout.astro"; secondLayer.setInteractive({ draggable: true }); 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; const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'}); const audioThreeAudio = this.sound.add('audioTwo'); @@ -306,7 +317,6 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - // console.log("Start Position", pointer.x, pointer.y) }); this.input.on('pointerup', function () { @@ -319,6 +329,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/J.astro b/src/pages/capital-letter/J.astro index f402dfe..a091f6b 100644 --- a/src/pages/capital-letter/J.astro +++ b/src/pages/capital-letter/J.astro @@ -45,14 +45,20 @@ import Layout from "../../layouts/Layout.astro"; cloudHeight = 340; canvasScale = 0.14 canvasHeight = 35; - letterHeight = 90; - letterScale = 1; + letterHeight = 65; + letterScale = 0.9; backgroundScale = 0.8; sunScale = 0.1; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.6; animatedJHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.7; animatedJHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -155,7 +167,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -183,7 +195,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : J', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale); // Play the video animatedLetter.play(); @@ -201,10 +213,10 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -254,6 +266,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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); + + }) } diff --git a/src/pages/capital-letter/K.astro b/src/pages/capital-letter/K.astro index d78047c..5b90df8 100644 --- a/src/pages/capital-letter/K.astro +++ b/src/pages/capital-letter/K.astro @@ -58,6 +58,11 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 70; animatedKHeight = 35; animatedKScale = 0.65; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -72,6 +77,11 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 100; animatedKHeight = 20; animatedKScale = 0.73; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } function preload() { 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -160,7 +170,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -307,7 +317,6 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - // console.log("Start Position", pointer.x, pointer.y) }); this.input.on('pointerup', function () { @@ -320,6 +329,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/L.astro b/src/pages/capital-letter/L.astro index 8f2823d..50cd523 100644 --- a/src/pages/capital-letter/L.astro +++ b/src/pages/capital-letter/L.astro @@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.6; animatedLHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.7; animatedLHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -121,8 +133,8 @@ import Layout from "../../layouts/Layout.astro"; repeat: -1 // Repeat indefinitely }); 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); - const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterL').setDepth(2).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, customHeight / 2 + letterHeight, 'animatedL').setDepth(2); canvasStand firstScreen.setVisible(false); // 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(); - 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -156,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -184,7 +196,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : L', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale); // Play the video animatedLetter.play(); @@ -200,17 +212,17 @@ import Layout from "../../layouts/Layout.astro"; 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; - 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); 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; const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioTwoAudio = this.sound.add('audioTwo'); @@ -275,7 +287,6 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) }); this.input.on('pointerup', function () { @@ -288,6 +299,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/M.astro b/src/pages/capital-letter/M.astro index bb5721d..9f2221e 100644 --- a/src/pages/capital-letter/M.astro +++ b/src/pages/capital-letter/M.astro @@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.6; animatedMHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.7; animatedMHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } function preload() { this.load.video('animatedM', '/assets/animated-letter/capital_m.mp4'); @@ -121,8 +133,8 @@ import Layout from "../../layouts/Layout.astro"; repeat: -1 // Repeat indefinitely }); 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); - const firstScreen = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterM').setDepth(2).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, customHeight / 2 + letterHeight, 'letterM').setDepth(2).setScale(letterScale); // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedM').setDepth(2); canvasStand firstScreen.setVisible(false); // 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -157,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -185,7 +197,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : M', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale); // Play the video animatedLetter.play(); @@ -201,17 +213,17 @@ import Layout from "../../layouts/Layout.astro"; 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; - 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); 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; const secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioTwoAudio = this.sound.add('audioOne'); @@ -221,7 +233,7 @@ import Layout from "../../layouts/Layout.astro"; secondLayer.setInteractive({ draggable: true }); 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; const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'}); const audioThreeAudio = this.sound.add('audioTwo'); @@ -232,7 +244,7 @@ import Layout from "../../layouts/Layout.astro"; thirdLayer.setInteractive({ draggable: true }); 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; const fourthTextLayer = this.add.text(textX, textY, '4. Slant', { font: '700 40px quicksand', fill: '#05b3a4'}); const audioFourthAudio = this.sound.add('audioTwo'); @@ -340,8 +352,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; @@ -353,9 +364,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/N.astro b/src/pages/capital-letter/N.astro index 20d4f36..f49743f 100644 --- a/src/pages/capital-letter/N.astro +++ b/src/pages/capital-letter/N.astro @@ -50,7 +50,7 @@ import Layout from "../../layouts/Layout.astro"; canvasScale = 0.14 canvasHeight = 35; letterHeight = 70; - letterScale = 1; + letterScale = 0.95; backgroundScale = 0.8; sunScale = 0.1; sunScalePlus = 0.15; @@ -58,6 +58,11 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 70; animatedNHeight = 35; animatedNScale = 0.65; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -72,6 +77,11 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 100; animatedNHeight = 20; animatedNScale = 0.73; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } function preload() { 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -161,7 +171,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -206,10 +216,10 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -321,6 +331,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/O.astro b/src/pages/capital-letter/O.astro index 40156b4..4c9c133 100644 --- a/src/pages/capital-letter/O.astro +++ b/src/pages/capital-letter/O.astro @@ -45,14 +45,20 @@ import Layout from "../../layouts/Layout.astro"; cloudHeight = 340; canvasScale = 0.14 canvasHeight = 35; - letterHeight = 90; - letterScale = 1; + letterHeight = 65; + letterScale = 0.92; backgroundScale = 0.8; sunScale = 0.1; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.6; animatedOHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.7; animatedOHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -155,7 +167,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -183,7 +195,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : O', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale); // Play the video animatedLetter.play(); @@ -200,11 +212,11 @@ import Layout from "../../layouts/Layout.astro"; let textX, textY; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); - textX = isMobile ? customWidth / 4 : customWidth * 0.75; - textY = isMobile ? customHeight / 5 : customHeight / 2; - const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 40px quicksand', fill: '#05b3a4'}); + textX = isMobile ? customWidth / 12 : customWidth * 0.75; + textY = isMobile ? customHeight / 5 : customHeight / 2.4; + const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 35px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -254,6 +266,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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); + + }) } diff --git a/src/pages/capital-letter/P.astro b/src/pages/capital-letter/P.astro index 1fdaad2..06151fd 100644 --- a/src/pages/capital-letter/P.astro +++ b/src/pages/capital-letter/P.astro @@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.6; animatedPHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.7; animatedPHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -157,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -185,7 +197,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : P', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale); // Play the video 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); 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -249,7 +261,6 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); -`` // Repeat the above code for secondLayer and thirdLayer // Add this code for secondLayer @@ -276,8 +287,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; @@ -289,6 +299,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/Q.astro b/src/pages/capital-letter/Q.astro index 148407b..00754ba 100644 --- a/src/pages/capital-letter/Q.astro +++ b/src/pages/capital-letter/Q.astro @@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.6; animatedQHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.7; animatedQHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -121,7 +133,7 @@ import Layout from "../../layouts/Layout.astro"; repeat: -1 // Repeat indefinitely }); 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, 'animatedQ').setDepth(2); canvasStand 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -157,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -185,7 +197,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Q', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 + 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 animatedLetter.play(); @@ -201,17 +213,17 @@ import Layout from "../../layouts/Layout.astro"; 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; - 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); 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; const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioTwoAudio = this.sound.add('audioTwo'); @@ -276,8 +288,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; @@ -289,6 +300,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/R.astro b/src/pages/capital-letter/R.astro index 3fd7372..6a8db2d 100644 --- a/src/pages/capital-letter/R.astro +++ b/src/pages/capital-letter/R.astro @@ -50,14 +50,20 @@ import Layout from "../../layouts/Layout.astro"; canvasScale = 0.14 canvasHeight = 35; letterHeight = 70; - letterScale = 1; + letterScale = 0.9; backgroundScale = 0.8; sunScale = 0.1; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.6; animatedRHeight = 35; animatedRScale = 0.65; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -70,8 +76,14 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.7; animatedRHeight = 20; animatedRScale = 0.73; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } function preload() { this.load.video('animatedR', '/assets/animated-letter/capital_r.mp4'); @@ -125,8 +137,8 @@ import Layout from "../../layouts/Layout.astro"; repeat: -1 // Repeat indefinitely }); 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); - const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterR').setDepth(2).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 + 10, customHeight / 2 + letterHeight, 'letterR').setDepth(2).setScale(letterScale); // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedR').setDepth(2); canvasStand firstScreen.setVisible(false); // 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -161,7 +173,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -189,7 +201,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : R', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedRScale); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale); // Play the video animatedLetter.play(); @@ -204,17 +216,17 @@ import Layout from "../../layouts/Layout.astro"; 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; - 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); 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; const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioTwoAudio = this.sound.add('audioTwo'); @@ -224,7 +236,7 @@ import Layout from "../../layouts/Layout.astro"; secondLayer.setInteractive({ draggable: true }); 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; const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'}); const audioThreeAudio = this.sound.add('audioThree'); @@ -321,6 +333,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/S.astro b/src/pages/capital-letter/S.astro index 72b1581..7079352 100644 --- a/src/pages/capital-letter/S.astro +++ b/src/pages/capital-letter/S.astro @@ -45,14 +45,20 @@ import Layout from "../../layouts/Layout.astro"; cloudHeight = 340; canvasScale = 0.14 canvasHeight = 35; - letterHeight = 90; - letterScale = 1; + letterHeight = 65; + letterScale = 0.85; backgroundScale = 0.8; sunScale = 0.1; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.6; animatedSHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.7; animatedSHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -155,7 +167,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -183,7 +195,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : S', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale); // Play the video animatedLetter.play(); @@ -200,11 +212,11 @@ import Layout from "../../layouts/Layout.astro"; let textX, textY; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); - textX = isMobile ? customWidth / 4 : customWidth * 0.75; - textY = isMobile ? customHeight / 5 : customHeight / 2; - const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Snake',{ font: '700 40px quicksand', fill: '#05b3a4'}); + textX = isMobile ? customWidth / 12 : customWidth * 0.75; + textY = isMobile ? customHeight / 5 : customHeight / 2.4; + const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Snake',{ font: '700 35px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -254,6 +266,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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); + + }) } diff --git a/src/pages/capital-letter/T.astro b/src/pages/capital-letter/T.astro index 2105d84..aae9009 100644 --- a/src/pages/capital-letter/T.astro +++ b/src/pages/capital-letter/T.astro @@ -45,14 +45,20 @@ import Layout from "../../layouts/Layout.astro"; cloudHeight = 340; canvasScale = 0.14 canvasHeight = 35; - letterHeight = 58; + letterHeight = 65; letterScale = 0.85; backgroundScale = 0.8; sunScale = 0.1; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.6; animatedTHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.7; animatedTHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -120,8 +132,8 @@ import Layout from "../../layouts/Layout.astro"; repeat: -1 // Repeat indefinitely }); 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); - const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterT').setDepth(2).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, customHeight / 2 + letterHeight, 'letterT').setDepth(2).setScale(letterScale); // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedT').setDepth(2); canvasStand firstScreen.setVisible(false); // 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(); - - 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -156,7 +167,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -184,7 +195,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : T', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale); // Play the video animatedLetter.play(); @@ -200,17 +211,17 @@ import Layout from "../../layouts/Layout.astro"; 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; - 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); 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; const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioTwoAudio = this.sound.add('audioTwo'); @@ -275,8 +286,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; @@ -288,6 +298,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/U.astro b/src/pages/capital-letter/U.astro index 3c98b46..08b10a0 100644 --- a/src/pages/capital-letter/U.astro +++ b/src/pages/capital-letter/U.astro @@ -45,14 +45,20 @@ import Layout from "../../layouts/Layout.astro"; cloudHeight = 340; canvasScale = 0.14 canvasHeight = 35; - letterHeight = 90; - letterScale = 1; + letterHeight = 65; + letterScale = 0.9; backgroundScale = 0.8; sunScale = 0.1; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.635; animatedUHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.7; animatedUHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -154,7 +166,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -182,7 +194,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : U', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale); // Play the video animatedLetter.play(); @@ -199,11 +211,11 @@ import Layout from "../../layouts/Layout.astro"; let textX, textY; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); - textX = isMobile ? customWidth / 4 : customWidth * 0.75; - textY = isMobile ? customHeight / 5 : customHeight / 2; - const firstTextLayer = this.add.text(textX, textY, '1. Tall Down Curve Up',{ font: '700 40px quicksand', fill: '#05b3a4'}); + textX = isMobile ? customWidth / 12 : customWidth * 0.75; + textY = isMobile ? customHeight / 5 : customHeight / 2.4; + const firstTextLayer = this.add.text(textX, textY, '1. Tall Down Curve Up',{ font: '700 35px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -253,6 +265,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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); + + }) } diff --git a/src/pages/capital-letter/V.astro b/src/pages/capital-letter/V.astro index 4a61238..fee81a1 100644 --- a/src/pages/capital-letter/V.astro +++ b/src/pages/capital-letter/V.astro @@ -45,14 +45,20 @@ import Layout from "../../layouts/Layout.astro"; cloudHeight = 340; canvasScale = 0.14 canvasHeight = 35; - letterHeight = 58; - letterScale = 0.85; + letterHeight = 70; + letterScale = 0.9; backgroundScale = 0.8; sunScale = 0.1; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.6; animatedVHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.7; animatedVHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -120,7 +132,7 @@ import Layout from "../../layouts/Layout.astro"; repeat: -1 // Repeat indefinitely }); 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, 'animatedV').setDepth(2); canvasStand 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -156,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -184,7 +196,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : V', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale); // Play the video animatedLetter.play(); @@ -200,9 +212,9 @@ import Layout from "../../layouts/Layout.astro"; 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; - 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -210,7 +222,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); 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; const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioTwoAudio = this.sound.add('audioOne'); @@ -275,8 +287,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; @@ -288,6 +299,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/W.astro b/src/pages/capital-letter/W.astro index 91e74e8..7f87cfa 100644 --- a/src/pages/capital-letter/W.astro +++ b/src/pages/capital-letter/W.astro @@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.6; animatedWHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.7; animatedWHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } function preload() { this.load.video('animatedW', '/assets/animated-letter/capital_w.mp4'); @@ -120,8 +132,8 @@ import Layout from "../../layouts/Layout.astro"; repeat: -1 // Repeat indefinitely }); 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); - const firstScreen = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterW').setDepth(2).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, customHeight / 2 + letterHeight, 'letterW').setDepth(2).setScale(letterScale); // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedW').setDepth(2); canvasStand firstScreen.setVisible(false); // 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -156,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -184,7 +196,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : W', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale); // Play the video animatedLetter.play(); @@ -200,17 +212,17 @@ import Layout from "../../layouts/Layout.astro"; 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; - 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); 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; const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioTwoAudio = this.sound.add('audioOne'); @@ -220,7 +232,7 @@ import Layout from "../../layouts/Layout.astro"; secondLayer.setInteractive({ draggable: true }); 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; const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'}); const audioThreeAudio = this.sound.add('audioOne'); @@ -231,7 +243,7 @@ import Layout from "../../layouts/Layout.astro"; thirdLayer.setInteractive({ draggable: true }); 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; const fourthTextLayer = this.add.text(textX, textY, '4. Slant', { font: '700 40px quicksand', fill: '#05b3a4'}); const audioFourthAudio = this.sound.add('audioOne'); @@ -339,8 +351,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; @@ -352,8 +363,26 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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 } diff --git a/src/pages/capital-letter/X.astro b/src/pages/capital-letter/X.astro index 1e870b8..5266a4b 100644 --- a/src/pages/capital-letter/X.astro +++ b/src/pages/capital-letter/X.astro @@ -52,7 +52,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + animatedVideoScale = 0.6; animatedXHeight = 32; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -65,7 +71,13 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + animatedVideoScale = 0.7; animatedXHeight = 20; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } // let hideButton; @@ -120,7 +132,7 @@ import Layout from "../../layouts/Layout.astro"; repeat: -1 // Repeat indefinitely }); 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, 'animatedX').setDepth(2); canvasStand 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -156,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -184,7 +196,7 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : X', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedVideoScale); // Play the video animatedLetter.play(); @@ -200,17 +212,17 @@ import Layout from "../../layouts/Layout.astro"; 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; - 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); 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; const secondTextLayer = this.add.text(textX, textY, '2. Cross',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioTwoAudio = this.sound.add('audioTwo'); @@ -275,8 +287,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; @@ -288,6 +299,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/Y.astro b/src/pages/capital-letter/Y.astro index a05bd79..93eb900 100644 --- a/src/pages/capital-letter/Y.astro +++ b/src/pages/capital-letter/Y.astro @@ -58,6 +58,11 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 70; animatedYHeight = 35; animatedYScale = 0.65; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -72,6 +77,11 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 100; animatedYHeight = 20; animatedYScale = 0.73; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } function preload() { this.load.video('animatedY', '/assets/animated-letter/capital_y.mp4'); @@ -124,8 +134,8 @@ import Layout from "../../layouts/Layout.astro"; repeat: -1 // Repeat indefinitely }); 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); - const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterY').setDepth(2).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 - 10, customHeight / 2 + letterHeight, 'letterY').setDepth(2).setScale(letterScale); // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedY').setDepth(2); canvasStand firstScreen.setVisible(false); // 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -160,7 +170,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -203,17 +213,17 @@ import Layout from "../../layouts/Layout.astro"; 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; - 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); 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; const secondTextLayer = this.add.text(textX, textY, '2. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioTwoAudio = this.sound.add('audioTwo'); @@ -223,7 +233,7 @@ import Layout from "../../layouts/Layout.astro"; secondLayer.setInteractive({ draggable: true }); 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; const thirdTextLayer = this.add.text(textX, textY, '3. Down', { font: '700 40px quicksand', fill: '#05b3a4'}); const audioThreeAudio = this.sound.add('audioThree'); @@ -320,6 +330,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/capital-letter/Z.astro b/src/pages/capital-letter/Z.astro index 8c34914..55d3d9c 100644 --- a/src/pages/capital-letter/Z.astro +++ b/src/pages/capital-letter/Z.astro @@ -50,7 +50,7 @@ import Layout from "../../layouts/Layout.astro"; canvasScale = 0.14 canvasHeight = 35; letterHeight = 70; - letterScale = 1; + letterScale = 0.92; backgroundScale = 0.8; sunScale = 0.1; sunScalePlus = 0.15; @@ -58,6 +58,11 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 70; animatedZHeight = 35; animatedZScale = 0.65; + helpButtonHeight = customHeight / 1.1; + helpButtonWidth = customWidth / 2 + 10; + + startButtonHeight = customHeight / 1.1; + startButtonWidth = customWidth / 2 - 100; } else{ cloudeSize = 500; cloudHeight = 250; @@ -72,6 +77,11 @@ import Layout from "../../layouts/Layout.astro"; sunHeight = 100; animatedZHeight = 20; animatedZScale = 0.73; + helpButtonHeight = customHeight / 2 + 40; + helpButtonWidth = customWidth / 1.32; + + startButtonHeight = customHeight / 2 - 20; + startButtonWidth = customWidth / 1.32; } function preload() { 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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -159,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -204,10 +214,10 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -318,7 +328,25 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); 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() { diff --git a/src/pages/numeric/0.astro b/src/pages/numeric/0.astro index 63e4b57..055c937 100644 --- a/src/pages/numeric/0.astro +++ b/src/pages/numeric/0.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -158,7 +158,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', diff --git a/src/pages/numeric/1.astro b/src/pages/numeric/1.astro index 34fb089..7bcb2e0 100644 --- a/src/pages/numeric/1.astro +++ b/src/pages/numeric/1.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -161,7 +161,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', diff --git a/src/pages/numeric/2.astro b/src/pages/numeric/2.astro index 509b119..6a90c53 100644 --- a/src/pages/numeric/2.astro +++ b/src/pages/numeric/2.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -282,8 +282,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/numeric/3.astro b/src/pages/numeric/3.astro index 6cbf36c..2a0eda5 100644 --- a/src/pages/numeric/3.astro +++ b/src/pages/numeric/3.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -162,7 +162,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/numeric/4.astro b/src/pages/numeric/4.astro index a185eb4..fe601ce 100644 --- a/src/pages/numeric/4.astro +++ b/src/pages/numeric/4.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -165,7 +165,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -210,7 +210,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); diff --git a/src/pages/numeric/5.astro b/src/pages/numeric/5.astro index f43189b..e70c537 100644 --- a/src/pages/numeric/5.astro +++ b/src/pages/numeric/5.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -166,7 +166,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -211,7 +211,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); diff --git a/src/pages/numeric/6.astro b/src/pages/numeric/6.astro index 29e3e51..27af24e 100644 --- a/src/pages/numeric/6.astro +++ b/src/pages/numeric/6.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -282,8 +282,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/numeric/7.astro b/src/pages/numeric/7.astro index bdbdd63..624ab71 100644 --- a/src/pages/numeric/7.astro +++ b/src/pages/numeric/7.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -282,8 +282,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/numeric/8.astro b/src/pages/numeric/8.astro index 79055f8..d9737a5 100644 --- a/src/pages/numeric/8.astro +++ b/src/pages/numeric/8.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -282,8 +282,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/numeric/9.astro b/src/pages/numeric/9.astro index 4063058..a48651d 100644 --- a/src/pages/numeric/9.astro +++ b/src/pages/numeric/9.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -282,8 +282,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/a.astro b/src/pages/small-letter/a.astro index b315e05..097c433 100644 --- a/src/pages/small-letter/a.astro +++ b/src/pages/small-letter/a.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -161,7 +161,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -207,7 +207,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -279,8 +279,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/b.astro b/src/pages/small-letter/b.astro index 58e2e31..f7c2d40 100644 --- a/src/pages/small-letter/b.astro +++ b/src/pages/small-letter/b.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -161,7 +161,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -279,8 +279,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/c.astro b/src/pages/small-letter/c.astro index a30a92e..7f315f7 100644 --- a/src/pages/small-letter/c.astro +++ b/src/pages/small-letter/c.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -159,7 +159,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -205,7 +205,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); diff --git a/src/pages/small-letter/d.astro b/src/pages/small-letter/d.astro index 8aa262a..633fd85 100644 --- a/src/pages/small-letter/d.astro +++ b/src/pages/small-letter/d.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/e.astro b/src/pages/small-letter/e.astro index 4dd3f99..eab40f0 100644 --- a/src/pages/small-letter/e.astro +++ b/src/pages/small-letter/e.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -161,7 +161,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -279,8 +279,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/f.astro b/src/pages/small-letter/f.astro index 13b8fe3..38a269f 100644 --- a/src/pages/small-letter/f.astro +++ b/src/pages/small-letter/f.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -161,7 +161,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -279,8 +279,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/g.astro b/src/pages/small-letter/g.astro index 6e0dc8c..2ce31d7 100644 --- a/src/pages/small-letter/g.astro +++ b/src/pages/small-letter/g.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/h.astro b/src/pages/small-letter/h.astro index 7db9f80..afe9909 100644 --- a/src/pages/small-letter/h.astro +++ b/src/pages/small-letter/h.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/i.astro b/src/pages/small-letter/i.astro index 63d227c..3093384 100644 --- a/src/pages/small-letter/i.astro +++ b/src/pages/small-letter/i.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterIeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/j.astro b/src/pages/small-letter/j.astro index 195c6c0..fffddeb 100644 --- a/src/pages/small-letter/j.astro +++ b/src/pages/small-letter/j.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/k.astro b/src/pages/small-letter/k.astro index ab417b5..0e49498 100644 --- a/src/pages/small-letter/k.astro +++ b/src/pages/small-letter/k.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -166,7 +166,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); diff --git a/src/pages/small-letter/m.astro b/src/pages/small-letter/m.astro index 3ccfe18..1005c49 100644 --- a/src/pages/small-letter/m.astro +++ b/src/pages/small-letter/m.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -165,7 +165,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); diff --git a/src/pages/small-letter/n.astro b/src/pages/small-letter/n.astro index c1c421c..b036c0d 100644 --- a/src/pages/small-letter/n.astro +++ b/src/pages/small-letter/n.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/o.astro b/src/pages/small-letter/o.astro index 8ab4fda..3ae107b 100644 --- a/src/pages/small-letter/o.astro +++ b/src/pages/small-letter/o.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -159,7 +159,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -205,7 +205,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); diff --git a/src/pages/small-letter/p.astro b/src/pages/small-letter/p.astro index b4f115d..0bba890 100644 --- a/src/pages/small-letter/p.astro +++ b/src/pages/small-letter/p.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/q.astro b/src/pages/small-letter/q.astro index 6036412..562d558 100644 --- a/src/pages/small-letter/q.astro +++ b/src/pages/small-letter/q.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/r.astro b/src/pages/small-letter/r.astro index 264cf9c..c39368a 100644 --- a/src/pages/small-letter/r.astro +++ b/src/pages/small-letter/r.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/s.astro b/src/pages/small-letter/s.astro index 7a9ab28..4215686 100644 --- a/src/pages/small-letter/s.astro +++ b/src/pages/small-letter/s.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -160,7 +160,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', diff --git a/src/pages/small-letter/t.astro b/src/pages/small-letter/t.astro index e4eff9a..08c8368 100644 --- a/src/pages/small-letter/t.astro +++ b/src/pages/small-letter/t.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterReight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/u.astro b/src/pages/small-letter/u.astro index 229b7d7..1b3f870 100644 --- a/src/pages/small-letter/u.astro +++ b/src/pages/small-letter/u.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/v.astro b/src/pages/small-letter/v.astro index fa4c603..1922583 100644 --- a/src/pages/small-letter/v.astro +++ b/src/pages/small-letter/v.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -162,7 +162,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -208,7 +208,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterVHeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -280,8 +280,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/w.astro b/src/pages/small-letter/w.astro index ba0ed8b..6f29218 100644 --- a/src/pages/small-letter/w.astro +++ b/src/pages/small-letter/w.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -162,7 +162,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -208,7 +208,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -345,8 +345,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/x.astro b/src/pages/small-letter/x.astro index 1d8a523..b6fbad7 100644 --- a/src/pages/small-letter/x.astro +++ b/src/pages/small-letter/x.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterXHeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/y.astro b/src/pages/small-letter/y.astro index 2116793..791177c 100644 --- a/src/pages/small-letter/y.astro +++ b/src/pages/small-letter/y.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -163,7 +163,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -209,7 +209,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterYHeight, 'layer1').setScale(letterScale); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); @@ -281,8 +281,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/small-letter/z.astro b/src/pages/small-letter/z.astro index bfd8269..ccc3666 100644 --- a/src/pages/small-letter/z.astro +++ b/src/pages/small-letter/z.astro @@ -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', fill: '#05b3a4', backgroundColor: '#7c4c23', @@ -165,7 +165,7 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.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', fill: '#05b3a4', 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); 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 audioOneAudio = this.sound.add('audioOne'); audioOneAudio.play(); diff --git a/src/pages/tracing/temp.astro b/src/pages/tracing/temp.astro index b0d7b4b..9f8e6d3 100644 --- a/src/pages/tracing/temp.astro +++ b/src/pages/tracing/temp.astro @@ -65,7 +65,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1').setInteractive({ draggable: true }); 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 slantLeftAudio = this.sound.add('slantLeft'); slantLeftAudio.play(); diff --git a/src/pages/tracing/temp2.astro b/src/pages/tracing/temp2.astro index 45821ba..98dbd54 100644 --- a/src/pages/tracing/temp2.astro +++ b/src/pages/tracing/temp2.astro @@ -81,7 +81,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1'); 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 slantLeftAudio = this.sound.add('slantLeft'); slantLeftAudio.play(); diff --git a/src/pages/tracing/temp4.astro b/src/pages/tracing/temp4.astro index 641b404..b32ac89 100644 --- a/src/pages/tracing/temp4.astro +++ b/src/pages/tracing/temp4.astro @@ -72,7 +72,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1'); 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 slantLeftAudio = this.sound.add('slantLeft'); slantLeftAudio.play(); diff --git a/src/pages/tracing/test.astro b/src/pages/tracing/test.astro index e12bb9a..4cac65c 100644 --- a/src/pages/tracing/test.astro +++ b/src/pages/tracing/test.astro @@ -94,7 +94,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1'); 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 slantLeftAudio = this.sound.add('slantLeft'); slantLeftAudio.play(); @@ -167,8 +167,7 @@ import Layout from "../../layouts/Layout.astro"; this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); - console.log("Start Position", pointer.x, pointer.y) - }); + }); this.input.on('pointerup', function () { isDrawing = false; diff --git a/src/pages/tracing/tracing-importeat.astro b/src/pages/tracing/tracing-importeat.astro index 0e2c7ed..36c512b 100644 --- a/src/pages/tracing/tracing-importeat.astro +++ b/src/pages/tracing/tracing-importeat.astro @@ -93,7 +93,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1'); 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 slantLeftAudio = this.sound.add('slantLeft'); slantLeftAudio.play(); diff --git a/src/pages/tracing/tracing3.astro b/src/pages/tracing/tracing3.astro index 0e2c7ed..36c512b 100644 --- a/src/pages/tracing/tracing3.astro +++ b/src/pages/tracing/tracing3.astro @@ -93,7 +93,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1'); 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 slantLeftAudio = this.sound.add('slantLeft'); slantLeftAudio.play();