diff --git a/public/assets/animated-letter/a.mp4 b/public/assets/animated-letter/a.mp4 deleted file mode 100755 index 76b59f0..0000000 Binary files a/public/assets/animated-letter/a.mp4 and /dev/null differ diff --git a/public/assets/animated-letter/capital_a.mp4 b/public/assets/animated-letter/capital_a.mp4 new file mode 100755 index 0000000..e0e5f92 Binary files /dev/null and b/public/assets/animated-letter/capital_a.mp4 differ diff --git a/public/assets/animated-letter/capital_b.mp4 b/public/assets/animated-letter/capital_b.mp4 new file mode 100755 index 0000000..7fdaf6b Binary files /dev/null and b/public/assets/animated-letter/capital_b.mp4 differ diff --git a/public/assets/animated-letter/capital_c.mp4 b/public/assets/animated-letter/capital_c.mp4 new file mode 100755 index 0000000..160b69e Binary files /dev/null and b/public/assets/animated-letter/capital_c.mp4 differ diff --git a/public/assets/animated-letter/capital_d.mp4 b/public/assets/animated-letter/capital_d.mp4 new file mode 100755 index 0000000..0a93322 Binary files /dev/null and b/public/assets/animated-letter/capital_d.mp4 differ diff --git a/public/assets/animated-letter/capital_e.mp4 b/public/assets/animated-letter/capital_e.mp4 new file mode 100755 index 0000000..d3d3a47 Binary files /dev/null and b/public/assets/animated-letter/capital_e.mp4 differ diff --git a/public/assets/animated-letter/capital_f.mp4 b/public/assets/animated-letter/capital_f.mp4 new file mode 100755 index 0000000..0289060 Binary files /dev/null and b/public/assets/animated-letter/capital_f.mp4 differ diff --git a/public/assets/animated-letter/capital_g.mp4 b/public/assets/animated-letter/capital_g.mp4 new file mode 100755 index 0000000..f8c1088 Binary files /dev/null and b/public/assets/animated-letter/capital_g.mp4 differ diff --git a/public/assets/animated-letter/capital_h.mp4 b/public/assets/animated-letter/capital_h.mp4 new file mode 100755 index 0000000..9609e92 Binary files /dev/null and b/public/assets/animated-letter/capital_h.mp4 differ diff --git a/public/assets/animated-letter/capital_i.mp4 b/public/assets/animated-letter/capital_i.mp4 new file mode 100755 index 0000000..51a770d Binary files /dev/null and b/public/assets/animated-letter/capital_i.mp4 differ diff --git a/public/assets/animated-letter/capital_j.mp4 b/public/assets/animated-letter/capital_j.mp4 new file mode 100755 index 0000000..d017198 Binary files /dev/null and b/public/assets/animated-letter/capital_j.mp4 differ diff --git a/public/assets/animated-letter/capital_k.mp4 b/public/assets/animated-letter/capital_k.mp4 new file mode 100755 index 0000000..ab22ab8 Binary files /dev/null and b/public/assets/animated-letter/capital_k.mp4 differ diff --git a/public/assets/animated-letter/capital_l.mp4 b/public/assets/animated-letter/capital_l.mp4 new file mode 100755 index 0000000..853dafe Binary files /dev/null and b/public/assets/animated-letter/capital_l.mp4 differ diff --git a/public/assets/animated-letter/capital_m.mp4 b/public/assets/animated-letter/capital_m.mp4 new file mode 100755 index 0000000..57ef60c Binary files /dev/null and b/public/assets/animated-letter/capital_m.mp4 differ diff --git a/public/assets/animated-letter/capital_n.mp4 b/public/assets/animated-letter/capital_n.mp4 new file mode 100755 index 0000000..58975bf Binary files /dev/null and b/public/assets/animated-letter/capital_n.mp4 differ diff --git a/public/assets/animated-letter/capital_o.mp4 b/public/assets/animated-letter/capital_o.mp4 new file mode 100755 index 0000000..cad567a Binary files /dev/null and b/public/assets/animated-letter/capital_o.mp4 differ diff --git a/public/assets/animated-letter/capital_p.mp4 b/public/assets/animated-letter/capital_p.mp4 new file mode 100755 index 0000000..c7d1f19 Binary files /dev/null and b/public/assets/animated-letter/capital_p.mp4 differ diff --git a/public/assets/animated-letter/capital_q.mp4 b/public/assets/animated-letter/capital_q.mp4 new file mode 100755 index 0000000..74f8711 Binary files /dev/null and b/public/assets/animated-letter/capital_q.mp4 differ diff --git a/public/assets/animated-letter/capital_r.mp4 b/public/assets/animated-letter/capital_r.mp4 new file mode 100755 index 0000000..59e00ce Binary files /dev/null and b/public/assets/animated-letter/capital_r.mp4 differ diff --git a/public/assets/animated-letter/capital_s.mp4 b/public/assets/animated-letter/capital_s.mp4 new file mode 100755 index 0000000..6a089d6 Binary files /dev/null and b/public/assets/animated-letter/capital_s.mp4 differ diff --git a/public/assets/animated-letter/capital_t.mp4 b/public/assets/animated-letter/capital_t.mp4 new file mode 100755 index 0000000..9b5684d Binary files /dev/null and b/public/assets/animated-letter/capital_t.mp4 differ diff --git a/public/assets/animated-letter/capital_u.mp4 b/public/assets/animated-letter/capital_u.mp4 new file mode 100755 index 0000000..defae5d Binary files /dev/null and b/public/assets/animated-letter/capital_u.mp4 differ diff --git a/public/assets/animated-letter/capital_v.mp4 b/public/assets/animated-letter/capital_v.mp4 new file mode 100755 index 0000000..42ddbf1 Binary files /dev/null and b/public/assets/animated-letter/capital_v.mp4 differ diff --git a/public/assets/animated-letter/capital_w.mp4 b/public/assets/animated-letter/capital_w.mp4 new file mode 100755 index 0000000..760e56c Binary files /dev/null and b/public/assets/animated-letter/capital_w.mp4 differ diff --git a/public/assets/animated-letter/capital_x.mp4 b/public/assets/animated-letter/capital_x.mp4 new file mode 100755 index 0000000..494921c Binary files /dev/null and b/public/assets/animated-letter/capital_x.mp4 differ diff --git a/public/assets/animated-letter/capital_y.mp4 b/public/assets/animated-letter/capital_y.mp4 new file mode 100755 index 0000000..9898539 Binary files /dev/null and b/public/assets/animated-letter/capital_y.mp4 differ diff --git a/public/assets/animated-letter/capital_z.mp4 b/public/assets/animated-letter/capital_z.mp4 new file mode 100755 index 0000000..bdb303b Binary files /dev/null and b/public/assets/animated-letter/capital_z.mp4 differ diff --git a/public/assets/pencile.png b/public/assets/pencile.png new file mode 100755 index 0000000..a508a9d Binary files /dev/null and b/public/assets/pencile.png differ diff --git a/src/pages/guided-tracing/A.astro b/src/pages/guided-tracing/A.astro index 73ab905..8687478 100644 --- a/src/pages/guided-tracing/A.astro +++ b/src/pages/guided-tracing/A.astro @@ -39,6 +39,10 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; +// let x = 100; + +// // Use x +// console.log(x); if(isMobile){ cloudeSize = 200; @@ -52,10 +56,10 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; - parrotScale = 0.35; - parrotScalePlus = 0.365; - parrotWidth = 135; - parrotHeight = 170; + beanieScale = 0.35; + beanieScalePlus = 0.365; + beanieWidth = 135; + beanieHeight = 170; animatedAHeight = 35; animatedAScale = 0.65; } else{ @@ -70,15 +74,15 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; - parrotScale = 0.4; - parrotScalePlus = 0.45; - parrotWidth = 200; - parrotHeight = 255; + beanieScale = 0.4; + beanieScalePlus = 0.45; + beanieWidth = 200; + beanieHeight = 255; animatedAHeight = 20; animatedAScale = 0.73; } function preload() { - this.load.video('animatedA', '/assets/animated-letter/a.mp4'); + this.load.video('animatedA', '/assets/animated-letter/capital_a.mp4'); this.load.svg('letterA', '/assets/capital-letter/a.svg'); this.load.svg('layer1', '/assets/capital-letter/a_l1.svg'); this.load.svg('layer2', '/assets/capital-letter/a_l2.svg'); @@ -93,18 +97,46 @@ 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('parrot', '/assets/parrot.png'); - this.load.image('parrot', '/assets/beanieImage.png'); + // this.load.image('beanie', '/assets/beanie.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'); + // this.load.image('customCursor', '/assets/pencile.png'); + // this.load.image('eye', '/assets/pencile.png'); + this.load.image('customCursor', '/assets/pencile.png'); + + } function create() { + this.input.setDefaultCursor('none'); + + // Set the initial position of the custom cursor + const initialCursorX = customWidth / 2 - 8; + const initialCursorY = customHeight / 2 - 100; + + // Create a sprite for the custom cursor at the initial position + customCursor = this.add.sprite(initialCursorX, initialCursorY, 'customCursor'); + // customCursor.setOrigin(0.5, 0.5); + customCursor.setOrigin(0.0, 0.98).setDepth(2.1).setScale(0.18); + + // Set the custom cursor to follow the pointer + this.input.on('pointermove', (pointer) => { + customCursor.x = pointer.x; + customCursor.y = pointer.y; + }); + + // Hide cursor on click + this.input.on('pointerdown', () => { + customCursor.setVisible(true); + }); + + this.input.on('pointerup', () => { + customCursor.setVisible(true); + }); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : A", { 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); cloud.setDepth(-1.8); const scrollSpeed = 0.5; @@ -117,7 +149,7 @@ import Layout from "../../layouts/Layout.astro"; }); const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9); - const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).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) @@ -133,13 +165,13 @@ import Layout from "../../layouts/Layout.astro"; yoyo: true, // Makes the animation play in reverse repeat: -1 // Repeat indefinitely }); - const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size) - const parrotduration = 2500; + const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size) + const beanieduration = 2500; this.tweens.add({ - targets: parrot, - scaleX: parrotscaleFactor + 0.004, - scaleY: parrotscaleFactor, - duration: parrotduration, + targets: beanie, + scaleX: beaniescaleFactor + 0.004, + scaleY: beaniescaleFactor, + duration: beanieduration, ease: 'Redial', yoyo: true, // Makes the animation play in reverse repeat: -1 // Repeat indefinitely @@ -328,7 +360,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) + // console.log("Start Position", pointer.x, pointer.y) }); this.input.on('pointerup', function () { @@ -344,6 +376,8 @@ import Layout from "../../layouts/Layout.astro"; } function update() { + this.input.x = 100; // X coordinate + this.input.y = 200; } diff --git a/src/pages/guided-tracing/B.astro b/src/pages/guided-tracing/B.astro index f4ef21b..2e33a59 100644 --- a/src/pages/guided-tracing/B.astro +++ b/src/pages/guided-tracing/B.astro @@ -52,11 +52,11 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; - parrotScale = 0.35; - parrotScalePlus = 0.38; - parrotWidth = 135; - parrotHeight = 170; - animatedAHeight = 32; + beanieScale = 0.35; + beanieScalePlus = 0.38; + beanieWidth = 135; + beanieHeight = 170; + animatedBHeight = 32; } else{ cloudeSize = 500; cloudHeight = 250; @@ -69,16 +69,16 @@ import Layout from "../../layouts/Layout.astro"; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; - parrotScale = 0.4; - parrotScalePlus = 0.44; - parrotWidth = 200; - parrotHeight = 245; - animatedAHeight = 20; + beanieScale = 0.4; + beanieScalePlus = 0.44; + beanieWidth = 200; + beanieHeight = 245; + animatedBHeight = 20; } // let hideButton; function preload() { - this.load.video('animatedA', '/assets/animated-letter/a.mp4'); + this.load.video('animatedB', '/assets/animated-letter/capital_b.mp4'); this.load.svg('letterB', '/assets/capital-letter/b.svg'); this.load.svg('layer1', '/assets/capital-letter/b_l1.svg'); this.load.svg('layer2', '/assets/capital-letter/b_l2.svg'); @@ -92,7 +92,8 @@ 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('parrot', '/assets/parrot.png'); + // this.load.image('beanie', '/assets/beanie.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'); @@ -115,7 +116,7 @@ import Layout from "../../layouts/Layout.astro"; }); const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9); - const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).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) @@ -131,13 +132,13 @@ import Layout from "../../layouts/Layout.astro"; yoyo: true, // Makes the animation play in reverse repeat: -1 // Repeat indefinitely }); - const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size) - const parrotduration = 2500; + const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size) + const beanieduration = 2500; this.tweens.add({ - targets: parrot, - scaleX: parrotscaleFactor + 0.004, - scaleY: parrotscaleFactor, - duration: parrotduration, + targets: beanie, + scaleX: beaniescaleFactor + 0.004, + scaleY: beaniescaleFactor, + duration: beanieduration, ease: 'Redial', yoyo: true, // Makes the animation play in reverse repeat: -1 // Repeat indefinitely @@ -145,7 +146,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 - 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); - // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand + // 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); const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); @@ -207,7 +208,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 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(0.73); // Play the video animatedLetter.play(); diff --git a/src/pages/guided-tracing/C.astro b/src/pages/guided-tracing/C.astro index 6a8547a..8a469fa 100644 --- a/src/pages/guided-tracing/C.astro +++ b/src/pages/guided-tracing/C.astro @@ -78,7 +78,7 @@ import Layout from "../../layouts/Layout.astro"; // let hideButton; function preload() { - this.load.video('animatedA', '/assets/animated-letter/a.mp4'); + this.load.video('animatedA', '/assets/animated-letter/capital_c.mp4'); this.load.svg('letterC', '/assets/capital-letter/c.svg'); this.load.svg('layer1', '/assets/capital-letter/c.svg'); this.load.audio('audioOne', '/assets/audio/hook-around.mp3');