kar
/
phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

s1

pull/28/head
Suvodip 2024-11-08 16:27:37 +05:30
parent 399186819c
commit d64bc840bc
9 changed files with 338 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/svg/draw-cursor.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.832" cy="12.6328" r="12" fill="#F7A915"/>
<path d="M12.834 3.76953L12.834 21.9905" stroke="black" stroke-opacity="0.5" stroke-linecap="round" stroke-dasharray="3 3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 285 B

6
public/assets/svg/eraser-cursor.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.9375" width="23" height="23" fill="white"/>
<rect x="0.5" y="0.9375" width="23" height="23" stroke="black"/>
<path d="M12.1367 3.52344L12.1367 22.1211" stroke="black" stroke-opacity="0.5" stroke-linecap="round" stroke-dasharray="3 3"/>
<path d="M2.83594 12.8242H21.4336" stroke="black" stroke-opacity="0.5" stroke-linecap="round" stroke-dasharray="3 3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 477 B

45
public/galleryFunction.js Normal file
View File

@ -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');
}

46
src/pages/drawing/drawing_phonics.astro
View File

@ -89,6 +89,7 @@ import Layout from '../../layouts/Layout.astro';
let shortUniqueID; let shortUniqueID;
let scoreTotal = 0; let scoreTotal = 0;
let maxScore; let maxScore;
let erase;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.8; muteIconWidth = 1.8;
@ -244,7 +245,7 @@ import Layout from '../../layouts/Layout.astro';
retryButton.setInteractive().on('pointerdown', () => { 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); 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", { // 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%)`; slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
}; };
const cursorSize = brushSize * cursorSizeMultiplier; const cursorSize = brushSize * cursorSizeMultiplier;
customCursor.clear(); // Clear the previous frame customCursor.clear();
customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color) customCursor.lineStyle(1.5, 0x000000);
customCursor.strokeCircle(0, 0, cursorSize); 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.x = this.input.x;
customCursor.y = this.input.y; 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() { // function update() {

77
src/pages/drawing/drawing_writo.astro
View File

@ -89,6 +89,7 @@ import Layout from '../../layouts/Layout.astro';
let shortUniqueID; let shortUniqueID;
let scoreTotal = 0; let scoreTotal = 0;
let maxScore; let maxScore;
let erase;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.8; muteIconWidth = 1.8;
@ -247,7 +248,7 @@ import Layout from '../../layouts/Layout.astro';
retryButton.setInteractive().on('pointerdown', () => { 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); 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%)`; slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
}; };
const cursorSize = brushSize * cursorSizeMultiplier; const cursorSize = brushSize * cursorSizeMultiplier;
customCursor.clear(); // Clear the previous frame customCursor.clear();
customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color) customCursor.lineStyle(1.5, 0x000000);
customCursor.strokeCircle(0, 0, cursorSize); 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.x = this.input.x;
customCursor.y = this.input.y; customCursor.y = this.input.y;
} customCursor.moveTo(0, -cursorSize+3);
customCursor.lineTo(0, cursorSize-3);
// function update() {
// const slider = document.querySelector('input[type="range"]');
// if (slider && !isDrawing) { customCursor.moveTo(-cursorSize + 3, 0);
// const sliderValue = parseInt(slider.value); customCursor.lineTo(cursorSize-3, 0);
// const max = parseInt(slider.max); customCursor.strokePath();
// const width = slider.offsetWidth;
// const offsetX = (sliderValue - 2) / (max - 2) * width; if (erase === true) {
// slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`; 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; customCursor.moveTo(0, -cursorSize+3);
// const cursorScale = 1; // Adjust this value to increase/decrease the cursor size customCursor.lineTo(0, cursorSize-3);
// // Assuming 'this' refers to your Phaser.Scene instance customCursor.moveTo(-cursorSize + 3, 0);
// if (!this.customCursor) { customCursor.lineTo(cursorSize-3, 0);
// // Create the custom cursor sprite customCursor.strokePath();
// this.customCursor = this.add.sprite(0, 0, 'cursorImage'); // Replace 'yourCursorImage' with the key of your loaded PNG image } else if (erase === false) {
// this.customCursor.setOrigin(0.3, 0.8); customCursor.clear();
// } customCursor.lineStyle(3, 0x000000);
customCursor.strokeCircle(0, 0, cursorSize);
// // Set the tint or fill color dynamically based on the selectedColor customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
// const color = Phaser.Display.Color.HexStringToColor(selectedColor).color; customCursor.fillCircle(0, 0, cursorSize);
// this.customCursor.setTint(color); customCursor.x = this.input.x;
customCursor.y = this.input.y;
// // Resize the cursor
// this.customCursor.setScale( cursorScale); customCursor.moveTo(0, -cursorSize+3);
customCursor.lineTo(0, cursorSize-3);
// // Position the cursor at the current mouse pointer coordinates
// this.customCursor.x = this.input.x; customCursor.moveTo(-cursorSize + 3, 0);
// this.customCursor.y = this.input.y; customCursor.lineTo(cursorSize-3, 0);
// } customCursor.strokePath();
}
}
</script> </script>
<style> <style>
/* Animation styles */ /* Animation styles */

