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

s1

Browse Source
This commit is contained in:
Suvodip
2024-11-08 16:27:37 +05:30
parent 399186819c
commit d64bc840bc
9 changed files with 338 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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() {

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

@@ -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();
}
}
</script>
<style>
/* Animation styles */

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

@@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
</div>
<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="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>
@@ -142,6 +142,7 @@ import Layout from '../../layouts/Layout.astro';
let muteIcon;
let retryButton;
let maxScore;
let erase;
if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.65;
@@ -708,7 +709,9 @@ import Layout from '../../layouts/Layout.astro';
eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
eraserButton.addEventListener('click', () => {
isErasing = !isErasing;
erase = false;
if (isErasing) {
erase = true;
eraserButton.style.border = '3px solid #0348A8';
eraserButton.style.backgroundColor = '#0348A820';
} 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) {
if (!isErasing) {
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%)`;
};
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() {

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

@@ -97,6 +97,7 @@ import Layout from '../../layouts/Layout.astro';
let noticeWidth;
let noticeHeight;
let maxScore;
let erase;
if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
@@ -297,7 +298,7 @@ import Layout from '../../layouts/Layout.astro';
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
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", {
@@ -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%)`;
};
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();
}
}
</script>
<style>

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

@@ -89,6 +89,7 @@ import Layout from '../../layouts/Layout.astro';
let tickIconWidth;
let cancelIconWidth;
let maxScore;
let erase;
if(isMobile){
topLogoWidth = 4.5;
@@ -279,7 +280,7 @@ import Layout from '../../layouts/Layout.astro';
// galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
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", {
@@ -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%)`;
};
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() {