diff --git a/public/assets/animated-letter/a.gif b/public/assets/animated-letter/a.gif deleted file mode 100755 index 96f58bd..0000000 Binary files a/public/assets/animated-letter/a.gif and /dev/null differ diff --git a/public/assets/animated-letter/a.mp4 b/public/assets/animated-letter/a.mp4 new file mode 100644 index 0000000..900fd49 Binary files /dev/null and b/public/assets/animated-letter/a.mp4 differ diff --git a/public/assets/bgMobile.png b/public/assets/bgMobile.png new file mode 100644 index 0000000..8d9df14 Binary files /dev/null and b/public/assets/bgMobile.png differ diff --git a/public/assets/canvas3.png b/public/assets/canvas3.png new file mode 100644 index 0000000..7f03203 Binary files /dev/null and b/public/assets/canvas3.png differ diff --git a/public/assets/canvas4.png b/public/assets/canvas4.png new file mode 100644 index 0000000..86c4967 Binary files /dev/null and b/public/assets/canvas4.png differ diff --git a/public/assets/parrot.png b/public/assets/parrot.png new file mode 100644 index 0000000..b5ed24a Binary files /dev/null and b/public/assets/parrot.png differ diff --git a/public/assets/svg/hint.svg b/public/assets/svg/hint.svg new file mode 100644 index 0000000..ccb319e --- /dev/null +++ b/public/assets/svg/hint.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/guided-tracing/a.astro b/src/pages/guided-tracing/a.astro index 0b12bfa..36f29bc 100644 --- a/src/pages/guided-tracing/a.astro +++ b/src/pages/guided-tracing/a.astro @@ -43,30 +43,40 @@ import Layout from "../../layouts/Layout.astro"; if(isMobile){ cloudeSize = 200; cloudHeight = 340; - canvasScale = 0.23 - canvasHeight = 154; + canvasScale = 0.14 + canvasHeight = - 28; letterHeight = 70; backgroundScale = 0.8; sunScale = 0.1; sunScalePlus = 0.15; sunWidth = 70; sunHeight = 70; + parrotScale = 0.35; + parrotScalePlus = 0.38; + parrotWidth = 135; + parrotHeight = 170; + animatedAHeight = 32; } else{ cloudeSize = 500; cloudHeight = 250; - canvasScale = 0.3; - canvasHeight = 180; + canvasScale = 0.195; + canvasHeight = - 60; letterHeight = 50; backgroundScale = 1; sunScale = 0.2; sunScalePlus = 0.25; sunWidth = 200; sunHeight = 100; + parrotScale = 0.4; + parrotScalePlus = 0.44; + parrotWidth = 200; + parrotHeight = 245; + animatedAHeight = 20; } // let hideButton; function preload() { - this.load.image('animatedA', '/assets/animated-letter/a.gif'); + this.load.video('animatedA', '/assets/animated-letter/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'); @@ -76,58 +86,38 @@ import Layout from "../../layouts/Layout.astro"; this.load.audio('slide', '/assets/audio/slide.mp3'); this.load.image('topLogo', '/assets/top_logo.png'); this.load.svg('succesImage', '/assets/svg/tick.svg'); + this.load.svg('hintImage', '/assets/svg/hint.svg'); this.load.svg('handPointer', '/assets/svg/hand.svg'); // this.load.image('backgroundImage', '/assets/backgroundImage2.png'); this.load.image('backgroundImage', '/assets/bg6.png'); this.load.image('cloud', '/assets/cloud.png'); - this.load.image('canvas', '/assets/canvas2.png'); + this.load.image('canvas', '/assets/canvas4.png'); + this.load.image('parrot', '/assets/parrot.png'); this.load.image('sun', '/assets/sun.png'); + this.load.image('bgMobile', '/assets/bgMobile.png'); } - +// bgMobile.png function create() { - const gifImage = new Image(); - -// Set the source (URL) of the GIF -gifImage.src = '/assets/animated-letter/a.gif'; - -// Append the image element to the document -document.body.appendChild(gifImage); - -// Function to play the GIF -function playGif() { - gifImage.style.display = 'block'; // Show the image -} - -// Function to pause the GIF -function pauseGif() { - gifImage.style.display = 'none'; // Hide the image -} - -// Function to stop and reset the GIF -function stopGif() { - gifImage.src = gifImage.src; // Reset the image source - gifImage.style.display = 'none'; // Hide the image -} - -// Example usage: -playGif(); 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 sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9); const scrollSpeed = 0.5; this.time.addEvent({ - loop: true, - callback: () => { - cloud.tilePositionX += scrollSpeed; - }, - delay: 16, // Adjust the delay for the desired scrolling speed - }); + loop: true, + callback: () => { + cloud.tilePositionX += scrollSpeed; + }, + 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 parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).setDepth(1.9); + + const scaleFactor = sunScalePlus; // Scale factor (2 means double the size) const duration = 3000; // Duration of the animation in milliseconds @@ -140,6 +130,17 @@ playGif(); ease: 'Linear', 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; + this.tweens.add({ + targets: parrot, + scaleX: parrotscaleFactor + 0.004, + scaleY: parrotscaleFactor, + duration: parrotduration, + 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, 'letterA').setAlpha(0.2).setDepth(0.5); @@ -149,7 +150,20 @@ playGif(); firstScreen.setVisible(false); - let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Let`s Do", { font: '24px quicksand', fill: '#05b3a4' }); + let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { + font: '900 24px quicksand', + fill: '#05b3a4', + backgroundColor: '#7c4c23', + padding: { x: 20, y: 10 }, + borderRadius: '15px', // Border radius + shadow: { + offsetX: 2, // X offset for the shadow + offsetY: 2, // Y offset for the shadow + color: '#000', // Shadow color + blur: 5, // Shadow blur + fill: true // Apply shadow to fill (background color) + } + }); hideButton.setInteractive().on('pointerdown', () => { isDemoButtonClicked = false; firstScreen.setVisible(false); @@ -159,21 +173,33 @@ playGif(); handPointerLeft.setVisible(false); handPointerRight.setVisible(false); handPointeSlide.setVisible(false); + animatedLetter.setVisible(false); }); - hideButton.setVisible(false); - - let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help!", { font: '900 24px quicksand', fill: '#05b3a4', backgroundColor: '#7c4c23'}).setPadding(20, 10); - // demoButton.style.borderRadius = "25px"; - // demoButton.style.set('borderRadius', '15px'); + hideButton.setVisible(false); + let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { + font: '900 24px quicksand', + fill: '#05b3a4', + backgroundColor: '#7c4c23', + padding: { x: 20, y: 10 }, + borderRadius: '15px', // Border radius + shadow: { + offsetX: 2, // X offset for the shadow + offsetY: 2, // Y offset for the shadow + color: '#000', // Shadow color + blur: 5, // Shadow blur + fill: true // Apply shadow to fill (background color) + } + }); demoButton.setInteractive().on('pointerdown', () => { graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button hideButton.setVisible(true); // Show the "Hide" button - handPointerLeft.setVisible(true); - handPointerRight.setVisible(true); - handPointeSlide.setVisible(true); + handPointerLeft.setVisible(false); + handPointerRight.setVisible(false); + handPointeSlide.setVisible(false); + animatedLetter.setVisible(true); }); @@ -181,13 +207,26 @@ playGif(); const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73); + + // Play the video + animatedLetter.play(); + animatedLetter.setVisible(false); + + // You can set additional properties for the video, such as loop and mute: + animatedLetter.setLoop(true); // Loop the video + animatedLetter.setMute(false); // Unmute the video + animatedLetter.on('complete', function () { + // Video playback is complete + // You can add your code here for what to do when the video finishes. + }); let textX, textY; firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1'); textX = isMobile ? customWidth / 4 : customWidth * 0.75; textY = isMobile ? customHeight / 5 : customHeight / 2; - const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'}); + const firstTextLayer = this.add.text(textX, textY, '1. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'}); const slantLeftAudio = this.sound.add('slantLeft'); slantLeftAudio.play(); firstLayer.setDepth(1); @@ -196,7 +235,7 @@ playGif(); secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2'); textX = isMobile ? customWidth / 4 : customWidth * 0.75; - const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'}); + const secondTextLayer = this.add.text(textX, textY, '2. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'}); const slantRightAudio = this.sound.add('slantRight'); secondTextLayer.setVisible(false); secondLayer.setDepth(1); @@ -215,44 +254,76 @@ playGif(); thirdLayer.setInteractive({ draggable: true }); thirdLayer.setVisible(false); - firstLayer.on('drag', (pointer) => { - if (pointer.isDown) { - firstTextLayer.setVisible(false); - secondTextLayer.setVisible(true); - slantRightAudio.play(); - secondLayer.setVisible(true); - firstLayer.setAlpha(1); - secondLayer.setAlpha(0.5); - thirdLayer.setAlpha(0.5); - } else { - firstLayer.setAlpha(0.5); - } - }); + // Add these variables to keep track of start points + let firstDragStartPoint = { x: 0, y: 0 }; + let secondDragStartPoint = { x: 0, y: 0 }; + let thirdDragStartPoint = { x: 0, y: 0 }; - secondLayer.on('drag', (pointer) => { - if (pointer.isDown) { - secondTextLayer.setVisible(false); - thirdTextLayer.setVisible(true); - slideAudio.play(); - thirdLayer.setVisible(true); - secondLayer.setAlpha(1); - thirdLayer.setAlpha(0.5); - } else { - secondLayer.setAlpha(0.5); - } - }); + // ... - thirdLayer.on('drag', (pointer) => { - if (pointer.isDown) { - thirdLayer.setAlpha(1); - thirdTextLayer.setVisible(false); - // const succesImage = this.add.image(customWidth / 2, customHeight / 2, 'succesImage').setDepth(2); - // succesImage.setAlpha(0.2); - // this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2); + // Add this code for firstLayer + firstLayer.on('dragstart', (pointer) => { + firstDragStartPoint.x = pointer.x; + firstDragStartPoint.y = pointer.y; + }); + + firstLayer.on('drag', (pointer) => { + const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y); + + if (distance >= 100) { + firstTextLayer.setVisible(false); + secondTextLayer.setVisible(true); + slantRightAudio.play(); + secondLayer.setVisible(true); + firstLayer.setAlpha(1); + secondLayer.setAlpha(0.5); + thirdLayer.setAlpha(0.5); } else { - thirdLayer.setAlpha(0.5); + 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; + secondDragStartPoint.y = pointer.y; + }); + + secondLayer.on('drag', (pointer) => { + const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y); + + if (distance >= 100) { + secondTextLayer.setVisible(false); + thirdTextLayer.setVisible(true); + slideAudio.play(); + thirdLayer.setVisible(true); + secondLayer.setAlpha(1); + thirdLayer.setAlpha(0.5); + } else { + secondLayer.setAlpha(0.5); + } + }); + + // Add this code for thirdLayer + thirdLayer.on('dragstart', (pointer) => { + thirdDragStartPoint.x = pointer.x; + thirdDragStartPoint.y = pointer.y; + }); + + thirdLayer.on('drag', (pointer) => { + const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y); + + if (distance >= 100) { + thirdLayer.setAlpha(1); + thirdTextLayer.setVisible(false); + } else { + thirdLayer.setAlpha(0.5); + } + }); + + graphics = this.add.graphics(); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) @@ -272,11 +343,12 @@ playGif(); graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); + const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer'); - const startHeightLeft = customHeight /2 - 140; // Starting y position - const endHeightLeft = 567; // Ending y position - const startWidthLeft = customWidth / 2 + 20; - const endWidthLeft = customWidth / 2 - 65; + const startHeightLeft = customHeight /2 - 100; // Starting y position + const endHeightLeft = customHeight / 2 + 170; // Ending y position + const startWidthLeft = customWidth / 2 + 22; + const endWidthLeft = customWidth / 2 - 70; // handPointer.setOrigin(0.5, 0.5); handPointerLeft.setScale(0.5).setDepth(2); // Adjust scale as needed // Define the bounce animation @@ -296,10 +368,10 @@ playGif(); repeat: -1 // -1 means it will repeat indefinitely }); const handPointerRight = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer'); - const startHeightRight = customHeight /2 - 140; // Starting y position - const endHeightRight = 567; // Ending y position + const startHeightRight = customHeight /2 - 100; // Starting y position + const endHeightRight = customHeight / 2 + 170; // Ending y position const startWidthRight = customWidth / 2 + 20; - const endWidthRight = customWidth / 2 + 100; + const endWidthRight = customWidth / 2 + 107; // handPointer.setOrigin(0.5, 0.5); handPointerRight.setScale(0.5).setDepth(2).setAngle(360); // Adjust scale as needed // Define the bounce animation @@ -319,8 +391,8 @@ playGif(); repeat: -1 // -1 means it will repeat indefinitely }); const handPointeSlide = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer'); - const startHeightSlide = customHeight / 2 + 17; // Starting y position - const endHeightSlide = customHeight / 2 + 17; // Ending y position + const startHeightSlide = customHeight / 2 + 70; // Starting y position + const endHeightSlide = customHeight / 2 + 70; // Ending y position const startWidthSlide = customWidth / 2 - 60; const endWidthSlide = customWidth / 2 + 55; diff --git a/src/pages/guided-tracing/tt.astro b/src/pages/guided-tracing/tt.astro new file mode 100644 index 0000000..64a8305 --- /dev/null +++ b/src/pages/guided-tracing/tt.astro @@ -0,0 +1,380 @@ +--- +import Layout from "../../layouts/Layout.astro"; +--- + +
+
+
+ +
+ + \ No newline at end of file