127
src/pages/drawing/index.astro
View File

@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
</div> </div>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
<button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button> <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
<button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button> <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
</div> </div>
</div> </div>
</div> </div>
@ -142,6 +142,7 @@ import Layout from '../../layouts/Layout.astro';
let muteIcon; let muteIcon;
let retryButton; let retryButton;
let maxScore; let maxScore;
let erase;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.65; muteIconWidth = 1.65;
@ -708,7 +709,9 @@ import Layout from '../../layouts/Layout.astro';
eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390'; eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
eraserButton.addEventListener('click', () => { eraserButton.addEventListener('click', () => {
isErasing = !isErasing; isErasing = !isErasing;
erase = false;
if (isErasing) { if (isErasing) {
erase = true;
eraserButton.style.border = '3px solid #0348A8'; eraserButton.style.border = '3px solid #0348A8';
eraserButton.style.backgroundColor = '#0348A820'; eraserButton.style.backgroundColor = '#0348A820';
} else { } else {
@ -845,85 +848,6 @@ import Layout from '../../layouts/Layout.astro';
}); });
} }
// const url = window.location.href;
// const gameName = url.split('/');
// const gameType = gameName[3].split('?id=');
// function submitUserData(drawingZone) {
// let imageCode;
// // console.log(drawingZone);
// drawingZone.renderer.snapshot((image) => {
// submitButton.setVisible(true);
// snapshotButton.setVisible(true);
// customCursor.setVisible(true);
// image.style.width = '160px';
// image.style.height = '120px';
// image.style.paddingLeft = '2px';
// document.body.appendChild(image);
// // Download the snapshot as an image
// const link = document.createElement('a');
// link.href = image.src;
// link.download = 'my_drawing.png';
// link.click();
// document.body.removeChild(image);
// imageCode = image.src;
// let userData = {
// 'userID': 'drawing@beanstalkedu.com',
// 'gameType': gameType[0],
// 'gameID': gameType[1],
// 'screenShot': imageCode
// // 'starts': formattedDateTime,
// // 'game_start' : gameStartTime,
// };
// console.log(userData);
// fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, {
// method: 'POST',
// headers: {
// 'Content-Type' : 'application/json'
// },
// body: JSON.stringify(userData)
// })
// .then(response => {
// if(response.ok){
// console.log('Data Saved', response)
// } else{
// // console.log('Something Wrong', response)
// }
// })
// .catch(error => {
// console.error('An error occured', error)
// });
// // Clear the drawing
// // graphics.clear();
// });
// };
// function captureSnapshot(drawingZone) {
// submitButton.setVisible(false);
// // snapNotice.setVisible(true);
// snapshotButton.setVisible(false);
// customCursor.setVisible(false);
// drawingZone.renderer.snapshot((image) => {
// submitButton.setVisible(true);
// snapshotButton.setVisible(true);
// customCursor.setVisible(true);
// image.style.width = '160px';
// image.style.height = '120px';
// image.style.paddingLeft = '2px';
// document.body.appendChild(image);
// // Download the snapshot as an image
// const link = document.createElement('a');
// link.href = image.src;
// link.download = 'my_drawing.png';
// link.click();
// document.body.removeChild(image);
// // Clear the drawing
// // graphics.clear();
// });
// }
function startDrawing(x, y) { function startDrawing(x, y) {
if (!isErasing) { if (!isErasing) {
graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color); graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
@ -961,12 +885,49 @@ import Layout from '../../layouts/Layout.astro';
slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`; slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
}; };
const cursorSize = brushSize * cursorSizeMultiplier; const cursorSize = brushSize * cursorSizeMultiplier;
customCursor.clear(); // Clear the previous frame customCursor.clear();
customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color) customCursor.lineStyle(1.5, 0x000000);
customCursor.strokeCircle(0, 0, cursorSize); 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.x = this.input.x;
customCursor.y = this.input.y; 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() { // function update() {

46
src/pages/drawing/v2.astro
View File

@ -97,6 +97,7 @@ import Layout from '../../layouts/Layout.astro';
let noticeWidth; let noticeWidth;
let noticeHeight; let noticeHeight;
let maxScore; let maxScore;
let erase;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.8; muteIconWidth = 1.8;
@ -297,7 +298,7 @@ import Layout from '../../layouts/Layout.astro';
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon"); submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
retryButton.setInteractive().on('pointerdown', ()=>{ 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); 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", { // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
@ -772,12 +773,49 @@ import Layout from '../../layouts/Layout.astro';
slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`; slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
}; };
const cursorSize = brushSize * cursorSizeMultiplier; const cursorSize = brushSize * cursorSizeMultiplier;
customCursor.clear(); // Clear the previous frame customCursor.clear();
customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color) customCursor.lineStyle(1.5, 0x000000);
customCursor.strokeCircle(0, 0, cursorSize); 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.x = this.input.x;
customCursor.y = this.input.y; 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();
}
} }
</script> </script>
<style> <style>

