diff --git a/public/assets/svg/draw-cursor.svg b/public/assets/svg/draw-cursor.svg new file mode 100644 index 0000000..95633a0 --- /dev/null +++ b/public/assets/svg/draw-cursor.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/svg/eraser-cursor.svg b/public/assets/svg/eraser-cursor.svg new file mode 100644 index 0000000..32beb78 --- /dev/null +++ b/public/assets/svg/eraser-cursor.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/galleryFunction.js b/public/galleryFunction.js new file mode 100644 index 0000000..b6dffc8 --- /dev/null +++ b/public/galleryFunction.js @@ -0,0 +1,45 @@ +const jsonData = [ + { + "src": "/assets/back.jpeg", + "title": "Image Title 1", + "description": "Description for image 1 goes here." + }, + { + "src": "/assets/background.jpg", + "title": "Image Title 2", + "description": "Description for image 2 goes here." + }, + { + "src": "/assets/backgroundImage.png", + "title": "Image Title 3", + "description": "Description for image 3 goes here." + }, + { + "src": "/assets/beanieImage.png", + "title": "Image Title 4", + "description": "Description for image 4 goes here." + } +]; +let currentSlide = 0; +function updateSlide(jsonData){ + const slide = jsonData[currentSlide]; + document.getElementById('slideImage').src = slide.src; + document.getElementById('imageTitle').textContent = slide.title; + document.getElementById('imageDescription').textContent = slide.description; +} +document.getElementById('nextButton').addEventListener('click', () => { + currentSlide = (currentSlide + 1) % jsonData.length; + console.log(currentSlide) + updateSlide(); +}) +document.getElementById('prevButton').addEventListener('click', () => { + currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length; + updateSlide(); +}) +updateSlide(); +let parentMainContainer = document.getElementById('parentMainContainer'); +let gallerySliderId = document.getElementById('gallerySliderId'); +function closeGallery(){ + gallerySliderId.classList.add('hidden'); + +} \ No newline at end of file diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro index a4c279a..07f858e 100644 --- a/src/pages/drawing/drawing_phonics.astro +++ b/src/pages/drawing/drawing_phonics.astro @@ -89,6 +89,7 @@ import Layout from '../../layouts/Layout.astro'; let shortUniqueID; let scoreTotal = 0; let maxScore; + let erase; if(isMobile){ topLogoWidth = 4.5; muteIconWidth = 1.8; @@ -244,7 +245,7 @@ import Layout from '../../layouts/Layout.astro'; retryButton.setInteractive().on('pointerdown', () => { - window.location.reload(); + graphics.clear(); }); submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false); // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", { @@ -862,12 +863,49 @@ import Layout from '../../layouts/Layout.astro'; slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`; }; const cursorSize = brushSize * cursorSizeMultiplier; - customCursor.clear(); // Clear the previous frame - customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color) + customCursor.clear(); + customCursor.lineStyle(1.5, 0x000000); customCursor.strokeCircle(0, 0, cursorSize); - // Position the cursor at the current mouse pointer coordinates + customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1); + customCursor.fillCircle(0, 0, cursorSize); customCursor.x = this.input.x; customCursor.y = this.input.y; + customCursor.moveTo(0, -cursorSize+3); + customCursor.lineTo(0, cursorSize-3); + + customCursor.moveTo(-cursorSize + 3, 0); + customCursor.lineTo(cursorSize-3, 0); + customCursor.strokePath(); + + if (erase === true) { + customCursor.clear(); + customCursor.lineStyle(3, 0x000000); + customCursor.strokeCircle(0, 0, cursorSize); + customCursor.x = this.input.x; + customCursor.y = this.input.y; + + customCursor.moveTo(0, -cursorSize+3); + customCursor.lineTo(0, cursorSize-3); + + customCursor.moveTo(-cursorSize + 3, 0); + customCursor.lineTo(cursorSize-3, 0); + customCursor.strokePath(); + } else if (erase === false) { + customCursor.clear(); + customCursor.lineStyle(3, 0x000000); + customCursor.strokeCircle(0, 0, cursorSize); + customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1); + customCursor.fillCircle(0, 0, cursorSize); + customCursor.x = this.input.x; + customCursor.y = this.input.y; + + customCursor.moveTo(0, -cursorSize+3); + customCursor.lineTo(0, cursorSize-3); + + customCursor.moveTo(-cursorSize + 3, 0); + customCursor.lineTo(cursorSize-3, 0); + customCursor.strokePath(); + } } // function update() { diff --git a/src/pages/drawing/drawing_writo.astro b/src/pages/drawing/drawing_writo.astro index b867681..6fb9637 100644 --- a/src/pages/drawing/drawing_writo.astro +++ b/src/pages/drawing/drawing_writo.astro @@ -89,6 +89,7 @@ import Layout from '../../layouts/Layout.astro'; let shortUniqueID; let scoreTotal = 0; let maxScore; + let erase; if(isMobile){ topLogoWidth = 4.5; muteIconWidth = 1.8; @@ -247,7 +248,7 @@ import Layout from '../../layouts/Layout.astro'; retryButton.setInteractive().on('pointerdown', () => { - window.location.reload(); + graphics.clear(); }); submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false); @@ -874,46 +875,50 @@ import Layout from '../../layouts/Layout.astro'; slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`; }; const cursorSize = brushSize * cursorSizeMultiplier; - customCursor.clear(); // Clear the previous frame - customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color) + customCursor.clear(); + customCursor.lineStyle(1.5, 0x000000); customCursor.strokeCircle(0, 0, cursorSize); - // Position the cursor at the current mouse pointer coordinates + customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1); + customCursor.fillCircle(0, 0, cursorSize); customCursor.x = this.input.x; customCursor.y = this.input.y; - } - - // function update() { - // const slider = document.querySelector('input[type="range"]'); + customCursor.moveTo(0, -cursorSize+3); + customCursor.lineTo(0, cursorSize-3); - // if (slider && !isDrawing) { - // const sliderValue = parseInt(slider.value); - // const max = parseInt(slider.max); - // const width = slider.offsetWidth; - // const offsetX = (sliderValue - 2) / (max - 2) * width; - // slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`; - // } + customCursor.moveTo(-cursorSize + 3, 0); + customCursor.lineTo(cursorSize-3, 0); + customCursor.strokePath(); + + if (erase === true) { + customCursor.clear(); + customCursor.lineStyle(3, 0x000000); + customCursor.strokeCircle(0, 0, cursorSize); + customCursor.x = this.input.x; + customCursor.y = this.input.y; - // const cursorSize = brushSize * cursorSizeMultiplier; - // const cursorScale = 1; // Adjust this value to increase/decrease the cursor size - - // // Assuming 'this' refers to your Phaser.Scene instance - // if (!this.customCursor) { - // // Create the custom cursor sprite - // this.customCursor = this.add.sprite(0, 0, 'cursorImage'); // Replace 'yourCursorImage' with the key of your loaded PNG image - // this.customCursor.setOrigin(0.3, 0.8); - // } - - // // Set the tint or fill color dynamically based on the selectedColor - // const color = Phaser.Display.Color.HexStringToColor(selectedColor).color; - // this.customCursor.setTint(color); - - // // Resize the cursor - // this.customCursor.setScale( cursorScale); - - // // Position the cursor at the current mouse pointer coordinates - // this.customCursor.x = this.input.x; - // this.customCursor.y = this.input.y; - // } + customCursor.moveTo(0, -cursorSize+3); + customCursor.lineTo(0, cursorSize-3); + + customCursor.moveTo(-cursorSize + 3, 0); + customCursor.lineTo(cursorSize-3, 0); + customCursor.strokePath(); + } else if (erase === false) { + customCursor.clear(); + customCursor.lineStyle(3, 0x000000); + customCursor.strokeCircle(0, 0, cursorSize); + customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1); + customCursor.fillCircle(0, 0, cursorSize); + customCursor.x = this.input.x; + customCursor.y = this.input.y; + + customCursor.moveTo(0, -cursorSize+3); + customCursor.lineTo(0, cursorSize-3); + + customCursor.moveTo(-cursorSize + 3, 0); + customCursor.lineTo(cursorSize-3, 0); + customCursor.strokePath(); + } + }