diff --git a/public/assets/svg/button-icon.svg b/public/assets/svg/button-icon.svg index bb03853..10eb6c0 100644 --- a/public/assets/svg/button-icon.svg +++ b/public/assets/svg/button-icon.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index 9b66ad4..91e24d5 100644 --- a/src/pages/drawing/index.astro +++ b/src/pages/drawing/index.astro @@ -47,8 +47,8 @@ import Layout from '../../layouts/Layout.astro'; .catch(error => { console.error('Error fetching initial data:', error); }); - const displayW = window.innerWidth; - const displayH = window.innerHeight; + const customWidth = window.innerWidth; + const customHeight = window.innerHeight; let graphics; let isDrawing = false; let selectedColor = '#f00f0f'; // Default color @@ -79,13 +79,13 @@ import Layout from '../../layouts/Layout.astro'; }); const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; if(!isMobile){ - this.add.text(displayW / 10, 20, "Drawing", textStyle); - this.add.image(displayW / 2 * 1.6 - 0.5, 50, 'topLogo'); + this.add.text(customWidth / 10, 20, "Drawing", textStyle); + this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); } else { - this.add.text(displayW / 30, 0, "Drawing", textStyle); - this.add.image(displayW / 2 * 1.6 - 0.5, 25, 'topLogo'); + this.add.text(customWidth / 30, 0, "Drawing", textStyle); + this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo'); } - const outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline'); + const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline'); if(isMobile){ outlineImage.setDepth(1).setScale(0.5); } else{ @@ -95,7 +95,7 @@ import Layout from '../../layouts/Layout.astro'; graphics = this.add.graphics(); const colorContainer = document.createElement('div'); colorContainer.style.position = 'absolute'; - colorContainer.style.top = '10%'; + colorContainer.style.top = '13%'; colorContainer.style.left = '10px'; colorContainer.style.display = 'flex'; colorContainer.style.marginBottom = '15px'; @@ -165,8 +165,8 @@ import Layout from '../../layouts/Layout.astro'; button.style.width = `${buttonSize}px`; button.style.height = `${buttonSize}px`; } else { - button.style.width = `40px`; - button.style.height = `40px`; + button.style.width = `45px`; + button.style.height = `45px`; } button.style.boxShadow = '5px 10px 30px #7c4c2390'; @@ -211,12 +211,15 @@ import Layout from '../../layouts/Layout.astro'; const buttonsContainer = document.createElement('div'); buttonsContainer.style.position = 'absolute'; buttonsContainer.style.display = 'flex'; + buttonsContainer.style.flexDirection = 'row'; buttonsContainer.style.top = '0%'; + buttonsContainer.style.marginTop = '30px'; if(!isMobile){ // buttonsContainer.style.position = 'fixed'; buttonsContainer.style.top = '25%'; buttonsContainer.style.flexDirection = 'column'; buttonsContainer.style.marginLeft = '60px'; + buttonsContainer.style.marginTop = '0%'; } buttonsContainer.style.left = '20px'; // buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge @@ -229,7 +232,7 @@ import Layout from '../../layouts/Layout.astro'; clearButton.style.width = 'fit-content'; clearButton.style.marginRight = '10px'; if(isMobile){ - clearButton.style.padding = '1px 4px'; + clearButton.style.padding = '2px 8px'; buttonsContainer.style.top = '17%'; } else { clearButton.style.padding = '5px 10px'; @@ -252,7 +255,7 @@ import Layout from '../../layouts/Layout.astro'; // eraserButton.style.marginTop = '0px'; eraserButton.style.marginBottom = '0px'; if(isMobile){ - eraserButton.style.padding = '1px 1px'; + eraserButton.style.padding = '4px 4px'; } else { eraserButton.style.padding = '5px 5px'; eraserButton.style.marginTop = '15px'; @@ -318,7 +321,7 @@ import Layout from '../../layouts/Layout.astro'; isDrawing = false; }); customCursor = this.add.graphics(); - + customCursor.setDepth(2) // Disable the default cursor this.input.setDefaultCursor('none'); const borderThickness = 0; @@ -326,29 +329,40 @@ import Layout from '../../layouts/Layout.astro'; const borderGraphics = this.add.graphics(); borderGraphics.lineStyle(borderThickness, borderColor); borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height); - function continueDrawing(x, y) { - // Check if the pointer coordinates are within the drawing zone - if ( - x >= drawingZone.x && - x <= drawingZone.x + drawingZone.width && - y >= drawingZone.y && - y <= drawingZone.y + drawingZone.height - ) { - // The pointer is within the drawing zone, so continue drawing - graphics.lineTo(x, y); - graphics.strokePath(); - } - }; - // Add a "Save Snapshot" button - snapshotButton = this.add.image(window.innerWidth / 20, window.innerHeight / 2.3, 'buttonIcons'); - // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10); - snapshotButton.setInteractive(); - snapshotButton.on('pointerdown', () => { - captureSnapshot(this); - }); + function continueDrawing(x, y) { + // Check if the pointer coordinates are within the drawing zone + if ( + x >= drawingZone.x && + x <= drawingZone.x + drawingZone.width && + y >= drawingZone.y && + y <= drawingZone.y + drawingZone.height + ) { + // The pointer is within the drawing zone, so continue drawing + graphics.lineTo(x, y); + graphics.strokePath(); + } + }; + // Add a "Save Snapshot" button + if(isMobile){ + snapWidth = 50; + snapHeight = 70; + } else { + snapWidth = 200; + snapHeight = 70; + } + snapshotButton = this.add.image(window.innerWidth - snapWidth, window.innerHeight - snapHeight, 'buttonIcons'); + // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10); + snapshotButton.setInteractive(); + snapshotButton.on('pointerdown', () => { + captureSnapshot(this); + }); } function captureSnapshot(drawingZone) { + snapshotButton.setVisible(false); + customCursor.setVisible(false); drawingZone.renderer.snapshot((image) => { + snapshotButton.setVisible(true); + customCursor.setVisible(true); image.style.width = '160px'; image.style.height = '120px'; image.style.paddingLeft = '2px'; @@ -434,8 +448,8 @@ import Layout from '../../layouts/Layout.astro'; // }; // const drawingZone = new Phaser.Game(config); -// const displayW = window.innerWidth; -// const displayH = window.innerHeight; +// const customWidth = window.innerWidth; +// const customHeight = window.innerHeight; // let graphics; // let outlineImage; @@ -448,7 +462,7 @@ import Layout from '../../layouts/Layout.astro'; // } // function create() { -// outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline'); +// outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline'); // graphics = this.add.graphics(); @@ -553,8 +567,8 @@ import Layout from '../../layouts/Layout.astro'; // }; // const game = new Phaser.Game(config); - // const displayW = window.innerWidth; - // const displayH = window.innerHeight; + // const customWidth = window.innerWidth; + // const customHeight = window.innerHeight; // let graphics; // let outlineImage; @@ -567,7 +581,7 @@ import Layout from '../../layouts/Layout.astro'; // } // function create() { - // outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline'); + // outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline'); // graphics = this.add.graphics(); diff --git a/src/pages/guided-tracing/e.astro b/src/pages/guided-tracing/e.astro index c701b05..d711ed9 100644 --- a/src/pages/guided-tracing/e.astro +++ b/src/pages/guided-tracing/e.astro @@ -36,7 +36,7 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer, thirdLayer; + let firstLayer, secondLayer, thirdLayer, fourthLayer; let graphics; let isDrawing = false; @@ -81,8 +81,9 @@ import Layout from "../../layouts/Layout.astro"; this.load.svg('layer1', '/assets/capital-letter/e_l1.svg'); this.load.svg('layer2', '/assets/capital-letter/e_l2.svg'); this.load.svg('layer3', '/assets/capital-letter/e_l3.svg'); - this.load.audio('audioOne', '/assets/audio/slant-left.mp3'); - this.load.audio('audioTwo', '/assets/audio/slant-right.mp3'); + this.load.svg('layer4', '/assets/capital-letter/e_l4.svg'); + this.load.audio('audioOne', '/assets/audio/tall-down.mp3'); + this.load.audio('audioTwo', '/assets/audio/slide.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'); @@ -234,7 +235,7 @@ import Layout from "../../layouts/Layout.astro"; 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. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'}); + const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioTwoAudio = this.sound.add('audioTwo'); secondTextLayer.setVisible(false); secondLayer.setDepth(1); @@ -245,7 +246,7 @@ import Layout from "../../layouts/Layout.astro"; 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('audioThree'); + const audioThreeAudio = this.sound.add('audioTwo'); thirdTextLayer.setVisible(false); thirdLayer.setDepth(1.1); // thirdLayer.setScale(1.15); @@ -253,12 +254,22 @@ 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); + textX = isMobile ? customWidth / 3 : customWidth * 0.75; + const fourthTextLayer = this.add.text(textX, textY, '4. Slide', { font: '700 40px quicksand', fill: '#05b3a4'}); + const audioFourthAudio = this.sound.add('audioTwo'); + fourthTextLayer.setVisible(false); + fourthLayer.setDepth(1.1); + // fourthLayer.setScale(1.15); + fourthLayer.setAlpha(0.5); + fourthLayer.setInteractive({ draggable: true }); + fourthLayer.setVisible(false); + // 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 }; - - // ... + let fourthDragStartPoint = { x: 0, y: 0 }; // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { @@ -270,7 +281,6 @@ 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); audioTwoAudio.play(); @@ -278,6 +288,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(1); secondLayer.setAlpha(0.5); thirdLayer.setAlpha(0.5); + fourthLayer.setAlpha(0.5); } else { firstLayer.setAlpha(0.5); } @@ -301,6 +312,7 @@ import Layout from "../../layouts/Layout.astro"; thirdLayer.setVisible(true); secondLayer.setAlpha(1); thirdLayer.setAlpha(0.5); + fourthLayer.setAlpha(0.5); } else { secondLayer.setAlpha(0.5); } @@ -318,11 +330,31 @@ import Layout from "../../layouts/Layout.astro"; if (distance >= 100) { thirdLayer.setAlpha(1); thirdTextLayer.setVisible(false); + fourthTextLayer.setVisible(true); + fourthLayer.setVisible(true); + fourthLayer.setAlpha(0.5); + audioFourthAudio.play(); } else { thirdLayer.setAlpha(0.5); } }); + fourthLayer.on('dragstart', (pointer) => { + fourthDragStartPoint.x = pointer.x; + fourthDragStartPoint.y = pointer.y; + }); + + fourthLayer.on('drag', (pointer) => { + const distance = Phaser.Math.Distance.Between(fourthDragStartPoint.x, fourthDragStartPoint.y, pointer.x, pointer.y); + + if (distance >= 100) { + fourthLayer.setAlpha(1); + fourthTextLayer.setVisible(false); + } else { + fourthLayer.setAlpha(0.5); + } + }); + graphics = this.add.graphics(); graphics.setMask(mask);