46
src/pages/drawing/v3.astro
View File

@ -89,6 +89,7 @@ import Layout from '../../layouts/Layout.astro';
let tickIconWidth; let tickIconWidth;
let cancelIconWidth; let cancelIconWidth;
let maxScore; let maxScore;
let erase;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
@ -279,7 +280,7 @@ import Layout from '../../layouts/Layout.astro';
// galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons"); // galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
retryButton.setInteractive().on('pointerdown', () => { 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); 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", { // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
@ -821,12 +822,49 @@ import Layout from '../../layouts/Layout.astro';
slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`; slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
}; };
const cursorSize = brushSize * cursorSizeMultiplier; const cursorSize = brushSize * cursorSizeMultiplier;
customCursor.clear(); // Clear the previous frame customCursor.clear();
customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color) customCursor.lineStyle(1.5, 0x000000);
customCursor.strokeCircle(0, 0, cursorSize); 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.x = this.input.x;
customCursor.y = this.input.y; 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() { // function update() {

73
src/pages/guided-tracing/A.astro
View File

@ -14,11 +14,75 @@ import Layout from "../../layouts/Layout.astro";
<img src="/assets/svg/tracing-done.svg" alt="Clip Art" class="clip-art"> <img src="/assets/svg/tracing-done.svg" alt="Clip Art" class="clip-art">
</div> </div>
</div> </div>
<div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
<div class="w-full max-w-6xl bg-white rounded-lg">
<div class="flex justify-between p-3">
<p class="text-[19px] font-[700]">Attempt 2</p>
<button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
</div>
<div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
<img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
<button id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
<button id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
<div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
<h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
<p class="text-sm" id="imageDescription">Description goes here.</p>
</div>
</div>
</div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveTracingGameData.js" is:inline></script> <script src="/saveTracingGameData.js" is:inline></script>
<script is:inline> <script is:inline>
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(){
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');
}
function showAnimation() { function showAnimation() {
const clipArt = document.querySelector('.clip-art'); const clipArt = document.querySelector('.clip-art');
clipArt.classList.add('show'); clipArt.classList.add('show');
@ -60,6 +124,7 @@ import Layout from "../../layouts/Layout.astro";
let gameStartTime = "start time here"; let gameStartTime = "start time here";
let demoButton; let demoButton;
let maxScore; let maxScore;
let galleryButton;
if(isMobile){ if(isMobile){
cloudeSize = 200; cloudeSize = 200;
@ -149,6 +214,7 @@ import Layout from "../../layouts/Layout.astro";
this.load.svg('hintImage', '/assets/svg/hint.svg'); this.load.svg('hintImage', '/assets/svg/hint.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg'); this.load.svg('handPointer', '/assets/svg/hand.svg');
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
this.load.image("tickIcon", '/assets/svg/tick2.svg'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
this.load.image("muteIcon", '/assets/svg/mute.svg'); this.load.image("muteIcon", '/assets/svg/mute.svg');
this.load.image("cancelIcon", '/assets/svg/cancel.svg'); this.load.image("cancelIcon", '/assets/svg/cancel.svg');
@ -165,6 +231,7 @@ import Layout from "../../layouts/Layout.astro";
demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons"); demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
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); 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);
cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon"); cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
const borderBottom = this.add.graphics(); const borderBottom = this.add.graphics();
const x = 0; const y = 54; const x = 0; const y = 54;
const lineWidth = window.innerWidth; const lineWidth = window.innerWidth;
@ -181,7 +248,11 @@ import Layout from "../../layouts/Layout.astro";
submitUserData(this); submitUserData(this);
showAnimation(); showAnimation();
// parentMainContainer.classList.remove('hidden'); // parentMainContainer.classList.remove('hidden');
}) });
galleryButton.setInteractive().on('pointerdown', () => {
// parentMainContainer.classList.remove('hidden');
gallerySliderId.classList.remove('hidden');
});
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale); 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, 'letterA').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, 'animatedA').setDepth(2); canvasStand