diff --git a/public/assets/canvas4.png b/public/assets/canvas4.png index 86c4967..2a1c263 100644 Binary files a/public/assets/canvas4.png and b/public/assets/canvas4.png differ diff --git a/public/assets/stand2.png b/public/assets/stand2.png new file mode 100644 index 0000000..d009ddf Binary files /dev/null and b/public/assets/stand2.png differ diff --git a/src/pages/guided-tracing/a.astro b/src/pages/guided-tracing/a.astro index 36f29bc..7c7acc6 100644 --- a/src/pages/guided-tracing/a.astro +++ b/src/pages/guided-tracing/a.astro @@ -44,8 +44,9 @@ import Layout from "../../layouts/Layout.astro"; cloudeSize = 200; cloudHeight = 340; canvasScale = 0.14 - canvasHeight = - 28; + canvasHeight = 35; letterHeight = 70; + letterScale = 1; backgroundScale = 0.8; sunScale = 0.1; sunScalePlus = 0.15; @@ -60,8 +61,9 @@ import Layout from "../../layouts/Layout.astro"; cloudeSize = 500; cloudHeight = 250; canvasScale = 0.195; - canvasHeight = - 60; + canvasHeight = 20; letterHeight = 50; + letterScale = 1; backgroundScale = 1; sunScale = 0.2; sunScalePlus = 0.25; @@ -73,31 +75,28 @@ import Layout from "../../layouts/Layout.astro"; parrotHeight = 245; animatedAHeight = 20; } - // let hideButton; - function preload() { 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'); this.load.svg('layer3', '/assets/capital-letter/a_l3.svg'); - this.load.audio('slantLeft', '/assets/audio/slant-left.mp3'); - this.load.audio('slantRight', '/assets/audio/slant-right.mp3'); - this.load.audio('slide', '/assets/audio/slide.mp3'); + this.load.audio('audioOne', '/assets/audio/slant-left.mp3'); + this.load.audio('audioTwo', '/assets/audio/slant-right.mp3'); + this.load.audio('audioThree', '/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/canvas4.png'); this.load.image('parrot', '/assets/parrot.png'); this.load.image('sun', '/assets/sun.png'); this.load.image('bgMobile', '/assets/bgMobile.png'); + this.load.image('canvasStand', '/assets/stand2.png'); } -// bgMobile.png function create() { 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', }); @@ -143,12 +142,18 @@ 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, 'letterA').setAlpha(0.2).setDepth(0.5); - const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2); - // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); - this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); + 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", { font: '900 24px quicksand', @@ -170,9 +175,6 @@ import Layout from "../../layouts/Layout.astro"; hideButton.setVisible(false); // Hide the "Hide" button demoButton.setVisible(true); // Show the "Demo" button graphics.setVisible(true); - handPointerLeft.setVisible(false); - handPointerRight.setVisible(false); - handPointeSlide.setVisible(false); animatedLetter.setVisible(false); }); hideButton.setVisible(false); @@ -196,9 +198,6 @@ import Layout from "../../layouts/Layout.astro"; firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button hideButton.setVisible(true); // Show the "Hide" button - handPointerLeft.setVisible(false); - handPointerRight.setVisible(false); - handPointeSlide.setVisible(false); animatedLetter.setVisible(true); }); @@ -223,30 +222,30 @@ import Layout from "../../layouts/Layout.astro"; let textX, textY; - firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1'); + 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. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'}); - const slantLeftAudio = this.sound.add('slantLeft'); - slantLeftAudio.play(); + const audioOneAudio = this.sound.add('audioOne'); + audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); - secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2'); + 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 Right',{ font: '700 40px quicksand', fill: '#05b3a4'}); - const slantRightAudio = this.sound.add('slantRight'); + const audioTwoAudio = this.sound.add('audioTwo'); secondTextLayer.setVisible(false); secondLayer.setDepth(1); secondLayer.setAlpha(0.5); secondLayer.setInteractive({ draggable: true }); secondLayer.setVisible(false); - thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3'); + 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', { font: '700 40px quicksand', fill: '#05b3a4'}); - const slideAudio = this.sound.add('slide'); + const audioThreeAudio = this.sound.add('audioThree'); thirdTextLayer.setVisible(false); thirdLayer.setDepth(1.1); // thirdLayer.setScale(1.15); @@ -271,9 +270,10 @@ import Layout from "../../layouts/Layout.astro"; 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(); + audioTwoAudio.play(); secondLayer.setVisible(true); firstLayer.setAlpha(1); secondLayer.setAlpha(0.5); @@ -297,7 +297,7 @@ import Layout from "../../layouts/Layout.astro"; if (distance >= 100) { secondTextLayer.setVisible(false); thirdTextLayer.setVisible(true); - slideAudio.play(); + audioThreeAudio.play(); thirdLayer.setVisible(true); secondLayer.setAlpha(1); thirdLayer.setAlpha(0.5); @@ -325,8 +325,8 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); + graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) - this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); @@ -343,80 +343,6 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); - - const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer'); - 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 - this.tweens.add({ - targets: handPointerLeft, - x: { - getStart: () => startWidthLeft, - getEnd: () => endWidthLeft, - }, // End x position - y: { - getStart: () => startHeightLeft, - getEnd: () => endHeightLeft, - }, - duration: 3000, // Duration of each bounce - ease: 'Sine.easeInOut', - yoyo: false, - repeat: -1 // -1 means it will repeat indefinitely - }); - const handPointerRight = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer'); - 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 + 107; - // handPointer.setOrigin(0.5, 0.5); - handPointerRight.setScale(0.5).setDepth(2).setAngle(360); // Adjust scale as needed - // Define the bounce animation - this.tweens.add({ - targets: handPointerRight, - x: { - getStart: () => startWidthRight, - getEnd: () => endWidthRight, - }, // End x position - y: { - getStart: () => startHeightRight, - getEnd: () => endHeightRight, - }, - duration: 3000, // Duration of each bounce - ease: 'Sine.easeInOut', - yoyo: false, - repeat: -1 // -1 means it will repeat indefinitely - }); - const handPointeSlide = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer'); - 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; - // handPointer.setOrigin(0.5, 0.5); - handPointeSlide.setScale(0.5).setDepth(2).setAngle(45); // Adjust scale as needed - // Define the bounce animation - this.tweens.add({ - targets: handPointeSlide, - x: { - getStart: () => startWidthSlide, - getEnd: () => endWidthSlide, - }, // End x position - y: { - getStart: () => startHeightSlide, - getEnd: () => endHeightSlide, - }, - duration: 3000, // Duration of each bounce - ease: 'Sine.easeInOut', - yoyo: false, - repeat: -1 // -1 means it will repeat indefinitely - }); - handPointerLeft.setVisible(false); - handPointerRight.setVisible(false); - handPointeSlide.setVisible(false); // Start Position 626 317 diff --git a/src/pages/guided-tracing/b.astro b/src/pages/guided-tracing/b.astro index b4eed9e..f4ef21b 100644 --- a/src/pages/guided-tracing/b.astro +++ b/src/pages/guided-tracing/b.astro @@ -32,67 +32,221 @@ import Layout from "../../layouts/Layout.astro"; update: update } }; + // backgroundImage.png const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + + if(isMobile){ + cloudeSize = 200; + cloudHeight = 340; + canvasScale = 0.14 + canvasHeight = 35; + letterHeight = 58; + letterScale = 0.85; + 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.195; + canvasHeight = 20; + letterHeight = 50; + letterScale = 1; + 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.video('animatedA', '/assets/animated-letter/a.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'); this.load.svg('layer3', '/assets/capital-letter/b_l3.svg'); - this.load.audio('slantLeft', '/assets/audio/slant-left.mp3'); - this.load.audio('slantRight', '/assets/audio/slant-right.mp3'); - this.load.audio('slide', '/assets/audio/slide.mp3'); + this.load.audio('audioOne', '/assets/audio/tall-down.mp3'); + this.load.audio('audioTwo', '/assets/audio/slide-around.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/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('sun', '/assets/sun.png'); + this.load.image('bgMobile', '/assets/bgMobile.png'); + this.load.image('canvasStand', '/assets/stand2.png'); } function create() { 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.text(customWidth / 10, 20, "Letter : B", { 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; + this.time.addEvent({ + loop: true, + callback: () => { + cloud.tilePositionX += scrollSpeed; + }, + delay: 16, // Adjust the delay for the desired scrolling speed + }); - const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterB'); + 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 + + // Create a scaling tween + this.tweens.add({ + targets: sun, + scaleX: scaleFactor, + scaleY: scaleFactor, + duration: duration, + 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 - 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 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", { + 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); + hideButton.setVisible(false); // Hide the "Hide" button + demoButton.setVisible(true); // Show the "Demo" button + graphics.setVisible(true); + animatedLetter.setVisible(false); + }); + 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 + animatedLetter.setVisible(true); + }); const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; 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 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); + + // 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, 'layer1'); - textX = isMobile ? customWidth / 3 : customWidth * 0.75; + 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; - const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'}); - const slantLeftAudio = this.sound.add('slantLeft'); - slantLeftAudio.play(); + const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); + const audioOneAudio = this.sound.add('audioOne'); + audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); - secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2'); - textX = isMobile ? customWidth / 3 : customWidth * 0.75; - const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'}); - const slantRightAudio = this.sound.add('slantRight'); + 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 Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); + const audioTwoAudio = this.sound.add('audioTwo'); secondTextLayer.setVisible(false); secondLayer.setDepth(1); secondLayer.setAlpha(0.5); secondLayer.setInteractive({ draggable: true }); secondLayer.setVisible(false); - thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3'); + thirdLayer = this.add.image(customWidth / 2 - 30, 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 slideAudio = this.sound.add('slide'); + const thirdTextLayer = this.add.text(textX, textY, '3. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'}); + const audioTHreeAudio = this.sound.add('audioTwo'); thirdTextLayer.setVisible(false); thirdLayer.setDepth(1.1); // thirdLayer.setScale(1.15); @@ -100,47 +254,80 @@ import Layout from "../../layouts/Layout.astro"; 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); + audioTwoAudio.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); + audioTHreeAudio.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, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha) - + graphics.setMask(mask); + graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); @@ -157,58 +344,13 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); - const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer'); - const startHeightLeft = customHeight /2 - 140; - const endHeightLeft = customHeight / 2 + 140; - const startWidthLeft = customWidth / 2 + 10; - const endWidthLeft = customWidth / 2 + 10; - handPointerLeft.setScale(0.5).setDepth(2); // Adjust scale as needed - this.tweens.add({ - targets: handPointerLeft, - x: { - getStart: () => startWidthLeft, - getEnd: () => endWidthLeft, - }, // End x position - y: { - getStart: () => startHeightLeft, - getEnd: () => endHeightLeft, - }, - duration: 3000, // Duration of each bounce - ease: 'Sine.easeInOut', - yoyo: false, - repeat: -1 // -1 means it will repeat indefinitely - }); - - handPointerLeft.setVisible(false); - // Start Position 626 317 - let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Let`s Do", { font: '24px quicksand', fill: '#05b3a4' }); - hideButton.setInteractive().on('pointerdown', () => { - isDemoButtonClicked = false; - firstScreen.setVisible(false); - hideButton.setVisible(false); // Hide the "Hide" button - demoButton.setVisible(true); // Show the "Demo" button - graphics.setVisible(true); - handPointerLeft.setVisible(false); - }); - hideButton.setVisible(false); - - let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help", { font: '24px quicksand', fill: '#05b3a4' }); - 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); - }); } - // function showLayersWithFadeIn() { - - // } - function update() { - // Update any game logic if needed - } +function update() { + +} + \ No newline at end of file diff --git a/src/pages/guided-tracing/c.astro b/src/pages/guided-tracing/c.astro index 42312b1..6a8547a 100644 --- a/src/pages/guided-tracing/c.astro +++ b/src/pages/guided-tracing/c.astro @@ -32,82 +32,234 @@ import Layout from "../../layouts/Layout.astro"; update: update } }; - + // backgroundImage.png const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; - + + if(isMobile){ + cloudeSize = 200; + cloudHeight = 340; + canvasScale = 0.14 + canvasHeight = 35; + letterHeight = 90; + letterScale = 1; + 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.195; + canvasHeight = 20; + letterHeight = 50; + letterScale = 1; + 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.svg('letterC', '/assets/capital-letter/c_l1.svg'); - this.load.svg('layer1', '/assets/capital-letter/c_l1.svg'); - - this.load.audio('hookAround', '/assets/audio/hook-around.mp3'); + this.load.video('animatedA', '/assets/animated-letter/a.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'); 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/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('sun', '/assets/sun.png'); + this.load.image('bgMobile', '/assets/bgMobile.png'); + this.load.image('canvasStand', '/assets/stand2.png'); } - function create() { this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', }); - const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterC'); - const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - 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); + // 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; + this.time.addEvent({ + loop: true, + callback: () => { + cloud.tilePositionX += scrollSpeed; + }, + delay: 16, // Adjust the delay for the desired scrolling speed + }); - this.time.delayedCall(2000, () => { - this.tweens.add({ - targets: firstScreen, - alpha: 0, - scaleX: 0.5, - scaleY: 0.5, - duration: 1000, - onComplete: () => { - firstScreen.setVisible(false); - firstScreen.setScale(1); - showLayersWithFadeIn.call(this); + 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 + + // Create a scaling tween + this.tweens.add({ + targets: sun, + scaleX: scaleFactor, + scaleY: scaleFactor, + duration: duration, + 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 + 90, customHeight / 2 + letterHeight, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale); + const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterC').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", { + 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) } }); - }, [], this); - } - function showLayersWithFadeIn() { - this.tweens.add({ - targets: [firstLayer, secondLayer, thirdLayer], - alpha: 1, - duration: 1000, // Duration of the tween in milliseconds - delay: 500, // Delay before the fade-in starts - ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.) + hideButton.setInteractive().on('pointerdown', () => { + isDemoButtonClicked = false; + firstScreen.setVisible(false); + hideButton.setVisible(false); // Hide the "Hide" button + demoButton.setVisible(true); // Show the "Demo" button + graphics.setVisible(true); + animatedLetter.setVisible(false); }); - - let textX, textY; + 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) + } + }); - firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1'); - textX = isMobile ? customWidth / 3 : customWidth * 0.75; + demoButton.setInteractive().on('pointerdown', () => { + graphics.setVisible(false); + firstScreen.setVisible(true); + demoButton.setVisible(false); // Hide the "Demo" button + hideButton.setVisible(true); // Show the "Hide" button + animatedLetter.setVisible(true); + }); + + + const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; + 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); + + // 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 + 90, 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', { font: '700 40px quicksand', fill: '#05b3a4'}); - const slantLeftAudio = this.sound.add('hookAround'); - slantLeftAudio.play(); + const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); + const audioOneAudio = this.sound.add('audioOne'); + audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); - firstLayer.on('drag', (pointer) => { - if (pointer.isDown) { - firstTextLayer.setVisible(false); - firstLayer.setAlpha(1); - } else { - firstLayer.setAlpha(0.5); - } - }); - graphics = this.add.graphics(); - graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha) + // Add these variables to keep track of start points + let firstDragStartPoint = { x: 0, y: 0 }; + + // ... + + // Add this code for firstLayer + firstLayer.on('dragstart', (pointer) => { + firstDragStartPoint.x = pointer.x; + firstDragStartPoint.y = pointer.y; + }); + + firstLayer.on('drag', (pointer) => { + const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y); + + if (distance >= 50) { + + firstTextLayer.setVisible(false); + firstLayer.setAlpha(1); + } else { + firstLayer.setAlpha(0.5); + } + }); + + + + graphics = this.add.graphics(); + graphics.setMask(mask); + graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); @@ -123,9 +275,12 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); + + } - function update() { - // Update any game logic if needed - } +function update() { + +} + \ No newline at end of file diff --git a/src/pages/guided-tracing/d.astro b/src/pages/guided-tracing/d.astro index e7168d8..95e6290 100644 --- a/src/pages/guided-tracing/d.astro +++ b/src/pages/guided-tracing/d.astro @@ -32,76 +32,210 @@ import Layout from "../../layouts/Layout.astro"; update: update } }; - + // backgroundImage.png const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer, thirdLayer; + let firstLayer, secondLayer; let graphics; let isDrawing = false; - + + if(isMobile){ + cloudeSize = 200; + cloudHeight = 340; + canvasScale = 0.14 + canvasHeight = 35; + letterHeight = 58; + letterScale = 0.85; + 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.195; + canvasHeight = 20; + letterHeight = 50; + letterScale = 1; + 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.svg('letterD', '/assets/capital-letter/d.svg'); + this.load.video('animatedA', '/assets/animated-letter/a.mp4'); + this.load.svg('letterB', '/assets/capital-letter/d.svg'); this.load.svg('layer1', '/assets/capital-letter/d_l1.svg'); this.load.svg('layer2', '/assets/capital-letter/d_l2.svg'); - - this.load.audio('tallDown', '/assets/audio/tall-down.mp3'); - this.load.audio('slideAround', '/assets/audio/slide-around.mp3'); + this.load.audio('audioOne', '/assets/audio/tall-down.mp3'); + this.load.audio('audioTwo', '/assets/audio/slide-around.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/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('sun', '/assets/sun.png'); + this.load.image('bgMobile', '/assets/bgMobile.png'); + this.load.image('canvasStand', '/assets/stand2.png'); } - 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', }); - const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterD'); + // 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; + this.time.addEvent({ + 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 + + // Create a scaling tween + this.tweens.add({ + targets: sun, + scaleX: scaleFactor, + scaleY: scaleFactor, + duration: duration, + 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 - 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 + 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", { + 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); + hideButton.setVisible(false); // Hide the "Hide" button + demoButton.setVisible(true); // Show the "Demo" button + graphics.setVisible(true); + animatedLetter.setVisible(false); + }); + 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 + animatedLetter.setVisible(true); + }); + + const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; 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 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73); - this.time.delayedCall(2000, () => { - this.tweens.add({ - targets: firstScreen, - alpha: 0, - scaleX: 0.5, - scaleY: 0.5, - duration: 1000, - onComplete: () => { - firstScreen.setVisible(false); - firstScreen.setScale(1); - showLayersWithFadeIn.call(this); - } - }); - }, [], this); - } - function showLayersWithFadeIn() { - this.tweens.add({ - targets: [firstLayer, secondLayer, thirdLayer], - alpha: 1, - duration: 1000, // Duration of the tween in milliseconds - delay: 500, // Delay before the fade-in starts - ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.) + // 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, 'layer1'); - textX = isMobile ? customWidth / 3 : customWidth * 0.75; + let textX, textY; + + 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; - const firstTextLayer = this.add.text(textX, textY, '1. Tall Down', { font: '700 40px quicksand', fill: '#05b3a4'}); - const slantLeftAudio = this.sound.add('tallDown'); - slantLeftAudio.play(); + const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); + const audioOneAudio = this.sound.add('audioOne'); + audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); - secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2'); - textX = isMobile ? customWidth / 3 : customWidth * 0.75; - const secondTextLayer = this.add.text(textX, textY, '2. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'}); - const slantRightAudio = this.sound.add('slideAround'); + 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 Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); + const audioTwoAudio = this.sound.add('audioTwo'); secondTextLayer.setVisible(false); secondLayer.setDepth(1); secondLayer.setAlpha(0.5); @@ -109,35 +243,61 @@ import Layout from "../../layouts/Layout.astro"; secondLayer.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); - } 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 }; - secondLayer.on('drag', (pointer) => { - if (pointer.isDown) { - secondTextLayer.setVisible(false); - secondLayer.setAlpha(1); + // ... + + // 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); + audioTwoAudio.play(); + secondLayer.setVisible(true); + firstLayer.setAlpha(1); + secondLayer.setAlpha(0.5); } else { - secondLayer.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); + secondLayer.setAlpha(1); + } else { + secondLayer.setAlpha(0.5); + } + }); graphics = this.add.graphics(); - graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha) - + graphics.setMask(mask); + graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) 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 () { @@ -152,7 +312,8 @@ import Layout from "../../layouts/Layout.astro"; }); } - function update() { - // Update any game logic if needed - } +function update() { + +} + \ No newline at end of file diff --git a/src/pages/guided-tracing/e.astro b/src/pages/guided-tracing/e.astro new file mode 100644 index 0000000..c701b05 --- /dev/null +++ b/src/pages/guided-tracing/e.astro @@ -0,0 +1,355 @@ +--- +import Layout from "../../layouts/Layout.astro"; +--- + +
+
+
+ +
+ + \ No newline at end of file